PROGRAMMING

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

こんばんは!

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

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

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

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

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

Nuxt.jsってなんだ!?UIってなんだ!?

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

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

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

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

目次
・UIって何??
・Nuxt.jsって何??
・Nuxt.jsの環境構築から実装まで

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

UIって何??

Ux 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.js/axios】別ドメインへのajaxがCORS policyで弾かれる問題の対応 - フリーランチ食べたい

Nuxtとは

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

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

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

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

簡単に表すと

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

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

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

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

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

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

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

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

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

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

Pz-LinkCard
- URLの記述に誤りがあります。
- URL=初心者向け!3分で理解するNode.jsとは何か? このページでは難しいことを極力なくしてNode.jsとは何かを初心者の方向けに解説した。3分間で概要を押さえられるはずだ。 eng-entrance.com
$ node -v
v12.19.0

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

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

$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と比べて見て何が違うかなどを説明しながらできたらなと思っております☀️

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

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.