How to
サンプルコード
「○○するには」を各言語のコードサンプルで。タスク 25 件・CSS サンプル 14 件。
言語から探す
テーマから探す
カードの実行確認 n/7は、7 言語のうち n 言語のコードを実際に実行して出力を確認したことを表す。残りは構文と公式 API ドキュメントで確認している。CSS の実行確認済みは、ブラウザで実際に描画して見た目を確認したものである。
ファイル操作
ディレクトリ内のファイル一覧を取得するには
ディレクトリ直下のファイル名を取り出す基本形を各言語で示す。サブディレクトリを除く判定と、返る値が名前かパスかの違い、並び順が保証されない点まで扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 5/7
ファイルが存在するか調べるには
ファイルの有無を調べる基本形を各言語で示す。ディレクトリと区別する判定と、確認してから開くまでの間に状態が変わりうる点まで扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 3/7
ファイルを読み込むには
テキストファイルを読み込む基本形を各言語で示す。文字化けを避けるエンコーディング指定までを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 3/7
ファイルに書き込むには
テキストファイルへ書き込む基本形を各言語で示す。上書きと追記の違い、文字化けを避けるエンコーディング指定までを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 3/7
文字列
文字列が含まれるか調べるには
ある文字列の中に別の文字列が含まれるかを判定する基本形を各言語で示す。大文字小文字を区別するかどうかの既定値が言語ごとに違う点と、見つからなかったときの返り値の形までを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 6/7
文字列を分割するには
区切り文字で文字列を配列（リスト）へ分ける基本形を各言語で示す。分割回数を制限する第2引数の意味が言語ごとに違う点と、区切りが正規表現として解釈される言語までを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 4/7
文字列の前後の空白を除去するには
入力の前後に付いた空白・タブ・改行をまとめて落とす基本形を各言語で示す。引数を渡す形が「除去する文字の集合」であって前置詞ではない点と、全角スペースを消せるかどうかの差までを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 5/7
文字列を置換するには
文字列内の部分文字列を別の文字列へ置き換える基本形を各言語で示す。全置換と最初の1回だけの置換、引数が正規表現として解釈される罠までを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 3/7
配列・コレクション
配列から重複を除くには
配列（リスト）から重複した要素を取り除く基本形を各言語で示す。出現順を保つ書き方と、順序を捨てて集合に変換する書き方の違いまでを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 6/7
配列を文字列に連結するには
配列（リスト）の要素を区切り文字でつないで 1 本の文字列にする基本形を各言語で示す。要素が文字列でない場合の扱いが言語ごとに違う点までを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 5/7
配列を条件で絞り込むには
配列（リスト）から条件に合う要素だけを取り出す基本形を各言語で示す。元の配列を変えずに新しい配列を返す点と、結果が遅延評価になる言語での扱いまでを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 5/7
配列をソートするには
配列（リスト）を昇順・降順やキー指定で並べ替える基本形を各言語で示す。破壊的か非破壊的か、JavaScript の既定が辞書順になる罠までを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 4/7
日付・時刻
2つの日付の差を求めるには
2つの日付・日時の差を取って日数や時間に直す基本形を各言語で示す。差が「期間を表す専用の型」で返る言語と、ミリ秒の数値で返る言語の違いと、日数へ丸めるときに切り捨てが起きる位置までを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 5/7
日付文字列を日付型にするには
「2026-08-14」のような文字列を日付・日時の型へ読み込む基本形を各言語で示す。書式を明示して読む書き方と、読んだ値にタイムゾーンが付くかどうかの差までを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 5/7
日付を書式付きの文字列にするには
日時の値を 2026-08-03 09:05:00 のような文字列へ変換する基本形を各言語で示す。書式指定子が言語ごとに全く違う点と、ロケールやタイムゾーンに引きずられて出力が変わる点までを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 3/7
現在時刻を取得するには
各言語で現在時刻を取得する基本形を示す。ローカル時刻と UTC のどちらが返るか、タイムゾーン情報を持つ値と持たない値の違いまでを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 3/7
HTTP通信
HTTPリクエストにヘッダーを付けるには
リクエストヘッダーを付けて HTTP を送る基本形を各言語で示す。クライアント全体の既定として持たせる書き方と、1 回のリクエストにだけ足す書き方の使い分けまでを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 4/7
HTTP POSTでJSONを送るには
各言語で JSON を本文に載せた POST を送り、Content-Type を明示して、返ってきた 2xx のレスポンスを読むところまでの基本形を示す。本文は原則としてその言語のシリアライザに任せ、標準ライブラリに JSON シリアライザを持たない言語だけを例外として扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 4/7
HTTP GETリクエストを送るには
各言語で HTTP GET を送り、ステータスコードを確かめてからレスポンス本文を読む基本形を示す。標準ライブラリで書ける範囲と、外部ライブラリが必要になる境目までを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 4/7
JSON
ネストしたJSONから値を取り出すには
パース済みの JSON から深い階層の値を取り出す基本形を各言語で示す。途中のキーが欠けていても落とさず既定値へ倒す書き方までを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 4/7
オブジェクトをJSON文字列にするには
オブジェクトや構造体を JSON 文字列へ変換する基本形を各言語で示す。整形の有無と、日本語などの非 ASCII 文字を既定でエスケープするかどうかの違いまでを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 3/7
JSONをパースするには
JSON 文字列やファイルを各言語のデータ構造へ変換する基本形を示す。パース失敗の扱いと、型が保証されない点への向き合い方までを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 3/7
環境変数・設定
環境変数を設定するには
プログラムの中から環境変数を設定する基本形を各言語で示す。設定が及ぶ範囲がそのプロセスと子プロセスに限られる点と、子プロセスにだけ値を渡す書き方までを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 5/7
.env ファイルを読み込むには
.env ファイルの内容を環境変数として読み込む基本形を各言語で示す。ライブラリを使う書き方と、ランタイム側に標準機能がある場合の使い分けまでを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 3/7
環境変数を読むには
各言語で環境変数を読み取る基本形を示す。未設定のときに既定値を与える書き方と、値が常に文字列で返る点への注意までを扱う。
対応言語: Python、JavaScript、TypeScript、Go、Rust、Java、C#
実行確認 4/7
CSS（ライブプレビュー付き）
CSS サンプル一覧を見る →テーブルの行を交互に色分けするには
tbody tr:nth-child(even) で偶数行だけに背景色を敷き、行を足しても縞模様が自動で追従するテーブルの基本形を示す。ホバー中の行を目立たせる指定も併せて扱う。
実行確認済み
背景をすりガラス風にぼかすには
backdrop-filter: blur() で要素の背後にあるものだけをぼかし、いわゆるすりガラス（フロストガラス）の見た目を作る基本形を示す。要素自身の中身はぼけない。
実行確認済み
吹き出しを作るには
疑似要素 ::after の border を使い、画像を足さずに吹き出しの三角形を描く基本形を示す。本体と三角形の色はカスタムプロパティで 1 箇所にまとめる。
実行確認済み
テキストを複数行で省略するには
display: -webkit-box と -webkit-line-clamp を組み合わせ、指定した行数を超えたテキストの末尾を … で省略表示する基本形を示す。
実行確認済み
区切り線の中央に文字を入れるには
「または」のようなラベルを挟んだ区切り線を、擬似要素と flex の余白分配だけで作る基本形を示す。線の長さを固定値で決めないため、文字数や画面幅が変わっても左右が自動で釣り合う。
実行確認済み
カードを自動で折り返して並べるには
grid-template-columns の repeat(auto-fit, minmax()) を使い、メディアクエリを書かずにカードを画面幅へ合わせて折り返す基本形を示す。列数はコンテナの幅から自動で決まる。
静的確認
読み込み中のスピナーを作るには
1 要素の border と @keyframes rotate だけで回転するスピナーを作る基本形を示す。画像も追加の DOM も要らないため、読み込み中の表示を最小のコストで用意できる。
実行確認済み
要素の縦横比を固定するには
aspect-ratio で要素の縦横比を宣言し、幅が変わっても 16:9 や 1:1 の形を保つ基本形を示す。高さを計算して指定しなくても、幅から高さが自動で決まる。
実行確認済み
バッジを要素の右上に重ねるには
position: absolute のバッジを、親に position: relative を与えてカードの右上へ重ねる基本形を示す。位置の基準になる祖先を明示しないと、バッジはページ全体を基準に飛んでいく。
実行確認済み
ヘッダーを上部に固定するには
position: sticky でスクロール領域の先頭にヘッダーを貼り付ける基本形を示す。スクロールしても見出しが消えないため、長い一覧でも今どこを見ているかが分かる。
実行確認済み
グラデーションのボタンを作るには
background に linear-gradient を指定し、角丸と余白を添えてグラデーションのボタンを作る基本形を示す。hover で明度を少し上げて押せる印象を出す。
静的確認
テキストを1行で省略するには
white-space・overflow・text-overflow を組み合わせ、1行に収まらないテキストの末尾を … で省略表示する基本形を示す。
静的確認
要素を中央に配置するには
flexbox の justify-content と align-items を使い、子要素を親要素の上下左右の中央に配置する基本形を示す。
静的確認
要素をふんわり浮かせるには
box-shadow でカードをふんわり浮かせる基本形を示す。ぼかし半径と透明度で浮き具合を調整する。
実行確認済み