本文へジャンプ

Nuxt.jsでWebページを作ろう【導入編】

Posted by MONSTER DIVE

初めまして!マークアップエンジニアのNAKです。
早いもので、入社して5ヶ月が経ちました。

私がWeb制作に興味を持ったきっかけは、「アニメ好き!」だったから。
新作が出ると、公式サイトをチェックしていたのがきっかけです。
今でもアニメーションやUIが充実したサイトを見ると、作品の世界観が伝わってきますし、ワクワクします!!
きっかけはアニメ作品ですが、お客様の伝えたいことを表現したり、使い心地のよいUIが作れるWebエンジニアになれたら最高です。

そんな、Web制作のアニメーションやUI設計には欠かせないのが、JavaScript(プログラミング言語の一種)です。
一言でJavaScriptといっても、近年は様々なフレームワークがありますね。
今回はフレームワークの一種、Nuxt.jsの環境構築をしてみましょう。
Nuxt.jsとは、Vue.jsアプリケーションを作成するためのフレームワークです。

Nuxt.jsのメリット

なんといっても、レンダリングの方法が選択できることは魅力的です。
SSRは、ユーザーのアクションに伴う可変箇所のみ、サイトの内容を更新できます。
SPAは、ネイティブアプリのような(オフライン対応/Web通知...etc)操作を可能にします。
Webページの読み込みは速くなりますし、クローラはサーバー側でレタリングしたHTMLを読み込むので、SEO対策もバッチリです。
レンダリング以外にも、ペーツ毎にテンプレートを管理できたり、いいこと尽くしですね!

では早速、Nuxt.jsのインストールをしてみましょう。
※今回は、「node」「npm」を事前にインストールした状態で進めます。

Nuxt.js テンプレート作成

まずはターミナル(黒い画面)でコマンドを叩きましょう。
「vue-cli」をグローバルにインストールすると、どの階層からでもNuxt.jsのテンプレートプロジェクトが自動で生成できるようになります。

npm install -g vue-cli

vue-cliでNuxt.jsをインストールするディレクトリーに移動します。(一例です)

cd /Users/nak/Desktop

Nuxt.jsの新規プロジェクトファイルをインストールします。

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

インストールを開始すると、プロジェクト設定に必要な情報を設定します。

//<プロジェクト名>
//デフォルトは、nuxt-community/starter-template時の【 プロジェクト名 】が入ります。
? Project name (my-project)
//<プロジェクトの説明文>
//インストール時に自動生成される「README.md」に反映されます。
? Project description (My priceless Nuxt.js project)
//<プロジェクトの作成者名>
? Author name 【 作成者名 】
//<パッケージマネージャーの種類>
//「npm」または「yarn」を選択
? Choose the package manager (Use arrow keys)
//<UI フレームワーク>
//VuetifyやBootstrapなどのUI フレームワークを選択
? Choose UI framework (Use arrow keys)
//<サーバーサイド フレームワーク>
//AdonisJsやExpressなどのサーバーサイド フレームワークを選択
? Choose custom server framework (Use arrow keys)
//<モジュール>
//「Axios」または「PWA」を選択
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
//<Lintツールの選択>
//ソースコードの解析やコーディングルールの設定ツールを選択
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
//<テスティングフレームワーク>
//プログラム開発時のテストを支援するフレームワークを選択
? Choose test framework (Use arrow keys)
//<レンダリング方法>
//SSR(サーバ側)またはSingle Page App(ブラウザ側)レンダリングを選択
? Choose rendering mode (Use arrow keys)
//<Nuxt.jsの開発に使用するツール>
//Visual Studio Codeを利用している場合は、jsconfig.jsonを選択
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)

以上でインストールが完了です。
早速、起動してみましょう。
まず、先ほどNuxt.jsをインストールしたフォルダーに移動します。

cd 【インストール先のフォルダー階層】

インストールしたファイルの中にpackage.jsがあります。
エディターで開いてみましょう。
Nuxt.jsの実行文「dev」「build」「start」「generate」が定義されています。

"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},

今回は「dev」で、起動してみましょう。

num run dev

http://localhost:3000/ にアクセスすると、サイトが閲覧できるようになりました。

おわりに

今回はNuxt.jsの環境構築についてご紹介しました。
インストールされた「.vue」ファイルを確認すると、<template>タグがありますね。
これは名前の通り、テンプレートとして使える予感がします。
今回の設定で分かる通り、プロジェクト作成時の設定は用途によって様々です。
適切な環境で開発できるように、まずは触ってみましょう!

Recent Entries
MD EVENT REPORT
What's Hot?
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
乃木坂・六本木 撮影配信スタジオ
すべてのコンテンツ/プラットフォームを、ひとつのコンテンツ管理システムで。