Nuxt.jsで開発環境の構築とプロジェクトの実行！

こんばんは！

今日はNuxt.jsの開発環境の構築とプロジェクトの実行までをやっていきたいと思います。

次回の記事ではNuxt.jsでUIの作成をやっていきます！

まず、いろいろな作業に移る前に、いろいろな説明が必要なので、

今回はNuxt.jsとUIについて先に説明していきます！

プログラミングをまだ勉強されたばかりの方は

Nuxt.jsってなんだ！？UIってなんだ！？

って感じになると思います！笑

僕もこんな感じになってました笑

ということで、今日はNuxt.jsとUIについて書いていきたいと思います！

クローンアプリの作業も少しだけ入ります！

今日はこんな感じでやっていきます！！

UIって何？？

UIって言われてすぐに答えられたら、かっこいいですよね！

UIってなんだ！？

という質問の答えをいう前に、UXについて先に説明していきたいと思います！

またなんか新しいのが来ちゃいましたよ😳って感じですよね笑

よくエンジニアの転職活動していると、よく出てくる頻出単語なのでしっかりここで抑えてください！！

UXとは

UXNO正式名称は”ユーザーエクスペリエンス”です！

wikipediaで検索してみると

ユーザーエクスペリエンス（英: user experience）とは、人工物（製品、システム、サービスなど）の利用を通じてユーザーが得る経験である。しばしば「UX」と略される^[1]。「ユーザー経験」「ユーザー体験」などと訳される。

ウィキペディアから引用

ちょっとわかりづらいですが、要するに

”サービス全般を通じてユーザーが得られる体験”

これがUXということです。

例えばWebサイトの場合、

• デザインがキレイ
•  フォントが読みやすい
• お問い合せフォームや購入ページまでの導線がわかりやすい

といったWebページの印象で変わる表層的な部分から、

• 商品を注文したらすぐに届いた
• 対応が丁寧だった
• 商品のクオリティが高い

というようなサービスの質に関わる部分も「UX」なんです！！

まぁユーザーが使用するサービス全部をUXというんですね。

それでは、UIって何かについてに移りましょう！

UIとは

UIとの正式名称は”ユーザーインタフェイス”です！

wikipediaでこちらも検索してみると、

ユーザインタフェース（英: User Interface, UI）または使用者インタフェースは、機械、特にコンピュータとその機械の利用者（通常は人間）の間での情報をやりとりするためのインタフェースである。ユーザインタフェースは以下の手段を提供する。

• 入力 - ユーザーがシステムを操作する手段
• 出力 - ユーザーが操作した結果システムが生成したものを提示する手段

ウイキペディアから引用

こちらも少し難しく思えますが、要するに

"ユーザーの目に触れる部分使用する部分"

これがUIですね！

UIとUXの違い

上では両方について説明しましたが、その違いとは何か。

UXは、ユーザーが経験する全ての部分

UIは、ユーザーが視覚的に経験する部分

関係式で表すと、UX　＞　UI

こんな風になります！

そしてこのUIの部分、視覚的に見える部分だけを今回は最初にいじっていきます！

Nuxt.jsって何？？

Nuxtとは

Nuxt は、Vue の公式ガイドラインに沿って強力なアーキテクチャを提供するように設計されたフレームワークです。一部分から徐々に採用することが可能で、静的なランディングページから複雑な企業向け web アプリケーションまで、あらゆるものの作成に使用できます。

本質的に汎用性があり、さまざまなターゲット（サーバー、サーバーレス、または静的）をサポートし、サーバーサイドのレンダリングは切り替えることができます。

強力なモジュールエコシステムにより拡張可能で、REST や GraphQL エンドポイント、お気に入りの CMS や CSS フレームワークなどさまざまなものに簡単に接続できます。PWA および AMP のサポートは、Nuxt プロジェクトからは隔離されたモジュールにすぎません。

NuxtJS は Vue.js プロジェクトのバックボーンであり、柔軟でありながら自信を持ってプロジェクトを構築するための構造を提供します。

NuxtJS

 

41 Users

136 Pockets

はじめに

https://ja.nuxtjs.org/guide/

Nuxtは、モダンな Web アプリケーションを作成する Vue.js に基づいたプログレッシブフレームワークです。Vue.js 公式ライブラリ（vue、vue-router や vuex）および強力な開発ツール（webpack、Babel や PostCSS）に基づいています。

簡単に表すと

Vue.js　=　JavaScriptのフレームワーク

Nuxt.js　=　Vue.jsのフレームワーク

こういうことになりますね！

前の記事ではVue.jsの環境構築をやったので、

今回はNuxt.jsの環境構築からプロジェクトの実装までをやっていきます！

Nuxt.jsの環境構築から実装まで

JavaScript の開発環境を作るには node の環境が必要なので、

まずはNode.jsが入っているかどうかを確認します。

入っていなければ、ダウンロードしましょう！

Nodo.jsについては以下を参考にしてください！

Tettori

 

76 Users

220 Pockets

5分で終了。node.jsの環境構築が拍子抜けするほど簡単だったのでサンプルプログラ...

http://www.tettori.net/post/293/

HTML5の発表に合わせて再注目され、今はweb標準には必須のスキルとなっているjavascriptですが、一般に知られるフロントエンドだけではなく、実はPHP等が動くサーバサイドでも使われています。 今回は今注目のno…

$ node -v
v12.19.0

上のようにバージョンの表示がなっていれば、問題ないです！

次にVueCLIをインストールします。(VueCLIについては下記参照)

アールエフェクト

 

24 Pockets

これでわかるはじめてのvue-cli | アールエフェクト

https://reffect.co.jp/vue/finally-understand-vue-cli#

はじめてvue-cliを使った開発を行おうとした場合、ファイル構成もわからないためなにを更新するばどのようなことがおこるかもわからないものです。本文書では開発プロジェクトだけではなく作成後のファイルの更新方法まで詳しく説明を行っています。Vueの基礎さえわかっていれば簡単に理解できる内容になっています。

$npm install -g @vue/cli

そして次にNuxt.jsでプロジェクトを作成します！

下記のコードで作成することができます。

「npx create-nuxt-app プロジェクト名」 

僕の場合はSlackのクローンなので、下記のようにしました。

$npx create-nuxt-app slack-clone

この後いくつか設定をする必要があるのですが、長くなってしまうので、省略します。

僕は下記を参考に設定をしました。

以上で、Nuxt.jsの開発環境の構築からプロジェクトの作成をすることができました！

まとめ

今回はNuxt.jsについて書きました！

次回はNuxt.jsでSlackクローンのUIのデザインの方をやっていきます！

Ruby on railsと比べて見て何が違うかなどを説明しながらできたらなと思っております☀️

最後まで読んで頂きありがとうございました！！