
Webサイト制作のチュートリアル連載「Nuxt de Portfolio(全5回)」を始めます!
こんにちは、フロントエンドエンジニアのライダーです。
今回は「Nuxt de Portfolio」連載のチャプター1となります。
Webサイト制作のチュートリアル連載「Nuxt de Portfolio(全5回)」を始めます!
前回は連載の概要と、最終的に作るものの確認をしました。この記事では Nuxt のプロジェクトをPCへインストールし、実際に動かしながらその概要を理解していければと思います。
Nuxt は、平たくいうと
です。
公式ドキュメントは日本語に翻訳されたものが公開されていますので、一度目を通してみてください。
npx create-nuxt-app my-portfolio-sample
このコマンドが、Nuxt プロジェクトの環境構築コマンドです。
これを実行してしばらくするといくつか質問がありますが、本連載「Nuxt de Portfolio」では下記のように回答します。
? Project name my-portflio-sample
? Project description My awesome Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework none
? Choose rendering mode Universal
? Use axios module no
? Use eslint no
? Use prettier no
? Author name mtmtkzm
? Choose a package manager npm
この質問への回答を変更することで、開発中に便利なライブラリやツールをNuxtのプロジェクトと同時にインストールすることができます。が、今回はなるべく薄く作っていきます。
インストールが完了すると、作成したプロジェクトディレクトリへ移り、ローカル環境を起動します。
cd my-portfolio-sample
npm run dev
そのあと、http://localhost:3000/ にアクセスすると、下記のような画面になります。
なにはともあれ、一旦表示されている文字列を書き換えてみてください。
pages/index.vue
の中に 下記のような記述があると思います。
<h1 class="title">
my-portfolio-sample // 適当に書き換えてみてください
</h1>
ブラウザに戻ると、リロードしなくともテキストが書き換わっていると思います。このような仕組みがあることも、開発を楽しく便利にしてくれています。
さて、こういった HTML を Nuxt がどう表現しているかビジュアルで表現しました。
緑 > オレンジ > 赤 のツリー構造になっています。通常のHTMLでもこのようにDOM構造が存在すると思いますが、Nuxt ではこれらを、1ファイルごとに分割して開発を進めます。
具体的には、
layouts/default.vue
pages/index.vue
components/Logo.vue
の3ファイルです。
ちなみに、
.vue
ファイルを「レイアウトコンポーネント」.vue
ファイルを「ページコンポーネント」.vue
ファイルを単に「コンポーネント」とそれぞれ呼称することが多いです。
従来のWeb開発(下記例では、トップページ、Aboutページを持つサイト)では、ファイル種別によってディレクトリを分割することがほとんどでした(下図左)。しかし、Nuxt では多くの場合、コンポーネント志向でファイルやディレクトリを構成します(下図右)。
実際にはまったくこの通りというわけではありませんが、ページごと(コンポーネントごと)に開発を進めていきます。HTML、CSS、JavaScript がひとつになったパーツをひとつのコンポーネントと呼ぶ、というイメージです。
こうすると、コンポーネントを組み合わせていく形でWebサイトを構成していくことができます。
もっと具体的にみてみましょう。
/components/Logo.vue
を開いてください。
<template>
<div class="VueToNuxtLogo">
<div class="Triangle Triangle--two"/>
<div class="Triangle Triangle--one"/>
<div class="Triangle Triangle--three"/>
<div class="Triangle Triangle--four"/>
</div>
</template>
<style>
.VueToNuxtLogo {
display: inline-block;
animation: turn 2s linear forwards 1s;
・
・
ファイル名の通り、ロゴを表示するために必要なもの(HTMLとCSS)をひとつのファイルに記述しています。JavaScriptによる制御が必要であれば、それもこのファイルに <script></script>
として記述していきます。
こういったひとつのまとまり(ひとつの機能や見た目)を、Vueコンポーネントやシングルファイルコンポーネントと呼びます。
コンポーネントは入れ子にできます。つまり、コンポーネントの中でコンポーネントを呼び出すことができます。
/pages/index.vue
を開いてください。
<template>
<section class="container">
<div>
<logo/>
<h1 class="title">
・
・
・
</template>
<script>
import Logo from '~/components/Logo.vue'
export default {
components: {
Logo
}
}
</script>
<style>
・
・
<script>
内で、 Logo.vue
をインポートし、 <template>
内でそれを利用しているのがわかるかと思います。
つまりコンポーネントとして分割したものはあらためて記述する必要はなく、再利用していくことができます。
ためしに、5・6行目にも <logo/>
をコピーしてみてください。ブラウザではロゴが3つに複製されたのではないでしょうか(npm run dev
したのちに localhost:3000 にアクセスしてください)。
<logo/>
<logo/>
<logo/>
pages ディレクトリにあるページコンポーネントは、 Nuxtの中でも特殊な役割を持っています。
pages ディレクトリ配下にあるディレクトリが、そのままURLとして使われます。
pages/index.vue
は /
ページ、
pages/about/index.vue
は /about/
ページを表します。
そのため、ページコンポーネントは「再利用する」などという概念は基本的にありません。
上記では pages ディレクトリの働きについて少し触れましたが、Nuxt で特徴的なのはそれぞれ役割を持ったディレクトリ構成です。公式ドキュメント(https://ja.nuxtjs.org/guide/directory-structure) を参考にしてください。
また、重要なファイルとして、 nuxt.config.js
の書き方もしっかり押さえておくといいでしょう。こちらも公式ドキュメント(https://ja.nuxtjs.org/guide/configuration)が有用だと思います。
これらのディレクトリに適切にファイルを設置していき、nuxt.config.js で設定することでVueアプリケーションを構成していきます。
これは、プロジェクト全体に関わる設定ファイルです。「Nuxt によって便利に設定できるもの」はほとんど、このファイルで管理していくことになります。
Nuxt では、.html ファイルを直接作成することがないので、<head>
内はこのファイルで管理します。デフォルトのものが設定されているので、周りに倣って追加・修正していくことができます。
後述しますが、ここに記載するのはサイト全体で共通のもの(デフォルト値)です。
サイト作成後、リリース用のHTMLファイルを作成する際の設定を記述します。
Nuxt.js の機能を拡張をするために、 module というものを利用します。よく利用される機能は Nuxt.js のコミュニティで管理されており信頼度も高いものが多いです。
それらの読み込み・設定を記述します。
今回は、実際にブラウザとエディタで Nuxt をインストールしてみました。このあたりの基本的な説明はすべて公式のドキュメントに書いてありますので、随時参照していただければと思います。
さて、次回はいよいよポートフォリオ作成に向けてプロジェクトを作成していきます! お楽しみに!