フロントエンド用語集

Flexbox や Grid で、主軸と直交する方向の揃え方を親から指定する CSS プロパティ。縦方向の中央揃えで最もよく使われます。

CSSで指定した幅にpaddingとborderを含めるかを切り替えるプロパティ。レイアウトが1pxずつずれる原因を根本から消せます。

CSSの中で値に名前を付けて使い回す仕組み。色や余白を一か所にまとめ、テーマ切り替えやブランド色の変更を一行の書き換えで済ませるために使います。

Node.js で CSV を読み解くための定番ライブラリ。引用符や改行を含む値も規則どおりに扱え、大きなファイルをストリームで処理できます。

Node.js で Web サーバーや API を書くための軽量フレームワーク。ルーティングとミドルウェアという二つの仕組みだけを提供します。

Flexbox の子要素を 1 行に押し込むか、はみ出す分を次の行へ送るかを決める CSS プロパティ。画面幅で崩れないカード並びの要になります。

要素の中身を HTML 文字列として読み書きするプロパティ。手軽な反面、外部由来の文字列を渡すと XSS の入口になります。

Flexbox や Grid で、主軸の方向へ子要素をどう並べるかを決める CSS の性質。余った空間の配り方を指定します。

要素の幅がそれ以上広がらない上限を決める CSS プロパティ。画面が広いときだけ効くので、レスポンシブな幅の調整に欠かせません。

start から stop までを等間隔に区切った値を、指定した個数だけ作る NumPy 関数。グラフの横軸や実験用のパラメータを一行で用意できます。

React が描画できる値を表す TypeScript の型。children を受け取る props の型として使い、要素も文字列も配列も許可できます。

Python プロジェクトが必要とする外部パッケージを列挙したテキスト。別の環境でも同じ組み合わせを再現するために置きます。

JavaScript に型の仕組みを足した言語。実行前に型の矛盾を検出でき、変換後はただの JavaScript なので動く場所は変わりません。

Reactの状態をlocalStorageと同期させる自作フック。画面の再読み込み後も、選んだ設定や入力内容を保ったままにできます。

見出しや段落、リンクといったWebページの意味と構造をタグで示す言語。ブラウザや検索エンジン、読み上げソフトに文書の中身を伝えるために書きます。

最初に読み込んだ 1 枚の HTML の上で、JavaScript が中身を差し替えて画面を切り替える Web アプリの作り方です。

React の状態や副作用の処理をまとめて取り出した、use で始まる自作の関数。同じ処理を複数の部品で使い回し、画面の記述を短く保つために作ります。

単語の切れ目を大文字で示す命名規則。userName のように空白を使えない識別子を読みやすく保つため、JavaScript や Java で広く使われます。

あとで呼び返してもらうために引数として渡す関数。通信が終わった時点の処理や、子から親へ値を通知したい場面で広く使われます。

見た目と振る舞いをひとまとめにした UI の部品。同じ形を何度も書き写さずに済み、余白や色を直すときも手を入れる場所が 1 か所にまとまります。

HTMLのどの要素をどう見せるかを指定する言語。色や余白、並べ方を本文と切り離して書き、画面幅に応じた表示の出し分けにも使います。

ブラウザの中で動いてページに振る舞いを与えるプログラミング言語。表示の書き換えや通信を担い、今はサーバー側の開発にも使われます。

タグの意味どおりに要素を選んで文書を組む書き方。見出しや領域の役割が機械に伝わり、読み上げソフトや検索エンジンが構造を把握できます。

HTMLの中から対象の要素を選び出す記法。CSSの装飾もJavaScriptからの取得も、同じ書式で対象を絞り込めます。

ブラウザがHTMLを木構造のオブジェクトとして持ち直したもの。JavaScriptから要素を探して書き換え、ページを読み込み直さずに画面を変えるために使います。

受け取ったpropsを見た目に変換することだけを担うReactの部品。通信や状態を持たないぶん、使い回しとテストが楽になります。

1つのHTMLのまま画面幅に応じて段組みや文字サイズを切り替える作り方。PC用とスマホ用にページを分けずに済ませられます。

値の型が合わない操作を、実行する前の段階で検出できる状態のこと。TypeScript の型検査は、この状態を作るために働きます。

API のリクエストやレスポンスの型を、フロントとバックエンドで同じ定義から参照する手法。片方だけ直したときのずれをコンパイル時に検出できる。

型注釈を書かなくてもコンパイラが値から型を割り出す仕組み。記述量を減らしながら、型チェックの恩恵はそのまま受けられます。

React が各ブラウザの DOM イベントを包んで揃えたイベントオブジェクト。onClick などの引数として渡り、ブラウザ差を意識せず処理を書けます。

state や props が変わったとき、React がコンポーネント関数をもう一度実行して画面を更新する動き。遅さの原因を追うときの起点になります。

システムの中で何が起きたかを外から確かめられる性質。障害の原因追跡やAIの判断根拠の説明など、結果だけでなく過程を見せる設計を指します。