フロントエンド

2026

2025

フロントエンド

CSS の HSL で色を書こう！（そしてより良い方法）

Web開発において、従来の HEX や RGB の色表現は広く使われているものの、読みやすさや直感性に欠ける問題があり、P3 のような広色域では表現力にも限界がある。HSL（色相、彩度、明度）は、より直感的に色を定義できる方法であり、開発者が色を理解し調整しやすくしてくれる。HSL は色相・彩度・明度の3つの軸で色を表すため、特にデザインシステムにおいて、カラーパレットの明度変化をより自然に扱える。

2024

フロントエンド

近況

皆さんに、私が今後行いたい実験についてシェアしたいと思います。ソフトウェア開発やフロントエンドに入って、もうすぐ第一の十年を迎えます。フロントエンドが百花繚乱の戦国時代を経て、今後のフロントエンドの変化や気づきはとても有意義でした。ブログではすでに多くの記事を共有していますが、実はまだ書きたいことがたくさんあります。

2023

フロントエンド

HTML semantic タグより大事なこと

身為一位前端工程師，雖然我們不需要把全部的 HTML 標籤背得滾瓜爛熟，但是常見的 HTML 標籤與使用場景還是要有一定程度的了解，根據不同場景使用。 但是，使用語意化標籤的目的是什麼？我發現很多文章對於語意化標籤往往只停在表面，也就是討論某某標籤應該使用在哪裡，導致網頁上的標籤看似多彩繽紛，但使用者體驗卻沒有得到相對的提升。

2022

フロントエンド

HTMLとCSSは多くの問題を解決できますが、JavaScriptも非常に重要です。

2017年に、HTML/CSSを使用して実現できるさまざまなレイアウトのテクニックについて共有された記事を読みました。初めて読んだ時、共感を覚え、当時知らなかったテクニックも学びましたので、皆さんにもおすすめです。JavaScriptはほとんどの問題を解決できますが、アクセシビリティの観点やパフォーマンス、バンドルサイズの観点から見ると、CSSで解決できる方が良いです。ただし、JSを使用しないことは完全に使用しないことを意味せず、両者にはいくつかの違いがあります。この記事では、再度上記の記事を読み直し、改善できると思われる点を指摘します。
フロントエンド

配置に役立つ擬似クラス

CSSのレイアウトを行う際には、対応するCSSスタイルを使用して処理を行います。場合によってはJavaScriptを使用する必要がありますが、実際にはCSSには多くの疑似クラスが存在し、これらをうまく活用することでCSSを簡素化し、不要なJavaScriptの実装を減らすことができます。また、過去とは異なり、ごく少数のブラウザのみがサポートしていたということもなくなりました。
フロントエンド

Sentry の Web Vitals を slack に統合する

現在、多くのウェブサイトでは、Web Vitalsの測定プロセスが導入されており、指標を定量化して改善すべき箇所を見つけることができます。しかし、あまり知られていないのは、Sentryが以前にもWeb Vitalsの統計機能を導入していたことです。この機能では、LCP、FP、CLSなど、Web Vitalsの各指標を統計することができ、開発者はバックエンドで関連するグラフを確認したり、平均値を表示することができます。非常に便利です。
フロントエンド

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

UIの観点から見ると、フロントエンドとモバイル開発は似たような問題に直面することがあります。使用される言語や開発手法は異なるかもしれませんが、私たちは使いやすいユーザーインターフェースを作る必要があります。そのため、コンポーネントベースの開発、状態管理、データフロー、副作用の管理（APIまたはIOなど）など、私にとっては相互学習に適した領域です。

2021

フロントエンド

フロントエンド不安症

本記事は、私の視点や考えを表現するものであり、同業者に対する批判の意図はありません。私は現在、フロントエンドの領域（ここではウェブ開発を指します）が徐々に成熟してきており、フロントエンドフレームワークはコンポーネントベースの中心思想とレスポンシブメカニズムを採用し、フレームワーク固有の文法や開発手法、哲学と組み合わせることで、ほとんどの使用シナリオに対応できると考えています。
フロントエンド

ブラウザでArduinoを使用して温湿度を読み取る方法 - Web Serial API

Google Chrome 89では、Web Serial APIが導入され、ブラウザのAPIを介して外部デバイスと直接やり取りすることができます。これには、USBデバイスやシリアルインターフェースを持つBluetoothデバイスなどが含まれます。これにより、ブラウザはハードウェアと直接通信することができます。
フロントエンド

HTML を組み合わせてどのフォームデータかがわかる

フォームはウェブページの一般的なアプリケーションで、プレーンテキストの転送だけでなく、ファイルのアップロードも可能です。しかし、フォームの振る舞いは他の伝達方法とは異なるため、疑念や誤解が生じることがあります。この記事では、仕様の詳細を理解し、フォームが最終的に何をするのか、フォームが他の転送方法とどのように異なるのかを理解し、最後に、フォームタグの背後でHTMLが何をするのかを説明します。
フロントエンド

