こんにちは、フロントエンドエンジニアのライダーです。
2018年 秋に Nuxt v2 がリリースされたこともあり Nuxt.js（以降、Nuxt） が人気を博しています。これまで興味がなかったあなたも、その人気ぶりから少し Nuxt への興味が湧いてきたころではないでしょうか？
LIGにも着実にその流れはきており、シングルページアプリケーション（以降、SPA）やそのサーバサイドレンダリング（以降、SSR）以外のWebサイトでも、Nuxt を導入して快適コーディングする事例が増えてまいりました。
そこで今回から「ポートフォリオサイトの作成」を題材に、Nuxt を使ったWebサイト制作をチュートリアル式に進めていきたいと思います。
目次
本連載「Nuxt de Portfolio」の目的
冒頭でも話しましたが、いま日本で、Nuxt はどんどん広まってきており、ドキュメントも充実し、Tips系の記事が増えてきました。社内でも実案件への採用事例が増えてきています。
これは私の個人の考えですが、その技術自体の良し悪しはおいておいたとしても 技術の ”流行り” にのっかることは大切だと思っています。
そのため、今回はポートフォリオサイト（Webサイト）制作を題材にNuxt の導入から公開までをさらっと概観する内容としました。
Nuxt に対しては公式ドキュメントを併用しつつ、可能なかぎり丁寧な説明を心がけますが、Nuxtが裏側で何をしているのかや、JavaScript の文法説明など、本筋とそれる箇所は省いて進めていきます。
実践ベースで作って学ぶスタイルの方に向いていると思います（私自身もこのタイプです）。
- 対象読者
-
- Nuxt / Vue について興味がある方
- とにかく作って、動かしてみたい方
- HTML / CSS / JavaScript(ES2015+) はなんとなくかける方
「Nuxt de Portfolio」で、作るもの
こんなポートフォリオサイトです。
https://nuxt-de-portfolio.netlify.com
- ページ構成
-
- Index ページ（トップページ）
- About ページ
- 404 ページ
なぜポートフォリオサイトなのか？
私自身、Vue や Nuxt をはじめとした学びたかった技術の経験を得るために、ポートフォリオサイトを作っていました。そのことがとても勉強になったと振り返って感じたため、その雰囲気を記事として公開しようと思った次第です。
https://mtmtkzm.com （宣伝）
ポートフォリオサイトは、誰にも邪魔をされない自分の聖域。
つまり、技術や自己表現などさまざまな実験場として使うことのできる場所だということです。このサイトは数年前にドメイン取得した後、作り直しを重ねてもう4代目くらいになりました。
今回は「Nuxtで作ること」をテーマとするため、上記サイトと同じ見た目や動きをするものは作れませんが、この連載が終了した後、完成品に肉付けをしていく形でポートフォリオサイトとしてのオリジナリティを表現していただければと思います。
筆者開発環境
前提となる開発環境はこちら！
-
- npm 6.10.0
- node 11.14.0
- nuxt 2.11.0
- create-nuxt-app 2.12.0
連載目次
連載は全5回。それぞれ下記の内容を予定しています。
Ch.0 はじめに（この記事）
- 連載の概要説明
- つくるもの（連載のゴール）を理解する
Ch.1 Nuxtとは？ 動かして理解する
- Nuxt の概要説明
- サンプルプロジェクトを作成し、理解する
Ch.2 プロジェクトを作成する
- 作るポートフォリオの全貌を理解する
- ポートフォリオプロジェクトを作成する
- テンプレート（HTML）・スタイル（SCSS）を準備する
Ch.3 コンポーネントを整理する
- 冗長な記述をシンプルにする
Ch.4 公開する
- head タグを調整する
- Netlify の設定
- Netlify へアップロード用ファイルの準備
さいごに
というわけで今回は、「Nuxt de Portfolio」連載開始の予告編として、記事のねらいや概要についてまとめました。次回からいよいよチュートリアル開始です！ まずは【Ch.1】で、Nuxt の概要からおさらいしていきたいと思います。お楽しみに。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
