実際にコードを書きながら学べるハンズオンチュートリアル集です。環境構築からデプロイまで、実務で使える技術を手を動かして身につけられます。
該当する記事が見つかりませんでした
検索キーワードや絞り込み条件を変えてもう一度お試しください。
コードを実行する前に結果を説明する練習
変数の値、条件分岐、繰り返し、戻り値を紙やコメントで追い、実行結果を予測してからConsoleやテストで答え合わせします。
AIと学習設計CSS入門 #1 - 色・文字・余白を変える
HTMLにCSSを読み込み、color、background-color、font-size、margin、paddingで基本的な見た目を調整します。
CSS入門CSS入門 #2 - classとidでスタイルを当てる
class、id、要素セレクタの違いを確認し、特定の見出し、ボタン、カードだけにCSSを当てる練習をします。
CSS入門CSS入門 #3 - Flexboxで横並びレイアウトを作る
display: flex、gap、justify-content、align-itemsを使い、ナビゲーションとカードを横並びにする練習をします。
CSS入門CSS入門 #4 - Gridでカード一覧を作る
CSS Gridのdisplay: grid、grid-template-columns、gapを使い、カード一覧をきれいに並べる方法を練習します。
CSS入門CSS入門 #5 - スマホ対応のレスポンシブデザイン
viewport、max-width、media queryを使い、PCでもスマホでも読みやすい自己紹介ページに調整します。
CSS入門HTML入門 #1 - Webページの基本構造
HTMLファイルを作成し、doctype、html、head、body、titleの役割を確認しながら、最小のWebページを表示します。
HTML入門HTML入門 #2 - 見出し・段落・リンク・画像
見出し、段落、リンク、画像の基本タグを使い、自己紹介ページに必要な情報をHTMLで表現します。
HTML入門HTML入門 #3 - リスト・表・フォームの基本
ul、ol、table、form、input、buttonを使い、情報の一覧表示と簡単な入力フォームを作ります。
HTML入門HTML入門 #4 - セマンティックHTMLを使う
header、main、section、article、nav、footerを使い、検索エンジンや支援技術にも伝わりやすいHTML構造を作ります。
HTML入門JavaScript入門 #1 - 開発環境と実行方法
JavaScript学習を始めるために、ブラウザ、Node.js、VS Codeを準備し、どこでコードを実行するのかを確認します。
JavaScriptJavaScript入門 #2 - Hello Worldとconsole.log
JavaScriptで最初のプログラムを書き、console.log、コメント、実行順序、セミコロンの基本を確認します。
JavaScriptJavaScript入門 #3 - 変数letとconst
JavaScriptの変数宣言を、let、const、再代入、命名ルール、varを避ける理由から学びます。
JavaScriptJavaScript入門 #4 - データ型とtypeof
JavaScriptの基本データ型として、string、number、boolean、null、undefinedを確認し、typeofで型を調べます。
JavaScriptJavaScript入門 #5 - 演算子と比較
JavaScriptの算術演算子、代入演算子、比較演算子、===と==の違いを実行しながら確認します。
JavaScriptJavaScript入門 #6 - 文字列とテンプレートリテラル
JavaScriptの文字列操作として、連結、テンプレートリテラル、length、includes、trim、replaceを確認します。
JavaScriptJavaScript入門 #7 - if文と条件分岐
JavaScriptのif、else if、else、論理演算子、switchの基本を、ログイン判定や点数判定で確認します。
JavaScriptJavaScript入門 #8 - for文とwhile文
JavaScriptの繰り返し処理として、for、while、break、continueを使い、配列処理前の基本を確認します。
JavaScriptJavaScript入門 #9 - 配列の基本
JavaScriptの配列について、作成、インデックス、length、追加、削除、for...ofによる繰り返しを確認します。
JavaScriptJavaScript入門 #10 - 配列メソッドmap/filter/find
JavaScriptの配列メソッドとして、forEach、map、filter、find、some、everyの使い分けを確認します。
JavaScriptJavaScript入門 #11 - オブジェクトの基本
JavaScriptのオブジェクトについて、プロパティ、ドット記法、ブラケット記法、配列との組み合わせを確認します。
JavaScriptJavaScript入門 #12 - 関数の基本
JavaScriptの関数宣言、引数、戻り値、アロー関数、関数を分ける判断基準を確認します。
JavaScriptJavaScript入門 #13 - スコープと巻き上げ
JavaScriptのスコープ、ブロックスコープ、関数スコープ、let/constとvarの違い、巻き上げの基本を確認します。
JavaScriptJavaScript入門 #14 - DOM要素の取得
ブラウザ上のHTMLをJavaScriptから操作するために、DOM、document、querySelector、textContentの基本を確認します。
JavaScriptJavaScript入門 #15 - イベント処理
JavaScriptでクリックや入力に反応するために、addEventListener、click、inputイベントの基本を確認します。
JavaScriptJavaScript入門 #16 - フォーム入力とバリデーション
JavaScriptでフォームの入力値を取得し、submitイベント、preventDefault、簡単な入力チェックを実装します。
JavaScriptJavaScript入門 #17 - JSONの基本
JavaScriptでJSONを扱うために、JSON形式、JSON.stringify、JSON.parse、APIレスポンスとの関係を確認します。
JavaScriptJavaScript入門 #18 - localStorage
JavaScriptでlocalStorageを使い、文字列の保存、取得、削除、JSONとの組み合わせ、注意点を確認します。
JavaScriptJavaScript入門 #19 - エラー処理とtry/catch
JavaScriptのエラー処理として、SyntaxError、ReferenceError、TypeError、throw、try/catchの基本を確認します。
JavaScriptJavaScript入門 #20 - async/awaitとfetch
JavaScriptの非同期処理として、Promise、async/await、fetch、res.ok、try/catchを使ったAPI取得を確認します。
JavaScriptJava入門 #1 - 開発環境構築（JDK と IDE）
Java開発を始める最初の一歩。JDK 21（LTS）のインストールと、IntelliJ IDEA / VS Code の選び方を解説。
Java入門Java入門 #2 - 最初のプログラム（Hello World）
Javaで最初のプログラムを書いて動かす。javacコンパイルからjava実行まで、main メソッドの意味を軽く理解。
Java入門Java入門 #3 - 変数とデータ型
Javaの変数宣言、よく使うデータ型、値の更新、定数を、小さなプログラムを動かしながら学びます。
Java入門Java入門 #4 - 演算子（算術・比較・論理）
Javaの算術・比較・論理・代入演算子を表で確認し、買い物の送料無料判定を一つのコードで作ります。
Java入門Java入門 #5 - 文字列の基本操作（String）
商品コードを一つ使い、Stringの不変性、length、equals、substringによる長さ・比較・部分取得を学びます。
Java入門Java入門 #6 - 条件分岐（if / else if / else）
Javaの基本制御構文である条件分岐。if文、else if、else、ネスト、三項演算子の使い方を実例で理解する。
Java入門Java入門 #7 - switch文とswitch式（Java 14+）
値による多分岐を簡潔に書くswitch構文。旧来のswitch文とJava 14で正式化されたswitch式（矢印構文、yield）の違いを実例で学ぶ。
Java入門Java入門 #8 - for文（繰り返し）
決まった回数の繰り返しから始め、点数配列の走査と、continue・breakによる短い制御を一つの例で学びます。
Java入門Java入門 #9 - while文と do-while文
繰り返し処理の基本。while文の構文、do-while（最低1回実行）、無限ループの書き方と使い分けを解説。
Java入門Java入門 #10 - 配列の基本
3教科の点数をint配列へまとめ、宣言、添字による更新、length、通常for文と拡張for文を一つの例で学びます。
Java入門Java入門 #11 - メソッドの定義と呼び出し
チケット料金の計算をメソッドにまとめ、引数、戻り値、void、最小限のオーバーロードを一つの例で学びます。
Java入門Java入門 #12 - クラスとオブジェクト
本を表すクラスにフィールド、コンストラクタ、メソッドを追加し、newで2つのオブジェクトを作る流れを学びます。
Java入門Java入門 #13 - コンストラクタ
商品を表すProductを作り、コンストラクタによる初期化、thisによる区別、this()を使う最小のオーバーロードを学びます。
Java入門Java入門 #14 - 標準入力（Scanner クラス）
ScannerのnextLineで名前と年齢を読み、Integer.parseIntで文字列を整数へ変換する最小の入力処理を学びます。
Java入門Java入門 #15 - ArrayList の基本
買い物リストを一つ作り、ArrayListへの追加、取得、置換、削除、件数確認、繰り返しを順に学びます。
Java入門Java入門 #16 - List と LinkedList の違い
受付の待ち行列をLinkedListで作り、addFirst、addLast、removeFirst、値による削除を一つの例で学びます。
Java入門Java入門 #17 - HashMap（キーと値のペア）
商品コードと在庫数をHashMapで管理し、put、get、containsKey、remove、entrySetによる繰り返しを学びます。
Java入門Java入門 #18 - HashSet（重複しない集合）
参加者名をHashSetで管理し、重複しない追加、存在確認、削除、件数確認を一つの例で学びます。
Java入門Java入門 #19 - 例外処理の基本（try-catch-finally）
年齢文字列の数値変換を例に、try、catch、finallyの流れ、例外型の確認、安全なエラー表示を学びます。
Java入門Java入門 #20 - throws と例外の伝播
ファイル読み込みで発生するchecked例外をthrowsで呼び出し元へ伝播し、処理の境界でcatchする責務を学びます。
Java入門Java入門 #21 - 継承（extends）の基本
図書館資料を表す親クラスからBookを継承し、extends、super、親クラスのメソッド再利用を一つの例で学びます。
Java入門Java入門 #22 - ポリモーフィズム（多態性）
親クラス型の変数で子クラスのインスタンスを扱う仕組み。動的バインディング・instanceof・パターンマッチングを実例で学ぶ。
Java入門Java入門 #23 - インターフェース
Printableという契約をReportとLabelがimplementsし、抽象メソッドとdefaultメソッドの最小構成を学びます。
Java入門Java入門 #24 - 抽象クラス（abstract class）
チケットの共通状態と処理を抽象クラスへまとめ、子クラスごとにpriceメソッドの実装を要求する方法を学びます。
Java入門Java入門 #25 - static と final の基本
学校メンバーの例で、staticの共有値、finalの再代入禁止、static finalによる定数の定義を学びます。
Java入門pipとは：Pythonライブラリを入れる道具
Python初心者向けに、pipの役割、pip installの意味、ライブラリを入れる流れ、インストール後の確認方法を整理します。
Python pip・仮想環境編ライブラリとは：標準ライブラリと外部ライブラリの違い
Python初心者向けに、ライブラリ、標準ライブラリ、外部ライブラリ、import、pip installの違いを整理します。
Python pip・仮想環境編venvとは：仮想環境が必要な理由
Python初心者向けに、venv、仮想環境、プロジェクトごとにライブラリを分ける理由、作成と有効化の基本を説明します。
Python pip・仮想環境編requirements.txtとは：使ったライブラリを記録する
Python初心者向けに、requirements.txtの役割、pip freeze、pip install -r、チームや未来の自分が同じ環境を作る理由を説明します。
Python pip・仮想環境編pip installでよくあるエラーと直し方
Python初心者向けに、pip installで起きやすいcommand not found、ModuleNotFoundError、権限エラー、venv未有効化の切り分け方を整理します。
Python pip・仮想環境編Pythonミニ制作：学習時間記録アプリを作る
Pythonのリスト、辞書、合計計算を使い、学習時間を記録して合計時間を表示するミニアプリを作ります。
Pythonミニ制作Pythonミニ制作：Todoリストをターミナルで作る
Pythonのリストと関数を使い、ターミナル上でTodoを追加・表示・完了できる小さなアプリを作ります。
Pythonミニ制作Pythonミニ制作：単語帳アプリを作る
Pythonの辞書、リスト、for文を使い、英単語と意味を確認する単語帳アプリを作ります。
Pythonミニ制作Pythonミニ制作：計算ドリルを作る
Pythonのrandom、for文、関数を使い、足し算の計算ドリルを作ります。
Pythonミニ制作Pythonミニ制作：簡単な家計簿を作る
Pythonのリスト、辞書、合計計算を使い、支出を集計する簡単な家計簿を作ります。
Pythonミニ制作Pythonミニ制作：パスワード生成ツールを作る
Pythonのsecretsとstringを使い、ランダムなパスワードを生成する安全寄りのミニツールを作ります。
Pythonミニ制作Pythonミニ制作：JSONファイルを読み書きする
Pythonのjsonモジュールを使い、辞書データをJSONファイルとして保存・読み込みする方法を練習します。
Pythonミニ制作Pythonミニ制作：CSVの点数表から平均点を出す
Pythonのcsvモジュールを使い、点数表CSVを作成して平均点を計算するミニ制作を行います。
Pythonミニ制作Pythonミニ制作：CSVの名簿を検索する
Pythonのcsvモジュールを使い、CSV名簿から指定した名前の行を検索するミニ制作を行います。
Pythonミニ制作Pythonミニ制作：日付つき日記アプリを作る
Pythonのdatetimeとファイル書き込みを使い、日付つきの日記をテキストファイルに保存するミニアプリを作ります。
Pythonミニ制作Pythonミニ制作：タイマーを作る
Pythonのtime.sleepを使い、秒数をカウントするシンプルなタイマーを作ります。
Pythonミニ制作Pythonミニ制作：ストップウォッチを作る
Pythonのtime.perf_counterを使い、処理にかかった時間を測るストップウォッチを作ります。
Pythonミニ制作Pythonミニ制作：簡単なクイズゲームを作る
Pythonのリスト、辞書、for文、if文を使い、複数問題のクイズゲームを作ります。
Pythonミニ制作Pythonミニ制作：成績判定ツールを作る
Pythonのif文、関数、リストを使い、点数から合格・評価・平均点を判定するツールを作ります。
Pythonミニ制作Pythonのインストール方法：Windows・macOS・Linux
Python初心者向けに、Windows、macOS、LinuxでPythonをインストールする考え方と、インストール後のバージョン確認方法を整理します。
Python環境構築編pythonコマンドとpython3コマンドの違い
Python初心者が混乱しやすいpython、python3、pyコマンドの違いと、自分の環境でどのコマンドを使うべきかの確認方法を整理します。
Python環境構築編VS CodeでPythonを書く準備
Python初心者向けに、VS Code、Python拡張機能、作業フォルダ、ファイル保存、ターミナル実行までの準備を整理します。
Python環境構築編ターミナルとは：Pythonを実行する場所を理解する
Python初心者向けに、ターミナル、コマンド、現在地、ls、cd、python main.pyの意味を整理します。
Python環境構築編PATHとは：pythonが見つからない理由
Python初心者向けに、PATHの意味、python command not foundの原因、python3やpyで確認する方法、環境変数に深入りしすぎない対処を整理します。
Python環境構築編Pythonのエラーの読み方：Tracebackを怖がらない
Pythonでエラーが出たときに、Tracebackのどこを見ればよいかを初心者向けに練習します。
Python基礎実践Pythonのprintとinput：表示と入力の基本
Pythonのprintで画面に表示し、inputでキーボード入力を受け取る基本を練習します。
Python基礎実践Pythonの文字列操作：結合・分割・置換・検索
Pythonで文字列をつなげる、分ける、置き換える、探す基本操作を初心者向けに練習します。
Python基礎実践Pythonの数値計算：int・float・四則演算
Pythonで整数、小数、四則演算、型変換を使って数値計算の基本を練習します。
Python基礎実践Pythonの比較演算子と論理演算子：条件式を正しく書く
Pythonの==、!=、and、or、notを使い、if文で使う条件式の基本を練習します。
Python基礎実践Pythonのwhile文：繰り返しを止める条件を理解する
Pythonのwhile文で、条件が成り立つ間だけ処理を繰り返す方法を初心者向けに練習します。
Python基礎実践Pythonのrangeとは：for文で回数を指定する
Pythonのrangeを使って、for文で指定した回数だけ処理を繰り返す方法を練習します。
Python基礎実践Pythonのリスト操作：追加・削除・並び替え
Pythonのリストでappend、remove、sortなどを使い、複数の値を扱う基本操作を練習します。
Python基礎実践Pythonの辞書操作：キーと値でデータを扱う
Pythonの辞書でキーと値を使い、名前、点数、設定のようなデータを扱う基本を練習します。
Python基礎実践Pythonのタプルとセット：リストとの違い
Pythonのタプルとセットを使い、変更しないデータと重複しないデータの扱い方を練習します。
Python基礎実践PythonのNoneとは：値がない状態を理解する
PythonのNoneが何を表すのか、関数の戻り値や初期値でどう使うのかを初心者向けに整理します。
Python基礎実践Pythonの例外処理：try exceptの基本
Pythonのtry exceptを使い、入力ミスやファイル読み込み失敗などを安全に扱う基本を練習します。
Python基礎実践Pythonのファイル読み書き：txtファイルを開く
Pythonでtxtファイルを読み込む、書き込む、with openを使う基本を初心者向けに練習します。
Python基礎実践PythonのCSV入門：表データを読み書きする
Pythonのcsvモジュールを使い、表形式のCSVファイルを読み書きする基本を練習します。
Python基礎実践Pythonのimportとは：別ファイルや標準ライブラリを使う
Pythonのimportを使い、標準ライブラリや別ファイルの関数を読み込む基本を初心者向けに練習します。
Python基礎実践Pythonのモジュール分割：コードを複数ファイルに分ける
Pythonコードを複数ファイルに分け、importして使う基本を初心者向けに練習します。
Python基礎実践Pythonのdatetime入門：日付と時刻を扱う
Pythonのdatetimeを使い、今日の日付、現在時刻、日付の表示形式を扱う基本を練習します。
Python基礎実践Pythonのrandom入門：ランダムな値を作る
Pythonのrandomを使い、サイコロ、くじ引き、ランダム選択の基本を初心者向けに練習します。
Python基礎実践Pythonのクラス入門：オブジェクト指向をやさしく理解する
Pythonのclass、__init__、メソッドを使い、データと処理をまとめる基本を初心者向けに練習します。
Python基礎実践Pythonミニ制作：じゃんけんゲームを作る
Pythonのinput、if文、リスト、randomを組み合わせて、初心者向けのじゃんけんゲームを作ります。
Python基礎実践Pythonとは：何ができて、どこで使われるのか
Pythonを初めて学ぶ人向けに、Pythonでできること、使われる分野、学ぶ順番、最初に知っておくべき注意点を整理します。
Python準備編プログラミング言語とは：Python・JavaScript・Javaの違い
プログラミング言語の意味を初心者向けに説明し、Python、JavaScript、Javaの得意分野と学習の入り口を比較します。
Python準備編Pythonの種類：CPython・PyPy・Anacondaの違い
Python初心者が混乱しやすいCPython、PyPy、Anaconda、Miniconda、Python.org版の違いを、最初にどれを使うべきかに絞って整理します。
Python準備編Python 2とPython 3の違い：初心者はどれを使うべきか
Python 2とPython 3の違いを初心者向けに説明し、現在の学習ではPython 3を使うべき理由と確認コマンドを整理します。
Python準備編Pythonが動く仕組み：インタプリタと.pyファイル
Python初心者向けに、.pyファイル、インタプリタ、エディタ、ターミナルの役割を分けて説明し、コードが実行される流れを整理します。
Python準備編Python入門 #1 - 開発環境と実行方法
Python学習を始めるために、Pythonのバージョン確認、作業フォルダ作成、VS Codeでのファイル作成、ターミナルからの実行方法を練習します。
Python入門Python入門 #2 - 変数とデータ型
Pythonの変数、文字列、整数、小数、真偽値、type関数、f-stringを使い、値を名前で扱う基本を練習します。
Python入門Python入門 #3 - if文とfor文
Pythonのif、elif、else、for、rangeを使い、条件によって処理を分ける方法と、同じ処理を繰り返す方法を練習します。
Python入門Python入門 #4 - リストと辞書
Pythonのlistとdictを使い、複数の値をまとめる方法、追加・取得・更新・繰り返し処理の基本を練習します。
Python入門Python入門 #5 - 関数の基本
Pythonのdef、引数、戻り値、型ヒントを使い、同じ処理を関数としてまとめて再利用する基本を練習します。
Python入門CORSエラーをNetworkで切り分ける手順
CORSエラーが出た時に、Consoleだけで判断せず、NetworkでRequest URL、Origin、preflight、レスポンスヘッダーを確認する手順を整理します。
DevTools Waterfall の読み方：どこで遅くなっているか
Chrome DevTools NetworkのWaterfallを使って、待ち時間、ダウンロード、画像、外部スクリプト、リクエスト順序を確認する方法を整理します。
ビルドエラーの読み方：失敗ログのどこを見るか
npm run build が失敗した時に、最初のエラー、ファイル名、行番号、原因と結果を分けて読むための実践手順を整理します。
技術質問を「要約＋詳細」で書く練習
チャットやレビューで読み手を止めない技術質問を書くために、先頭の要約、再現手順、期待結果、調査結果を二層構造で整理する実践記事です。
技術文章を読者から設計する：README・手順書・報告の書き分け
同じ技術内容でも、README、セットアップ手順、障害報告では読者と目的が違います。結論、前提、手順、確認方法を読み手に合わせて組み立てます。
AIにコードレビューさせる時の聞き方
AIにコードレビューを頼む時に、観点、差分、期待する出力、優先度を指定して、丸投げではなく使える指摘を得るための聞き方を整理します。
DevTools Console の見方：JavaScriptエラーを読む順番
Consoleに出る赤いエラーを、エラー名、メッセージ、ファイル名、行番号、stack traceの順に読む方法を初心者向けに整理します。
DevTools Network の見方：表示が遅い・APIが失敗する時の確認手順
Chrome DevToolsのNetworkパネルで、URL、Status、Type、Size、Waterfall、Headers、Responseを見る基本手順を実演形式で整理します。
エラー調査テンプレート：何を見て、何を貼って、どう質問するか
エラーが出た時に、Console、Network、再現手順、期待結果、実際の結果、試したことを整理して質問するためのテンプレートです。
APIエラーをHTTPから切り分ける練習
401、403、404、405、415、429、500などのAPIエラーを、HTTPステータス、ヘッダー、リクエスト内容から順番に切り分けます。
HTTPリクエストの読み方
DevToolsやcurlで見えるHTTPリクエストを、メソッド、URL、ヘッダー、ボディの順に読み解く練習記事です。
HTTPレスポンスの読み方
HTTPレスポンスを、ステータスコード、レスポンスヘッダー、本文の順に読み、画面表示やAPI不具合の原因を切り分ける練習記事です。
フォーム送信とJSON APIのHTTPの違い
HTMLフォーム、JSON API、ファイルアップロードでHTTPリクエストがどう変わるのかを、Content-Typeとボディの違いから整理します。
git addの使い分け：全部追加と一部追加
git add .、git add ファイル名、git add -pの違いを、初心者向けに実演します。
git statusとgit diffを読めるようになる
Git初心者向けに、git statusとgit diffを使って変更状態と差分を確認する手順を実演します。
GitHubに初めてpushする流れ
ローカルのGitリポジトリをGitHubへ初めてpushするまでの流れを、初心者向けに実演します。
Gitコンフリクトを実際に起こして解決する
Git初心者向けに、同じ行を別ブランチで変更してコンフリクトを起こし、解決する手順を実演します。
if文が深いコードをガード節で整理する練習
深いif文を早期returnとガード節で整理し、正常系の流れを読みやすくする実演記事です。
Pull Requestを作ってレビュー前に確認する
GitHubでPull Requestを作る前に、差分、コミット、テスト、説明文を確認する流れを初心者向けに実演します。
コミットを小さく分ける練習
README変更とコード変更が混ざった状態から、git addを使って意味のある小さなコミットに分ける練習をします。
間違えた変更を安全に戻す
Gitで未コミット変更、ステージ済み変更、直前のコミットを安全に戻す練習をします。
共通化しすぎた関数を元に戻すリファクタ練習
引数と条件分岐が増えた共通関数を、責務ごとに分け直すリファクタリングを実演します。
重複コードを見つけて共通化するか判断する練習
DRY原則を実演形式で学び、似たコードをすぐ共通化せず、同じ変更理由を持つか確認してから整理する練習をします。
長い関数を小さく分ける練習
長い関数を入力チェック、計算、保存処理に分けるリファクタリングを実演し、分けすぎない判断も解説します。
副作用のある処理を分離する練習
計算処理とDB保存・メール送信などの副作用を分け、テストしやすい関数へ整理する実演記事です。
変数名と関数名を直して読みやすくする練習
data、flag、handleのような曖昧な名前を、責務が伝わる名前へ変えるリファクタリングを実演します。
charCodeAtと数値比較で文字種を判定する
JavaScriptのcharCodeAtを使い、ASCII、半角カタカナ、全角扱いの文字を数値比較で判定する手順を実演します。
Claude Codeで初めてのコード調査・修正・テスト実行をする
Claude Codeに小さな修正を依頼し、調査、計画、編集、テスト、差分確認の流れを安全に練習します。
Claude CodeのinitでCLAUDE.mdを作る
Claude Codeの/initを使い、プロジェクト用のCLAUDE.mdを作る流れと、生成後に人間が確認すべき点を実演します。
Claude Codeをインストールして初回起動する
Claude Codeを公式手順でインストールし、プロジェクトディレクトリで初回起動する流れを初心者向けに実演します。
Claude Code用のSkillを1つ作る
Claude CodeのSkillを、PRレビュー手順を例にして最小構成で作る実演です。SKILL.mdのdescriptionと手順の書き方を確認します。
COUNT / SUM / AVGで集計クエリを練習する
注文テーブルを使って、COUNT、SUM、AVG、GROUP BY、HAVINGの基本を実際に書きながら確認します。
EXPLAINでインデックスの効きを確認する
SQLのEXPLAINを使って、全件スキャンとインデックススキャンの違いを学習用テーブルで確認します。
Hooksで編集後のフォーマットを自動化する
Claude CodeのHooksを使い、ファイル編集後にフォーマットコマンドを実行する考え方と安全な試し方を実演します。
NULLを含むWHERE条件を練習する
プロフィール、退会日時、ニックネームを例に、SQLでNULLを安全に検索する練習をします。
SELECT / WHERE / ORDER BY / LIMITを練習する
小さなusersテーブルを使って、SQLの基本であるSELECT、WHERE、ORDER BY、LIMITを手順ごとに練習します。
トランザクションで安全にUPDATE / DELETEを練習する
BEGIN、COMMIT、ROLLBACKを使い、SQLの更新と削除を安全に確認しながら実行する流れを実演します。
ブログを例にテーブル設計を練習する
ブログアプリを題材に、users、posts、comments、tagsのテーブル分割と主キー・外部キーの考え方を実演します。
ユーザーと注文テーブルでJOINを練習する
usersとordersの小さなテーブルを使い、INNER JOIN、LEFT JOIN、注文がないユーザーの探し方を実演します。
初心者向けCLAUDE.mdを改善する
曖昧なCLAUDE.mdを、技術スタック、コマンド、禁止事項、テスト方針が明確な指示ファイルへ改善する実演です。
正規表現で全角・半角を判定する実演
JavaScriptの正規表現でASCII、半角カタカナ、全角文字を判定し、\xA1-\xDFの誤用を避ける手順を練習します。
正規表現版と数値比較版をベンチマークする
JavaScriptで全角・半角判定を題材に、正規表現、charCodeAtの数値比較、ビット演算を簡単にベンチマークする手順を整理します。
DevToolsとcurlでHTTP通信を確認する
ブラウザのNetworkパネルとcurlを使って、HTTPステータス、ヘッダー、リダイレクト、TLS、API応答を確認する手順を整理します。
DNSが原因か確認する手順
WebサイトやAPIにつながらない時に、DNS名前解決、Aレコード、CNAME、DNSキャッシュ、別DNSサーバーでの確認を手順で整理します。
DNSレコード A・CNAME・MX・TXT を確認する
初心者向けに、digとnslookupを使ってA、AAAA、CNAME、MX、TXTレコードを確認する手順を整理します。
DNS設定後にWebサイトが表示されない時の確認手順
独自ドメイン設定後にWebサイトが表示されない時、ネームサーバー、DNSレコード、HTTPS、リダイレクト、ホスティング設定を順番に確認する手順を整理します。
ping・traceroute・nslookup・dig・curlで疎通確認する
初心者向けに、ネットワーク不調を切り分けるための ping、traceroute、nslookup、dig、curl の基本的な使い方を手順で確認します。
wwwあり・なしを片方に統一する設定手順
example.com と www.example.com のどちらを正規URLにするか決め、DNS、HTTPS、301リダイレクト、canonicalを確認する手順を整理します。
独自ドメインをホスティングサービスに接続する流れ
独自ドメインをWebサイトのホスティング先へ接続する時に、ドメイン登録、DNSレコード、所有確認、HTTPS発行、表示確認を行う手順を整理します。
GitHubアカウントとSSH/HTTPS接続の準備
初心者向けに、GitHubアカウント作成後に確認するプロフィール、リポジトリ作成、HTTPSとSSHの違い、SSH鍵の基本を整理します。
READMEとMarkdownで学習記録を書く
初心者向けに、Markdownの基本、READMEの役割、GitHubで見やすい学習記録、成果物説明の書き方を実演します。
VS Codeの画面構成と基本操作
VS Code初心者向けに、Explorer、Editor、Terminal、Search、Source Control、Command Paletteの基本操作を手順で確認します。
VS Codeをインストールして初期設定する
プログラミング初心者向けに、VS Codeのインストール、フォルダを開く操作、保存、Auto Save、ターミナル表示までを手順で確認します。
VS Code拡張機能の最小セット
初心者向けに、VS Code拡張機能を入れすぎず、HTML/CSS/JavaScript/Markdown/Git学習に必要な最小セットを選ぶ手順を整理します。
インストールとバージョン確認の基本
初心者向けに、Node.js、npm、Git、Java、Pythonなどのインストール確認とバージョン確認コマンドの読み方を整理します。
エラー文の読み方と検索方法
プログラミング初心者向けに、エラー文、行番号、スタックトレース、検索キーワード、公式ドキュメント確認の手順を実演します。
ターミナル基本操作の実演
初心者向けに、pwd、ls、cd、mkdir、touch、cat、clearなど、プログラミング学習で最初に使うターミナル操作を手順で確認します。
ブラウザとDevToolsで画面・Console・Networkを見る
初心者向けに、ブラウザのDevToolsを使ってElements、Console、Network、Applicationを確認する最初のデバッグ手順を整理します。
プロジェクトフォルダの作り方
初心者向けに、HTML/CSS/JavaScript学習で使いやすいプロジェクトフォルダ構成、ファイル名、README、assetsフォルダを作る手順を整理します。
ESLint & Prettier設定入門
ESLintとPrettierでコード品質を向上させる実践チュートリアル。
pnpm入門 - 高速パッケージマネージャー
pnpmで効率的な依存関係管理とワークスペースを学ぶ実践チュートリアル。
Vercelデプロイ入門 - Next.jsアプリを公開
VercelでNext.jsアプリをデプロイし、カスタムドメインとCI/CDを設定する実践チュートリアル。
Gitの基本操作をマスターしよう
init, add, commit, pushの基本フローを実践。初めてのバージョン管理を体験します。
Linux基本コマンド入門
ls, cd, mkdir, cpなどの基本コマンドを実際に操作。ターミナル操作の第一歩を踏み出そう。
Bun入門 - 次世代JavaScriptランタイム
Bunのインストール、パッケージ管理、ビルド、テスト実行まで。Node.jsからの移行方法も解説。
Deno入門 - セキュアなTypeScriptランタイム
Denoのインストール、権限システム、標準ライブラリ、npm互換性まで。Node.jsとの違いも解説。
MongoDB入門 - NoSQLデータベースの基礎
MongoDBのCRUD操作、インデックス、集計パイプラインを実践的に学ぶチュートリアル。
PostgreSQL入門 - リレーショナルデータベースの基礎
PostgreSQLのインストールから基本的なSQL操作、テーブル設計までを実践的に学ぶチュートリアル。
Tailwind CSS実践ガイド - ユーティリティファーストCSS
Tailwind CSSの基本から応用まで、実践的なUIコンポーネント作成を学ぶチュートリアル。
TypeScript入門 - 型安全なJavaScript開発
TypeScriptの基本的な型システム、インターフェース、ジェネリクスを実践的に学ぶチュートリアル。
ドメイン取得方法：初心者が公開前にやること
初心者が独自ドメインを取得する前に確認する名前選び、料金、更新、DNS管理、ホスティング接続までの流れを整理します。
ドメイン入門実装へ進めるIssueの書き方
題名だけのIssueから抜け出し、背景、目的、対象範囲、完了条件、対象外、参考情報、未決事項を整理して作業を開始できる状態にします。
運用と協働ポートフォリオを問題・判断・結果で説明する
機能と技術の羅列ではなく、誰の問題を見つけ、何を比較して決め、実装後にどう確認し、何が残ったかを成果物の物語として整理します。
運用と協働AIへ大きな実装を丸投げしない：作業を小さく分ける
AIコーディング支援への依頼を、調査、契約確認、実装、検証、レビューに分け、安全に確認できる差分へ変える方法を学びます。
AIと学習設計TDD入門：Red・Green・Refactorを小さな関数で練習する
テスト駆動開発を難しい設計手法として暗記せず、失敗するテスト、最小の実装、読みやすい改善の短いサイクルで体験します。
チーム制作の振り返りテンプレート：成果・判断・協働を残す
チーム開発終了後に、完成機能だけでなく、設計判断、役割分担、レビュー、問題対応、次の改善を具体的な証拠とともに整理するテンプレートです。
大きなコードを全部読まない：入口から処理を追うコードリーディング
既存コードの全体を先頭から読むのではなく、画面、URL、関数名、イベント、エラー文を入口に、変更対象の処理までたどる方法を実演します。
読みにくいコードを直す練習：名前・分割・重複の順に見る
コードを短くすることだけを目標にせず、名前、処理の分割、重複、条件分岐を観察し、動作を保ちながら読みやすくする練習です。
Clerk実践 - 認証基盤を最短で構築する
ClerkをNext.jsへ導入し、sign-in UIとdashboard pageを作り、pageやAPIの近くで認証を確認する基本を学びます。
Resend APIでトランザクションメールを送る
ResendのNode.js SDKを使い、verified domainと環境変数を準備して、HTMLメールを1通送信する手順を学びます。
Upstash Redis実践 - サーバーレスRedisでデータキャッシング
Upstash Redisのset/getとTTLを試し、サーバーレス環境でcache-asideを実装する基本を学びます。
Astroを使ってみよう - コンテンツ重視サイトを高速に作る入門
Astroの島アーキテクチャ、コンテンツコレクション、レイアウト、Markdown統合までを実践的に学び、高速な静的サイトを構築する。
Svelte入門 - コンパイラ型UIフレームワーク実践ガイド
コンパイル時に最適化される軽量UIフレームワークSvelteで、リアクティブなコンポーネントとストアを使ったアプリを構築する実践チュートリアル。
REST APIのテストを書こう
JestとSupertestを使ったREST APIのテスト方法を実践。単体テスト、結合テスト、モック作成を学びます。
shadcn/ui入門 - 再利用可能なUIコンポーネントを作る
shadcn/uiをNext.jsに導入し、Button、Card、Form、Dialogを追加しながら、アクセシビリティとテーマ調整を練習します。
Zustand入門 - 軽量なReact状態管理を実装する
ZustandでReactの共有状態を管理し、ストア作成、アクション、セレクター、永続化、非同期処理の使い分けを練習します。
Zodバリデーション入門 - フォームとAPI入力を安全に扱う
ZodでフォームやAPIの入力値を型安全に検証し、safeParse、エラー表示、API境界での使い方を練習します。
シェルスクリプト入門
変数、条件分岐、ループを使った基本的なシェルスクリプトを作成。作業の自動化を始めよう。
AWS S3入門 - クラウドストレージの基礎
AWS S3のバケット作成、オブジェクト操作、アクセス制御、静的ウェブホスティングを実践的に学ぶ。
境界値テストの作り方：未満・ちょうど・超えるを試す
入力範囲や割引条件の端で起きる不具合を見つけるため、境界の直前、境界値、直後から少ないテストケースを作る方法です。
テストとリリーステスト失敗の切り分け：実装・期待値・環境のどこが違うか
テストが赤くなった時にすぐ実装を戻さず、失敗メッセージ、再現性、直前変更から、実装バグ、テスト誤り、環境問題を分けます。
テストとリリース初めてのリリース前チェックリスト
公開直前に慌てないため、変更内容、テスト、設定、データ、セキュリティ、監視、ロールバック、連絡を順番に確認するチェックリストです。
テストとリリース障害時系列を書く：時刻・事実・操作・結果を残す
障害中の記憶に頼らず、検知、確認、判断、操作、結果を時刻順に記録し、引き継ぎと事後検証に使えるタイムラインを作ります。
運用と協働ランブックの書き方：障害時に迷わない運用手順
担当者の記憶に依存せず、症状、影響確認、最初の調査、危険な操作、復旧確認、連絡先、終了条件を運用手順として残します。
運用と協働レビューしやすいPull Requestの説明文を書く
変更ファイルの一覧ではなく、目的、変更内容、意図的に変えない範囲、確認方法、画面差分、リスクをPR説明へまとめます。
運用と協働READMEに設計判断を書く：技術一覧から一歩進める
使用技術を並べるだけでなく、解決したかった問題、比較した案、選んだ理由、制約、今後の改善をREADMEで説明します。
運用と協働引き継ぎ資料の書き方：次の人が作業を再開できる状態にする
機能説明だけでなく、現在地、未完了、判断理由、実行方法、危険箇所、連絡先を整理し、担当交代後も作業を再開できる資料を作ります。
運用と協働既存コードベースに参加した最初の1週間で見ること
全ファイルを理解しようとせず、起動、主要操作、ディレクトリ、データの流れ、テスト、デプロイ、相談先を順に確認する学習計画です。
運用と協働最小再現コードの作り方：問題だけを小さく取り出す
大きなアプリで起きる不具合から、関係しない画面、通信、状態、ライブラリを一つずつ外し、共有可能な最小再現を作る手順です。
調査とレビュー二分探索デバッグ：原因範囲を半分ずつ狭める
中間地点で状態を確認し、問題がある側だけを残して、処理経路やGitの変更履歴から原因候補を絞る方法を学びます。
調査とレビューバグ報告に再現手順を書く：他の人が同じ失敗を起こせる形にする
「動かない」とだけ伝えず、前提条件、操作、実際の結果、期待する結果を分けて、調査を始められるバグ報告を書きます。
調査とレビュースタックトレースを上から下まで追う練習
エラー名と先頭行だけで決めつけず、スタックトレースから自分のコード、呼び出し元、入力値の生成元をたどる方法を学びます。
調査とレビューコードレビューで最初に見る意図・契約・リスク
書式より先に、変更の目的、外部との契約、失敗時、権限、データ、テストを確認するコードレビューの基本を学びます。
調査とレビュー使われていないコードを安全に削除する手順
検索で参照がないだけで削除せず、動的参照、設定、外部利用、テスト、ビルド、実行確認を通して不要コードを安全に消す方法です。
調査とレビューPayload CMS入門：PostsコレクションでCRUDと下書きプレビューを試す
Payloadの空テンプレートにPostsコレクションを一つ追加し、管理画面で作成・参照・更新・削除と下書きプレビューを確認します。
CMS入門Kubernetes入門：DeploymentとServiceをローカルで動かす
KubernetesのPod、Deployment、Serviceの役割を知り、minikube上でWebサーバーを起動してブラウザから確認します。
Kubernetes入門Helm入門：最小Chartをinstall・upgrade・rollbackする
DeploymentとServiceだけの小さなHelm Chartを作り、インストール、設定変更、履歴確認、ロールバックを実行します。
Kubernetes入門Argo CD入門：Applicationを1つ同期してGitOpsを確認する
学習用KubernetesクラスタへArgo CDを導入し、公式guestbookを表すApplicationを一つ作って、Synced・Healthyを確認します。
Kubernetes入門SWR入門：Reactで取得・読み込み・エラー・再検証を扱う
SWRでAPIデータを取得し、読み込み中・エラー・更新中の表示と、mutateによる再取得を最小のReactコンポーネントで学びます。
Reactのデータ取得GitHub ActionsでCIを高速化する基本
GitHub ActionsのCIを速くするために、依存関係キャッシュ、job分割、concurrency、paths、artifact、不要なinstall削減を実演寄りに整理します。
HuskyからLefthookへ移行してpre-commitを速くする
Husky + lint-staged構成からLefthookへ移行し、pre-commit hookの起動、並列実行、変更ファイル対象化、実行時間計測を行う流れを整理します。
スロークエリ分析・改善・監視の進め方
遅いSQLを見つけ、EXPLAINで原因を読み、インデックスやSQLを書き換え、改善後も監視する流れを実務寄りに整理します。
ログインがすぐ切れる原因の切り分け
ログイン直後に未ログインへ戻る、Cookieが保存されない、別ページで消える問題を、DevToolsとHTTPヘッダーから順番に切り分けます。
Apache Kafka入門 - 分散ストリーミング基盤の実践
Apache Kafkaの概念、Docker Composeでのセットアップ、Producer/Consumerの実装、トピック設計とベストプラクティスまでを学ぶ実践チュートリアル。
Cypress実践ガイド - フロントエンドE2Eテスト入門
Cypressを使ってブラウザ上でE2Eテストを書き、実行し、CIで回すまでの一連のフローを学ぶ実践チュートリアル。
Fastifyを使ってみよう - 高速なNode.js APIサーバー入門
Fastifyの基本ルーティング、プラグイン、スキーマバリデーション、エラーハンドリング、テストまでをハンズオンで学ぶ。
NestJSを使ってみよう - TypeScriptで作る本格バックエンドAPI入門
NestJSの基本概念からモジュール、コントローラ、サービス、依存性注入、バリデーションまでを実践的に学ぶハンズオンチュートリアル。
Prometheus実践ガイド - メトリクス収集とアラート入門
PrometheusでアプリケーションやインフラのメトリクスをPullベースで収集し、PromQLで分析、Alertmanagerで通知するまでを学ぶ実践チュートリアル。
Remix入門 - フルスタックWebフレームワーク実践ガイド
React RouterベースのフルスタックフレームワークRemixで、データローディング、フォーム処理、ネストルーティングを実装する実践チュートリアル。
Sentryを使ってみよう - Webアプリのエラー監視を始める入門
Sentryをフロントエンド(React)とバックエンド(Node.js/Express)の両方に導入し、エラー収集、ソースマップ、リリース管理、パフォーマンス計測まで実践する。
Storybookを使ってみよう - UIコンポーネントカタログを作る入門
Storybookを React + Vite プロジェクトに導入し、ストーリーの書き方、Args、Controls、アクセシビリティアドオンまで実践的に学ぶ。
Stripe決済入門 - オンライン決済の実装
Stripeで決済機能を実装する実践チュートリアル。Checkout、サブスクリプションを学ぶ。
Next.js国際化入門 - 多言語対応サイトを作る
Next.jsとnext-intlで多言語対応サイトを作り、翻訳ファイル、ロケール付きルーティング、言語切替、SEO設定を練習します。
Framer Motion入門 - Reactアニメーションを実装する
Framer MotionでReactの表示、非表示、レイアウト変更、スクロール、ドラッグのアニメーションを実装し、動きの品質確認まで練習します。
TanStack Query入門 - データフェッチング
TanStack Query (React Query) でサーバー状態管理を効率化する実践チュートリアル。
Docker実践ガイド - コンテナ化によるモダンな開発環境構築
Dockerを使ったアプリケーションのコンテナ化を実践的に解説。Dockerfile最適化、Docker Compose、マルチステージビルド、本番環境デプロイまで詳しく紹介。
Drizzle ORM実践ガイド - 型安全でSQLライクなORMの活用法
Drizzle ORMを使った型安全なデータベース操作を詳しく解説。スキーマ定義、クエリビルダー、リレーション、マイグレーション、パフォーマンス最適化まで実践的なパターンを紹介。
GitHub Actions CI/CD完全ガイド - 自動化パイプラインの構築
GitHub Actionsを使ったCI/CDパイプラインの構築方法を実践的に解説。ワークフロー構文、キャッシュ戦略、マトリックスビルド、デプロイ自動化まで網羅。
Gitブランチ戦略を実践
feature branch、Git Flow、GitHub Flowを実際のシナリオで練習。チーム開発の基礎を習得。
GraphQL実装ガイド - Apollo ServerとTypeScriptで型安全なAPI構築
GraphQLをTypeScriptで実装する実践ガイド。Apollo Server、スキーマ設計、リゾルバー、データローダー、認証・認可、サブスクリプションまで詳しく解説。
Hono実践ガイド - 軽量・高速なエッジ対応Webフレームワーク
Honoフレームワークを使ったWeb API開発を実践的に解説。ルーティング、ミドルウェア、バリデーション、RPC、Cloudflare Workers/Deno/Bun対応まで詳しく紹介。
Playwright E2Eテスト実践ガイド - モダンなブラウザテスト自動化
Playwrightを使ったE2Eテストの実践的な書き方を解説。セットアップからCI統合、Page Object Model、認証テストまで実践的なパターンを網羅。
Prisma ORM実践ガイド - 型安全なデータベース操作の極意
Prisma ORMを使った型安全なデータベース操作を実践的に解説。スキーマ設計、マイグレーション、クエリ最適化、本番運用のベストプラクティスを紹介。
PWA実装ガイド - Progressive Web Appsでネイティブ体験を実現
PWA（Progressive Web Apps）の実装方法を解説。Service Worker、Web App Manifest、オフライン対応、プッシュ通知、インストール可能なWebアプリの作り方を詳しく紹介。
Redisキャッシュ実践ガイド - 高速なデータアクセスの設計と実装
Redisを使ったキャッシュ戦略を実践的に解説。キャッシュパターン、TTL設計、分散ロック、セッション管理、レート制限の実装方法を紹介。
Supabase実践ガイド - オープンソースFirebase代替でフルスタック開発
Supabaseを使ったフルスタック開発を実践的に解説。認証、データベース、リアルタイム、ストレージ、Edge Functions、Row Level Securityまで詳しく紹介。
tRPC実践ガイド - エンドツーエンド型安全なAPIの構築
tRPCを使った型安全なフルスタック開発を実践的に解説。Next.js App Router統合、バリデーション、認証、エラーハンドリング、リアルタイム通信まで紹介。
Vitestテスト戦略実践ガイド - 高速で効率的なテスト駆動開発
Vitestを使った効率的なテスト戦略を実践的に解説。ユニットテスト、統合テスト、モック、スナップショット、カバレッジまで網羅的に紹介。
OAuth認証入門 - GoogleログインをNext.jsで実装
NextAuth.jsを使ってGoogleログインを実装する実践チュートリアル。
AWS Lambda入門 - サーバーレス関数の実装
AWS Lambdaの基礎から、API Gateway連携、DynamoDB接続、デプロイ自動化まで実践的に解説。
Cloudflare Workers入門 - エッジコンピューティング実践
Cloudflare Workersの基礎から、KV Storage、D1データベース、R2ストレージの活用まで実践的に解説。
Dockerマルチステージビルド実践
マルチステージビルドで本番用の軽量イメージを作成。Node.js、Go、Rustの実例とベストプラクティスを解説。
Firebase Authentication実践ガイド
Firebase Authenticationを使ったメール認証、OAuth認証、カスタム認証の実装方法を解説。
Next.js Middleware実践ガイド
Next.js Middlewareを使った認証、リダイレクト、レート制限の実装方法を解説。Edge Runtimeでの高速処理を実現。
Nginx設定実践ガイド
Nginxのリバースプロキシ、SSL設定、キャッシュ、ロードバランシングの設定方法を解説。
React Server Components実践ガイド
React Server Componentsの仕組み、使い分け、データフェッチング、パフォーマンス最適化を実践的に解説。
SSL証明書の設定と管理
Let's Encryptでの無料SSL証明書取得、自動更新、各種Webサーバーでの設定方法を解説。
セキュリティヘッダー実装ガイド
CSP、CORS、HSTSなどのセキュリティヘッダーの設定方法と、各フレームワークでの実装例を解説。
データベースバックアップ実践ガイド
PostgreSQL、MySQL、MongoDBのバックアップ・リストア方法と自動化スクリプトを解説。
パフォーマンステスト実践ガイド
k6、Artillery、JMeterを使った負荷テストの実施方法と、結果の分析手法を解説。
ログ集約と分析の実践
ELKスタック、Grafana Loki、CloudWatch Logsを使ったログ集約と分析方法を解説。
WebSocket入門 - リアルタイム通信
WebSocketでリアルタイムチャットアプリを構築する実践チュートリアル。
React Testing Library入門
React Testing Libraryでコンポーネントテストを書く実践チュートリアル。
FastAPI入門 - Python高速API開発
FastAPIで型安全で高速なREST APIを構築する実践チュートリアル。
Jest入門 - JavaScriptテストの基礎
Jestでユニットテスト、モック、非同期テストを実践的に学ぶチュートリアル。
Node.js + Express入門 - REST API開発
ExpressフレームワークでREST APIを構築する実践チュートリアル。ルーティング、ミドルウェア、エラー処理を学ぶ。
Next.js App Router実践ガイド
Next.js 13以降のApp Routerを使ったWebアプリケーション開発を実践的に学ぶチュートリアル。
React Hooks完全マスター - 基本から応用まで
useState、useEffect、useContext、useReducerなどReact Hooksの使い方を実践的に学ぶチュートリアル。
フィーチャーフラグを安全に片付ける
段階公開が終わったフラグを放置せず、利用状況、固定する値、古い分岐、設定、テストを確認して技術的負債を減らす手順です。
テストとリリースOpenTelemetry入門：Node.jsのHTTPトレースをCollectorで確認する
Node.jsアプリをOpenTelemetryで自動計装し、HTTPトレースをCollectorへ送り、debug exporterの出力を確認します。
観測性入門Grafana入門：Prometheusのupを1枚のパネルで表示する
Docker ComposeでPrometheusとGrafanaを起動し、Prometheus data sourceを追加して、upメトリクスのパネルを一つ作ります。
観測性入門
