フロントエンド

2026

2025

フロントエンド

CSS の HSL で色を指定しよう！（そして、さらに優れた方法について）

Web開発において、従来の HEX や RGB による色表現は広く使われているものの、可読性に乏しく直観的でないという課題があり、P3 のような広色域のカラースペースでの表現力にも限界がある。HSL（色相・彩度・輝度）はより直感的な色の定義方法を提供し、開発者が色をより簡単に理解・調整できるようにする。HSL は色相、彩度、輝度の3つの次元で色を表現するため、色調整がより人間にとって扱いやすくなり、特にデザインシステムにおいてカラーパレットの明度変化をうまく表現できる。

2024

フロントエンド

近況

僕がこれから挑戦してみたい実験について共有したいと思う。僕がソフトウェア開発やフロントエンドの世界に入ってから、もうすぐ最初の10年を迎えようとしている。フロントエンド百花繚乱の戦国時代を経験したことは、その後のフロントエンドの変化や気づきを理解する上で大いに役立っている。ブログではすでに多くの記事をシェアしてきたけれど、実のところ、まだ書ききれていない共有したいことがたくさんある。

2023

フロントエンド

セマンティックタグよりも大切なこと

フロントエンドエンジニアとして、すべてのHTMLタグを暗記する必要はないものの、よく使われるHTMLタグやその利用シーンについては一定の理解を持ち、状況に応じて使い分ける必要がある。しかし、セマンティックタグを使う目的とは何だろうか？セマンティックタグに関する記事の多くは表面的な議論、つまり「どのタグをどこで使うべきか」にとどまっていることが多いと僕は感じている。その結果、ウェブページ上のタグは見かけ上多彩になったものの、ユーザー体験はそれに見合って向上していないのが現状だ。

2022

フロントエンド

HTMLとCSSは多くの問題を解決できるが、JSもまた重要だ

2017年に、HTML/CSSだけで実現できるさまざまなレイアウトテクニックを紹介する記事を読んだ。最初に読んだときは深く共感し、当時まだ不慣れだった多くのテクニックを学べたので、とてもおすすめしたい記事だ。JavaScriptはほぼ大半の問題を解決できるが、アクセシビリティ、パフォーマンス、バンドルサイズの観点から見れば、CSSで解決できるに越したことはない。しかし、「JSを極力使わない」ことは「JSを一切使わない」ことと同義ではなく、この両者には明確な違いがある。この記事では、前述の記事を改めて読み返し、僕が改善できると考えるポイントをいくつか挙げていく。
フロントエンド

レイアウトに役立つ疑似クラス

CSSでレイアウトを組む際、スタイルに応じてCSSを調整したり、場合によってはJavaScriptを使って実現したりすることもある。だが実は、CSSの疑似クラス（pseudo-classes）を上手く活用すれば、CSSをシンプルにし、不要なJavaScriptの実装を減らすことができる。しかも、かつてのように一部のブラウザしか対応していないということもなくなっている。
フロントエンド

フロントエンドの視点から見る SwiftUI

UIの観点から見ると、フロントエンドとモバイル開発が直面する課題は似ている。使われる言語や開発手法は違っても、使いやすいユーザーインターフェースを作り上げる必要がある点では同じだ。そうであるなら、コンポーネント指向開発、状態管理、データフロー、副作用（APIやI/O）の管理など、お互いに似たような問題に直面する。僕にとって、この二つは互いに学び合うのに非常に適した領域だ。

2021

フロントエンド

フロントエンド不安症

この記事はあくまで僕自身の観点と考えを述べるものであり、同業者を批判する意図は一切ない。現在のフロントエンド領域（ここではWeb開発を指す）は成熟しつつあり、フロントエンドフレームワークはコンポーネント化という中核思想とリアクティブな仕組みを採用し、独自の構文や開発手法、哲学を組み合わせることで、大半のユースケースに対応できるようになっていると僕は考えている。
フロントエンド

HTMLにおけるForm Dataを理解する

フォームはウェブにおいて非常によく使われる機能であり、プレーンテキストの送信だけでなく、ファイルアップロード機能も実現できる。しかし、formの挙動は他のデータ送信方法とやや異なるため、時に疑問や誤解を生むこともある。この記事では、仕様を読み解きながら経緯を整理し、formの背後で実際に行われている処理や、フォームと他の送信方法との違いについて深く理解していく。最後にHTMLのformタグが裏で何を行っているのかについても触れる。
フロントエンド

Svelteを深く理解する（2）— Svelteが生成するコードの分析

Svelteのコアコンセプトからわかるように、Svelteはコンパイルプロセスから必要な情報を可能な限り取得し、ランタイムのオーバーヘッドを削減することを目指している。前回の記事ではSvelteがコンパイルからコード生成までどのように動作するのかを説明したが、今回はSvelteが生成したコードがどのように動作しているのかを観察してみよう。
フロントエンド

Svelte を深く理解する（0）— 抽象構文木とは何か？

