JavaScript
JavaScript | 1 日 90 分 × 7 日アプリ学習：タイマーアプリ（初級編）
2026-03
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － クエリ削除
「クエリ削除」で本当にやりたいこと「クエリ削除」は、URL の ? 以降に付いているパラメータのうち、いらないものだけを取り除いて、新しい URL を作り直す処理です。例えば、こんなことをやりたい場面...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － クエリ取得
「クエリ取得」で何をしたいのかをはっきりさせるここでの「クエリ取得」は、URL の ? 以降（クエリ文字列）から、パラメータを取り出して使いやすい形にすることです。/search?q=JavaScri...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － クエリ生成
まず「クエリ生成」で何を自動化したいのかここで言う「クエリ生成」は、オブジェクト（連想配列）から ?key=value&key2=value2 みたいなクエリ文字列を、安全に・楽に作るユーティリティの...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － URL デコード
「URL デコード」で何を取り戻したいのかURL デコードは、URL の中で「%E3%81%82」みたいに変換されてしまった文字を、人間が読める元の文字列に戻すことです。エンコードは「安全に送るための...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － URL エンコード
まず「URL エンコード」で何を守りたいのかURL エンコードは、「URL の中に入れてはいけない（入れると誤解される）文字を、安全な形に変換すること」です。日本語やスペース、? や & などの記号を...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － flex-grow活用
flex-grow を理解すると「余った幅の配分」が思い通りになるflex-grow は、Flexbox の中でも 「余ったスペースをどの子要素にどれだけ渡すか」 を決めるプロパティです。「このボック...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － align-items全パターン
align-items を理解すると「縦方向の揃え」が一気に気持ちよくなるalign-items は Flexbox の中で、「交差軸（メイン軸と直角の方向）の揃え方」を決めるプロパティです。横並びな...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － justify-content全パターン
justify-content を理解すると「横方向の配置」が思い通りになるjustify-content は Flexbox の中でも、「子要素を横方向にどう並べるか」を決める超重要プロパティです。...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － Flexbox縦並び
Flexbox 縦並びを理解すると「縦方向レイアウト」が一気に整理されるFlexbox は横並びだけじゃなく、縦方向のレイアウト（縦積み・上下の余白調整・フッターを下に押し下げる）にもめちゃくちゃ強い...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － Flexbox横並び
Flexbox 横並びを理解すると「並べる・揃える・余白を配る」が一気に楽になる横並びレイアウトは、ナビメニュー、カード一覧、ボタンの並びなど、どのサイトでも必ず出てきます。Flexbox を使うと、...
C# C# Tips | コレクション・LINQ：件数カウント
はじめに：「件数カウント」は“システムの現状を数字でつかむ道具”業務システムでは、常に「いま何件あるか？」が問われます。未処理の件数エラー件数今日登録された件数これをコードで表現するのが「件数カウント...
C# C# Tips | コレクション・LINQ：グルーピング
はじめに：「グルーピング」は“バラバラの明細を、かたまりにまとめる技”業務システムでは、こんなことをよくやります。「部署ごとに社員をまとめたい」「顧客ごとに売上を集計したい」「日付ごとにアクセス数を集...
C# C# Tips | コレクション・LINQ：フィルタリング
はじめに：「フィルタリング」は“欲しいデータだけをすくい取る作業”業務システムの一覧画面って、だいたいこういう条件がありますよね。「部署＝営業だけ」「状態＝未処理だけ」「金額が 10,000 円以上だ...
C# C# Tips | コレクション・LINQ：ページング
はじめに：「ページング」は“データを一口サイズに切り分ける技”業務システムの一覧画面で、「1ページ 20件」「次へ」「前へ」といった UI をよく見ますよね。これが「ページング」です。データは何千件・...
C# C# Tips | コレクション・LINQ：カスタムソート
はじめに：「カスタムソート」は“業務ルールをそのまま並び順にする技”「優先度は High → Middle → Low の順」「ステータスは 未処理 → 処理中 → 完了 の順」「部署コードは A, ...
C# C# Tips | コレクション・LINQ：逆順ソート
はじめに：「逆順ソート」は“優先度の高いものを先頭に持ってくる技”業務システムでは「新しい順」「金額の大きい順」「重要度の高い順」のように、“大きいほう・新しいほうを先頭にしたい”場面がとても多いです...
C# C# Tips | コレクション・LINQ：ソート
はじめに：「ソート」は“人間が読みやすい順番に並べ替える作業”業務システムでは、一覧画面・帳票・CSV 出力など、「同じデータでも、どの順番で並んでいるか」がものすごく大事になります。社員一覧なら「社...
C# C# Tips | コレクション・LINQ：重複除去
はじめに：「重複除去」は“データをきれいに整えるフィルター”業務システムでは、同じ ID のレコードが二重に入っていたり、同じメールアドレスが何度も出てきたりと、「重複データ」がよく紛れ込みます。この...
C# C# Tips | コレクション・LINQ：空List生成
はじめに：「空List生成」は“安全な初期値”を手に入れるテクニック業務コードでよくあるパターンとして、List<string> names = null;// ここで落ちるint count = n...
C# C# Tips | コレクション・LINQ：null安全List
はじめに：「null安全List」は“落とし穴を先に埋めておく道具”業務コードでありがちな例として、List<string> names = null;// ここで落ちるforeach (var n ...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － 複数背景指定
複数背景指定を理解すると「1つの要素に何層ものデザイン」を重ねられるCSS の 複数背景指定（multiple backgrounds） は、1つの要素に 複数の背景画像・グラデーション・パターンを重...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － background-clip:text
background-clip:text を理解すると「文字にグラデーションを流し込む」表現ができるbackground-clip: text は、CSS の中でも“映えるデザイン”を作るための強力な...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － 背景クリッピング
background-clip（背景クリッピング）を理解すると「背景の見え方」を自在にコントロールできる背景クリッピング（background-clip）は、背景色や背景画像を“どこまで表示するか”を...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － outline活用
outline を使いこなすと「枠線とは違う強調」ができるoutline は border と似ていますが、ボックスモデルの外側に描画される“外枠”です。フォームのフォーカスリング、アクセシビリティ対...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － box-shadowパターン
box-shadow パターンを理解すると「立体感・奥行き・質感」が一気にプロレベルになるbox-shadow は、ただの影ではありません。UI の雰囲気・奥行き・軽さ・重さ・浮遊感をコントロールする...
Java Java | Web 基礎・HTTP・REST：Web 全体像 － SPA と MPA
SPA と MPA を一言でいうとSPA は Single Page Application（シングルページアプリケーション） の略で、「最初に 1 つのページを読み込んだあと、画面の中身だけを Ja...
Java Java | Web 基礎・HTTP・REST：Web 全体像 － フロントエンド / バックエンド
フロントエンド / バックエンドを一言でいうとフロントエンドは「ユーザーの目に見える“表側”」。バックエンドは「見えないところで動いている“裏側の頭脳と心臓”」。あなたが Java で書くのは、基本的...
Java Java | Web 基礎・HTTP・REST：Web 全体像 － 3 層アーキテクチャ
3 層アーキテクチャを一言でいうと3 層アーキテクチャは、「Web アプリを 3 つの役割にきれいに分けて作ろう」という設計の型 です。プレゼンテーション層（画面・API の入り口）アプリケーション層...
Java Java | Web 基礎・HTTP・REST：Web 全体像 － 動的コンテンツ
動的コンテンツを一言でいうと動的コンテンツは、「リクエストのたびにサーバー側で中身を“その場で作って返すコンテンツ」 です。誰がアクセスしたかいつアクセスしたかどんな条件でアクセスしたかによって、返す...
Java Java | Web 基礎・HTTP・REST：Web 全体像 － 静的コンテンツ
静的コンテンツを一言でいうと静的コンテンツは、「サーバー側で中身が変わらないファイルを、そのままブラウザに配るもの」です。HTML、CSS、画像（PNG/JPEG）、JavaScript ファイル、P...
Java Java | Web 基礎・HTTP・REST：Web 全体像 － アプリケーションサーバー
アプリケーションサーバーを一言でいうとアプリケーションサーバーは「ビジネスロジックを本気で動かすための“Java 実行プラットフォーム”」だと思ってください。Web サーバーが「HTTP を受け取って...
Java Java | Web 基礎・HTTP・REST：Web 全体像 － Web サーバーとは
Web サーバーを一言でいうとWeb サーバーは、「ブラウザ（クライアント）からの HTTP リクエストを受け取り、HTTP レスポンスを返す“受付兼配達係”」です。ブラウザが「このページください」「...
Java Java | Web 基礎・HTTP・REST：Web 全体像 － ブラウザの役割
ブラウザの役割を一言でいうとブラウザは、「人間と Web の世界をつなぐ“通訳兼プレイヤー”」です。人間が URL を入力したりボタンを押したりすると、ブラウザがサーバーに HTTP リクエストを送り...
Java Java | Web 基礎・HTTP・REST：Web 全体像 － クライアントとサーバー
クライアントとサーバーを一言でいうとクライアントとサーバーは、「お願いする側」と「応える側」です。ブラウザやスマホアプリが クライアント、そのリクエストを受け取って処理するのが サーバー。Web の世...
Java Java | Web 基礎・HTTP・REST：Web 全体像 － Web アプリの仕組み
Web 全体像をざっくりつかむまずは「ブラウザで URL を開くと、裏で何が起きているのか」をイメージでつかみましょう。あなたがブラウザに と入力して Enter を押すと、ブラウザは「サーバー」に対...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － 排他制御の考え方
排他制御を一言でいうと排他制御（はいたせいぎょ）は、「同時に走ると困る処理を、“必ず1つずつしか動かさないようにする考え方” です。非同期処理が増えてくると、「同じデータを同時に書き換える」「同じ処理...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － 競合状態（Race Condition）
競合状態（Race Condition）を一言でいうと競合状態（Race Condition）は、「どっちの非同期処理が先に終わるかによって、結果が変わってしまう危険な状態」 です。コード上は「こう動...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － 非同期状態管理
「非同期状態管理」を一言でいうと非同期状態管理は、「今この非同期処理が、どの状態にいるのかをコードと UI で一貫して扱うこと」 です。例えば、API 呼び出しひとつ取っても、状態はざっくりこう変わり...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － WebSocket との比較
WebSocket とポーリングの違いを一言でまとめるとポーリングは 「クライアントが定期的にサーバーへ様子を見に行く」 方式。WebSocket は 「サーバーとクライアントが常時つながり、サーバー...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － ポーリング
ポーリングを一言でいうとポーリング（polling）は、「サーバー側の状態が変わったかどうかを、クライアント側から定期的に“様子見”しに行く仕組み」です。サーバーから「変わったよ！」と通知してくれるの...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － スロットリング
スロットリングを一言でいうとスロットリング（throttle）は、「どれだけ連続でイベントが発生しても、“一定間隔ごとにしか処理を実行させない”テクニック です。スクロール、マウス移動、リサイズなどは...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － デバウンス
デバウンスを一言でいうとデバウンスは、「連続して何度も呼ばれる処理を、“最後の1回だけ”にまとめるテクニック」 です。ユーザーがキーボードを連打したり、入力ボックスに高速で文字を打ち込んだりすると、イ...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － キャンセル処理（AbortController）
キャンセル処理（AbortController）を一言でいうとAbortController は、「一度投げた非同期処理（特に fetch）を、あとから“やっぱりやめる”と止めるための仕組み」 です。...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － 多重送信防止
多重送信防止を一言でいうと多重送信防止は、「ユーザーが同じ操作を連打しても、サーバーには“1 回分だけ”しか飛ばさないようにする仕組み」 です。非同期処理（特にフォーム送信やボタン押下）では、ユーザー...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － ローディング表示
ローディング表示を一言でいうとローディング表示は、「今、アプリはちゃんと動いているよ。止まっているんじゃなくて“待っているだけ”だよ」とユーザーに伝えるためのサインです。非同期処理（fetch / A...
TypeScript TypeScript | 関数・クラス・ジェネリクス：ジェネリクス基礎 － 明示的に型を指定するケース
ゴール：「ふだんは推論に任せる。でも“ここだけは型を言語化したい”場面を見抜けるようになる」ジェネリクスは基本的に「型推論に任せる」のが正解です。それでも、あえて <T> を書いた方がいい場面がいくつ...
TypeScript TypeScript | 関数・クラス・ジェネリクス：ジェネリクス基礎 － 関数とジェネリクスの推論
ゴール：「<T> を書かなくても、勝手に T を決めてくれる感覚をつかむジェネリクスの一番おいしいところのひとつが、「型パラメータをほとんど書かなくていい」ことです。TypeScript が、関数の引...
TypeScript TypeScript | 関数・クラス・ジェネリクス：ジェネリクス基礎 － デフォルト型パラメータ
ゴール：「毎回 <T, string> と書かなくても済む“親切なジェネリクス”を書けるようになるデフォルト型パラメータは一言でいうと、「ジェネリクスに“デフォルトの型”を用意しておく仕組み」です。関...
TypeScript TypeScript | 関数・クラス・ジェネリクス：ジェネリクス基礎 － 制約付きジェネリクス関数
ゴール：「なんでも T」ではなく「こういう T だけOK」を自分でコントロールできるようになる制約付きジェネリクス関数は一言でいうと、「ジェネリクスの“自由さ”に、ちょっとだけ“条件”を足した関数」で...
TypeScript TypeScript | 関数・クラス・ジェネリクス：ジェネリクス基礎 － 型パラメータの制約（extends）
ゴール：「T はなんでもアリ」から「T は“こういう型だけ”に絞る」感覚をつかむジェネリクスに制約（extends）をつける一番の目的は、「T はなんでもいいわけじゃなくて、“この条件を満たす型だけ”...
TypeScript TypeScript | 関数・クラス・ジェネリクス：ジェネリクス基礎 － 複数型パラメータ
ゴール：「T だけじゃ足りないときに、自然に型パラメータを増やせるようになる」ジェネリクスに慣れてくると、「T だけじゃ足りないな…もう1種類、型を扱いたい」という場面が必ず出てきます。複数型パラメー...
TypeScript TypeScript | 関数・クラス・ジェネリクス：ジェネリクス基礎 － ジェネリクスとanyの違い
ゴール：「どっちも“なんでも受け取れる”のに、なぜジェネリクスが偉いのか」を腑に落とすジェネリクスも any も、一見どちらも「どんな型でも受け取れる」ように見えます。だからこそ初心者ほどこう思いやす...
TypeScript TypeScript | 関数・クラス・ジェネリクス：ジェネリクス基礎 － 型パラメータの命名規則
ゴール：「T って何？を“意味のある名前”にできるようになる」ジェネリクスを書き始めると、まず最初に出てくる疑問がこれです。「T って、なんでみんな T って書いてるの？U とか K とか、あれ何？」...
TypeScript TypeScript | 関数・クラス・ジェネリクス：ジェネリクス基礎 － ジェネリック関数の基本
ゴール：「型だけ違う同じ関数」を、1本のジェネリック関数で書けるようになるジェネリック関数の本質はとてもシンプルです。「型だけ違って、やっていることは同じ関数」を、1本にまとめるための書き方です。<T...
TypeScript TypeScript | 関数・クラス・ジェネリクス：ジェネリクス基礎 － ジェネリクスとは何か
ゴール：「型を“あとから差し込める穴”として扱う感覚をつかむ」ジェネリクス（Generics）は一言でいうと、「型に“変数”を導入して、あとから具体的な型を差し込める仕組み」です。関数でいうと、(x:...
C# C# | 2週間で身につくアプリを作りながら学ぶC#の基本 － 14日目
14日目のゴールとテーマ14日目のテーマは「2週間で作ってきたものを“振り返りながら仕上げる”」です。今日は新しい文法をどんどん増やす日ではなく、今ある診断アプリを「自分の手で少し改造してみる」2週間...
C# C# | 2週間で身につくアプリを作りながら学ぶC#の基本 － 13日目
13日目のゴールとテーマ13日目のテーマは「エラーに強いアプリにする（例外処理とメニュー化）」です。ここまでで、機能としてはかなり“それっぽい”アプリになってきましたが、まだ弱いところがあります。ファ...
C# C# | 2週間で身につくアプリを作りながら学ぶC#の基本 － 12日目
12日目のゴールとテーマ12日目のテーマは「クラス同士に“役割分担”をさせて、アプリ全体を整理する」です。10〜11日目で、Result クラスと List<Result>、LINQ を使って「データ...
C# C# | 2週間で身につくアプリを作りながら学ぶC#の基本 － 11日目
10日目のテーマとゴール10日目は「複数の診断結果（Result オブジェクト）をまとめて扱い、集計や検索ができるようにする」ことがテーマです。昨日は Result クラスを作り、ログ1行を Resu...
C# C# | 2週間で身につくアプリを作りながら学ぶC#の基本 － 10日目
10日目のゴールとテーマ10日目のテーマは「クラスとオブジェクトで“自分の型”を作る」です。ここまでは、int や string、DateTime のような「既に用意されている型」を使ってきました。今...