今回の目的
デザイン環境の見直し
Photoshopでの開発は限界を感じていた。サイト一式20P程のデザインを1つのPSDにするとGBを超えることがある。開くにも保存するにも時間がかかり苦痛。アートボードの調整、クリップボードのサイズ、スライスの数、膨大なレイヤー数。共通パーツの管理、複雑なグラフィックの読み込み等、考えられる検量化を試みたが劇的な改善を感じることはできなかった。そこでXDになるわけだが、今度はレギュレーション、マージンやパッディングの手動調整に不満。アップデートが思っていたよりも行われない。そのタイミングで開発終了。
AdobeがFigmaを買収する可能性との情報。Figmaの噂は知っていたので、Adobe Figmaをかなり期待をしていたが、残念な結果となった。とは業界的にFigmaにチャレンジしていくしかないなと決断。
デザイン開発は、Adobe Photoshop → XD → Figmaと移行してきた。いよいよFigmaを本格的に慣れる必要がある。感触としては、とにかく「軽い」。もうこれだけでも充分なくらいだ。魅力的な機能は「オートレイアウト」「変数管理」「コンポーネント」まだまだ知らない機能はあるが、これはユーザーが増えるわけだと実感した。
開発環境の見直し
現在webpack5でjavascript/css、画像のモジュールバンドル＆phpで開発。場面によってはbootstrapも混ぜたりしている。次のフレームワークにもチャレンジしたい。Reacr/Next、Vue/Nuxt、Angular、Gatsbyなどある。Nextを選択し少しずつ学習したが断念した。個人的には難しかった。
しかしながらJamStack（JavaScript/APIs/Markup）はやってみたい。JamStackとはヘッドレスCMSと静的サイトジェネレータの組み合わせでコンテンツを配信するアーキテクチャだそうです。
そこでAstroの登場。Astro は、2022年8月に正式リリースされた静的サイトジェネレータです。なんとなく自分でもできそうな気がしてきた。
CMSの選定
microCMSは、国産のヘッドレスCMSです。ヘッドレスCMSとは、Wordpressのような従来のCMSが有していた「コンテンツ管理」「HTML生成」の２つの責務を切り分け、「コンテンツ管理」の部分だけをAPIで提供するものです。SaaSとして提供されるので、サーバを用意する必要はありません。
フロントは勉強不足、あまり良くわかってない
レンダリングの種類
CSR, SSR, SSG, ISRがぼんやりしたまま。改めてGeminiに確認。
手法 | 日本語名 / 概要 | HTMLの生成タイミング | メリット | デメリット / 課題 | 最適なサイト・用途 |
|---|---|---|---|---|---|
CSR | クライアントサイドレンダリング ブラウザ側でJavaScriptを動かしてページを描画する。 | ブラウザ上で実行時 (ユーザーの画面に届いてから) | - ページ遷移が超高速 - アプリのような滑らかな操作感 - サーバー負荷が低い | - 初回読み込みが遅い - SEO対策が難しい - OGP（SNSシェア）の設定が困難 | - マイページ、管理画面 - ダッシュボード - SNS、Webアプリ |
SSR | サーバーサイドレンダリング リクエスト（アクセス）がある度に、サーバー側で最新のHTMLを組み立てて返す。 | サーバー上で実行時 (アクセスされた瞬間) | - 常に最新の情報を表示可能 - SEO・OGPに強い - 初回表示がCSRより早い | - アクセス毎にサーバー計算が発生するため、負荷が高い - サーバーの応答速度に依存する | - リアルタイム性が必須のサイト - 価格や在庫が頻繁に変わるEC - タイムライン、掲示板 |
SSG | 静的サイト生成 ビルド（サイト公開・更新）時に、あらかじめ全てのページのHTMLを作っておく。 | ビルド時(事前生成) | - 読み込みが圧倒的に高速 - サーバー負荷がほぼゼロ - セキュリティが極めて高い | - 記事公開や修正の度にリビルド（再生成）が必要 - ページ数が多いとビルドに時間がかかる | - コーポレートサイト - 個人のブログやポートフォリオ - 更新頻度の低いLP・ドキュメント |
ISR | 段階的静的再生成 | 基本はSSGと同じだが、指定した時間が経つと裏でHTMLを自動で最新に更新する。 ビルド時 ＋ バックグラウンドで一定時間ごと | - SSG並みに高速に表示できる - ビルド時間が肥大化しない - データを適度に最新に保てる | - ユーザーによって一瞬古いキャッシュ（情報）が見える瞬間がある - サーバー（Edge環境など）が必要 | - 大規模なブログ・メディア - 商品数の多いECサイト - ランキング、ニュースサイト |
改めて「SSG」が妥当と判断した。
では公式デモを参考に
参照元：https://blog.microcms.io/astro5-microcms-introduction
blog.microcms.io
シンプルでわかりやすい印象。1ファイルにjs,html,css記述できる。以下のようなもの。
---
//ここにjsを記述できる
import Layout from "../layouts/Layout.astro";
import { getCollection } from "astro:content";
const blogs = await getCollection("blogs");
//型を宣言
interface Props {
blog: any;
currentCategoryId?: string;
currenttagId?: string;
}
//値の受け取り
const { blog, currentCategoryId, currenttagId } = Astro.props;
---
<Layout title="My first blog with Astro">
<main>
<ul>
{
blogs.map((blog) => (
<li>
<a href={blog.id}>{blog.data.title}</a>
</li>
))
}
</ul>
</main>
</Layout>
<script>
//インラインでjsが書ける
</script>
<style lang="scss">
//cssが書けるscssも大丈夫
main {
margin: auto;
padding: 1em;
max-width: 60ch;
}
</style>なるほど、これならいけそう。スコープ的な構造ならFLOCCSSやBEMなどあまり命名規則の部分で悩まなくてもいいのかも。
ヘッダーやフッターなどの共通部分は今まで通りBEMで記述、部分的にスコープに任せるといった感じでいいのかな。
ただし、みたこともないファイルが沢山
tsconfig.json //TypeScriptのコンパイルルールやパスの設定
.astro //Astroが裏側で自動利用する、開発用のキャッシュフォルダ ※手動で触る必要は一切なし。
.env //APIキーなど、絶対に公開してはいけない秘密の文字列置き場
.gitignore //省略
.prettierrc //省略
.vscode //省略
astro.config.mjs //Astro全体の挙動や拡張機能
dist //最終的にWebサーバーにアップロードする「完成品」が書き出されるフォルダ
env.d.ts //環境変数などをTypeScriptに正しく認識させるための型定義
node_modules //パッケージ（ライブラリ）のインストール先
package-lock.json //省略
package.json //省略
public //そのままの形でWebサイトに公開したいファイル
README.md //省略
src //省略Typescriptで記述していく、要は型宣言を行なっていくということ。技術検証はこのくらいにして後は部分的にAIと壁打ちしながら構築していこう。
まずはデザインを行う。