【ポートフォリオ】JAMstackなブログ作ってみた①

11/27/2021 公開

12/26/2021 更新

・ポートフォリオを作りたい
・Nuxtを使って何か作ってみたい
・ブログサイトを開設しようか検討中
・JAMstackって聞いたことあるけど結局何？

という方々は是非一読ください。

本記事のテーマ

【Nuxt.js】JAMstackなブログ開設に用いた技術と周辺話

Nuxt3+microCMSでブログを作る

選択技術と用語を軽く解説　←今回はこれ
Nuxt3+microCMS+TailwindCSSのブログ構成について

筆者について

未経験（花屋見習い）独学でフロントエンドエンジニアへ転職
VueとTypeScriptのモダンフロントエンド環境でWebアプリ開発

前置きメッセージ

「ポートフォリオ作らなきゃと思ってるけど何作ったらいいかわからない」
と悩んでる方に読んでほしい記事となります。

僕自身個人開発で作りたいものがなくてずっと悩んでました。
そんな人に向けて技術選択の指標となればと思っております。

実際に使わずとも周辺知識について体系的に学べる内容となっております。

専門用語については軽く解説しながら進めていきます。
初学者の方でもなるべく読めるように意識した文章となっています。

前提として、
プログラミングを勉強中でWebについてほんのちょっとだけ理解している方。
Vueをすこ〜しだけ触ったことある方を対象にしています。

Vueを触ったことない人はNuxtの説明は不要なので飛ばしていただいてOKです。

選択技術と用語を軽く解説

Nuxt.js

Vueのフレームワーク(以下FW)です。
VueはJavaScriptのFWですね。FWのFWって何事！？ってなりますよね。

FW・・・元の言語があって（今回はJavaScript）、その言語ベースで簡単にアプリケーションを構築できる技術のこと。

NuxtはVueで開発するときの面倒ごとを一気に簡単にしてくれます。
特徴は大きく2点、

ディレクトリ構造が決まっている
ルーティングが自動で決定する

ディレクトリがあらかじめ決まっていて、どのディレクトリにどのファイルを入れるかが決まっています。
また、ディレクトリにVueファイルを作るだけでそのファイルのパスを自動で決めてくれます。

routerディレクトリを作って設定を書く必要がありません。（もちろんカスタマイズも可能）

ディレクトリ・・・フォルダのこと！ファイルの格納場所。
ルーティング・・・指定のパスへ移動すること。またはその軌跡。
パス・・・URL。そのファイルを開くためのWeb上の道のり。

上記のような理由でVueのFWと呼ばれています。
コード自体はVueそのものです。

今回は以上の2点とNuxt3（new）がbeta版として使えるようになったので、
Vue3の記法で何か作りたくて採用しました。

Nuxt3についてはこちらがわかりやすいです。
Nuxt 3がパブリックベータ版になったので新機能の紹介や所感など

 Nuxt公式ドキュメント

TypeScript

JavaScriptの型付け言語です。
もっと知りたい方はこちらをご覧ください。

Nuxt3はデフォルトでTypeScriptが使えます。
設定しなくていいのが本当に楽でした。

TailwindCSS

ユーティリティーファーストなCSSFWです。
？？？ですよね（笑）

簡単に説明します。
CSSなしでボタンが実現できます。

<button class="text-blue-600 hover:text-red-600 ...">
  Button
</button>

HTMLタグにクラスを書くだけで簡単にスタイルを当てることができます。

今回はブログの詳細以外の部分にこちらでスタイルを当てています。
Flowriftを参考にデザインを組み立てました。

このサイト、マジで便利なので使って欲しいです。

フロントエンドエンジニアが何か作るときデザインは大きな壁になると思うんですが、
これがあればデザインに時間を食われずストレスフリーな開発ができます。

フロントエンド・・・画面イジイジエンジニア

TailwindCSSについてはこちら

microCMS

今回の主役です。

簡単に説明すると、UIがないWordpressです。ヘッドレスCMSと呼ばれます。
ブログの記事はmicroCMSのエディタで書きます。

UI ・・・サイトの見た目
Wordpress・・・ブログ等の静的サイトを簡単に開設できるWebサービス。
静的サイト・・・閲覧のみを目的としたサイト。
エディタ・・・一般に文字編集ソフトをテキストエディタという

ヘッドレスCMSは、従来のCMSと異なり、表示画面（＝フロントエンド）と裏側のシステム（＝バックエンド）が完全に分離しているのが特徴です。言い換えると、ヘッドレスCMSはコンテンツ管理のみに特化したCMSとも言えます。

参考はこちら

JAMstack

フロントエンドの設計手法です。

J・・・JavaScript
A・・・API's
M・・・Markup

Jamstackとはウェブサーバーを存在させずにサイトを運用する構成です。

こちらに詳しく説明してあります。

大事な部分だけ説明するとあらかじめページを生成しておいて、
データベースとウェブサーバーを介さずに高速で堅牢な通信を行う方法です。

データベース　・・・データ（ユーザーの名前、住所、etc...）の保管場所。
ウェブサーバー・・・フロントエンドの要求をデーターベースの処理によって実現する。バックエンドが行う。
バックエンド　・・・サーバーイジイジエンジニア。フロントエンドが画面イジイジするための情報を渡す。
サーバー　　　・・・画面のないPC。HTML・CSSで整備される前の情報を持つ。
API 　　・・・バックエンドの関数。画面に情報を渡す役割を持つ。
マークアップ　・・・HTML・CSSによって画面表示用の構造とデザインを作る

JAMstack最大の利点は静的なサイトを爆速堅牢高パフォーマンスで配信できるところです。
最近だとSSGというレンダリング手法によって実現します。

難しい概念ですが、１対１の高速キャッチボールと考えるといつかピンと来そうな気がします。
・・・気がするだけです。

次回へ・・・

長くなったので技術構成とそのメリットデメリットは次の記事に書きます。

プログラミングやWebって専門用語多すぎですよね・・・。
なるべく専門用語は解説入れつつ書くので次回以降もよろしくお願いします。

輝良 / Kira
HTML, CSS, JavaScript, Vueを勉強して、未経験から独学でフロントエンドエンジニアへ転職。実務ではTypeScriptとVueを使用。モダンフロントエンド技術が好き。当サイトはNuxt3+TS+TailwindCSS+microCMSで構築。

タグ