Java
Java | 基礎文法：import 文
Python Python | テスト・設計・品質：コンテナ構築
コンテナ構築って何？一言でいうと「動く箱を作るための“レシピづくり＋焼き上げ”」ここでいう「コンテナ構築」は、ほぼ「Docker コンテナを作ること」と考えてOKです。レシピを書くフェーズ（Docke...
Python Python | テスト・設計・品質：Docker
Dockerって何？一言でいうと「どこでも同じように動く“持ち運べる開発環境”」Docker は、ざっくり言うと「アプリとその周りの環境を、ひとまとめにして箱に入れて持ち運べるようにする仕組み」です。...
Python Python | 1 日 120 分 × 7 日アプリ学習：クラスで作る商品管理アプリ（中級編）
1日目のゴール1日目のテーマは「class・__init__・オブジェクトを、“商品”という身近な題材で体に入れること」 です。辞書でユーザーを扱ったときと同じように、今度は「商品」をクラスで表現して...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － 見出しスケール設計
見出しスケール設計は「階層の意味 × 読みやすさ × デザインの一貫性」を作る技術見出し（H1〜H6）は、ただ大きさを変えるだけでは不十分です。階層の差が明確で、読みやすく、デザインとして美しいスケー...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － リンクデザイン設計
リンクデザインは「読みやすさ × 分かりやすさ × 美しさ」を同時に満たす設計リンクは UI の中で最も重要な要素のひとつ。どれがリンクか一瞬で分かること、読みやすく邪魔にならないこと、デザインとして...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － text-decoration応用
text-decoration は「線の種類・位置・色・太さ」を自由に操るプロパティリンクの下線だけでなく、強調・アクセント・装飾・UI 表現 まで幅広く使えるのが text-decoration の...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － text-align最適化
text-align は「文章の重心」を決めるプロパティ文章は“どこに揃えるか”だけで読みやすさや印象が大きく変わります。text-align を最適化すると、見出し・本文・UI ラベル・ボタン・カー...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － writing-mode
writing-mode は「文字の流れる方向」を変えるプロパティ横書き・縦書き・縦中横など、日本語特有のレイアウトにも対応できる強力な CSS 機能です。特に日本語サイトでは、縦書きの見出し・帯・サ...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － word-break制御
word-break は「単語のどこで折り返すか」をコントロールするプロパティテキストが枠からはみ出すとき、どこで折り返すか（または折り返さないか） を決めるのが word-break です。特に日本...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － white-space制御
white-space は「改行・空白・折り返し」をコントロールするタイポグラフィの基礎文章がどう折り返されるか、空白がどう扱われるかは 読みやすさ・レイアウトの安定性 に直結します。white-sp...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － text-overflow省略
text-overflow は「入りきらないテキストをどう見せるか」をコントロールするUI デザインでは、タイトル・カード・ボタン・リストなど、テキストが枠からはみ出す場面が必ず発生します。そのときに...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － text-transform活用
text-transform は「文字の見せ方を一瞬で変える」タイポグラフィのスイッチ大文字化・小文字化・単語の頭だけ大文字など、文章の“印象”を一瞬で変える強力なプロパティ が text-trans...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － letter-spacing最適化
letter-spacing（字間調整）は「読みやすさ」と「デザインの質」を決める重要パラメータ特に日本語は欧文よりも字面が大きく、フォントによっても見え方が大きく変わるため、適切な letter-s...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － clampで可変フォント
clamp() を使うと「画面幅に応じて自然に伸び縮みするフォントサイズ」が作れるしかも、最小値・理想値・最大値を 1 行でコントロールできるので、レスポンシブタイポグラフィの“最強ツール”と言ってい...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － remとemの使い分け
rem と em は「どこを基準にサイズが決まるか」が違うだけでも、この違いを理解すると タイポグラフィ設計が一気に安定 します。rem → ルート（html）のフォントサイズを基準にするem → そ...
JavaScript JavaScript | Web API：ファイル・データ操作 － 大容量ファイルの扱い
「大容量ファイルの扱い」は“全部一気にやらない”が合言葉まず前提からいきます。数 KB〜数 MB 程度のファイルなら、FileReader.readAsText や readAsArrayBuffer...
JavaScript JavaScript | Web API：ファイル・データ操作 － CSV / JSON ファイル処理
CSV / JSON ファイル処理は「テキストとして読み、オブジェクトとして扱い、またテキストに戻す」流れCSV も JSON も、本質はただのテキストファイルです。JavaScript から扱うとき...
JavaScript JavaScript | Web API：ファイル・データ操作 － バイナリデータ処理
「バイナリデータ処理」は“0と1の生データ”を意識して触ることふだん JavaScript で扱っているのは、文字列・数値・オブジェクトなど「人間に優しい形」のデータです。でも、画像・音声・PDF・Z...
JavaScript JavaScript | Web API：ファイル・データ操作 － input type=”file”
input type="file" は「ユーザーにファイルを選んでもらうための唯一の正規ルート」まず大前提として、ブラウザの JavaScript は、勝手にユーザーのパソコンの中を覗けません。「この...
JavaScript JavaScript | Web API：ファイル・データ操作 － ドラッグ＆ドロップ
ドラッグ＆ドロップは「マウスでつかんで、そのままブラウザに渡す入力方法」ドラッグ＆ドロップ（D&D）は、「ユーザーがファイルや要素をマウスでつかんで、別の場所に“落とす”操作をイベントとして扱う仕組み...
JavaScript JavaScript | Web API：ファイル・データ操作 － ダウンロード処理
「ダウンロード処理」は“ブラウザの中のデータ”を“ユーザーのファイル”に変えることJavaScript でいう「ダウンロード処理」は、ブラウザの中にあるデータ（文字列・JSON・画像・Blob など）...
JavaScript JavaScript | Web API：ファイル・データ操作 － URL.createObjectURL
URL.createObjectURL は「Blob や File に一時的な URL を貼る魔法」URL.createObjectURL は、Blob や File に「一時的にアクセスできる UR...
JavaScript JavaScript | Web API：ファイル・データ操作 － Blob
Blob は「生データ（バイナリやテキスト）をまとめて持つ“データのかたまり”」Blob は、「ファイルっぽい“データのかたまり”をメモリ上に表現するためのオブジェクト」 です。画像・テキスト・JSO...
JavaScript JavaScript | Web API：ファイル・データ操作 － FileReader
FileReader は「ファイルの中身を“いろんな形”で読み出すための専用リーダー」前回の File API で出てきた File は、「ユーザーが選んだファイルへのハンドル（取っ手）」でした。でも...
JavaScript JavaScript | Web API：ファイル・データ操作 － File API
File API は「ユーザーが選んだファイルをブラウザから触るための窓口」まず一番大事なことから。JavaScript は、勝手にユーザーのパソコンの中を覗いたり、好きなファイルを読みまくったりはで...
Python Python | 1 日 120 分 × 7 日アプリ学習：辞書型で作るユーザー管理アプリ（中級編）
1日目のゴール1日目のテーマは「辞書型 dict を使って、“ユーザー管理アプリの土台”を作れるようになること」 です。今日つかんでほしいのは、この3つです。辞書型とは何か（キーと値の関係）ユーザー1...
Python Python | 1 日 90 分 × 7 日アプリ学習：ファイルを読み込むアプリ（初級編）
1日目のゴール1日目のテーマは「ファイルの中身を read で読み込んで、そのまま画面に表示できるようになること」 です。ここでできるようになってほしいのは、たった2つです。ファイルを開いて中身を読み...
Python Python | 1 日 90 分 × 7 日アプリ学習：ファイルに保存するメモ帳（初級編）
1日目のゴール1日目のテーマは「テキストをファイルに保存できる“超シンプルなメモ帳”を作ること」です。今日できるようになってほしいのは、この3つです。open でファイルを開くイメージをつかむwrit...
JavaScript JavaScript | Web API：DOM 拡張 API － shadow DOM の概要
shadow DOM は「外側から見えない、部品専用のプライベート DOM」まず一言でいうと、shadow DOM は「コンポーネントの中だけで完結する、外側から直接いじれない専用 DOM」 です。普...
JavaScript JavaScript | Web API：DOM 拡張 API － documentFragment
documentFragment は「画面にまだ挿していない一時作業用のミニ DOM」DocumentFragment（document.createDocumentFragment() で作るやつ）...
JavaScript JavaScript | Web API：DOM 拡張 API － NodeList 操作
NodeList は「querySelectorAll が返してくる“要素の集まり”」まず前提からいきます。document.querySelectorAll() を使うと、複数の要素が一度に取れます...
JavaScript JavaScript | Web API：DOM 拡張 API － dataset API
dataset は「HTML に自由にメモを書いておけるポケット」dataset は、HTML 要素に “自分で決めたデータ” を安全に持たせておくための仕組み です。HTML の data-◯◯ 属...
JavaScript JavaScript | Web API：DOM 拡張 API － classList API
classList は「要素に付いているクラス名を出し入れするための専用リモコン」HTML 要素には class 属性がありますよね。<div class="box active"></div>この ...
JavaScript JavaScript | Web API：DOM 拡張 API － Event コンストラクタ
Event コンストラクタは「既存イベントを自分の手で発火させるための素のイベント」Event コンストラクタは、「クリックや変更など、既に名前が決まっているイベントを、自分の手で“発生させたことにす...
JavaScript JavaScript | Web API：DOM 拡張 API － CustomEvent
CustomEvent は「自分で名前を付けられるオリジナルイベント」CustomEvent は、「クリックやスクロールみたいな“既存のイベント”ではなく、自分で名前を付けたイベントを作って、発火でき...
JavaScript JavaScript | Web API：DOM 拡張 API － ResizeObserver
ResizeObserver は「要素の大きさが変わった瞬間を教えてくれるセンサー」ResizeObserver は、「特定の要素の幅や高さが変わったときに、それを教えてくれる仕組み」 です。ウィンド...
JavaScript JavaScript | Web API：DOM 拡張 API － MutationObserver
MutationObserver は「DOM の変化を見張る監視カメラ」MutationObserver は、「DOM（要素の追加・削除・属性変更・テキスト変更など）が変わった瞬間を教えてくれる監視カ...
JavaScript JavaScript | Web API：DOM 拡張 API － IntersectionObserver
IntersectionObserver は「要素が画面に入ったかどうかを見張る番人」IntersectionObserver は、「ある要素が、画面（または指定した枠）の中に入ったか・出たか」を自動...
Java Java | 2週間で身につく、アプリを作りながら学ぶJavaの基本 － 14日目
14日目のゴールとテーマ14日目のテーマは「2週間で身につけた“Javaでアプリを作る力”を言語化して、次の一歩につなげる」 です。今日は新しい文法を増やす日ではありません。この2週間であなたが積み上...
Java Java | 2週間で身につく、アプリを作りながら学ぶJavaの基本 － 13日目
13日目のゴールとテーマ13日目のテーマは「プロジェクトを“整理する力”と“ライブラリを使う力”を身につける」 です。ここまでで、あなたはクラスオブジェクトカプセル化クラス同士の関係例外処理ファイル保...
Java Java | 2週間で身につく、アプリを作りながら学ぶJavaの基本 － 12日目
12日目のゴールとテーマ12日目のテーマは「タスクをファイルに保存して、“終了しても消えないアプリ”にする」 です。ここまでのタスク管理アプリは、起動している間はちゃんと動きますが、アプリを終了すると...
Java Java | 2週間で身につく、アプリを作りながら学ぶJavaの基本 － 11日目
11日目のゴールとテーマ11日目のテーマは「例外処理で“落ちないアプリ”に近づく」 です。ここまでで、あなたはクラス・オブジェクト・カプセル化・クラス同士の関係を使って、小さなタスク管理アプリを形にし...
Java Java | 2週間で身につく、アプリを作りながら学ぶJavaの基本 － 10日目
10日目のゴールとテーマ10日目のテーマは「これまでの要素を全部つなげて、“小さな本格アプリ”としてまとめる」 です。ここまでであなたは、変数・配列・ArrayListif・for・whileメソッド...
Java Java | 2週間で身につく、アプリを作りながら学ぶJavaの基本 － 9日目
9日目のゴールとテーマ9日目のテーマは「クラス同士の“関係”を設計して、小さな本格アプリの形にする」 です。ここまでであなたは、1つのクラス（Task）を作りオブジェクトを new してArrayLi...
Java Java | 2週間で身につく、アプリを作りながら学ぶJavaの基本 － 8日目
8日目のゴールとテーマ8日目のテーマは「カプセル化（情報を隠す）と getter / setter で、“壊れにくいクラス”に育てる」 です。7日目で、あなたはすでに自分でクラス（Task）を作りオブ...
Python Python | 1 日 90 分 × 7 日アプリ学習：簡単メニュー選択アプリ（初級編）
1日目のゴール1日目のテーマは「数字でメニューを選んで、その数字に応じて“違う関数”を動かせるようになること」です。今日できるようになってほしいのは、この2つです。数値メニューを表示して、ユーザーに番...
Python Python | 1 日 90 分 × 7 日アプリ学習：関数で処理をまとめるアプリ（初級編）
1日目のゴール1日目のテーマは「def で関数を定義して、自分で呼び出せるようになること」です。今日できるようになってほしいのは、この2つだけです。def を使って「自分の命令」を作るその命令（関数）...
Python Python | 1 日 90 分 × 7 日アプリ学習：リストに追加するアプリ（初級編）
1日目のゴール1日目のテーマは「Python の list に append で値を追加できるようになること」です。ここができると、買い物リスト、TODOリスト、メモ帳アプリなど、「何かをどんどん溜め...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：ミニ業務アプリ（総合）
1日目のゴールと作るアプリのイメージこの7日間は、「ちょっと業務っぽいミニアプリ」を題材にして、設計力・保守性・実務思考を鍛えていきます。1日目のテーマは、「いきなりコードを書かず、“設計の目”でアプ...
Java Java | 2週間で身につく、アプリを作りながら学ぶJavaの基本 － 7日目
7日目のゴールとテーマ7日目のテーマは「クラスとオブジェクトで“自分だけの型”を作り、アプリの世界に登場人物を生み出す」 です。ここまでで、あなたは変数・配列・ArrayListでデータを扱い、if・...
Java Java | 2週間で身につく、アプリを作りながら学ぶJavaの基本 － 6日目
6日目のゴールとテーマ6日目のテーマは「メソッドで“処理を分ける力”を身につけて、コードを読みやすく育てる」 です。5日目までで、あなたはすでに入力を受け取る条件分岐で動きを変えるループで繰り返すAr...
Java Java | 2週間で身につく、アプリを作りながら学ぶJavaの基本 － 5日目
5日目のゴールとテーマ5日目のテーマは「配列より“柔軟なリスト”を使って、追加・削除ができるアプリに近づく」 です。4日目までで、配列を使って「複数のデータをまとめて扱う」ことができるようになりました...
Java Java | 2週間で身につく、アプリを作りながら学ぶJavaの基本 － 4日目
4日目のゴールとテーマ4日目のテーマは「配列で“複数のデータ”をまとめて扱い、ループと組み合わせて処理する」 です。ここまでで、1つの値（int や String）を変数に入れて扱うことはできるように...
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...