このカテゴリーを進める前に
「ブログ構築TS」を進めるにはNode.jsが必要です。
Node.jsのインストールを確認し、作業を進めてください。
% node -v
v16.9.1
なお、動作環境はMacOS Intel Chipが前提となります。
Node.jsをインストールするには?
% nodeコマンドを使用できないのであれば、ローカルに Node.jsがインストールされていません。
Node.jsをインストールするには、バージョン管理を簡単にできるNodebrew経由でインストールすることをお勧めします。
Nodebrewのインストール方法は下記記事に記載しています。
Nodebrewをインストールするには?
Nodebrewのインストールには、Homebrewが必要です。
Homebrewのインストール方法は、下記記事の「2. Homebrewのインストール」の目次を参考にしてください。
【まとめ】ゼロからNode.jsをインストールするかた
下記順番でNode.jsをインストールしてください。
- Homebrewのインストール
- Nodebrewのインストール
- Node.js推奨版のインストール
Node.js 推奨バージョンの確認: ダウンロード | Node.js
以上を実行の上、Nuxtプロジェクトの作成に進んでください。
この記事で達成すること
この記事では、ローカル環境にNuxtプロジェクトを作成します。
Nuxtプロジェクトを作成するパッケージをインストールする
最初に、Nuxtプロジェクトを構築するためのパッケージをインストールします。
Nuxtには、プロジェクト一式を構築してくれるnuxt-create-appというパッケージが用意されています。
ターミナルから下記コマンドを実行しましょう。
実行するディレクトリの場所はどこでも構いません。
% yarn global add create-nuxt-app
global... グローバル環境にパッケージをインストールする。グローバル環境とはPC OS上のこと。add... パッケージをインストールする際のyarn コマンド。
インストールを確認します。
バージョンは執筆時点の最新バージョンとなります。
% yarn global list
info "create-nuxt-app@4.0.0" has binaries:
- create-nuxt-app
list... インストール済みのパッケージ一覧を表示する。
Nuxtプロジェクトを作成する
Nuxtプロジェクトを作成します。
ターミナルから、Nuxtプロジェクトを作成する一つ上のディレクトリに移動してください。
% cd <ディレクトリパス>
Nuxtプロジェクト作成コマンドを実行します。
末尾にはご自身の好きなディレクトリ名を指定してください。
% yarn create nuxt-app <Nuxtアプリ名>
# 筆者の場合
# yarn create nuxt-app demo_blog_v2
Nuxt作成時の質問に答える
選択を失敗した場合はControl + C でキャンセルし、最初からやり直してください。
# プロジェクト名は?
# そのままでOK Enter, 変更する場合は入力
? Project name: (demo_blog_v2)
# プログラミング言語は?
# ↓矢印キーでTypeScriptを選択 Enter
? Programming language:
JavaScript
❯ TypeScript
# パッケージマネージャーは?
# Yarnを選択 Enter
? Package manager:
❯ Yarn
Npm
# UIフレームワークは?
# ここでは何もインストールしないので、Noneを選択 Enter
? UI framework: (Use arrow keys)
❯ None
Ant Design Vue
BalmUI
Bootstrap Vue
Buefy
Chakra UI
Element
Oruga
Primevue
Tachyons
Tailwind CSS
Windi CSS
Vant
View UI
Vuetify.js
# モジュールインストールする?
# 先でAxiosを使用するので、スペースキーで●を付け Enter
? Nuxt.js modules:
❯◉ Axios - Promise based HTTP client
◯ Progressive Web App (PWA)
◯ Content - Git-based headless CMS
# コードチェックツールは?
# EsLintを使用するので、スペースキーで●を付け Enter
? Linting tools:
❯◉ ESLint
◯ Prettier
◯ Lint staged files
◯ StyleLint
◯ Commitlint
# テストフレームワークは?
# テストの予定は無いが、 初期セットアップをしてくれるのでJestを選択 Enter
? Testing framework:
None
❯ Jest
AVA
WebdriverIO
Nightwatch
# Nuxt.jsのモードは?
# 今回は静的サイト（ブログ）を作成するのでUniversalのまま Enter
? Rendering mode: (Use arrow keys)
❯ Universal (SSR / SSG)
Single Page App
# デプロイモードは?
# 高速化を行うFull Staticモードで構築するので、Staticを選択 Enter
? Deployment target:
Server (Node.js hosting)
❯ Static (Static/Jamstack hosting)
# 開発ツールは?
# 導入なし。何も選択せずそのまま Enter
? Development tools:
❯◯ jsconfig.json (Recommended for VS Code if you're not using typescript)
◯ Semantic Pull Requests
◯ Dependabot (For auto-updating dependencies, GitHub only)
# CI(継続的インテグレーション)ツールは?
# 導入なし。Noneを選択しそのまま Enter
? Continuous integration: (Use arrow keys)
❯ None
GitHub Actions (GitHub only)
Travis CI
CircleCI
# バージョン管理ツールは?
# Gitを選択 Enter
? Version control system: (Use arrow keys)
❯ Git
None
これでNuxtプロジェクトのインストールが始まります。
Full Staticとは
デプロイ前にAPIを取得し、全てのHTMLファイル（静的ファイル）を生成することができる機能です。
これにより、本番環境のサーバにはAPIデータが反映した静的ファイルをデプロイすることになります。
エンドユーザーには、サーバに置いたHTMLファイルを表示するだけで良いので、APIレスポンスを待機する時間が無くなり、サイトの高速化が見込めます。
Nuxtサーバを起動する
インストールが終わったら、ターミナルからNuxtを立ち上げます。
# Nuxtプロジェクトへ移動
% cd demo_blog_v2
# Nuxt起動コマンド
% yarn dev
ブラウザで確認しよう
ブラウザからhttp://localhost:3000にアクセスします。
Nuxtが立ち上がりました。
Nuxtサーバを停止する
ターミナルからControl + CでNuxtサーバを停止することができます。
% Control + C
今回の作業は以上です。
次回は?
次回はNuxtのレイアウトファイルを作成し、GitHubにPushを行います。
下のNextリンクよりお進みください。