Build
Aulvem サイトを Astro で立ち上げた記録
Aulvem サイトを Astro 5 + Tailwind + MDX で構築し、Cloudflare Pages に乗せるまでの設計判断と詰まった点を記録します。
01 — Category
Build
Notes from the workbench.
Build では、Aulvem で作っているサービスの設計・実装・公開・改善の過程、その中で使った技術メモやコーディング基礎を記録しています。詰まった点や採用した技術、改善のきっかけを中心にまとめます。
-
-
Buildセマンティック HTML の基本を、いまの自分の言葉で書き直す
section / article / nav / header / footer など、セマンティック HTML をなぜ使うのかを、用途別に短くまとめます。
-
BuildAstro Content Collections のスキーマ定義 Tips
Astro の Content Collections を Zod で厳密に定義するときに、運用上気をつけたい小さなコツをまとめます。
-
BuildFigmaの使い方〜基礎編３〜
Figmaをより管理しやすくする機能を解説します。カラースタイル・フォントスタイル・影スタイル、コンポーネントとバリアンツの組み合わせまで紹介。
-
BuildFigmaの使い方〜基礎編２〜
Figmaの基礎編２として、枠線・グループ化・コンポーネント化・オートレイアウトなど、再利用しやすいUI制作に欠かせない機能を解説します。
-
BuildFigmaの使い方〜基礎編１〜
Figmaの基礎操作を解説します。フレーム作成、背景色・サイズ変更、テキスト入力、要素の整列など、UI制作で最初に押さえたい機能を画像付きで紹介。
-
BuildFigmaの使い方〜準備編〜
Figmaの概要と、アカウント作成からチーム作成、デザインファイル作成までの準備手順を画像付きで解説します。
-
Buildデザイン思考とそれを活かした仕事の仕方
デザイン思考はデザイナーが創造するときに用いる考え方を他分野に応用した問題解決アプローチです。ダブルダイヤモンドモデルや実践のコツを解説します。
-
BuildVue.js 入門 - v-if と v-for を解説
Vue.js を初めて使う方に向けて、独自の HTML 記法 v-if、v-else、v-else-if、v-show、v-for の使い方と注意点をエンジニア視点で解説します。
-
BuildVue.js 入門 - エンジニアが解説する v-bind 基礎
Vue.js を初めて使う方に向けて、Vue.js 独自の HTML 記法である mustache タグと v-bind の基本的な使い方・省略記法・複数指定までを実例コード付きで解説します。
-
BuildVue.js 入門 - エンジニアが解説する Component 基礎
Vue.js / JavaScript フレームワークを初めて使う方向けに、キモとなる Component の概念から単方向・双方向バインディングまで初心者向けに丁寧に解説します。
-
BuildVue.js 入門 - 現場で使用したエンジニアが解説する Vue の基礎
Vue.js を業務で 1 年以上使用したエンジニアが、Vue ファイルの構造・template・script・style・ライフサイクルといった超基礎を実例とともに解説します。
-
Build1 年以上使用したエンジニアからみる Angular と Vue.js の違い
JavaScript フレームワークの代表格 Angular と Vue.js を業務で使用したエンジニアの視点で、構成・記法・運用上の向き不向きを比較します。
-
Build当ブログのデザインコンセプト
当ブログのデザインコンセプトについて、ベースに採用したマテリアルデザイン、アクセントのニューモーフィズム／グラスモーフィズム、スマホメイン設計などを解説します。