注目のWeb開発アーキテクチャに基づいた実践的な開発をしてみよう
①JAMstackというトレンド
JAMstackは、Javascript, API, Markupの略で、ウェブサーバーやデータベースに依存せずにサイトやアプリを作成することを意味します(参考:「クライアントサイドに基づいたWeb開発アーキテクチャ「JAMstack」がなぜ人気になっているのか」coliss)。
JAMstackは動的なコンテンツで静的なウェブサイトを構築する近年注目されている技術です。JAMstackサイトには、静的であるがゆえに利点があります。
- 表示が高速である
- バックエンドをいじる必要がないためセキュリティを心配する必要がなくなる
- フロントエンドとデバッグにのみ集中できるのでより迅速で集中的な開発を行える
また、JAMstack Confといった大規模なカンファレンスが開かれるまで、世界では盛り上がりを見せています。国内でも、CSS NiteやWordCampといった大きなイベントで言及されたこともあり、じわじわと認知が広まってきています。
②Nuxt.js & Contentful & Netlifyでハイスペックなポートフォリオサイトを超簡単に公開
そこで本教材では、Nuxt.jsとAPIファーストのCMSの代表格であるContentfulというサービスを組み合わせることで、JAMstackなポートフォリオページを作成していきます。
この教材では、TailwindというCSSフレームワークを用いてページデザインを行います。クラス指定だけで美しいデザインを手っ取り早く実現できるとても便利なフレームワークです。
作成したポートフォリオサイトは、Netlifyというサービスを用いて無料で公開します。GitHubへのpushをトリガーとしてサイトを自動更新することができるので、サイトの更新も大変楽になります。
ポートフォリオサイトの作成という身近な作業を通じて、JAMstackというこれからのWeb制作に必須の技術を手軽に学ぶことができる経験を提供できたらと考え、本教材を執筆させていただきました。ぜひ興味のある方は実際に学習し、学びや感想をTwitter等にあげていただけるととても嬉しいです。
学習内容
- Nuxt.jsアプリケーションを新規作成します。
- Contentfulを用いた記事データの作成を行います。
- Nuxt.jsアプリケーションとContentfulを連携させ、アプリケーション側で記事データを表示させます。
- 記事一覧ページ、個別記事ページを作成します。
- タグ機能、検索機能を実装します。
- Netlifyを使ってNuxt.jsアプリケーションを無料で公開します。
本教材を通して身に付くスキル
コーポレートサイトやブログなど、小規模ウェブサイトの構築におけるデファクトスタンダードとなるであろうJAMstackへの理解。
その他にも、Vue.js に基づいたプログレッシブフレームワークである Nuxt.jsでの開発や、Netlifyを使った無料でアプリケーションを公開する方法を学ぶ。
この教材の対象者
- Vue.jsの概要を理解していてNuxt.jsを触ってみたい方
- JAMstackを手軽に実践したい方
- 自分のポートフォリオサイトを0から作りたい方
- Nuxt.jsを用いた静的サイト構築を学びたい方
受講における必要条件
- HTML/CSS/Javascriptの基礎知識
- Vue.jsの概要の理解
学ばないこと
本教材はNuxt.jsを用いた静的サイト構築およびJAMstack技術の大まかな流れを把握することを一番の目的としており、HTML・CSSの解説は詳しく行っていません。
本教材で質問対応可能なOSや環境
- Mac OS
- Windows OS
本教材の対応バージョン
- Nuxt.js2系
本教材を作成した想い
ポートフォリオサイトの作成という身近な作業を通じて、JAMstackというこれからのWeb制作に必須の技術を手軽に学ぶことができる経験を提供できたらと考え、この教材を公開しました。