Docker
Docker | 2週間で実務レベルに到達するDocker学習：実務課題（重要） － Day13
JavaScript
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － Promise キャッシュ
Promise キャッシュって何者？Promise キャッシュは、「同じ非同期処理を何度も実行せず、“進行中 or 結果”を使い回すテクニック」 です。特に、「同じ API を短時間に何回も叩いてしま...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － 不要 await の削除
「不要な await」を消すと何が嬉しいのかawait は便利ですが、「なくてもいい場所に書いてしまうと、わざわざ処理を遅くしている」ことがあります。パフォーマンス最適化でよく効くのが、この「不要な ...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － 並列化の判断
「並列化の判断」は“どこを同時に走らせていいか”を見極めること非同期処理のパフォーマンス最適化で一番効くのが、「待ち時間の長い処理を、できるだけ同時に走らせる」ことです。でも、何でもかんでも並列にすれ...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：クラス設計アプリ（オブジェクト指向）
1日目のゴールと作るもののイメージ1日目のテーマは「class を使って、“それっぽいオブジェクト”を自分で設計できるようになること」です。キーワードはこの3つです。classカプセル化（中身を隠す・...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 14日目
14日目のゴールとテーマ14日目のテーマは「この2週間で身につけた“武器”を言語化して、自分のものにする」です。今日は新しい大きなアプリは作りません。代わりに、自分がもうできるようになっていることを整...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 13日目
13日目のゴールとテーマ13日目のテーマは「自分で“ゼロから”ミニアプリを設計して作る」です。ここまで、名簿アプリ・タスクアプリ・名言アプリと、僕が用意した“お題”に沿って作ってきました。今日は一歩進...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 12日目
12日目のゴールとテーマ12日目のテーマは「外部データを“取ってきて使う”体験をする」です。ここまでで、ブラウザの中だけで完結するアプリ（名簿・タスク）を作ってきました。今日は一歩外に出て、外部サービ...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 11日目
11日目のゴールとテーマ11日目のテーマは「コードを“人が読める文章”にする」です。ここまでで、あなたはもう「動くアプリ」を作れるようになっています。今日からは一歩進んで、コードをファイルごとに分ける...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 10日目
10日目のゴールとテーマ10日目のテーマは「同じことを何度も書かないための“関数化”と、コードの整理（リファクタリング）」です。ここまでで、名簿アプリ・タスクアプリを通して、かなり“動くコード”を書い...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 9日目
9日目のゴールとテーマ9日目のテーマは「タスク管理アプリを“実用レベル”に近づける」です。8日目で「追加・完了切替・削除」ができる ToDo アプリができました。今日はそこに、未完了だけ表示する完了タ...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 8日目
8日目のゴールとテーマ8日目のテーマは「タスク管理アプリ（ToDoリスト）の“ちゃんと動く形”を作る」です。これまでの名簿アプリで学んだことを、別テーマのアプリに“移植”していきます。タスクを追加する...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － HTML タイトル生成
何をしたいユーティリティか：「HTML タイトル生成」ここでの「HTML タイトル生成」は、<title>〜</title> に入れる文字列を、毎回バラバラに組み立てるのではなく、共通ルールで生成する...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － スラッグ生成
何をしたいユーティリティか：「スラッグ生成」ここでの「スラッグ生成」は、人間が読めて、URL や識別子としても扱いやすい「きれいな文字列」を作ることです。ブログ記事の URL、商品ページのパス、カテゴ...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 識別子生成
何をしたいユーティリティか：「識別子生成」ここでの「識別子生成」は、「一意な ID（識別子）を文字列として作る」処理を、毎回バラバラに書かず、共通ユーティリティにまとめることです。注文番号、セッション...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 日付文字列生成
何をしたいユーティリティか：「日付文字列生成」ここで目指すのは、「Date を、業務でよく使うフォーマットの文字列に変換する処理」を関数にまとめることです。画面表示、CSV 出力、ログ、固定長ファイル...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － ログ用文字列生成
何をしたいユーティリティか：「ログ用文字列生成」ここで作りたいのは、「人間が読んで状況をすぐ理解できるログ文字列」を、毎回バラバラに書かず、共通のフォーマットで生成するユーティリティです。業務システム...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － SQL エスケープ
何をしたいユーティリティか：「SQL エスケープ」ここでの「SQL エスケープ」は、文字列を SQL の文字列リテラルとして安全な形に整える処理です。ただし、最初にめちゃくちゃ大事なことを言います。本...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － TSV 生成
何をしたいユーティリティか：「TSV 生成」ここで目指すのは、業務データ（配列や配列の配列）から「TSV 文字列」を安全に生成するユーティリティです。TSV（Tab Separated Values）...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － CSV エスケープ
何をしたいユーティリティか：「CSV エスケープ」ここで作りたいのは、「任意の値を“CSV の 1 セルとして安全な文字列”に変換する関数」です。CSV はただのカンマ区切りではなく、「カンマ」「改行...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 固定長整形
何をしたいユーティリティか：「固定長整形」ここでの「固定長整形」は、文字列を「ちょうど N 文字」にそろえる」ユーティリティです。足りなければ埋める、長ければ切る——これを毎回バラバラに書くのではなく...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 数値ゼロ埋め
何をしたいユーティリティか：「数値ゼロ埋め」ここでの「数値ゼロ埋め」は、「桁数をそろえるために、足りない分を左側に 0 を付ける」ユーティリティです。1 → "01"（2 桁）12 → "012"（3...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 7日目
7日目のゴールとテーマ7日目のテーマは「名簿アプリに“検索・絞り込み・並び替え”を足して、便利アプリに育てる」です。6日目で「登録して一覧表示する」まではできました。今日はそこに、名前で検索する年齢で...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 6日目
6日目のゴールとテーマ6日目のテーマは「ブラウザ上で動く“名簿アプリ”の最初の形を作る」です。4日目で学んだ「オブジェクト＋配列」、5日目で学んだ「HTMLとJavaScriptの連携」を組み合わせて...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 5日目
5日目のゴールとテーマ5日目のテーマは「ブラウザの画面（HTML）とJavaScriptをつなげる」です。昨日まではコンソールの中だけで完結していましたが、今日はついに「画面に出す」側に踏み込みます。...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 4日目
4日目のゴールとテーマ4日目のテーマは「オブジェクトで“1人分の情報”をまとめる」です。昨日までで、配列とループを使って「複数の数字」を扱えるようになりました。今日はそこから一歩進めて、1人分（1件分...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 3日目
2日目のゴールとテーマ2日目のテーマは「条件分岐で“判断できるコード”にする」です。今日は、コンピュータに「状況を見て、自分で選ばせる」感覚を身につけます。もし〜なら、こうするそうでなければ、別のこと...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 2日目
2日目のゴールとテーマ2日目のテーマは「条件分岐で“状況に応じて動きを変える”」です。昨日は「入力して、計算して、表示する」まで行きましたが、今日はそこに「もし〜なら、こうする」という“分かれ道”を加...
JavaScript JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 1日目
1日目のゴールとテーマ1日目のテーマは「JavaScriptで“コンピュータに命令する”感覚をつかむ」です。いきなり難しいことはやりません。今日は、JavaScriptってそもそも何者なのか最小限の環...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：SPA風タブ切り替えアプリ
1日目のゴールと今日やること1日目のテーマは「URL のハッシュ（#）を使って、SPA っぽいタブ切り替えを実現する」ことです。“SPA 風”というのは、ページ全体をリロードせずに、タブを切り替えるだ...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 桁数制限
何をしたいユーティリティか：「桁数制限」ここでの「桁数制限」は、数値や数値文字列の「桁数」をルール通りに制限するユーティリティです。例えば、こんな要件がよくあります。金額は「整数 9 桁まで、小数 2...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 小数丸め
何を作るのか：「小数丸め」ユーティリティここで作りたいのは、「小数点以下を指定桁数で丸める」処理を、毎回バラバラに書かず、分かりやすい関数にまとめたものです。「四捨五入」「切り上げ」「切り捨て」を、業...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 通貨変換表示
何をしたいユーティリティか：「通貨変換表示」ここで目指すのは、単に「金額にカンマを付ける」だけではなく、「通貨単位や通貨コードを付けて、人間が見て意味が分かる形で表示する」ユーティリティです。たとえば...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － カンマ付与
何をしたいユーティリティか：「カンマ付与」ここで作りたいのは、数値や数値っぽい文字列に「3 桁ごとのカンマ」を付けるユーティリティです。1000 → 1,0001234567 → 1,234,567-...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 金額フォーマット
何を作るのか：「業務で使える金額フォーマット」ここで目指すのは、「数値を“人間が業務で読みやすい金額表示”に変換するユーティリティ」です。例えば、こんな変換を安定して行いたいイメージです。format...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － ファイル名取得
何をしたいユーティリティか：「ファイル名取得」ここで作りたいのは、URL やパス文字列から「ファイル名だけ」を取り出す小さな関数です。例えば、こういうイメージです。 → "logo.png"/down...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － 拡張子取得
何をしたいユーティリティか：「拡張子取得」ここで作りたいのは、URL やパス文字列から「拡張子（.png や .js など）」だけを取り出す小さな関数です。 → "png"/scripts/app.m...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － パス結合
「パス結合」で何を楽にしたいのか「パス結合」は、URL のパスを安全にくっつけるユーティリティです。"/api" と "users" を結合して "/api/users" にしたい"/api/" と ...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － ハッシュ削除
「ハッシュ削除」で本当にやりたいことここでの「ハッシュ削除」は、URL の # 以降（フラグメント）をきれいに取り除いた新しい URL を作るユーティリティのことです。例えば、こんなことをしたい場面が...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － ハッシュ取得
「ハッシュ取得」で何を取りたいのかここでの「ハッシュ取得」は、URL の # 以降の部分（フラグメント）を、きれいに取り出して使いやすくするユーティリティのことです。例えば、こんな URL を考えます...
C# 日本の企業・官公庁が公開している無料API
日本では政府・自治体・企業が公開している無料APIが多数あります。実務や個人開発でよく使われるものを、カテゴリ別に整理して紹介します。官公庁・政府系API統計・経済データ1. 総務省統計局 – e-S...
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 の中に入れてはいけない（入れると誤解される）文字を、安全な形に変換すること」です。日本語やスペース、? や & などの記号を...
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...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：モーダルウィンドウ管理
1日目のゴールと今日やること1日目のテーマは「モーダルウィンドウを“クラス”として設計し、きれいに開閉を制御できるようになる」ことです。今日のゴールは、ざっくり言うとこの3つです。モーダルを「1つのク...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － CSV 行生成
「CSV 行生成」でやりたいことをはっきりさせるここでのゴールは、「配列やオブジェクトの値から、正しい形式の1行分の CSV 文字列を生成するユーティリティ」を作ることです。見た目はただのカンマ区切り...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － 単語数カウント
「単語数カウント」で何を数えたいのかを決めるまず、ここをはっきりさせたいです。「単語数を数える」と言っても、言語や用途で意味が変わります。英語の文章なら、スペースで区切られた「単語」を数えたい。日本語...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － 文字数カウント
「文字数カウント」で本当に数えたいものは何かまず、ここをはっきりさせたいです。「文字数を数える」と言っても、実は意味が分かれます。画面上で「何文字入力されたか」を知りたい。DBのカラム制限（バイト数）...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － 行数カウント
「行数カウント」で何をしたいのかをはっきりさせるここでの「行数カウント」は、文字列の中に「何行分のテキストがあるか」を数えるユーティリティのことです。テキストエリアに何行入力されているか知りたい。ログ...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － 省略文字列
「省略文字列」で何をしたいのかをはっきりさせるここでの「省略文字列」は、長すぎる文字列を「…」などで途中カットして、画面に収まる形にするユーティリティのことです。テーブルのカラム幅に収まらないタイトル...