MD-Blog_Web Creative

初めまして！マークアップエンジニアの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>タグがありますね。
これは名前の通り、テンプレートとして使える予感がします。
今回の設定で分かる通り、プロジェクト作成時の設定は用途によって様々です。
適切な環境で開発できるように、まずは触ってみましょう！