Nuxt.jsをローカルPCに立ち上げよう
  • 2021.12.27に公開
  • 2021.12.30に更新
  • ブログ構築TS
  • 1. Nuxt.js×TypeScript開発環境構築
  • No.1 / 3

このカテゴリーを進める前に

「ブログ構築TS」を進めるにはNode.jsが必要です。

Node.jsのインストールを確認し、作業を進めてください。

% node -v
v16.9.1

なお、動作環境はMacOS Intel Chipが前提となります。

Node.jsをインストールするには?

% nodeコマンドを使用できないのであれば、ローカルに Node.jsがインストールされていません。

Node.jsをインストールするには、バージョン管理を簡単にできるNodebrew経由でインストールすることをお勧めします。

Nodebrewのインストール方法は下記記事に記載しています。

Nuxt.jsを動かす環境を構築する

Nodebrewをインストールするには?

Nodebrewのインストールには、Homebrewが必要です。

Homebrewのインストール方法は、下記記事の「2. Homebrewのインストール」の目次を参考にしてください。

macにRailsをゼロからインストールする

【まとめ】ゼロからNode.jsをインストールするかた

下記順番でNode.jsをインストールしてください。

  1. Homebrewのインストール
  2. Nodebrewのインストール
  3. Node.js推奨版のインストール

Node.js 推奨バージョンの確認: ダウンロード | Node.js

以上を実行の上、Nuxtプロジェクトの作成に進んでください。

この記事で達成すること

この記事では、ローカル環境にNuxtプロジェクトを作成します。

2021-12-27 09-39-01

Nuxtプロジェクトを作成するパッケージをインストールする

最初に、Nuxtプロジェクトを構築するためのパッケージをインストールします。

Nuxtには、プロジェクト一式を構築してくれるnuxt-create-appというパッケージが用意されています。

nuxt-create-app - npm

ターミナルから下記コマンドを実行しましょう。

実行するディレクトリの場所はどこでも構いません。

% 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が立ち上がりました。

2021-12-27 09-39-01

Nuxtサーバを停止する

ターミナルからControl + CでNuxtサーバを停止することができます。

% Control + C

今回の作業は以上です。

次回は?

次回はNuxtのレイアウトファイルを作成し、GitHubにPushを行います。

下のNextリンクよりお進みください。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
ブログ構築TSの投稿
1
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #01
Nuxt.jsをローカルPCに立ち上げよう
2
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #02
Nuxt.jsプロジェクトをGitHubにPushしよう
3
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #03
nuxt-property-decoratorのインストールとTypeScriptのセットアップ
1
  • Vuetifyセットアップ
  • /
  • #01
TypeScript環境のNuxt.jsにVuetifyを導入しよう
2
  • Vuetifyセットアップ
  • /
  • #02
VuetifyにカスタムCSSを追加してSASS変数を理解しよう
3
  • Vuetifyセットアップ
  • /
  • #03
VuetifyにカスタムSVGアイコンを追加しよう
1
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #01
Netlify CLIをインストールして本番環境のサイトを作成しよう
2
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #02
netlify.tomlを使ってNuxt.jsをNetlifyに手動デプロイしよう
1
  • Contentfulモデル構築
  • /
  • #01
Contentfulの料金とCommunityプランの無料枠を理解する
2
  • Contentfulモデル構築
  • /
  • #02
Contentfulへ新規会員登録、ロケールの変更、API Keyの発行を行う
3
  • Contentfulモデル構築
  • /
  • #03
Contentful ブログカテゴリーモデルを作成しよう
4
  • Contentfulモデル構築
  • /
  • #04
Contentful カテゴリーモデルに1対1で関連づくblogPostモデルを作成しよう
5
  • Contentfulモデル構築
  • /
  • #05
Contentful ブログ記事に1対多で関連づくplogTagモデルを作成しよう
6
  • Contentfulモデル構築
  • /
  • #06
Contentful カテゴリー・ブログ記事・タグコンテンツを作成しよう
1
  • Nuxt.js×Contentfulセットアップ
  • /
  • #01
Nuxt.js×Contentfulセットアップ。モジュールのインストールからAPI Keyの登録まで
2
  • Nuxt.js×Contentfulセットアップ
  • /
  • #02
Contentful APIリクエストの実行 Nuxt.jsにブログコンテンツを表示しよう
3
  • Nuxt.js×Contentfulセットアップ
  • /
  • #03
ContentfulAPIをNetlifyにデプロイしよう【Nuxt FullStaticのasyncDataとfetch】
1
  • Vuex×TypeScriptセットアップ
  • /
  • #01
Vuexの型付け vuex-module-decoratorsとnuxt-typed-vuexどちらを使用するか
2
  • Vuex×TypeScriptセットアップ
  • /
  • #02
nuxt-typed-vuexのインストールとセットアップ。Vuexの型定義と呼び出し方
3
  • Vuex×TypeScriptセットアップ
  • /
  • #03
VuexにContentfulの型定義ファイルとnuxtServerInitを追加しよう
4
  • Vuex×TypeScriptセットアップ
  • /
  • #04
VuexにContentfulAPIレスポンスを保存してVueファイルに表示しよう
独学プログラマ
独学でも、ここまでできるってよ。
LOGS
更新終了した過去の記事たち
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。