【超初心者向け】Nuxt.jsを使いWebサイトを作成する その1～環境の作成まで～
自分の復習、理解度の確認も兼ねて。
・Nuxt.jsを使ってみたいけど、いまいちよくわからない😫
・フレームワークの勉強をしろって言われたけど、調べるのが面倒くさい😁
・どのサイトを見ても、ある程度知識があること前提で解説されて全然理解できなかった😭
みたいな方向けに、Nuxt.jsを使用してWebサイトを作る方法をざっくり解説していきます。
Windows機で進めていきますので、Macを使用されている方はそちらの環境に合わせて進めていただければと🍎
※自分はバリバリフロントの開発に携わっている人間ではないので、一部表現や手法等が間違っているかもしれません。
その際はご指摘いただけますと幸いです。
npmのコマンドを使用できるようにする
もう使用できる場合は飛ばして頂いて大丈夫です🙆♂️🙆♀️
以下リンクからインストーラーを落とし、インストール。
https://nodejs.org/ja/download/
インストーラーの指示に従って進めれば大丈夫です🙆♂️🙆♀️
nuxt.jsの環境を作る
まずはコマンドプロンプトを起動。
（スタートメニューで「cmd.exe」と検索し、起動）
以下コマンドを入力し、コマンドプロンプト上での場所を移動します。
cd 作業フォルダのパス【作業フォルダのパス】には作業ファイルを置きたいフォルダのパスを指定してください。
次に以下コマンドを入力。
npx create-nuxt-app 名前※【名前】に入力した文字がフォルダ名になります。
■プロジェクトに関する設定
Generating Nuxt.js project in /root/プロジェクト名
? Project name プロジェクトの名前
? Project description プロジェクトの説明
? Author name 開発者名次に表示されるのはプロジェクトに関する設定。
自動生成されるREADME.mdに記載される内容で、あとから変更も可能です。
■JavaScriptパッケージマネージャーの選択
? Choose the package manager
Yarn
Npm好みで選んで大丈夫ですが、今回はNpmで進めていきます。
■UIフレームワークの選択
? Choose UI framework
None
Ant Design Vue
Bootstrap Vue
Buefy
Bulma
Element
Framevuerk
iView
Tachyons
Tailwind CSS
Vuetifyフレームワークを使用しない場合は選択しなくて大丈夫ですが、使うとしたらBootstrapVueが無難かと思います。
今回追加せず、必要になったときに後から追加することも可能です。
【参考】なんとなくVue.jsのUIフレームワークを紹介する - Qiita
https://qiita.com/yusuke_ten/items/4103f032dd0c6fbe5607
■サーバーサイドフレームワークの選択
? ChMoose custom server framework
None
AdonisJs
Express
Fastify
Feathers
hapi
Koa
Micro
とりあえず今回は使用しなくていいかなと思います。
もし使用する場合はExpressが良いとか。
【参考】Nuxt.js「create-nuxt-app」の選択肢にでてくる各種フレームワークについて
https://arakan-pgm-ai.hatenablog.com/entry/2019/05/10/000000
■インストールするモジュールの選択
? Choose Nuxt modules
( ) Axios
( ) Progressive Web App (PWA) Support
( ) DotEnv以下から使用するものをスペースキーで選択。
・Axios
HTTP通信を簡単に行うことができるJavascriptライブラリ。
APIを使用する際に便利。
・Progressive Web Apps （PWA）
モバイル向けWebサイトをスマートフォン向けアプリのように使える仕組み。
・DotEnv
.envファイルに書いた設定を環境変数として簡単に読み込めるgem。
ほとんどの場合Axiosだけでいいと思いますが、DotEnvも入れておいて損はないかも。
■ソースコードのチェックプログラムの選択
? Choose linting tools
( ) ESLint
( ) Prettier
( ) Lint staged files
( ) StyleLint以下から使用するものをスペースキーで選択。
・ESLint
JavaScriptのための静的検証ツール。
・Prettier
ソースコードを整形するツール。
・Lint staged files
git commitのタイミングでeslintによるチェックを実施し、エラーだったらコミットさせない設定ができる。
・StyleLint
CSSのチェックツール。
今回は必要ありませんが、ESLintはコーディング規約の統一に便利なので入れても良いかもしれません。
■テストに使用するフレームワークの選択
? Choose test framework
None
Jest
AVAソフトウェアテストの自動実行プログラム作成、テスト結果の自動判定や自動集計などの機能を提供するソフトウェアフレームワークです。
以下から使用するものを選択。
・Jest
Facebookが開発したオールインワンなテストフレームワーク。
・AVA
軽量で高速、シンプルな文法でテストが書けるだけでなく、テストを並列で同時実行できる。
静的サイトを作成する場合は無くても問題ありません。
■サイトのレンダリング方法の選択
? Choose rendering mode
Universal (SSR)
Single Page Appユニバーサルアプリケーションかシングルページアプリケーションのどちらで作るかを選択。
JAMstackなサイトを作るならUniversal (SSR)を選択したほうがよい？
【参考】Nuxt.jsを使うときに、SPA・SSR・静的化のどれがいいか迷ったら - Qiita
https://qiita.com/nishinoshake/items/f42e2f03663b00b5886d
■VS Codeに関する設定
? Choose development tools
( ) jsconfig.json (Recommended for VS Code)VS CodeでES6を使う場合にはチェックを入れます。
使用しない場合はスルーで大丈夫です。
これらの設定が完了次第、プロジェクトが作成されます。
起動確認
作成したプロジェクトへとcdコマンドで移動し、下記コマンドを入力。
npm run devこのコマンドを入力すると、ローカルホスト環境で動作の確認ができます。
上記へと接続し、特に問題なく画面が表示されたら環境の作成は終了です。
これで環境の作成が完了しました。
動作を停止する場合は、コマンドプロンプト画面でctrl + Cを押します。
すると
バッチ ジョブを終了しますか (Y/N)? と聞かれるので、yを選択しエンターキーを押すことで停止します。
それでは今回は以上です。
次回はnuxtでsassが使用できるように設定していきます。
ご覧頂きましてありがとうございました。