カテゴリー
サインイン 新規登録
学習時間 6時間
難易度 中級
質問投稿
価格 ¥1,980
月額 ¥2,980
Unlimited会員はこちらの教材を含む100種類以上のUnlimited対象教材が学び放題

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

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

3.2
最終更新 2020/10
S.I.

注目のWeb開発アーキテクチャに基づいた実践的な開発をしてみよう

①JAMstackというトレンド

JAMstackは、Javascript, API, Markupの略で、ウェブサーバーやデータベースに依存せずにサイトやアプリを作成することを意味します(参考:「クライアントサイドに基づいたWeb開発アーキテクチャ「JAMstack」がなぜ人気になっているのか」coliss)。

JAMstackは動的なコンテンツで静的なウェブサイトを構築する近年注目されている技術です。JAMstackサイトには、静的であるがゆえに利点があります。

  1. 表示が高速である
  2. バックエンドをいじる必要がないためセキュリティを心配する必要がなくなる
  3. フロントエンドとデバッグにのみ集中できるのでより迅速で集中的な開発を行える

conf

また、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制作に必須の技術を手軽に学ぶことができる経験を提供できたらと考え、この教材を公開しました。

カリキュラム

Section 0 はじめに
Section 1 Contentfulで記事データを作成しよう
Section 2 Nuxt.jsプロジェクトを準備しよう

講師のプロフィール

教材のレビュー

3.2
4件の評価
0%
75%
0%
0%
25%
庄田雄貴 1年以上前
ありがとうございました。
okazaki 1年以上前
ちょうどNuxt.js+ヘッドレスCMSのサイト構築を検討していたので、勉強になりました。さらっと一通りのことが学べたので、私にぴったりでした。Nuxt.jsやVue.jsのことをもう少し詳しく学べたらもっとよかったと思います。(環境変数の扱い方やデプロイ時のnuxt.config.jsの設定方法など)
つばさ 1年以上前
端的でわかりやすい説明でした。 しかし、どうやら何ヶ月も質問に答えていないようなので、そこがマイナス1でした。 僕の場合は、ググって解決したりしました。