JOURNAL
記事一覧
12件の記事
絞り込みを解除- 知る・学ぶわかったつもりの、その先へ
閉じた入力欄の文字は、どこへ行く？非表示と取り外しを比べる
折りたたんだ画面の入力が残る理由を、StoryDiaryの実コンポーネントで確認しました。画面に見えないこと、DOMから取り外すこと、サーバーへ保存することを分けます。
- 知る・学ぶわかったつもりの、その先へ
大きな文字と見出しは同じ？記事の目次ができるまで
見出しは見た目だけでなく、文章の構造を表します。実CMSの本文描画と目次関数へ架空ブロックを渡し、h2・h3、目次に載る条件、段落挿入で変わるIDを確認しました。
- 知る・学ぶわかったつもりの、その先へ
同じクラス名でも見た目が混ざらない？CSS Modulesの範囲を確かめる
二つのCSSファイルに同じheaderがあっても、生成後の名前は別になります。実プロジェクトのCSSを専用ページでビルドし、名前の分離と、通常のCSSが届く範囲を整理しました。
- 知る・学ぶわかったつもりの、その先へ
押すとすぐ変わるのに、保存はまだ？お気に入りで学ぶ楽観的UI
お気に入りの表示がすぐ変わっても、通信が完了したとは限りません。実際の更新処理を模擬通信で動かし、先に表示を変える仕組みと失敗時の戻し方を確かめました。
- 知る・学ぶわかったつもりの、その先へ
ダイアログの中を押しても閉じないのはなぜ？クリックの伝わり方
背景を押すと閉じるのに、中のボタンを押しても閉じない。実Modalを専用ページで動かし、イベントの伝播と、閉じる処理を直接呼ぶ経路を確認しました。
- 知る・学ぶわかったつもりの、その先へ
画面が見えることと、ボタンが動くことは同じ？HTMLとhydration
Client Componentにも、最初のHTMLに含まれる表示があります。専用Next.jsページの生成HTMLと、ブラウザーで反応するボタンを比べ、初期表示と操作処理を分けて確認しました。
- 開発記録
118品の料理イラストをどう描く？共通部品で作るSVGの制作記録
皿・茶碗・葉を共通部品にしながら、料理らしい形を残す。「何食べたい」の118品の対応表とオムライスの構成から、SVGイラストの作り方を紹介します。
- 開発記録
挙げ録の開発記録｜入力は2つ、保存できた分だけ積み上がる設計
重さと回数だけの入力を、正確な保存と気持ちのよい反応につなぐには。挙げ録の入力設計、日別・期間別の集計、保存成功後の演出、通信の再送と小数の扱いを実装に沿って紹介します。
- お知らせ
2択を10回選ぶだけ！食事提案アプリ「何食べたい」を公開しました
「何食べたい？」に迷う時間を少しだけ前へ進める、2択の食事提案アプリ「何食べたい」を公開しました。昼・夜を選び、食べたい料理を10回答えるだけ。選びやすさ、提案の仕組み、自作イラストの工夫を、公開時の制作記録とその後の更新を分けて紹介します。
- お知らせ
罰ゲーム抽選アプリ「誰がアウト？」を公開しました！
グループで匿名の言葉を送り、その日のOUTを決める「誰がアウト？」を公開しました。 基本的な使い方と、本文を保存しない設計、再現可能な判定、複数人の進行同期など、開発で工夫した点を紹介します。
- 開発記録
share&doのUI設計｜TODOの追加・編集・完了を迷いにくくする4つの工夫
share&doの実画面を見ながら、一覧に編集・削除を常設しない理由、タイトルから詳細を開く構成、完了欄と長押し並べ替えの判断、現在残る制約を紹介します。
- お知らせ
APPLI PARKのTOPページを公開しました
Appli ParkのTOPページを公開しました。どんな場所にしたいのか、デザインや導線で大切にしたことをご紹介します。