JavaScript
JavaScript | 基礎構文：条件分岐 – 複雑な条件式
プログラミング
Java Java | 2週間で身につく、アプリを作りながら学ぶJavaの基本 － 3日目
3日目のゴールとテーマ3日目のテーマは「同じ処理を“繰り返す”力を身につけて、ちょっとしたミニアプリをループで回す」 です。1日目・2日目で、「1回だけ動くプログラム」は書けるようになりました。でも、...
Java Java | 2週間で身につく、アプリを作りながら学ぶJavaの基本 － 2日目
2日目のゴールとテーマ2日目のテーマは「ユーザーの入力を受け取り、条件分岐で“動きが変わるアプリ”を作る」 です。1日目は、決まった文字や数字を「表示するだけ」の世界でした。今日はそこから一歩進んで、...
Java Java | 2週間で身につく、アプリを作りながら学ぶJavaの基本 － 1日目
1日目のゴールとテーマ1日目のテーマは「Javaの“型にはまった書き方”に慣れながら、最初の小さなアプリを動かす」 です。Pythonと違って、Javaは「決まりごと」が多い言語です。最初は少し堅苦し...
Python Python | テスト・設計・品質：CD
CDって何？一言でいうと「テストが通ったら“そのまま本番まで運んでくれるベルトコンベア”」CD は大きく分けて2つあります。Continuous Delivery（継続的デリバリー）Continuou...
Python Python | テスト・設計・品質：CI（GitHub Actions）
CI（GitHub Actions）って何？一言でいうと「プッシュした瞬間に“自動でテストしてくれるロボット”」CI（Continuous Integration）は、「コードを少し変更するたびに、自...
Python Python | テスト・設計・品質：フォルダ構成標準化
フォルダ構成標準化って何？一言でいうと「どのプロジェクトでも迷子にならないための地図づくり」フォルダ構成標準化は、「Pythonプロジェクトのフォルダやファイルの置き方に、共通ルールを決めること」です...
Python Python | テスト・設計・品質：例外階層
例外階層って何？一言でいうと「エラーを“種類ごとに整理する”ための仕組み」例外階層（Exception Hierarchy）は、「エラーを種類ごとに分類して、親子関係で整理する」ための設計です。Pyt...
Python Python | テスト・設計・品質：ロギング設計
ロギング設計って何？一言でいうと「あとから原因を追えるように“足跡”を設計すること」ロギング設計は、「エラーが起きたとき・おかしな動きをしたときに、あとから原因を追えるように、どこで何を記録しておくか...
Python Python | テスト・設計・品質：REST 設計
REST設計って何？一言でいうと「URLとHTTPを“きれいなルール”で使う設計」REST 設計は、Web API を作るときに、URLHTTPメソッド（GET / POST / PUT / PATC...
Python Python | テスト・設計・品質：API 設計
API設計って何？一言でいうと「他人（未来の自分）が使いやすい“入口”を設計すること」ここでいう「API」は、Web API だけじゃなく、「関数・クラス・モジュールの“使い方の顔”」も含めた広い意味...
Python Python | テスト・設計・品質：interface 分離
interface分離って何？一言でいうと「いらないボタンを押させないようにする設計」interface 分離（インターフェース分離の原則 / Interface Segregation Princi...
Python Python | テスト・設計・品質：責務定義
「責務定義」って何？一言でいうと「この子は何を担当するのかを決めること」責務定義は、クラス・関数・モジュールなどに対して「あなたは何を担当するのか？」をはっきり決めることです。もっと砕くと、「このコー...
Python Python | テスト・設計・品質：モジュール分割
モジュール分割って何？一言でいうと「ファイルごとに役割をはっきり分けること」Python でいう「モジュール分割」は、コードを複数の .py ファイルに分けて、それぞれに「はっきりした役割」を持たせる...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － ページリロード
「ページリロード」は「このURLをもう一度最初から開き直すこと」まずイメージからいきます。ブラウザの「再読み込みボタン」や F5 を押すと、今表示している URL にもう一度アクセスするHTML・CS...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － アラート（alert / confirm / prompt）
アラートは「ブラウザが出してくれる超シンプルなダイアログ」alert / confirm / prompt は、ブラウザが標準で用意してくれているダイアログ表示の仕組み です。画面の真ん中に、ブラウザ...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － タブ操作（open / close）
「タブ操作」は「新しい窓を開く権利」と「閉じていい範囲」を理解するところからJavaScript でのタブ操作は、window.open() と window.close() が中心です。ただし、ここ...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － リダイレクト
「リダイレクト」は「ユーザーを別のURLに連れて行くこと」まず言葉の整理からいきます。リダイレクト（redirect） は、ざっくり言うと「今このページを見ているユーザーを、別の URL に自動的に移...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － 画面サイズ取得
「画面サイズ取得」は「どの“枠”のサイズが欲しいか」を決めるところから始まるまず一番大事なことから。「画面サイズ」と一口に言っても、実は何種類かあります。ブラウザのウィンドウ全体のサイズウィンドウの中...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － userAgent
userAgent は「ブラウザが名乗る自己紹介テキスト」navigator.userAgent（ふつうは userAgent と呼ぶ）は、「このブラウザはこういう環境ですよ」とサーバーなどに伝えるた...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － navigator
navigator は「今使っているブラウザと環境のプロフィールカード」navigator は、「このページを開いているブラウザや環境の情報」をまとめたオブジェクト です。どんなブラウザか（Chrom...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － history API
history API は「ブラウザの戻る・進むをコードから操る仕組み」history は window.history のことで、ブラウザの「戻る」「進む」ボタンと同じようなことを、JavaScri...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － location
location は「今開いているページの住所カード」location は、「このタブで今開いているページの URL 情報をまとめたオブジェクト」 です。「今どの URL を見ているか知りたい」「別の...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － window オブジェクト
window オブジェクトは「ブラウザタブそのもの」を表す巨大な入り口JavaScript でいう window は、「今あなたが見ているブラウザのタブ（ウィンドウ）そのものを表すオブジェクト」 です...
Python Python | テスト・設計・品質：ドメイン駆動設計
ドメイン駆動設計って何？一言でいうと「現実のルールをコードの中心に置く考え方」ドメイン駆動設計（DDD）は、「フレームワークやDBの都合ではなく、“現実世界のルール”を中心にコードを組み立てよう」とい...
Python Python | テスト・設計・品質：クリーンアーキテクチャ
クリーンアーキテクチャって何？一言でいうと「大事なものを真ん中に守る設計」クリーンアーキテクチャは、アプリケーションの「大事なルール（ビジネスロジック）」を、外側の技術的なもの（Web フレームワーク...
Python Python | テスト・設計・品質：リファクタリング
リファクタリングって何？一言でいうと「動きを変えずに中身だけキレイにする」リファクタリングは、「コードの外から見た振る舞い（仕様・動き）は変えずに、中身の構造だけを良くすること」です。バグ修正でも新機...
Python Python | テスト・設計・品質：mypy
mypyって何？一言でいうと「Pythonコードに“型のテスト”をかけるツール」mypy は、Python コードに書いた「型ヒント（type hints）」を読み取って、その使い方が矛盾していないか...
Python Python | テスト・設計・品質：TypedDict
TypedDictって何？一言でいうと「キー付き辞書に“型の設計図”を付けるもの」TypedDict は、「この辞書は、こういうキーを持っていて、それぞれの値はこういう型です」という“設計図”を型ヒン...
JavaScript JavaScript | Web API：タイマー・スケジューリング － スケジューリング設計
「スケジューリング設計」は「いつ・どのくらい・どう止めるか」を決めることタイマーは「ちょっと遅らせて実行する便利関数」ではなく、「処理のタイミングを設計するための道具」 です。いつ実行するかどのくらい...
JavaScript JavaScript | Web API：タイマー・スケジューリング － UI 更新との関係
UI 更新とタイマーの関係は「JavaScript とブラウザの役割分担」を理解すると一気に分かりやすくなるタイマー（setTimeout / setInterval / requestAnimati...
JavaScript JavaScript | Web API：タイマー・スケジューリング － 無限ループ防止
「無限ループ防止」は「止まる出口を必ず用意する」という発想タイマーやループを書いているときに一番やっちゃいけないのが、「永遠に終わらない処理」＝無限ループ です。ブラウザが固まるCPU が 100% ...
JavaScript JavaScript | Web API：タイマー・スケジューリング － タイマー精度の問題
「タイマー精度の問題」は「指定した時間どおりには動かないことがある」という話まず一番大事なことを先に言います。setTimeout(…, 1000) と書いても、きっちり 1000ms 後に実行される...
JavaScript JavaScript | Web API：タイマー・スケジューリング － requestIdleCallback
requestIdleCallback は「ブラウザがヒマなときにやってもらう雑用係」requestIdleCallback は、「今すぐじゃなくて、ブラウザがヒマになったタイミングでやってほしい処理...
JavaScript JavaScript | Web API：タイマー・スケジューリング － requestAnimationFrame
requestAnimationFrame は「ブラウザに最適なタイミングでアニメを進めてもらう仕組み」requestAnimationFrame（略して rAF）は、「アニメーションを滑らかに動かす...
JavaScript JavaScript | Web API：タイマー・スケジューリング － clearInterval
clearInterval は「繰り返し処理を止めるためのスイッチ」clearInterval は、setInterval で始めた“繰り返し処理”を止めるための関数 です。setInterval は...
JavaScript JavaScript | Web API：タイマー・スケジューリング － clearTimeout
clearTimeout は「さっき予約した“◯秒後”をなかったことにする」関数clearTimeout は、setTimeout で予約した「あとで実行する処理」をキャンセルするための関数 です。「...
JavaScript JavaScript | Web API：タイマー・スケジューリング － setInterval
setInterval は「◯秒ごとにこれを繰り返して」と予約する関数setTimeout が「一回だけあとで実行」だとしたら、setInterval は 「一定間隔で同じ処理を何度も繰り返す」 ため...
JavaScript JavaScript | Web API：タイマー・スケジューリング － setTimeout
setTimeout は「◯秒後にこれやって」を予約する関数setTimeout は、「今すぐじゃなくて、少し時間が経ってから処理を実行したいとき」に使うタイマー関数 です。「3 秒後にメッセージを出...
JavaScript JavaScript | Web API：通信・ネットワーク系 － WebSocket の概要
WebSocket は「つなぎっぱなしでしゃべり続けられる通信」まずイメージからいきます。ふつうの HTTP（fetch など）は「用があるときだけノックして、用が済んだらすぐ帰る」通信です。リクエス...
JavaScript JavaScript | Web API：通信・ネットワーク系 － オフライン対応の基本
まず「オフライン対応って何を指しているのか」をはっきりさせるオフライン対応と聞くと、「ネットが切れても全部普通に動く魔法」みたいに思いがちですが、現実はもう少し地に足がついた話です。本質は、「ネットワ...
JavaScript JavaScript | Web API：通信・ネットワーク系 － Service Worker の概要
Service Worker は「ブラウザの中に住む、裏方の小さなサーバー」まずイメージからいきます。Service Worker は、「ブラウザの中で動く、あなたのサイト専用の“裏方サーバー”」 で...
JavaScript JavaScript | Web API：通信・ネットワーク系 － キャッシュ制御
「キャッシュ制御」は“いつまで古いデータを使っていいか”を決めるルールまずざっくりイメージからいきます。キャッシュは、「一度取ってきたデータを、次回以降は早く返すために手元に置いておく仕組み」 です。...
JavaScript JavaScript | Web API：通信・ネットワーク系 － 認証ヘッダ
認証ヘッダは「あなたが誰なのか」をサーバーに伝えるための“身分証”まずイメージからいきます。認証ヘッダ（Authentication Header）は、「このリクエストは誰として送っているのか」 をサ...
JavaScript JavaScript | Web API：通信・ネットワーク系 － Cookie の扱い
Cookie は「ブラウザが自動で持ち運んでくれる小さなメモ」まずイメージからいきます。Cookie は、「ブラウザがサーバーとの間で自動的に持ち運んでくれる小さなメモ」 です。サーバーが「このユーザ...
JavaScript JavaScript | Web API：通信・ネットワーク系 － CORS の基本
まず「なぜ CORS なんてものがあるのか」からCORS を理解する一番の近道は、「ブラウザは、もともと“よそのサイトに勝手にリクエストさせない”ように作られている」という前提をちゃんと掴むことです。...
JavaScript JavaScript | Web API：通信・ネットワーク系 － Headers
ヘッダーは「一緒にくっついて飛んでいくメモ書き」まずイメージからいきます。HTTP の世界では、リクエストやレスポンスは「封筒付きの手紙」みたいなものです。本文（ボディ）実際の中身。JSON や HT...
JavaScript JavaScript | Web API：通信・ネットワーク系 － Request / Response オブジェクト
「Request / Response」は fetch がやり取りする“手紙の入れ物”まず大きなイメージからいきます。fetch は「サーバーと会話する窓口」でしたよね。その会話の中で実際に行き来して...
JavaScript JavaScript | Web API：通信・ネットワーク系 － fetch API
fetch は「ブラウザからサーバーにお願いしに行く関数」まずイメージからいきます。fetch は、「ブラウザからサーバーに“ちょっとデータください”とか“これ送ります”とお願いしに行くための関数」 ...
JavaScript JavaScript | Web API：ストレージ系 API － IndexedDB の概要
IndexedDB は「ブラウザ内のちゃんとしたデータベース」localStorage / sessionStorage は「小さなメモ帳」でした。IndexedDB は一段レベルが違います。イメージ...
JavaScript JavaScript | Web API：ストレージ系 API － セキュリティの注意点
「ストレージは安全な金庫」ではない、という前提から始めようlocalStorage / sessionStorage は便利ですが、「ここに入れておけば安全」な場所ではありません。ブラウザの中にあると...
JavaScript JavaScript | Web API：ストレージ系 API － ストレージイベント
ストレージイベントは「別タブでの変更を教えてくれる仕組み」まず一言でいうと、ストレージイベント（storage イベント）は「他のタブで localStorage が書き換えられたことを教えてくれる通...
JavaScript JavaScript | Web API：ストレージ系 API － 同期 API の特性
「同期 API」ってそもそも何者かまず言葉の整理からいきます。同期 API（synchronous API）というのは、呼び出した瞬間に処理が終わるまで、そのスレッドを止めてしまうタイプの API の...
JavaScript JavaScript | Web API：ストレージ系 API － 容量制限
ストレージの「容量制限」をちゃんと意識すると設計が変わるlocalStorage / sessionStorage は便利ですが、「無限に保存できる魔法の箱」ではありません。どちらもブラウザごとに 容...
JavaScript JavaScript | Web API：ストレージ系 API － JSON との組み合わせ
なぜ「ストレージ × JSON」がほぼセットなのかlocalStorage / sessionStorage は、とてもシンプルなストレージです。でも制約が一つあります——「保存できるのは文字列だけ」...
JavaScript JavaScript | Web API：ストレージ系 API － removeItem / clear
removeItem / clear は「部分的に消す」と「全部消す」の違いストレージ系 API（localStorage / sessionStorage）には、データを「書く」「読む」だけでなく、...
JavaScript JavaScript | Web API：ストレージ系 API － setItem / getItem
setItem / getItem は「ブラウザのメモ帳に書く・読む」操作まずざっくりイメージからいきます。setItem と getItem は、ブラウザの中にある小さなメモ帳に「書く」「読む」ため...
JavaScript JavaScript | Web API：ストレージ系 API － SessionStorage の基本
SessionStorage は「タブごとの一時メモ帳」まずイメージからいきます。SessionStorage は 「ブラウザのタブごとに用意される、一時的なメモ帳」 です。LocalStorage ...
JavaScript JavaScript | Web API：ストレージ系 API － LocalStorage の基本
LocalStorage は「ブラウザにメモ帳を置く」イメージまずざっくりイメージから。LocalStorage は、「ブラウザの中にある、キーと値を保存できる小さなメモ帳」 です。ページを閉じても、...
JavaScript JavaScript | 非同期処理：設計・理解の深化 － プロとしての非同期設計
「プロとしての非同期設計」って何が違うのか非同期処理を「書ける」ようになるのは、正直そんなに難しくありません。async/await を覚えて、fetch を呼んで、try/catch を付ければ、と...
JavaScript JavaScript | 非同期処理：設計・理解の深化 － 非同期バグの再現
なぜ「非同期バグの再現」がこんなに難しいのか非同期バグって、ほんとイヤらしいですよね。さっきまで出ていたのに、もう一回やると出ない。本番では起きるのに、ローカルでは起きない。理由はシンプルで、非同期バ...