この一連の記事では Svelte の原理と実装の探求を中心とし、読者が Svelte のコンパイルメカニズムとコード生成をより深く理解できるようにすることを目指している。Svelte のコンパイルプロセスにはコード解析が含まれるため、この記事ではまず抽象構文木とは何かについて議論し、抽象構文木が果たす役割と重要性を詳しく説明していく。

2020

フロントエンド

HotwireとTurbolinks

TurbolinksはJavaScriptパッケージであり、通常はRuby on Railsと一緒に使われる（単体のライブラリとして使うことも可能だ）。主にHTMLをfetchして直接差し替える手法によって、通常のページ遷移に伴う再リクエストやCSSのコストを回避する。「JavaScriptを使う必要がない」と言うのは厳密には正しくない。JavaScript自体は存在しており、ライブラリ側ですでに処理してくれているため、開発時にJavaScriptを書かなくて済むというだけのことだ。
フロントエンド

SSR に対する考察とユースケース

ブラウザのクローラーが Web ページをクロールする際、HTML の内容を読み取ってインデックスを生成し、データベースにキャッシュを保存して定期的に更新する。つまり、SSR を実装していない場合、HTML ファイル自体は真っ白であり、JavaScript がパースされて実行されるまで実際のページを見ることはできない。
フロントエンド

Svelte Summit 2020 の感想

Svelte は僕がかなり気に入っているフロントエンドフレームワークの一つだ。シンプルな構文と柔軟性、作者の理念、そして多彩なアニメーションやトランジションの使い勝手など、どれも非常に気に入っている。以前にも Svelte に対する僕の考えをいくつか書いたことがある。今回の Svelte Summit は 2020 年 10 月 18 日に開催され、コロナ禍の影響により全編オンライン生配信という形で行われ、計 7 時間、17 のセッションがあった。ここでは僕が面白いと感じたいくつかのセッションと自分なりの感想を記録しておく。
フロントエンド

React 17 アップデートのポイント - useEffect のクリーンアップ関数の実行タイミングの変更

React 17 のリリースには重大な更新や新機能は含まれていないが、useEffect のクリーンアップ関数の実行タイミングがひっそりと変更された。この記事では、すべてのアップデートを逐一解説するのではなく、記事の中で特に注目すべきポイントを僕が記録しておく。
フロントエンド

テクノロジーは常に人のためにある（Svelte Society: Frequently Asked Questions メモ）

僕が新しいライブラリを研究するとき、同時にその人のことも調べる（もちろん全員ではない、そうでなければ npm install 1回で一生かかってしまうだろう）。技術の創作者は人であり、ライブラリの創作者も人、フレームワークの創作者も人、みんな血が通い、感情を持った人間だからだ。

2019

フロントエンド

フロントエンド開発を深掘りする

以前からフロントエンド開発に関する知見を記録しておきたいと思っていたが、なかなか着手できずにいた。そこで鉄人レースの期間を利用して一気にまとめ上げた。このシリーズはいくつかのパートに分かれており、今後機会があれば続きを書いていくつもりだ。JavaScriptの基礎、JavaScriptとECMAScriptについての簡単な考察…
フロントエンド

requestIdleCallback - アイドル時間を有効活用する

多くのWebページではさまざまなスクリプトを実行する必要があり、当然それらには優先度が存在する。例えばUIのレンダリング、インタラクションイベントの登録、APIを呼び出してデータを取得することなどは優先度の高いタスクだ。一方で、アナリティクスのスクリプト、遅延読み込み（lazy loading）、それほど重要でないイベントの初期化などは優先度の低いタスクとなる。何をもってIdle（アイドル）とするのか…

2018

2017

フロントエンド

適切なテーブルをデザインする方法

一つの事実を認識しておこう。table は閲覧するためのものであり、派手なビジュアルのために使うものではない。最近、管理画面でテーブルを扱う要件が増えており、ユーザーにとって使いやすい table をどうデザインするかは一つの挑戦だ。特にデータ件数やカラム数が多い場合、ユーザーは余計な要素に気を取られやすくなる。実のところ、データの提示において table は…
フロントエンド

2017年フロントエンド面接体験記

ようやく最近の面接の振り返りをまとめる時間ができた。まず見えてきたことを総括しておくと：通常、企業の面接ではJavascriptの習熟度ばかりが問われ、その多くはアルゴリズムやプロトタイプチェーンの解説などで、DOMやEventの操作が問われることは滅多にない。CSSはほぼ出題されず、あってもclassやIDの優先順位を判定するような基本問題程度。HTMLの面接は…
フロントエンド

高さを揃えるレイアウトの解決策

フロントエンドのページでは、要素の高さを揃えるレイアウトが必要になることがよくある。最も直感的な方法は、コンテナ内のすべての要素を float や inline-block に設定することだ。float レイアウトを使う場合、親要素のコンテナを押し広げる（clearfix）必要があるだけでなく、子要素に margin を設定する必要もある…

2016