Nuxt.jsセットアップ時の設定

yarn create nuxt-app <任意のプロジェクト名>

npx create-nuxt-app <任意のプロジェクト名>

Successfully created project <プロジェクト名>

こんにちは。アイレットデザイン事業部のフロントエンドエンジニアの須永です。アイレットデザイン事業部ではInside UI/UXと題して、所属デザイナーとエンジニアがデザイン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に対する知見を幅広く発信しています。</p><br> <p>今回はNuxt.jsのセットアップ時に設定する各項目の説明をしていきます。</p><br> <p>Nuxt.jsのインストール時に様々な設定項目があります。<br /><br> 中にはあまり馴染みがない言葉などもあり、私自身勉強を始めた時はよくわからないまま設定をしていました。<br /><br> そこで、各項目をきちんと理解しておきたいと思い、調べてみました。</p><br> <p># プロジェクトの作成<br /><br> まずはターミナルよりプロジェクトの作成をします。<br /><br> “`xhtml:yarnの場合<br /><br> yarn create nuxt-app <任意のプロジェクト名><br /><br> “`<br /><br> “`xhtml:npxの場合<br /><br> npx create-nuxt-app <任意のプロジェクト名><br /><br> “`</p><br> <p># 質問に回答していく<br /><br> セットアップにあたっていくつか質問されるので、回答してNuxt.jsの設定をしていきます。</p><br> <p>## Project name<br /><br> </p><br> <p>プロジェクト名を入力します。<br /><br> プロジェクト作成時に入力した**<任意のプロジェクト名>**がデフォルトで入っているので、そのままで問題なければエンターを押して次に移ります。</p><br> <p>## Programming language<br /><br> </p><br> <p>プログラミングに使用したい言語をJavaScript、TypeScriptのどちらかから選択します。</p><br> <p>## Package manager<br /><br> </p><br> <p>パッケージマネージャーをyarnとnpmのどちらかから選択します。</p><br> <p>## UI framework<br /><br> </p><br> <p>利用したいUI用のフレームワークを選択します。<br /><br> 使わない場合はNoneを選択します。</p><br> <p>## Nuxt.js modules<br /><br> </p><br> <p>下記三つのモジュールを入れるかどうか選択します。</p><br> <p>**Axios**<br /><br> 非同期通信を簡易化させるモジュールで、APIを使用する場合にインストールしておくべきモジュールです。</p><br> <p>**Progressive Web App**<br /><br> PWAに対応したサイトを作る場合にインストールしておくべきモジュールです。</p><br> <p>**Content**<br /><br> マークダウン形式でページを構築する場合にインストールしておくべきモジュールです。</p><br> <p>## Linting tools<br /><br> </p><br> <p>各Lintツールを入れるか選択します。</p><br> <p>**ESLint**<br /><br> JavaScriptのコードを静的に分析し、問題部分の指摘や自動で修正をします。</p><br> <p>**Prettier**<br /><br> コードの自動整形ツールで、さまざまな言語に対応しています。</p><br> <p>**Lint staged files**<br /><br> gitにステージされているファイルに対してLintを走らせるツールです。</p><br> <p>**StyleLint**<br /><br> cssやSCSS, Sassなどの構文のチェック・修正をします。</p><br> <p>**Commitlint**<br /><br> Git のコミットメッセージがコミット規約に従っているか確認します。</p><br> <p>## Testing framework<br /><br> </p><br> <p>テストフレームワークを入れるか選択します。使わない場合はNoneを選択します。<br /><br> それぞれの簡単な特徴は以下の通りです。</p><br> <p>**Jest**<br /><br> Facebook が開発した、シンプルさが重視されているフレームワーク。</p><br> <p>**AVA**<br /><br> サイズが軽く並列処理で高速で動くフレームワーク。</p><br> <p>**WebdriverIO**<br /><br> クロスブラウザ対応していて、ブラウザを自動操作したい場合にも利用できるフレームワーク。</p><br> <p>**Nightwatch**<br /><br> Web アプリケーションおよび Web サイト用の統合された使いやすいフレームワーク。</p><br> <p>## Rendering mode<br /><br> </p><br> <p>レンダリング方法を選択します。</p><br> <p>**Universal（SSR/SSG）**<br /><br> サーバー側でJavaScriptをレンダリングしHTMLを生成する「サーバー サイド レンダリング（SSR）」、ビルド時にHTMLを生成する「スタティック サイト ジェネレーター（SSG）」、どちらかを使う場合はこちらを選択します。</p><br> <p>**Single Page App**<br /><br> SPAを使う場合はこちらを選択します。</p><br> <p>## Deployment target<br /><br> </p><br> <p>デプロイ先の選択をします。<br /><br> サーバーサイドレンダリングを使用するか静的レンダリングを使用するかを選びます。</p><br> <p>## Development tools<br /><br> </p><br> <p>各種開発ツールを入れるかどうか選択します。</p><br> <p>**jsconfig.json**<br /><br> Visual Studio Codeの設定ファイル。</p><br> <p>**Semantic Pull Requests**<br /><br> gitのコミットメッセージやプルリクエストのタイトルの書式を検証、指摘するツール。</p><br> <p>**Dependabot**<br /><br> 依存ライブラリに脆弱性があった場合に検知してアラートを出したり、自動アップデートするツール。<br /><br> ## Continuous integration<br /><br> </p><br> <p>CIツールを入れるかどうか選択します。<br /><br> 料金プランや機能などがそれぞれ違うので、入れる場合は案件に合ったツールを選びましょう。</p><br> <p>## Version control system<br /><br> </p><br> <p>バージョン管理ツールを使用するかどうかを選びます。使わない場合はNoneを選択します。</p><br> <p># 質問の回答完了<br /><br> 全ての質問への回答が終わったらインストールが始まります。<br /><br> “`xhtml<br /><br> Successfully created project <プロジェクト名><br /><br> “`<br /><br> 上記のメッセージが出たら無事インストールされました。<br /><br> これでセットアップは完了です。</p><br> <p># 終わりに<br /><br> 設定項目が多くて大変ですが、ここをしっかり設定しておくと開発効率が上がると思います。<br /><br> ぜひNuxt.jsは始める時の参考になれば幸いです。</p><br> <p><span style=”font-size:80%;”>※アップデートにより設定項目が変わることがありますのでご注意ください。</span>