Jamstack web creating

BLOG

手軽に名刺替わりのホームページ制作

JamstackなWebサイトを作ってみる vol.2~Nuxt.jsプロジェクトを始める~

Webサイト制作

本記事の対象者

・Jamstack構成のWebサイトを作ってみたい
・Nuxt.jsを使ってサイトを構築してみたい
・Vue.jsとNuxt.jsの違いは?
こんな方向けです。

Jamstack構成のWebサイト制作手順解説、第2段です。

前回の記事では、Jamstackとは何かについて記載しました。

ざっくりとした説明ではありましたが、次に進みましょう。笑

今回はNuxt.jsを使ってみようの回です。

Nuxt.jsとは

フロントエンドの話が出ると、Vue.js, React.js, Nuxt.js, Next.js, Gatsby.jsなど様々な.jsがいて困惑しますよね。

簡単に整理すると、
Vue.jsとReact.jsが、JavaScriptのフレームワークです。(Angularもこの一種です)

続いてNuxt.js、こちらがVue.jsのフレームワークです。フレームワークのフレームワークということになるのですが、
始めは、Vue.jsをより効率よく使うためのツールという理解で良いと思います。

Next.jsはReact.jsのフレームワークです。NuxtとNextが概ね対の関係です。
Next.jsが先にできて、その後すぐにNuxtができたようです。

Gatsby.jsは、Next.jsを静的サイトジェネレータとして用いる際に使うものです。
(Reactベースの物なので今回は無視しましょう)


Nuxt.jsで何ができる?

Vue.jsで作られたアプリケーションをサーバーサイドレンダリングできるようにすることを目的に生まれたようです。
全記事でも説明した通り、Vue.jsを使って作成したWebサイトは非常に高速な動作を実現できますが、
Vue.jsではレンダリングがクライアントサイドになるので、headのmeta情報などをGoogleクローラが巡回できないなどのSEO的なデメリットがあり、
これまでWebサイトにはあまり適さないとされていたようです。
しかしNuxtの登場でサーバーサイドレンダリングが可能となり、このデメリットが打ち消され、Web制作業界でもNuxtが使われ始めているというのが概況のようです。

これを書いてしまうとサーバーサイドレンダリングとは、そのメリットは、SPA, SSGとはという話に広がってしまうのでここでは割愛します。

要は、Nuxt.jsを使うと、SEOにも強いWebサイトが効率的に作れます。

実際に手を動かして進めてみましょう。

Nuxt.jsのインストール


事前準備

Nuxt.jsを動かすために事前に必要な事が2つあります。

  • Node.jsのインストール
  • npmのインストール


です。

Vueをいじっていればすでにあると思いますが、
Node.js+npmのインストール手順はググればすぐに出てきます!

Nuxtプロジェクトの開始

ここからNuxt.jsを始めます。

まずプロジェクトと聞いて困惑するかと思いますが(僕はしました)
Web制作であれば、1つのWebサイトを構築するのに必要なものが全て入ったファイル群です。
最終的には、このプロジェクトファイル群に対しビルドという処理を行い、ブラウザで閲覧可能な状態にします。

コマンドラインでプロジェクトをおきたいディレクトリに移動し、

$ npx create-nuxt-app プロジェクト名


としてください。(これだけです。)

すると、ファイル群のインストールが始まりますが、コマンドライン上でいくつか質問をされます。

Q1 Project name : すでに打っているので、そのままenter.
Q2 Programing language : JavaScript or TypeScriptのどちらかを選んでください。TypeScript知らない方はJavaScriptで。
Q3 Package manager : Yarn or Npm 今回はNpmです。
Q4 UI framework : CSSフレームワーク等の一覧が出ますので、使いたいものがあれば選択。※Sassは出てこないのであとで手動でインストール必要
Q5 Nuxt.js modules : JS系のライブラリが出てきますので、使いたいものがあれば選択。今回ヘッドレスCMSの取得にAPIを用いるのでAxiosは選択する。
Q6 Linting module : Lintモジュールを選びます。エラーチェックです。よく分からないので、ESLintで良いと思います。(結構うるさいですが)
Q7 Testing framework : テスティングのフレームワークです。Web制作ならNoneでOKかと思います。
Q8 Rendering mode : レンダリングモードです。(SSR/SSG) or SPAを選択します。Nuxt.jsの醍醐味はSSR/SSGなのでそちらを選択します。
Q9 Deployment target : Server or Staticを選択します。SSRの場合Serverです。今回はSSG構成としたいので、Staticを選択します。

質問多いですね。。

この辺り、選択を間違えても後からシステム設定ファイルから変更できるので、間違えてもパニックにならなくて大丈夫です。


質問に答えるとインストール完了です。設定した名前のフォルダが生成されます。
中にはいろいろなファイルが置かれています。

(gitのリポジトリも自動で生成されています。)


それぞれのフォルダ、ファイルに役割があり追々説明するのですが、
まずは、このプロジェクトをビルドしてWebサイトのブラウザ表示してみましょう。

ビルドには通常Webpackと言ったバンドルツールが必要ですが、

Nuxt.jsの場合、このビルドツールも同梱されています。
なので、コマンド1つでビルドしてサイトを閲覧できます。

& npm run dev


すると5秒ほどでビルドが完了し、
コマンドラインに以下の表示が出ます。
ローカルホストのURLが出力されますので、ここにアクセスします。



アクセスすると、サイトが表示されます。
ロゴやタイトルが表示されていますが、これがデフォルトなのでOKです。


これで、Nuxt.jsでのWebサイト構築までの流れがいったん完了です。
今後は、先ほどのファイルを編集していき、Webサイトを作っていくことになります。

ここまでは結構簡単

なんだか、WordPressの環境を構築する感じでここまで来れましたね。
JavaScript全く知らずとも、Nuxt.jsでWebサイト作ることができます。(この後は知らないときつい)

ちなみに上記の出力内容ですが、test-site/pages/index.vue に主なコードが入っています。
この.vueファイルをコンポーネントファイルと呼びます。コンポーネントファイルに、HTML, CSS, JSが1セットとなって入っています。
(こういった構成をシングルファイルコンポーネントと呼びます。QiitaとうでSFCと言う文言が出てきたらこのことです。)
直感的にイメージできると思いますが、pagesディレクトリの.vueファイルを増やしていくことで、Webサイトのページを増やしてサイトを構築していきます。

ページ同士の繋がりを作るためにvue-routerと言った概念や、
データの状態管理にvuexと言った概念も出てきてややこしくなりますが、少しずつ進めましょう。

次回は、このシングルファイルコンポーネントの概念について説明しようかと思います。


それでは、今回は以上です。

ご相談・お見積・お問い合せはお気軽にご連絡ください。

Bubekiti

お問い合わせ