Gid6dctts1t33tane54a

Nuxt.js & Contentfulでハイスペックなポートフォリオサイトを超簡単に公開しよう!【JAMstack】

【中級レベル/6時間】Nuxt.jsを用いた静的サイト生成の方法を学ぶことに加え、ヘッドレスCMSのContentfulと連携させることでJAMstackサイト制作のスキルを学ぶ。教材内では、記事一覧ページ、個別記事ページの作成に加え、タグ機能、検索機能といった汎用的な機能の実装も学ぶ。

注目の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技術の大まかな流れを把握することを一番の目的としており、HTMLCSSの解説は詳しく行っていません。


本教材で質問対応可能なOSや環境

  • Mac OS
  • Windows OS


本教材の対応バージョン

  • Nuxt.js2


本教材を作成した想い

ポートフォリオサイトの作成という身近な作業を通じて、JAMstackというこれからのWeb制作に必須の技術を手軽に学ぶことができる経験を提供できたらと考え、この教材を公開しました。


この教材の執筆者


安久京
安久京

機械学習関連のITスタートアップで5年間フロントエンド&Pythonエンジニアとして働いた後、大学院進学(数理・計量政治学)に伴い、フリーランスとして独立しました。初心者向けのプログラミング講師・教材作成の経験があります。


本教材のカリキュラム


  1章 Contentfulで記事データを作成しよう
利用可能
日 購入してから
  2章 Nuxt.jsプロジェクトを準備しよう
利用可能
日 購入してから

今すぐはじめる!