Svelte の深い理解 (2) — Svelte 生成コードの分析

Svelte の核となるコンセプトから、Svelte はコンパイルプロセスからできるだけ多くの情報を取得し、ダイナミックのオーバーヘッドを削減したいと考えています。前回の記事では、Svelte のコンパイルからコード生成までの仕組みを説明しました。今日は、Svelte が生成したコードがどのように機能するかを見てみましょう。
フロントエンド

Svelte (0) についての深い理解—抽象構文ツリーとは?

この連載記事では、読者にSvelteのコンパイルメカニズムとコード生成についてより深く理解してもらうことを目的として、Svelteの原則の実装について探ります。Svelte のコンパイルプロセスにはコードの解析が含まれるため、この記事では抽象構文ツリーとは何かを説明し、さらに抽象構文ツリーの役割と重要性について説明します。

2020

フロントエンド

ホットワイヤーとターボリンク

Turbolinks は Ruby on Rails で通常使用される JavaScript パッケージです (ライブラリとしてのみ使用できます)。主に HTML を取得して、リクエストと CSS を再送信するコストを回避します。実際、「JavaScriptを使用する必要がない」というのは完全に正しいわけではなく、JavaScriptはまだありますが、ライブラリで自動的に行われるため、JavaScriptを書かなくても開発できます。
フロントエンド

SSR のシナリオの考え方と使用方法

ブラウザが Web ページをクロールすると、クローラーはページの HTML コンテンツをクロールしてコンテンツを生成し、それをデータベースにキャッシュして定期的に更新します。つまり、SSR が実装されていない場合、html ファイル自体は空白になり、JavaScript が解析されて実行されるまで、実際のページは表示されません。
フロントエンド

スヴェルトサミット 2020 ノートとエクスペリエンス

Svelteは私のお気に入りのフロントエンドフレームワークの1つで、シンプルな構文と柔軟性、作者の哲学、そしてさまざまなアニメーションやカットシーンの使用がとても好きになりました。Svelteに対する彼らの見解について以前にいくつかの記事を書いたことがあります。Svelte Summitは2020年10月18日に開催され、パンデミックがオンラインで生放送され、合計7時間、17回のスピーチが行われました。ここでは、興味深いスピーチと私自身の経験を記録します。

2019

フロントエンド

ディープフロントエンド開発

フロントエンドの開発記録にいくつかのことを載せることができると期待していましたが、まだ始められていませんでした。アイアンマンレースを利用して、すべてが一気に整理されました。シリーズはいくつかのパートに分かれており、今後もそれについて書き続ける機会があります。JavaScriptの基本 ECMAScriptを使ったJavaScriptの紹介...
フロントエンド

オーバーフローアンカーによるボトムコンポーネントへのピンの実装

この記事は、「ピンから下までスクロールする要素を CSS だけで実装する」と説明し、JavaScript の使用方法を説明します。ページが表示される頻度が高くなるほど、新しいコンテンツが追加されるたびにスクロールが一番下に移動するようになりました。ツイッチのように...
フロントエンド

IdleCallbackをリクエスト-空き時間を有効に活用してください

多くのウェブページには、実行すべきさまざまなスクリプトがあります。もちろん、優先順位はあります。たとえば、UI のレンダリング、関連するインタラクティブイベントの登録、データ取得のための API の呼び出しなどは、比較的重要でないタスク（分析スクリプト、遅延読み込み、初期化の比較など）など、優先度の高いタスクです。アイドル状態のカウント方法...

2018

2017

フロントエンド

ユーザーフレンドリーなテーブルの設計方法

テーブルは見事なビジュアルとして使われていないことを認識してください。最近ではバックグラウンドでテーブルを頻繁に使用する必要があり、ユーザーにとって適切なテーブルをデザインする方法が課題です。特にデータペンが多く、フィールドが多い場合、ユーザーは追加の要素に引き付けられやすくなります。実際には、テーブルにデータをレンダリングするために...
フロントエンド

フロントエンド面接体験

最後に、最近の面接プロセスを整理しましょう。私たちが目にしたことをいくつかまとめてください。通常、企業インタビューでは、主にアルゴリズムやプロトタイプチェーンの解釈などに関するJavaScriptの知識をテストするだけで、DOMやイベントの操作を調べることはほとんどありません。クラスやIDの優先順位などの基本的な質問があっても、CSSはほとんどありません。面接試験の HTML はありません...
フロントエンド

まったく同じタイプセッティングソリューション

フロントエンドページでは、同じ高さを必要とするレイアウトに出くわすことがよくあります。これを行う最も直感的な方法は、コンテナーのすべての要素をfloatまたはinline-blockに設定することです。floatとinline-block floatタイプセッティングを使用する場合、親要素のコンテナ（clearfix）をストレッチするだけでなく、子要素にもマージンを設定します...

2016