ゼロからプログは、新しい挑戦を応援します。
📢 2026年10月30日のお知らせ
いつも「ゼロからプログ」をご覧いただき、ありがとうございます。
これからは特に、50代から新しいことを始めたい方にも、もっとわかりやすく、安心して学べる場所を目指します。無料のプログラミング学習を大切にしながら、Webサイト制作のご相談にも対応できるサイトへと育てていきます。
現在の学習コンテンツは引き続きご利用いただけます。改修中は一部の表示や構成が変わる場合があります。
リニューアル目標日：2026年12月1日（火）
はじめての方へ
学ぶ楽しさから、作る喜びへ。
ゼロからプログは、初めてプログラミングを学ぶ方から、ホームページを作りたい方まで応援するサイトです。
50代からの新しい挑戦も大歓迎。難しい専門用語をできるだけわかりやすく説明し、自分のペースで学べます。
さらに、ホームページ制作のご相談にも対応できるよう、サービスを準備しています。
「学ぶ」と「作る」をつなぐ場所。それがゼロからプログです。
学習ページを開くと、ここに進捗が保存されます。
まだ学習履歴はありません。
つくることで、考える力が育ち、
日常が少しずつ面白くなっていく。
この場所は、そんな変化を応援する
プログラミング学習サイトです。
つくる人が、
やさしい未来を
つくっていく。
コードで広がる
やさしい社会を、
一緒につくろう。
📚 第二章・全3話「赤い犯人とPODの海とGoogleの門番」を読む →
50代からAIと一緒にWeb制作へ。制作の舞台裏や失敗、学びの記録を4つのSNSで発信し始めました。noteでは「Webの街」の物語を連載中です。
noteを読む →プログラミングを学ぶことは、世界の見え方を少しずつ変えていくこと。
この場所が、みなさんの「つくってみたい」を後押しできますように。
コードを書けば、
きっと、見える世界が変わる。
つくることで、考える力が育ち、
日常が少しずつ面白くなっていく。
この場所は、そんな変化を応援する
プログラミング学習サイトです。
ゼロからプログは、新しい挑戦を応援します。
困ったときに、サイトのどこからでも愛ちゃんへ質問できる専用チャットUIを追加。FAQも折りたたみ式に整理し、初心者が迷ったその場で相談できるようになりました。
2026.10.08
3分でチェック！
理解度を試して、次のステップへ。
完了した記事 18 / 28
ミニテスト正解率 76%
学習継続日数 12日
プログラミングを学ぶことは、世界の見え方を少しずつ変えていくこと。この場所が、みなさんの「つくってみたい」を後押しできますように。
つくる人が、
やさしい未来をつくっていく。
KAZU × AI / 30日公開チャレンジ
実際にコードを書き、失敗し、直しながら、自分の作品を完成させる初心者向け学習サイトです。
ひとつ動いた。その喜びから、次の一歩へ。
第1回「職場に、ものすごく速い新人が来た」
助手のJavaScriptくんと、指示・画面の役割・条件分岐を学ぶ物語。全3ページ。
掲載日：2026年9月12日
完成度42％｜第1段階終盤 → 第2段階入口
① ホームページ → ② 計算アプリ → ③ 便利ツール → ④ オリジナル作品
「分からない」を置き去りにしない。作りながら学び、失敗も学びに変える。
完成した答えだけでなく、迷い・失敗・AIとの相談・修正の過程まで教材として残します。
① 22回分の教材本文を検索エンジンが取得できるか検証 ② 教材の実例と練習問題を充実 ③ AI相談室の操作性と画面のずれを改善 ④ プライバシー保護の実装を再点検 ⑤ Google Search Consoleで確認後、AdSense再申請を判断します。
ホームページを一軒の家から始め、記事・作品・画廊・交流広場へ少しずつ増やしていく構想を「年間計画」に整理しました。
2026年10月20日更新・v3.50：学習番号の表記調整、練習問題の追加、アクセス解析設定の見直し、検索エンジン向けページ情報の補強を実施。プライバシーポリシーの広告に関する説明を更新しました。AdSenseの再審査は、公開ページの取得・表示・内容を確認してから判断します。
2026年10月8日更新・v3.32：愛ちゃんAI相談室を独立したチャットUIへリニューアル。サイト右下からいつでも呼び出せる相談ボタンを追加し、FAQも折りたたみ式に整理しました。AIのWorker側安全設計とGemmaモデル指定は維持しています。
2026年10月7日更新・v3.29：初心者用語集を500語から700語へ拡充しました。追加200語にも読み方・英語名・意味・使用例を用意し、名前・五十音・アルファベット・分類で探せます。
2026年10月7日更新・v3.28：Google AdSense申請接続版。既存の教材・ナビゲーション・問い合わせ機能を維持し、Googleから発行されたAdSenseコードをhead内に追加しました。AI相談室は引き続き無効のままです。
2026年10月5日更新・v3.25：PC版の最新ニュース画像をSNSデビュー専用デザインへ変更。iPhone版にも「X・note・Threads・Facebookで発信スタート！」を表示し、noteへ移動できるよう修正しました。
2026年10月4日更新・v3.21：「このサイトの理念」を追加し、年間ロードマップを10月4日版へ更新。11月のAI案内所・プロンプト集、12月の画廊、2027年の交流広場・参加型サービスまでの計画を明示しました。
2026年10月1日更新・v3.19：プライバシーポリシーを現在の問い合わせ・Web3Forms・Cloudflare・AI・学習進捗保存の仕様に合わせて更新し、旧LINE関連記述を整理しました。
2026年10月1日更新・v3.18：お問い合わせをブラウザーから直接送信する方式に修正。送信中の連打防止と、失敗時の入力保持・状況表示を整えました。
2026年9月29日更新・v3.16：404候補リンクの公開前警告チェックを追加。画面のバージョン表示とCSS・JavaScriptの読み込み番号もv3.16へ統一しました。問い合わせ、AI相談室、学習ナビ、用語集700語を維持しています。
2026年9月26日更新・v2.71：v2.70の内容を保持したまま、公開用バージョン表示と主要キャッシュ番号をv2.71へ更新しました。編集後記3話と番外編もそのまま収録しています。
2026年9月19日更新・v2.18：内部構造を整理。ページ本体から参照されていなかった重複JavaScriptファイルを削除し、現在の表示・教材・学習進捗機能はそのまま維持しました。
2026年9月19日更新・v2.15：ログイン不要の「学習の続き」を追加。閲覧した学習ページ、進捗率、前回の続き先をブラウザ内に保存し、ホームから再開できるようにしました。メールアドレスやパスワードは収集しません。
2026年9月18日更新・v2.12：アクセスログ用Worker設定を追加。講義ナビゲーションを再点検。JavaScript第1回1ページ目→2→3→第2回以降へ連続移動できる構成を確認し、存在しないページ指定時に画面が空になる問題も防止しました。再読み込み時はホームへ戻ります。
2026年9月14日更新・v1.08：PC版トップ画像の位置を修正。街並みと塔を左へ寄せ、見本画像に近い中央配置へ調整しました。iPhone版は変更していません。
2026年9月14日更新・v1.07：PC版の崩れを修正。右上の英字重なり・装飾の崩れ・下部の大きな空白を解消し、ヒーロー画像と3カラムを安定した配置に調整。ピンクも濃いまま維持。
2026年9月14日更新・v1.06：PC版のピンクを強化。見出し・ボタン・アクセント・進捗リングを濃いローズ〜マゼンタ寄りに変更。iPhone版は従来表示のまま維持。
2026年9月14日更新・v1.05：PC版ホームをさらに作り直し。上部ヘッダーの重複をなくし、見本の「左に大きな見出し・右に街並み・下に3カラム」の構成へ近づけました。iPhone版はそのままです。
2026年9月13日更新・v1.02：トップ画像を背景表示から画像パネル表示へ変更し、絵全体が見えるように修正しました。
2026年9月13日更新・v1.01：トップページを高級感のある黒・アイボリー・くすみローズ中心のエディトリアルデザインへ変更。第三者ブランドのロゴやマークは使用していません。
2026年9月13日更新・v1.00：並び替え操作をパソコン・iPhone共通仕様に変更。マウスクリック、タッチ操作、キーボード操作で記事一覧と編集後記の「新しい順／番号順（昇順）」を切り替えられるようにしました。
2026年9月13日更新・v0.99：並び替え機能を修正。記事と編集後記の回番号を見出しから直接読み取り、「新しい順」と「番号順（昇順）」を切り替える方式に変更しました。
2026年9月13日更新・v0.98：編集後記一覧にも並び替えボタンを追加。「新しい順」と「番号順（昇順）」を切り替えられるようにしました。
2026年9月13日更新・v0.97：記事一覧右上に並び替えボタンを追加。「新しい順」と「番号順（昇順）」を切り替えられるようにしました。
2026年9月13日更新・v0.96：記事一覧の表示順を変更。新しい記事を上、古い記事を下に並べる方式にしました。
2026年9月13日更新・v0.95：記事の続きとして、第6回 TypeScript、第7回 Java、第8回 C# の3話を追加。それぞれの言語の性格と得意分野を、プログラム村の職人たちの物語として紹介しました。
2026年9月13日更新・v0.94：編集後記 第9回・第10回を物語調に全面改稿し、インテリア編の第11〜13回を追加。著作権・裏方運営・使いやすい画面づくりを、会話とたとえを交えた読み物として整理しました。
2026年9月13日更新・v0.93：編集後記 第10回「表から見えない、裏方の仕事」を追加。締切・期日・進捗・公開予定を管理する裏方システムの考え方を記録しました。
2026年9月13日更新・v0.89：用語集を300語から360語へ拡張。Python・SQL・セキュリティ・コンピューターの基礎用語を追加しました。
2026年9月13日更新・v0.88：用語集を237語から300語に拡張。略称・説明・使用例・長音の表記違いの検索に対応。
JavaScript講座の物語形式を維持したまま、編集後記 第5〜8回も、実際の迷い・失敗・会話・気づきが伝わる読み物として作り直しました。Cloudflare公開、更新、Search Console、GoogleBot確認までの流れもストーリーとして残しています。
大学で学んだこと、実際に作って感じたこと、自分の強み、今につながった経験と今後の進め方を記録しています。
やさしく積み上げる学びを、落ち着いたカードで見やすく整理。
3つの技術を、基礎→使い方→実践の順に3話ずつ学びます。
追加日：2026年9月16日
「覚える」から「実際に画面を動かす」へ。笑いながら仕組みを理解する3回です。
追加日：2026年9月18日
私はプログラマーではありません。仕事の中で「もっと簡単にできないだろうか」と考えたことが、プログラミングに興味を持つきっかけでした。
見出し、文章、ボタンなどの骨組み。
色、文字、大きさ、配置などの見た目。
ボタンを押した後の動作や画面切替。
見た目ができても、ボタンが動かなければ完成ではありません。実際に押し、確認し、直すところまでを学習の一部にします。
<button>押してください</button><button>押してください</button>これだけでは、押した後に何をするのかが決まっていません。
<button id="hello">押してください</button>
<p id="result"></p>
<script>
document.getElementById('hello').addEventListener('click', function(){
document.getElementById('result').textContent='ボタンが動きました！';
});
</script>↑ 実際に押せます。
プログラム言語の世界・第8回
掲載日：2026年9月13日
プログラム村では、JavaScriptくんが毎日忙しく働いていました。
ボタンを押したら動く。文字を変える。画面を切り替える。計算する。とにかく仕事が速い。
でも、たまにやらかします。
自由です。自由すぎます。
そこへTypeScriptくんがやってきました。
面倒くさい。かなり細かい。でも言っていることは正しい。
数字なら数字、文字なら文字。TypeScriptくんは、仕事を始める前に確認したがるタイプでした。
TypeScriptはJavaScriptを土台にした言語です。JavaScriptを知っていると、「あ、親戚だな」と感じます。
ただしTypeScriptくんは、間違いそうなところを見ると先に注意します。
「そこ危ないですよ」「その値、違う型です」「その名前、本当にありますか？」
少し口うるさい。でも大きなシステムになるほど、この口うるささがありがたくなります。
部屋が一つなら鍵の管理も簡単です。でも100部屋ある建物で「だいたい合ってるでしょう」は怖い。
プログラムも同じ。小さなコードではJavaScriptの自由さが気楽でも、大きくなると「この荷物はどこの部屋？」が重要になります。
そこでTypeScriptくんが入口でチェックします。
警備員みたいなものかもしれません。
プログラム言語の世界・第9回
掲載日：2026年9月13日
ある朝、プログラム村に、きっちりスーツを着た人がやってきました。
Javaさんでした。
時間に正確。決まりを守る。書類もちゃんと書く。
「とりあえず文字を出して」と頼んでも、Javaさんは確認してきます。
「クラスは？」「入口はmainで？」「型は決まっていますか？」
Pythonくんなら、かなり早く仕事を始めてくれます。Javaさんは「会社なので書類が必要です」という顔をしています。
銀行、企業の業務システム、大きなWebサービス。人が多くなるほど「好き勝手に書かない」ことが大切になります。
Javaさんはそこが得意です。
自由な職人というより、組織に強い技術者。
Javaのコードを見ると、最初は「長いな」と感じることがあります。
でも、その中には型、構造、役割、ルールが入っています。
1人なら口約束でもいい。100人なら記録が必要。会社の仕事と同じです。
プログラム言語の世界・第10回
掲載日：2026年9月13日
今度は別の方向から、工具箱を持った職人がやってきました。
名前はC#さん。
見た目は少しJavaさんに似ています。
やっぱり。
C#さんはMicrosoftの世界と相性がいい職人です。
Windows、.NET、業務アプリ、Web、クラウド。かなり幅広く働けます。
また何でも屋が来ました。
C#はゲーム開発でも有名です。Unityでは長く中心的な言語として使われてきました。
キャラクターを動かす。スコアを計算する。当たり判定をする。ゲームのルールを書く。
普段は真面目な業務システムを作っているのに、別の日にはゲームを作っている。ギャップがすごい。
C#も型や構造を大切にします。それでいて便利な機能も多く、「そこまで全部手で書かなくてもいいですよ」と助けてくれる場面があります。
昼は会社の管理システム。夜はゲーム開発。なかなか働き者です。
TypeScriptは慎重派。Javaは組織派。C#は器用な万能派。
同じ「プログラムを書く」でも、得意な仕事が違う。だからプログラム言語は面白い。
変数、if文、関数。少しずつJavaScriptが分かってきたKAZUは、ちょっと調子に乗っていた。
ミニテスト10問の正解を保存しようと、answer1、answer2、answer3……と書き始める。5問、8問と進んだところで手が止まった。
let answer1 = "A";
let answer2 = "B";
let answer3 = "C";そこで登場したのが、たくさんのデータを一つにまとめる配列（Array）だった。
let answers = ["A", "B", "C"];配列は大きな棚のようなもの。Aを取り出すなら answers[0]。ここで重要なのは、配列は0から数えること。
answers[0] → A
answers[1] → B
answers[2] → Clet answers = [
"A", "B", "B", "A", "A",
"B", "A", "B", "A", "B"
];第1問は answers[0]、第10問は answers[9]。名前一覧、用語集、ミニテスト、献立、記事一覧――大量のデータを扱う場面で配列の考え方が役立つ。
今回の要点：変数は1つのデータを覚える。配列は、たくさんのデータを順番にまとめて覚える。一番最初は0番。
配列を覚えたKAZUは、今度は答えを全部表示しようとした。
console.log(answers[0]);
console.log(answers[1]);
console.log(answers[2]);そこでAIが出したのが for文。
for (let i = 0; i < 10; i++) {
console.log(answers[i]);
}let i = 0 は0から開始。i < 10 は10より小さい間続ける。i++ は1ずつ増やす。つまり0、1、2……9と進み、そのたびに answers[i] を処理する。
10回でも100回でも、同じ仕事を人間が書き続ける必要はない。
for (let i = 0; i < answers.length; i++) {
console.log(answers[i]);
}answers.length は配列の個数。問題が10問から50問に増えても、その個数に合わせて最後まで処理できる。
今回の要点：for文は同じ処理を繰り返す仕組み。人間がルールを作り、コンピュータに繰り返しを任せる。
変数、if、関数、配列、for。ここまで覚えたKAZUには一つ疑問があった。
<p id="message">ここが変わります</p>id="message" は目印。JavaScriptから次のように探せる。
document.getElementById("message");ざっくり言えば「このページの中から、messageというIDのものを探して」という命令だ。
document.getElementById("message").textContent =
"JavaScriptで変更しました！";これで画面の文字が実際に書き換わる。
<button onclick="changeMessage()">押してみる</button>function changeMessage() {
document.getElementById("message").textContent =
"成功しました！";
}HTMLが骨組みを作る。CSSが見た目を整える。JavaScriptが動きを与える。変数がデータを覚え、ifが判断し、functionが仕事をまとめ、配列が整理し、forが繰り返し、DOMがHTMLとJavaScriptをつなぐ。
プログラミングはコードを丸暗記することではない。「こうしたい」という人間の考えを、「こうしてください」というコンピュータの言葉へ変えていくことだ。
次回予告：習ったものを全部使って、自分で一つ作ってみる。物語は「ミニアプリ制作編」へ続く。
0 / 2 回 完了
配列・for文・DOM操作を10問で確認します。答えを選ぶと、その場で理由が表示されます。
ミニテストを番号順に整理しました。上から順番に進められます。
全12問。HTML・CSS・JavaScriptの役割から、在庫の判断まで。答えを選ぶと理由が分かります。
ヒントを見ても減点されません。
1,000語を収録。略称・説明・使用例からも検索できます。名前・ひらがな・カタカナ・英字で探せます。用語を押すと説明と使用例が開きます。未入力なら全件表示します。
読み方の最初の文字を選んでください。が・ざ・だ・ば・ぱ行は、か・さ・た・は行に含みます。
登録語彙を読み込み中です。名前を入力すると候補が出ます。
候補がありません。別の文字や読み方を試すか、分類を「すべて」にしてください。
用語を選んでください。
サイト内で現在のページがどの階層にあるかを示す案内。
現在地から上の分類へ戻れるリンクの並びです。閲覧した履歴ではなく、サイト内の階層を示します。今のページは現在地として示し、見た目と構造化データに別々の階層を記述しないようにします。
ホーム→学習→HTMLの順にリンクを並べます。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
ブラウザのタブなどに表示する小さなサイトのアイコン。
ブラウザのタブやブックマークなどでサイトを見分ける小さな絵です。大きい画像の文字は縮小すると読めないことがあるため、小さくても形を識別できるデザインにします。共有時の大きなOGP画像とは役割が異なります。
サイトを見分けやすくする絵をタブに表示します。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
本文やナビゲーションなど、ページの主要領域を識別する目印。
mainやnavなどで本文や案内の領域を識別し、読み上げなどから移動しやすくします。複数の同じ種類の領域がある場合は名前も付けて区別します。見た目の枠だけでなく、文書内の役割を示すことが目的です。
main要素で本文の領域を示します。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
キーボード入力や操作の対象になっている状態。
キーボードで現在どの部品を操作するかを示します。ダイアログを開いたときは内部へ移し、閉じたときは元の操作部品へ戻すと迷いにくくなります。見える目印を消さず、Tabキーで自然な順に移動できるか確認します。
Tabキーで次のボタンに移動します。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
Tabキーで操作対象を移動するときの順番。
キーボードで現在どの部品を操作するかを示します。ダイアログを開いたときは内部へ移し、閉じたときは元の操作部品へ戻すと迷いにくくなります。見える目印を消さず、Tabキーで自然な順に移動できるか確認します。
入力欄から送信ボタンへ自然な順で進めるか確認します。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
文字と背景などの明るさの違いを比率で表したもの。
読みやすさや操作しやすさを調整する際の考え方です。小さい文字や近すぎるボタンは、スマホや文字の拡大で使いづらくなります。読み込み前後、タッチ操作、明暗の違いでも情報が分かるかを確認します。
薄い灰色の文字を濃くして読みやすくします。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
文章の行と行の間の空間。CSSではline-heightで行の高さを調整します。
読みやすさや操作しやすさを調整する際の考え方です。小さい文字や近すぎるボタンは、スマホや文字の拡大で使いづらくなります。読み込み前後、タッチ操作、明暗の違いでも情報が分かるかを確認します。
本文のline-heightを1.8にして読みやすさを確認します。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素が広がる幅の上限。CSSではmax-widthで指定します。
読みやすさや操作しやすさを調整する際の考え方です。小さい文字や近すぎるボタンは、スマホや文字の拡大で使いづらくなります。読み込み前後、タッチ操作、明暗の違いでも情報が分かるかを確認します。
本文が横に長くなりすぎないようにします。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
画像や領域の横幅と高さの比率。
画像や動画の形と、枠の中での表示位置を調整します。containは全体を収め、coverは枠を埋める代わりに一部が切れることがあります。文字入り画像や説明用動画では、大切な部分が切れていないか確認します。
横16に対して縦9の動画枠を作ります。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
必要になるタイミングに近づいてからデータを読み込む方法。
画像の容量・画質・表示方法を用途に合わせます。写真と図では適した形式が異なり、非可逆圧縮では元の情報を完全には戻せません。透過が必要な画像では対応形式を使い、見た目と読み込み速度の両方を確認します。
画面の下にある画像にloading="lazy"を指定します。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
展開すると元のデータを完全に復元できる圧縮。
画像の容量・画質・表示方法を用途に合わせます。写真と図では適した形式が異なり、非可逆圧縮では元の情報を完全には戻せません。透過が必要な画像では対応形式を使い、見た目と読み込み速度の両方を確認します。
文章ファイルをZIPで小さくして送ります。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
一部の情報を減らして容量を小さくする圧縮。
画像の容量・画質・表示方法を用途に合わせます。写真と図では適した形式が異なり、非可逆圧縮では元の情報を完全には戻せません。透過が必要な画像では対応形式を使い、見た目と読み込み速度の両方を確認します。
写真をJPEGで保存すると画質と容量が変わります。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
透明な部分を持つ画像。
画像の容量・画質・表示方法を用途に合わせます。写真と図では適した形式が異なり、非可逆圧縮では元の情報を完全には戻せません。透過が必要な画像では対応形式を使い、見た目と読み込み速度の両方を確認します。
背景を透明にしたPNGをページに置きます。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
線や曲線などを図形の情報として表す画像。
画像の容量・画質・表示方法を用途に合わせます。写真と図では適した形式が異なり、非可逆圧縮では元の情報を完全には戻せません。透過が必要な画像では対応形式を使い、見た目と読み込み速度の両方を確認します。
ロゴを拡大しても輪郭を滑らかに表示します。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
小さな点である画素を並べて表す画像。
画像の容量・画質・表示方法を用途に合わせます。写真と図では適した形式が異なり、非可逆圧縮では元の情報を完全には戻せません。透過が必要な画像では対応形式を使い、見た目と読み込み速度の両方を確認します。
写真を構成する画素の色を編集します。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
図形や文字をXML形式で記述する画像形式。
画像の容量・画質・表示方法を用途に合わせます。写真と図では適した形式が異なり、非可逆圧縮では元の情報を完全には戻せません。透過が必要な画像では対応形式を使い、見た目と読み込み速度の両方を確認します。
円や線を使ったアイコンを作ります。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
実行待ちの処理を順に取り出して実行につなげる仕組み。
処理がいつ実行されるかや、時間の計測に関係します。JavaScriptの通常の処理が長く続くと、イベントや描画の実行も待たされます。予約した処理の種類ごとにタイミングが違うので、見た目の更新と重い計算を分けます。
タイマーの処理は現在の処理が終わった後に実行されます。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
実行中の関数の呼び出し関係を積み重ねて管理する場所。
処理がいつ実行されるかや、時間の計測に関係します。JavaScriptの通常の処理が長く続くと、イベントや描画の実行も待たされます。予約した処理の種類ごとにタイミングが違うので、見た目の更新と重い計算を分けます。
関数Aから関数Bを呼ぶとBの処理が上に積まれます。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
使われなくなったメモリ領域を自動で回収する仕組み。
実行中の資源や処理の単位に関係します。使わなくなったデータを自動回収する環境でも、参照を残し続けると回収されない場合があります。並行する処理では、同じデータを同時に変更する競合にも注意します。
参照されなくなったオブジェクトの領域を再利用します。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
同じ入力なら同じ結果を返し、外部の状態を変更しない関数。
関数の計算結果と、外部への影響を分けて考えます。純粋関数は同じ入力で同じ結果を返し、外部の状態を変更しません。画面表示・保存・通信などの副作用を計算部分と分けると、確認しやすくなります。
二つの数を受け取って合計だけを返します。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
戻り値を返す以外に、外部の状態を変えるなどの作用。
関数の計算結果と、外部への影響を分けて考えます。純粋関数は同じ入力で同じ結果を返し、外部の状態を変更しません。画面表示・保存・通信などの副作用を計算部分と分けると、確認しやすくなります。
関数の中で画面を書き換えたりファイルを保存したりします。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
作成したデータを後から変更しない性質や扱い方。
元の値を変更しない方針や、変更を制限する仕組みです。変更履歴を追いやすくします。Object.freezeは通常そのオブジェクトの直接のプロパティを凍結するもので、内部のオブジェクトまで自動で凍結しません。
配列を直接変更せず、新しい配列を作ります。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
外側を複製し、内側のオブジェクトなどは参照を共有するコピー。
浅いコピーでは外側を複製しても内部のオブジェクトを共有する場合があります。深いコピーは内部の値もたどって複製しますが、どんな値も複製できるとは限りません。structuredCloneでも関数など対応しない値があります。
配列を展開構文で複製しても中のオブジェクトは共有されます。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
内側のデータも含めて独立した複製を作ること。
浅いコピーでは外側を複製しても内部のオブジェクトを共有する場合があります。深いコピーは内部の値もたどって複製しますが、どんな値も複製できるとは限りません。structuredCloneでも関数など対応しない値があります。
編集用データの変更が元の入れ子データへ影響しないようにします。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
整列済みのデータで探索範囲を半分ずつ狭める探し方。
処理の手順やデータの扱い方を整理する考え方です。件数が増えると処理時間や必要なメモリが変わります。たとえば二分探索は順序付け済みのデータが前提なので、使う方法の条件を先に確かめます。
番号順の一覧で中央の番号と比較して探します。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
データを先頭などから一つずつ調べる探し方。
処理の手順やデータの扱い方を整理する考え方です。件数が増えると処理時間や必要なメモリが変わります。たとえば二分探索は順序付け済みのデータが前提なので、使う方法の条件を先に確かめます。
商品一覧を順に見て目的の商品を探します。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
最後に入れたものを最初に取り出すデータ構造。
処理の手順やデータの扱い方を整理する考え方です。件数が増えると処理時間や必要なメモリが変わります。たとえば二分探索は順序付け済みのデータが前提なので、使う方法の条件を先に確かめます。
積んだ皿を上から取る順番に似ています。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
先に入れたものを先に取り出すデータ構造。
処理の手順やデータの扱い方を整理する考え方です。件数が増えると処理時間や必要なメモリが変わります。たとえば二分探索は順序付け済みのデータが前提なので、使う方法の条件を先に確かめます。
印刷の依頼を受付順に処理します。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
条件が切り替わる境目の値。
処理の手順やデータの扱い方を整理する考え方です。件数が増えると処理時間や必要なメモリが変わります。たとえば二分探索は順序付け済みのデータが前提なので、使う方法の条件を先に確かめます。
注文数が1～10なら0・1・10・11の動作を確認します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
入力の誤りや通信失敗など、正常に進まない場合の処理。
処理の手順やデータの扱い方を整理する考え方です。件数が増えると処理時間や必要なメモリが変わります。たとえば二分探索は順序付け済みのデータが前提なので、使う方法の条件を先に確かめます。
保存に失敗したとき利用者に再試行を案内します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
想定どおりの条件で正常に進む処理。
処理の手順やデータの扱い方を整理する考え方です。件数が増えると処理時間や必要なメモリが変わります。たとえば二分探索は順序付け済みのデータが前提なので、使う方法の条件を先に確かめます。
必要事項を入力し、保存完了まで確認します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
同じ問題をもう一度起こすための操作の順番。
不具合の条件と原因を調べるために使います。「どの画面で、何を入力し、どう操作すると、何が起きるか」を記録すると再現できます。エラーの出た行だけでなく、そこへ渡された値や前の処理も確認します。
ページを開く→名前を入力する→保存を押す、と記録します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
外から見える動作を保ちながらコードの内部構造を整理すること。
コードの理解しやすさや修正しやすさを改善する考え方です。リファクタリングでは期待する動作を保ちながら構造を整理します。一度に大きく変えず、変更の目的と影響する範囲を確かめながら進めます。
重複する処理を一つの関数にまとめます。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
コードの変更を確認し、問題点や改善点を検討すること。
開発時の確認や、配信用のファイル作成に関わります。自動確認は決めた条件の範囲を調べるもので、全部の不具合を保証するものではありません。開発用のコードと、実際に配信する成果物の対応も確認します。
保存処理の変更でデータが消えないか確認します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
設計や実装の選択により、将来の変更や保守に余分な手間がかかる状態。
コードの理解しやすさや修正しやすさを改善する考え方です。リファクタリングでは期待する動作を保ちながら構造を整理します。一度に大きく変えず、変更の目的と影響する範囲を確かめながら進めます。
応急処置を重ねた部分を後で整理する必要が生じます。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
複数の列を組み合わせて行を一意に識別する主キー。
主キーは一行を一意に区別し、外部キーは別の表の行との関係を表します。複数の項目を組み合わせて一意にするものが複合主キーです。同じ人の名前がある場合でも、識別番号を使えば取り違えを防ぎやすくなります。
注文番号と明細番号の組で一行を識別します。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
トランザクション内の未確定の変更を取り消す処理。
複数の変更を一まとまりとして扱い、途中までの状態が残る問題を避けます。送金なら減額と増額の両方がそろって成立するようにします。失敗時に戻す範囲や、外部サービスへの処理まで戻せるかは別に設計します。
注文の保存途中で失敗したら一連の変更を取り消します。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
複数の処理が同じ資源を同時に変更して衝突しないようにする仕組み。
同時に複数の処理がデータを変更する際の競合を扱います。楽観的ロックは更新時の確認、悲観的ロックは事前に変更を制限する方式です。ロックを持つ範囲と時間を減らし、失敗時の再試行も考えます。
在庫の同時更新で個数が不整合にならないようにします。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
同じ操作を繰り返しても、一度行った場合と同じ結果になる性質。
通信失敗や繰り返し実行に備える考え方です。応答が来なくても、相手側の処理だけ完了している場合があります。単純に再送すると二重保存などが起こるため、同じ操作を繰り返しても結果が重複しない設計を考えます。
状態を「完了」に設定する操作を二度行っても完了のままです。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
システムが正常に応答するかを確認する仕組み。
配信や運用状態の確認に使います。アクセス数は人の数と一致するとは限らず、ボットや再読み込みを含む場合があります。障害の判断では、期間・エラー率・表示速度などを合わせて見ます。
定期的に確認用URLへアクセスして応答を調べます。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
命令を読み取り、計算や制御を行う主要な処理装置。
CPUは処理を実行し、メモリは作業中の情報、ストレージは保存する情報を担当します。作業机と倉庫の違いに似ています。空き容量不足とメモリ不足では対処が異なるため、どちらが不足しているかを区別します。
プログラムの計算を実行します。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
実行中のプログラムや作業データを一時的に置く記憶領域。
CPUは処理を実行し、メモリは作業中の情報、ストレージは保存する情報を担当します。作業机と倉庫の違いに似ています。空き容量不足とメモリ不足では対処が異なるため、どちらが不足しているかを区別します。
大きな画像を編集すると使用量が増えます。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
ファイルなどを継続して保存する装置や領域。
CPUは処理を実行し、メモリは作業中の情報、ストレージは保存する情報を担当します。作業机と倉庫の違いに似ています。空き容量不足とメモリ不足では対処が異なるため、どちらが不足しているかを区別します。
HTMLファイルをSSDに保存します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
半導体メモリを利用する記憶装置。
CPUは処理を実行し、メモリは作業中の情報、ストレージは保存する情報を担当します。作業机と倉庫の違いに似ています。空き容量不足とメモリ不足では対処が異なるため、どちらが不足しているかを区別します。
OSやアプリ、作成したファイルを保存します。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
磁気ディスクを利用する記憶装置。
CPUは処理を実行し、メモリは作業中の情報、ストレージは保存する情報を担当します。作業机と倉庫の違いに似ています。空き容量不足とメモリ不足では対処が異なるため、どちらが不足しているかを区別します。
写真やバックアップを保存します。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
機器の資源を管理し、アプリを動かす基本ソフト。
コードが動くまでには、解釈や変換を行う環境が必要です。事前に変換するか実行時に解釈するかなどは処理系によって異なります。言語名だけでなく、動かす環境と版を確認すると再現しやすくなります。
WindowsやmacOS、iOSが該当します。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
OSが実行中のプログラムを管理する単位。
実行中の資源や処理の単位に関係します。使わなくなったデータを自動回収する環境でも、参照を残し続けると回収されない場合があります。並行する処理では、同じデータを同時に変更する競合にも注意します。
起動したアプリがプロセスとして動きます。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
プロセス内で処理を進める実行の単位。
実行中の資源や処理の単位に関係します。使わなくなったデータを自動回収する環境でも、参照を残し続けると回収されない場合があります。並行する処理では、同じデータを同時に変更する競合にも注意します。
複数のスレッドで仕事を分担します。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
0か1の二つの状態で表す情報の単位。
データや数の表現に使います。1バイトは通常8ビットで、二進数は0と1、十六進数は0〜9とA〜Fで表します。文字数とバイト数は別で、日本語や絵文字では見た目の文字数より多くのバイトを使います。
8ビットでは256通りの状態を表せます。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
通常8ビットで構成される情報量の単位。
データや数の表現に使います。1バイトは通常8ビットで、二進数は0と1、十六進数は0〜9とA〜Fで表します。文字数とバイト数は別で、日本語や絵文字では見た目の文字数より多くのバイトを使います。
ファイルの大きさをバイト数で確認します。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
0と1を使い、2ごとに桁が上がる数の表し方。
データや数の表現に使います。1バイトは通常8ビットで、二進数は0と1、十六進数は0〜9とA〜Fで表します。文字数とバイト数は別で、日本語や絵文字では見た目の文字数より多くのバイトを使います。
二進数の101は十進数の5です。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
0から9とAからFなどで16種類の数字を表す方式。
データや数の表現に使います。1バイトは通常8ビットで、二進数は0と1、十六進数は0〜9とA〜Fで表します。文字数とバイト数は別で、日本語や絵文字では見た目の文字数より多くのバイトを使います。
CSSの色指定#FF0000は赤を表します。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
データを一定の方式で小さく表現すること。
複数のファイルをまとめたり容量を小さくしたりします。Webの街では荷物を入れた鞄に当たります。ZIPを置くだけでは通常その中のサイトは公開されず、中身を取り出してフォルダ構成を保ったまま配置します。
複数のファイルをZIPにまとめます。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
圧縮されたデータを展開して利用できる形に戻すこと。
複数のファイルをまとめたり容量を小さくしたりします。Webの街では荷物を入れた鞄に当たります。ZIPを置くだけでは通常その中のサイトは公開されず、中身を取り出してフォルダ構成を保ったまま配置します。
ZIPからHTMLファイルを取り出します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
複数のファイルをまとめ、圧縮もできるファイル形式。
複数のファイルをまとめたり容量を小さくしたりします。Webの街では荷物を入れた鞄に当たります。ZIPを置くだけでは通常その中のサイトは公開されず、中身を取り出してフォルダ構成を保ったまま配置します。
公開用ファイル一式をまとめて保管します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
内容を読むことはできるが変更できない状態。
ファイルの整理や操作に使います。拡張子は種類の目印ですが、名前を変えるだけで内容の形式は変わりません。編集したものを保存する際は保存先と権限を確認し、元ファイルが必要なら別名のコピーを残します。
元の帳票を読み取り専用で配布します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
コピーや切り取りをした情報を一時的に保持する仕組み。
ファイルの整理や操作に使います。拡張子は種類の目印ですが、名前を変えるだけで内容の形式は変わりません。編集したものを保存する際は保存先と権限を確認し、元ファイルが必要なら別名のコピーを残します。
コピーしたコードをエディタへ貼り付けます。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
キーの組み合わせで操作を実行する仕組み。
ファイルの整理や操作に使います。拡張子は種類の目印ですが、名前を変えるだけで内容の形式は変わりません。編集したものを保存する際は保存先と権限を確認し、元ファイルが必要なら別名のコピーを残します。
多くのWindowsアプリではCtrl+Sで保存します。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
画面のボタンやアイコンなどで操作する利用方法。
エディタはファイルを編集し、ターミナルでは文字の命令で作業します。GUIは画面の部品、CLIは文字のコマンドで操作する方式です。CLIでは今いるフォルダが対象に影響するため、変更や削除の前に場所を確認します。
保存ボタンをクリックします。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
文字の命令を入力して操作する利用方法。
エディタはファイルを編集し、ターミナルでは文字の命令で作業します。GUIは画面の部品、CLIは文字のコマンドで操作する方式です。CLIでは今いるフォルダが対象に影響するため、変更や削除の前に場所を確認します。
ターミナルでpythonとファイル名を入力します。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
オブジェクトの性質や振る舞いをまとめて定義すること。
クラスはデータと処理の形を定義し、インスタンスはその形から作った個々の実体です。Pythonのselfはその実体を指します。__init__は生成後の初期設定に使われ、HTMLのclass属性とは別の概念です。
class Product:で商品の型を作ります。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
クラスなどをもとに作られた具体的なオブジェクト。
クラスはデータと処理の形を定義し、インスタンスはその形から作った個々の実体です。Pythonのselfはその実体を指します。__init__は生成後の初期設定に使われ、HTMLのclass属性とは別の概念です。
商品クラスから個別の商品を作ります。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
既存のクラスなどの性質を引き継いで拡張する仕組み。
オブジェクトの作成や共有する処理の定義に関係します。JavaScriptのthisは呼び出し方によって対象が変わる場合があります。クラス全体の機能と個々のインスタンスの機能を分けて考えると、呼び出し先を理解しやすくなります。
共通の帳票クラスから注文書クラスを作ります。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
インスタンスメソッドで対象自身を受け取る引数の慣用名。
クラスはデータと処理の形を定義し、インスタンスはその形から作った個々の実体です。Pythonのselfはその実体を指します。__init__は生成後の初期設定に使われ、HTMLのclass属性とは別の概念です。
self.nameでそのインスタンスの名前を扱います。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
通常、インスタンス生成時の初期化に使うメソッド。
クラスはデータと処理の形を定義し、インスタンスはその形から作った個々の実体です。Pythonのselfはその実体を指します。__init__は生成後の初期設定に使われ、HTMLのclass属性とは別の概念です。
受け取った商品名を属性へ保存します。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
値がない状態などを表す特別な値。
有効なデータがない状態を表すために使われます。JavaScriptではnullは意図的な空の値、undefinedは値が設定されていない場合などに現れます。PythonではNoneを使います。0や空文字とは区別して判定します。
検索結果がないことをNoneで返します。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
条件の成立・不成立を表す真偽値。
「条件を満たす」「満たさない」を二つの値で表します。条件分岐ではこの判定をもとに進む処理を選びます。表示用の文字列 "false" と、真偽値の false は別の値なので、文字と判定結果を混同しないようにします。
在庫がある場合にTrueを設定します。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
先の条件が成立しない場合に次の条件を調べる節。
条件の結果に応じて実行する処理を変えます。「入力が空なら案内を出す」「入力済みなら送信する」のような選択に使います。どの条件にも当てはまらない場合の動きも決めておくと、予期しない入力に対応できます。
在庫が少ない場合の分岐を追加します。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
何もしないことを表す文。
Pythonの標準的な操作や構文です。受け取れる値の種類と、結果として返る値を確認して使います。変換できない入力や空の対象ではエラーになる処理もあるため、短い例だけでなく実際に渡すデータで確認します。
作成途中の関数の本体に置きます。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
例外を発生させる文。
処理を続けられない問題を、通常の成功結果とは別の経路で扱います。ファイルがない、入力形式が違うなどの場面で使います。問題を隠して終わるのではなく、利用者向けの案内と調査用の記録を分けて用意します。
不正な個数に対してValueErrorを発生させます。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
値が指定した型やその派生型のインスタンスか調べる関数。
値の種類や所属を調べ、処理を分けるために使います。JavaScriptで配列を調べるならArray.isArrayが適しています。typeof nullが"object"になるなど例外的な結果もあるため、判定方法を目的に合わせます。
入力結果が文字列か確認します。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
繰り返しの対象から番号と要素を順に得る関数。
Pythonで件数や繰り返しを扱います。rangeの終わりの数は通常含まれず、enumerateは位置と値を組にし、zipは複数の並びを組にします。zipは通常短い方の長さで終わるため、件数の違いを見落とさないようにします。
材料一覧に1からの番号を付けます。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
複数の反復可能な対象から要素を組にして取り出す関数。
Pythonで件数や繰り返しを扱います。rangeの終わりの数は通常含まれず、enumerateは位置と値を組にし、zipは複数の並びを組にします。zipは通常短い方の長さで終わるため、件数の違いを見落とさないようにします。
商品名と個数を組にして処理します。圧縮形式のZIPとは別です。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
要素を並べ替えた新しいリストを作る関数。
Pythonの一覧や辞書を操作する方法です。元のデータを変更する処理と、新しい結果を返す処理は別です。appendは一つの値を追加し、extendは中身を順に追加します。取り出す範囲や欠けた項目の扱いも確認します。
商品名を順に並べて表示します。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
列などから範囲や間隔を指定して一部を取り出す操作。
Pythonの一覧や辞書を操作する方法です。元のデータを変更する処理と、新しい結果を返す処理は別です。appendは一つの値を追加し、extendは中身を順に追加します。取り出す範囲や欠けた項目の扱いも確認します。
Pythonでitems[0:3]と書くと先頭から3要素まで取得します。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
文字列の中に式の値を埋め込む書き方。
文章の中に計算結果や変数の値を入れやすくする記法です。JavaScriptではバッククォートと${...}、Pythonではfを付けた文字列と{...}を使います。書き方が違うので、両方の記法を混ぜないようにします。
f'残り{count}個'で個数を表示します。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
関数やクラスに処理を適用して定義を包む仕組み。
Pythonの関数やクラスの定義を整理する仕組みです。デコレーターは対象の機能を包んで動作を変えるなどの用途があります。型ヒントは通常の実行で型を自動強制するものではないので、入力データの検査とは分けます。
関数の実行時間を記録する機能を追加します。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
ファイルやフォルダのパスをオブジェクトで扱う標準モジュール。
Pythonに付属する機能をimportして使います。ファイル・日時・集計などを自分で一から作らずに扱えます。特にファイル変更や外部コマンド実行では、対象のパス・引数・権限を確認してから実行します。
Pathを使ってHTMLファイルを読み込みます。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
行数やNULLでない値の数を数える集計関数。
行の数・合計・平均や、グループ内の順位などを求めます。集計関数でまとめることと、各行を残したままウィンドウ関数で結果を付けることは別です。COUNT(*)とCOUNT(列)ではNULLを数える扱いが異なります。
COUNT(*)で注文の行数を数えます。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
数値の合計を求める集計関数。
行の数・合計・平均や、グループ内の順位などを求めます。集計関数でまとめることと、各行を残したままウィンドウ関数で結果を付けることは別です。COUNT(*)とCOUNT(列)ではNULLを数える扱いが異なります。
SUM(quantity)で注文個数を合計します。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
数値の平均を求める集計関数。
行の数・合計・平均や、グループ内の順位などを求めます。集計関数でまとめることと、各行を残したままウィンドウ関数で結果を付けることは別です。COUNT(*)とCOUNT(列)ではNULLを数える扱いが異なります。
AVG(price)で価格の平均を求めます。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
検索結果の重複する組をまとめる指定。
SQLの結果をまとめたり、条件や実行方法を調整したりするために使います。重複を残すか、NULLをどう扱うかなどで件数が変わります。データベースによって対応する構文や動作が違うため、実際の製品で結果と負荷を確認します。
担当者名を重複なしで取得します。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
集計したグループに対して条件を指定する句。
SELECTで項目を選び、WHEREで対象の行を絞り、GROUP BYで集計の単位を作り、HAVINGで集計後の条件を指定し、ORDER BYで結果を並べます。表示順はORDER BYで明示しなければ保証されません。
合計個数が10以上のグループを表示します。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
対応するデータベースで取得件数などを制限する句。
SQLの結果をまとめたり、条件や実行方法を調整したりするために使います。重複を残すか、NULLをどう扱うかなどで件数が変わります。データベースによって対応する構文や動作が違うため、実際の製品で結果と負荷を確認します。
LIMIT 10で結果を最大10行にします。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
文字列がパターンに合うか調べる演算子。
SQLの結果をまとめたり、条件や実行方法を調整したりするために使います。重複を残すか、NULLをどう扱うかなどで件数が変わります。データベースによって対応する構文や動作が違うため、実際の製品で結果と負荷を確認します。
LIKE '紙%'で紙から始まる名前を探します。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
値が不明または存在しないことなどを表す状態。
SQLのNULLは値が不明・存在しない状態を表し、0や空文字とは異なります。NULLとの比較には通常IS NULLやIS NOT NULLを使います。COALESCEで代替値を選べますが、欠損と本来の0を混ぜてよいかは別に判断します。
未入力の価格をIS NULLで探します。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
列にNULLを保存できないようにする制約。
SQLのNULLは値が不明・存在しない状態を表し、0や空文字とは異なります。NULLとの比較には通常IS NULLやIS NOT NULLを使います。COALESCEで代替値を選べますが、欠損と本来の0を混ぜてよいかは別に判断します。
商品名の入力を必須にします。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
列や列の組の値の重複を制限する制約。
表の構造や、保存してよい値の条件を決めます。画面側の検査だけでなくデータベースにも条件を持たせると、不整合を防ぎやすくなります。既存データに新しい条件を追加する場合、すでに保存された値への影響を確認します。
商品コードを重複登録しないようにします。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
データベースに新しい表を作る文。
表の構造や、保存してよい値の条件を決めます。画面側の検査だけでなくデータベースにも条件を持たせると、不整合を防ぎやすくなります。既存データに新しい条件を追加する場合、すでに保存された値への影響を確認します。
商品名と個数を持つ注文表を作ります。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
既存の表の構造などを変更する文。
表の構造や、保存してよい値の条件を決めます。画面側の検査だけでなくデータベースにも条件を持たせると、不整合を防ぎやすくなります。既存データに新しい条件を追加する場合、すでに保存された値への影響を確認します。
商品表に備考の列を追加します。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
入力などがSQL命令として解釈され、不正な操作につながる問題。
入力された文字がSQLの命令として解釈され、意図しない検索や変更が起こる攻撃です。入力をSQL文字列へ直接つなげず、パラメーターとして渡します。入力チェックだけに頼らず、データベース側の権限も必要な範囲に限定します。
入力値をSQLへ直接連結せず、パラメーターとして渡します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
不正なスクリプトがWebページ内で実行される問題。
悪意のある内容がWebページ内で実行される問題です。他人が入力した内容や外部データの表示方法に注意します。文字は安全な方法で文字として表示し、HTMLを許す場合は許可する要素や属性を制限します。
利用者の入力を文字として表示するときはtextContentを使います。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
利用者の認証状態を悪用して意図しないリクエストを送らせる攻撃。
ログイン中の利用者のブラウザから、本人が意図しない変更リクエストを送らせる攻撃です。変更操作でトークンや送信元の確認などを組み合わせます。GETによる取得と、状態を変更する操作を分けて設計することも大切です。
更新処理でCSRFトークンなどを検証します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
異なる種類の二つの要素で本人を確認する方式。
アカウントの本人確認を助ける方法です。二要素認証では異なる種類の要素を組み合わせ、パスキーは対応する端末などを使います。端末を失った場合に備えて復旧方法も確認し、復旧用の情報は他人に渡さないようにします。
パスワードと手元の認証器を組み合わせます。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
作業に必要な範囲だけ権限を与える考え方。
必要な操作だけを許可し、後から何が起きたか確認できるようにします。記録には日時・対象・結果などを含めると役立ちます。一方でパスワードや秘密のキーを記録しないようにし、閲覧できる人と保存期間も決めます。
閲覧担当者には削除権限を付けません。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
危険な構造などを用途に応じて除去・変換する処理。
入力や出力を安全に扱うための別々の処理です。バリデーションは条件の検査、サニタイズは不要な内容の除去、エスケープは記号をその文脈で文字として扱う変換です。HTML・URL・SQLなど、出力先に合う方法を使います。
許可するタグを限定してHTMLを扱います。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
特別な意味を持つ文字を、その場に適した表現へ変えること。
入力や出力を安全に扱うための別々の処理です。バリデーションは条件の検査、サニタイズは不要な内容の除去、エスケープは記号をその文脈で文字として扱う変換です。HTML・URL・SQLなど、出力先に合う方法を使います。
HTMLの文章中で小なり記号を<と表します。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
不正操作などにつながり得るシステムの弱点。
攻撃に利用される弱点や方法に関係します。入力の検査、アクセス権限の確認、更新、通信回数の制限などを目的に応じて行います。ログに不審な依頼があることと、その依頼が成功したことは区別して調べます。
入力処理の欠陥を修正して更新します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
パスワードの生成や保管、入力を補助するソフト。
アカウントの本人確認を助ける方法です。二要素認証では異なる種類の要素を組み合わせ、パスキーは対応する端末などを使います。端末を失った場合に備えて復旧方法も確認し、復旧用の情報は他人に渡さないようにします。
サービスごとに異なるパスワードを管理します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
本物を装ってパスワードなどをだまし取る行為。
攻撃に利用される弱点や方法に関係します。入力の検査、アクセス権限の確認、更新、通信回数の制限などを目的に応じて行います。ログに不審な依頼があることと、その依頼が成功したことは区別して調べます。
ログイン前にアクセス先のドメインを確認します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
Gitリポジトリを共有し、変更の相談やレビューを行うサービス。
Gitの履歴をオンラインで共有し、修正の相談や確認を行う場所です。Webの街では厳しい記録係に相当します。GitHubへ送るプッシュと、公開サイトに反映するデプロイは別で、連携を設定している場合に続けて実行されます。
サイトのソースコードを保存し、修正内容を比較します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
ソースコードと変更履歴を管理する場所。
Gitの作業状態や履歴を操作するために使います。手元の変更・記録済みの変更・共有先の変更は別です。操作前にstatusやdiffで状態を確認し、.gitignoreで除外しても既に履歴へ入った秘密が消えるわけではない点に注意します。
学習サイト専用のリポジトリを作ります。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
変更を取り込んでもらうための提案。
変更を取り込む前に、差分を見て相談・確認するための仕組みです。どの問題をどう直したか、どんな確認をしたかを説明します。作成した時点では通常、取り込み先のコードや本番サイトへの反映は完了していません。
用語集の追加をレビューしてから取り込みます。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
リポジトリを履歴ごと手元に複製すること。
Gitの作業状態や履歴を操作するために使います。手元の変更・記録済みの変更・共有先の変更は別です。操作前にstatusやdiffで状態を確認し、.gitignoreで除外しても既に履歴へ入った秘密が消えるわけではない点に注意します。
git cloneで作業用のコピーを作ります。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
手元のコミットを遠隔リポジトリへ送る操作。
Gitの作業状態や履歴を操作するために使います。手元の変更・記録済みの変更・共有先の変更は別です。操作前にstatusやdiffで状態を確認し、.gitignoreで除外しても既に履歴へ入った秘密が消えるわけではない点に注意します。
修正をコミットしてからgit pushします。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
遠隔リポジトリの変更を取得して取り込む操作。
Gitの作業状態や履歴を操作するために使います。手元の変更・記録済みの変更・共有先の変更は別です。操作前にstatusやdiffで状態を確認し、.gitignoreで除外しても既に履歴へ入った秘密が消えるわけではない点に注意します。
作業前に他の人の更新を取り込みます。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
変更同士が競合し、自動で統合できない状態。
ブランチで変更の流れを分け、マージで一つにまとめます。同じ箇所の異なる変更などで自動的に統合できない場合がコンフリクトです。単に片方を捨てず、両方の意図を読み、統合後に動作を確認します。
同じ行の別々の修正を確認して統合します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
変更を頻繁に統合し、自動テストなどで確認する開発習慣。
開発時の確認や、配信用のファイル作成に関わります。自動確認は決めた条件の範囲を調べるもので、全部の不具合を保証するものではありません。開発用のコードと、実際に配信する成果物の対応も確認します。
更新のたびに構文チェックを実行します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
利用者の操作の流れを端から端まで確認するテスト。
期待する結果と実際の動作を比べて確認します。部品単体、部品同士、利用者の一連の操作などで確認する範囲が異なります。正常な入力だけでなく、空欄・境界値・通信失敗などを含めると不具合を見つけやすくなります。
検索して用語の説明が開くまで確認します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
テストで期待する条件が成立するか確認する記述。
想定した条件が成立するかを検査し、違えば問題として知らせます。開発中の確認に便利ですが、Pythonのassertは設定で省略される場合があります。利用者の入力検査やアクセス権限の確認の唯一の手段には使いません。
検索結果が1件以上あることを確認します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
テスト用に本物の処理を置き換える代用品。
開発時の確認や、配信用のファイル作成に関わります。自動確認は決めた条件の範囲を調べるもので、全部の不具合を保証するものではありません。開発用のコードと、実際に配信する成果物の対応も確認します。
外部APIの返答を固定して画面を確認します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
エラーに至る関数呼び出しの経路を示す情報。
不具合の条件と原因を調べるために使います。「どの画面で、何を入力し、どう操作すると、何が起きるか」を記録すると再現できます。エラーの出た行だけでなく、そこへ渡された値や前の処理も確認します。
エラーの行番号から原因の関数を探します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
デバッグ中に実行を一時停止する位置。
不具合の条件と原因を調べるために使います。「どの画面で、何を入力し、どう操作すると、何が起きるか」を記録すると再現できます。エラーの出た行だけでなく、そこへ渡された値や前の処理も確認します。
検索処理の途中で変数の値を確認します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
Web配信やネットワーク保護などを提供するサービス。
Webの配信、通信の保護、プログラム実行などの機能を提供するサービスです。Webの街の大門にたとえられます。DNS・配信・Workers・AIなどは役割が別なので、変更した設定がどの機能に関係するかを区別します。
サイトをインターネットへ公開する用途に使います。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
分散したサーバーからコンテンツを配信する仕組み。
配信や運用状態の確認に使います。アクセス数は人の数と一致するとは限らず、ボットや再読み込みを含む場合があります。障害の判断では、期間・エラー率・表示速度などを合わせて見ます。
画像を利用者に近い配信拠点から届けます。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
ドメインの下に設ける名前の区分。
人が覚えやすいWeb上の名前です。example.comに対するhelp.example.comのように、前に名前を足して用途を分けることがあります。ドメイン名と、ページを置くサーバーやサービスは別に設定します。
learn.example.comのlearnが該当します。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
別のURLへ閲覧者を移動させる仕組み。
別のURLへ移動するようブラウザへ知らせます。301は恒久的、302は一時的な移動として扱われます。移動先がさらに元へ戻る設定だとループになるため、最終的に正しいページへ到達するかを確認します。
旧ページから新ページへ案内します。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
要求したページなどが見つからないことを表すHTTP応答。
通信の結果を番号で示します。2xxは成功、3xxは移動や再利用に関わる応答、4xxは依頼や権限などの問題、5xxは処理側の問題です。番号だけで原因を確定せず、URL・送信内容・返された説明やログを合わせて確認します。
削除された記事のURLを開いたときに表示されます。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
サーバー内部のエラーを表すHTTP応答。
通信の結果を番号で示します。2xxは成功、3xxは移動や再利用に関わる応答、4xxは依頼や権限などの問題、5xxは処理側の問題です。番号だけで原因を確定せず、URL・送信内容・返された説明やログを合わせて確認します。
サーバーの処理が失敗した場合にログを確認します。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
通信の暗号化や相手の確認を行うプロトコル。
ブラウザとサーバーの通信に関係します。HTTPSではTLSを使い通信経路を暗号化し、証明書で接続先の確認を助けます。ただしHTTPSのサイトでも、内容が正しいことや運営者が信頼できることまで保証されるわけではありません。
HTTPSで通信内容を保護します。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
接続を保ちながら双方向に通信する仕組み。
一度接続して、双方からデータを送り合う通信方式です。チャットや即時更新などに使えます。常に接続が続くとは限らないため、切断・再接続・接続中の認証状態を扱う必要があります。
チャットの新着メッセージを届けます。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
APIなどの特定の機能にアクセスする接続先。
別のプログラムから機能やデータを利用するための窓口です。Web APIでは、URL・HTTPメソッド・送るデータ・返るデータの約束を確認します。窓口が見えることと、誰でも無制限に利用できることは別です。
/api/termsから用語データを取得します。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
URLの疑問符以降に付ける追加情報。
URLに条件を入れたり、要素へ分解したりするために使います。空白や&などをそのまま連結すると意味が変わるため、対応する機能で組み立てます。#以降のフラグメントは通常サーバーへのHTTPリクエストには含まれません。
?q=htmlで検索語を渡します。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
通信で送受信する主なデータ本体。
通信の依頼・応答や付帯情報、本文を扱います。本文は文字・JSON・ファイルなどの形式を持ちます。本文を一度読むとそのまま再度読めない場合があるため、読み取る場所と形式を決めておきます。
POSTで注文内容のJSONを送ります。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
決めた時間内に処理が終わらず待機を打ち切ること。
通信失敗や繰り返し実行に備える考え方です。応答が来なくても、相手側の処理だけ完了している場合があります。単純に再送すると二重保存などが起こるため、同じ操作を繰り返しても結果が重複しない設計を考えます。
応答が来ない通信を中止して案内を出します。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
失敗した処理を再度試すこと。
通信失敗や繰り返し実行に備える考え方です。応答が来なくても、相手側の処理だけ完了している場合があります。単純に再送すると二重保存などが起こるため、同じ操作を繰り返しても結果が重複しない設計を考えます。
通信失敗時に間隔を空けて再取得します。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
一定時間内に利用できるリクエスト数などの制限。
通信失敗や繰り返し実行に備える考え方です。応答が来なくても、相手側の処理だけ完了している場合があります。単純に再送すると二重保存などが起こるため、同じ操作を繰り返しても結果が重複しない設計を考えます。
短時間に大量のAPI呼び出しをしないようにします。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
検索エンジンがページを理解しやすくする改善。
検索でページを見つけてもらうための改善や確認に関わります。公開、クロール、検索用の登録は別の段階です。サイトマップを送っただけで登録や順位が保証されるわけではなく、内容やアクセス状況を継続して確認します。
記事に内容の分かるタイトルを付けます。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
サイト内のページ構成やURLをまとめた情報。
検索サービスにページの関係や意味を伝える情報です。canonicalは代表URLの指定、JSON-LDは構造化データを記述する形式です。記述だけで検索表示が保証されるわけではなく、実際の本文や公開URLと一致させます。
XML形式で検索エンジンにURLを知らせます。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
クローラーに巡回ルールを伝えるファイル。
検索などの巡回へページの場所や巡回方針を伝えるファイルです。サイトマップはURLの一覧、robots.txtは巡回の指示に使います。robots.txtはアクセス制限の代わりにならないので、秘密のページは認証などで保護します。
巡回対象を指定します。閲覧制限の代わりにはなりません。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
HTML文書の文字コードや説明などを記す要素。
ページのタイトル・説明・共有画像などの情報を、サービスやブラウザへ伝えます。本文に見える文字とは別に、HTMLのheadなどへ設定します。SNS側が以前の情報を保存していると、更新直後の共有表示に反映されないことがあります。
meta charsetで文字コードを指定します。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
リンク共有時のタイトルや画像などを伝えるメタ情報。
ページのタイトル・説明・共有画像などの情報を、サービスやブラウザへ伝えます。本文に見える文字とは別に、HTMLのheadなどへ設定します。SNS側が以前の情報を保存していると、更新直後の共有表示に反映されないことがあります。
SNSに記事の紹介画像を表示させます。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
内容の意味に合ったHTML要素を使う書き方。
HTMLでは、内容の意味に合う要素を選び、他の要素との入れ子関係も正しく書きます。見た目はCSSで調整できるため、見た目だけを理由に要素を選ばないようにします。必要な属性や、キーボード・読み上げでの伝わり方も確認します。
ナビゲーションをnav要素で囲みます。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
文書の章や節の題名を表す要素。
HTMLでは、内容の意味に合う要素を選び、他の要素との入れ子関係も正しく書きます。見た目はCSSで調整できるため、見た目だけを理由に要素を選ばないようにします。必要な属性や、キーボード・読み上げでの伝わり方も確認します。
h1をページの題名、h2を節の題名に使います。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
別の文書や位置へ移動するための参照。
HTMLでは、内容の意味に合う要素を選び、他の要素との入れ子関係も正しく書きます。見た目はCSSで調整できるため、見た目だけを理由に要素を選ばないようにします。必要な属性や、キーボード・読み上げでの伝わり方も確認します。
a要素のhrefに移動先を指定します。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
箇条書きや番号付きの項目を表すHTML要素。
HTMLでは、内容の意味に合う要素を選び、他の要素との入れ子関係も正しく書きます。見た目はCSSで調整できるため、見た目だけを理由に要素を選ばないようにします。必要な属性や、キーボード・読み上げでの伝わり方も確認します。
ulとliで材料一覧を作ります。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
行と列を持つ表を表すHTML要素。
表の見出し・本文・まとめや、行とセルを表します。thは見出し、tdは通常のデータで、scopeなどを使うと対応を伝えやすくなります。ページ全体の配置用ではなく、行と列で関係のあるデータに使います。
tableで発注品と個数を整理します。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
状態などの条件で要素を選ぶCSSの仕組み。
要素の状態や位置などを条件にして選ぶCSSの記法です。:hoverはポインターが乗った状態、:focus-visibleはフォーカスの目印が必要な状態などを扱います。タッチ端末にホバーがあることだけを前提にしないようにします。
:focusで入力中の欄を目立たせます。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素の一部分などを装飾するCSSの仕組み。
HTMLに新しい要素を直接書き足さず、CSSで装飾用の内容などを表現します。::beforeは内容の前、::afterは後に対応します。重要な説明や操作を装飾だけに入れると伝わらない場合があるため、本文のHTMLにも意味を持たせます。
::first-letterで最初の文字を装飾します。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
競合するCSS宣言の優先順位を決める判断材料。
CSSでは、対象となる要素と複数の指定の優先関係を判断します。セレクターが当たっていても別の指定に負ける場合があります。:where()の詳細度は0で、:is()や:not()は引数の詳細度が関係するため、一律に同じ強さではありません。
IDセレクターはクラスセレクターより詳細度が高くなります。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
内容・内側余白・枠線・外側余白として要素を捉える考え方。
要素の中身・内側の余白・境界線・外側の余白を分けて考えます。paddingは内側、marginは外側です。box-sizing: border-boxなら指定した幅にpaddingとborderを含めるため、画面の幅からはみ出す問題を整理しやすくなります。
幅とpaddingを確認してはみ出しを直します。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素の重なり順を指定するCSSプロパティ。
画面内の配置や重なりを制御します。absoluteなどでは通常の文章の流れから外れるため、他の要素と重なることがあります。z-indexはすべての要素を一つの数で比較するわけではなく、重なりのグループにも影響されます。
同じ重なりの文脈内で小窓を前面に出します。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
領域からはみ出す内容の扱いを指定するCSSプロパティ。
領域からはみ出す文章や、改行の仕方を調整します。長いURLや英単語でも横幅を押し広げない指定が必要になる場合があります。省略記号を付けても全文が読めるとは限らないため、必要な情報は別の方法でも確認できるようにします。
overflow: autoで必要に応じスクロールさせます。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
ルート要素の文字サイズを基準にする長さの単位。
相対的な大きさを指定する単位です。remはルート要素の文字サイズ、emは使うプロパティに応じた文字サイズ、chは文字「0」の幅、frはGridの残り領域の配分に関わります。数字だけでなく、何を基準にする単位かを確認します。
文字サイズが16pxなら1.5remは24pxです。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
繰り返し使う値に名前を付けるカスタムプロパティ。
--main-colorのような名前で値を定義し、var(--main-color)で使います。色や余白を複数箇所でそろえるのに便利です。要素から子へ引き継ぐ仕組みがあり、定義した場所によって参照できる値が変わります。
--accentに色を置いてvar(--accent)で使います。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
CSSの値の変化を一定時間かけて表示する仕組み。
位置・大きさ・状態の変化に動きを付けます。動きが多いと読みにくく感じる人もいるため、動きを減らす設定にも対応します。見た目を動かすtransformが、周囲の通常の配置の取り直しをするとは限りません。
ボタンの色をゆっくり切り替えます。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
発生したイベントが親要素へ伝わる段階。
イベントの受け取り先や伝わり方に関係します。親要素でまとめて処理すると、後から追加した子要素にも対応しやすくなります。解除には登録時の関数などが必要なので、使い捨ての関数を重ねて登録しないようにします。
子ボタンのクリックを親の一覧で受け取ります。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
親要素で子要素のイベントをまとめて扱う方法。
イベントの受け取り先や伝わり方に関係します。親要素でまとめて処理すると、後から追加した子要素にも対応しやすくなります。解除には登録時の関数などが必要なので、使い捨ての関数を重ねて登録しないようにします。
追加された用語ボタンも一覧側で処理します。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
連続操作が落ち着いてから処理を実行する方法。
連続するイベントで処理を呼ぶ回数を減らす方法です。デバウンスは入力が落ち着くまで待ち、スロットリングは一定の頻度に抑えます。検索入力とスクロールなどで必要な反応の仕方が違うため、待ち時間を目的に合わせます。
検索入力が止まってから検索します。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
頻繁な処理の実行回数を一定間隔に抑える方法。
連続するイベントで処理を呼ぶ回数を減らす方法です。デバウンスは入力が落ち着くまで待ち、スロットリングは一定の頻度に抑えます。検索入力とスクロールなどで必要な反応の仕方が違うため、待ち時間を目的に合わせます。
スクロール中の更新頻度を抑えます。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
関数が作られた場所の変数を参照できる仕組み。
関数が作られたときの周囲の変数を、後からも参照できる仕組みです。カウンターなどの状態を関数の内部で保てます。値を固定した写真として保存するとは限らず、参照先の変数の変化が結果に影響します。
カウンター関数の内部で回数を保持します。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
別のオブジェクトの性質を参照する仕組みの土台。
オブジェクトの作成や共有する処理の定義に関係します。JavaScriptのthisは呼び出し方によって対象が変わる場合があります。クラス全体の機能と個々のインスタンスの機能を分けて考えると、呼び出し先を理解しやすくなります。
配列は共通のプロトタイプからmapを利用します。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
nullやundefinedならアクセスを止める構文。
JavaScriptで?.を使い、途中がnullやundefinedならアクセスを止めてundefinedを返します。user?.nameならuserがない場合にプロパティ参照のエラーを避けられます。存在する関数内部のエラーなどを何でも抑える機能ではありません。
user?.nameで利用者がいない場合に備えます。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
重複しない値を保持するコレクション。
重複する値を一つにまとめたり、含まれるかを調べたりするのに使います。Setや集合は位置で値を取り出す配列とは扱いが違います。JavaScriptでは同じ内容の別オブジェクトは別の値として扱われます。
new Setで同じ検索候補をまとめます。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
キーと値の組を保持するコレクション。
キーに対応する値を保存する対応表です。JavaScriptのMapでは文字だけでなくオブジェクトなどもキーにできます。getの結果がundefinedのとき、キーがないのかundefinedを保存したのかはhasで区別できます。
用語IDから説明を探せるようにします。配列のmapとは別です。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
JSON文字列をJavaScriptの値へ変換するメソッド。
JSONは文字列・数・配列・オブジェクトなどを共通の形式で表す方法です。parseはJSONの文字から値へ、stringifyは値からJSONの文字へ変換します。JSONだけでは関数などをそのまま保存できず、不正な文字列のparseはエラーになります。
保存したJSON文字列から配列を復元します。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
JavaScriptの値をJSON文字列へ変換するメソッド。
JSONは文字列・数・配列・オブジェクトなどを共通の形式で表す方法です。parseはJSONの文字から値へ、stringifyは値からJSONの文字へ変換します。JSONだけでは関数などをそのまま保存できず、不正な文字列のparseはエラーになります。
注文データを文字列にして保存します。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
同一オリジンでタブのセッション単位に値を保存する仕組み。
ブラウザ側に小さなデータを文字列として保存します。localStorageは通常タブを閉じても残り、sessionStorageはタブのセッション単位です。利用者が消去でき、別の端末とは自動同期しないため、大切な記録の唯一の保存先には向きません。
入力途中の選択内容を一時的に保持します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
ブラウザ内に構造化データを保存できるデータベース。
ブラウザ側の保存や通信の仲介などを使い、アプリに近い利用体験を作る仕組みです。Service Workerには独自の更新やキャッシュの流れがあります。オンライン時とオフライン時、更新後に古いデータが残る場合の動作も確認します。
オフライン用の献立データを保存します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
ページとは別に動き、通信やキャッシュなどを扱う仕組み。
ブラウザ側の保存や通信の仲介などを使い、アプリに近い利用体験を作る仕組みです。Service Workerには独自の更新やキャッシュの流れがあります。オンライン時とオフライン時、更新後に古いデータが残る場合の動作も確認します。
必要なファイルをキャッシュしてオフライン表示に使います。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
Web技術でアプリのような利用体験を目指す仕組み。
ブラウザ側の保存や通信の仲介などを使い、アプリに近い利用体験を作る仕組みです。Service Workerには独自の更新やキャッシュの流れがあります。オンライン時とオフライン時、更新後に古いデータが残る場合の動作も確認します。
ホーム画面から学習サイトを開ける構成にします。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
関数の定義で受け取る値に付ける名前。
関数へ渡す入力です。関数を定義するときの受け取り用の名前が仮引数、呼び出すときに実際に渡す値が実引数です。足し算の関数なら、足したい二つの数を引数として渡します。
function greet(name)のnameが仮引数です。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
関数を呼び出すときに渡す具体的な値。
関数へ渡す入力です。関数を定義するときの受け取り用の名前が仮引数、呼び出すときに実際に渡す値が実引数です。足し算の関数なら、足したい二つの数を引数として渡します。
greet('太郎')の太郎が実引数です。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
ホームページの骨組みを作る言語。
Webの街にたとえると、見出しや段落、入口となるリンクを組み立てる大工です。文字の見た目はCSS、クリック後の処理はJavaScriptが担当します。HTMLでは、内容に合う要素を選ぶことが大切です。
見出し・文章・ボタンを置きます。厳密には、文書の構造を表すマークアップ言語です。
作りたいもの、動かす環境、対応する道具を一緒に確認しましょう。
色、文字、大きさ、配置など見た目を整える。
HTMLで作った内容に、色・文字の大きさ・余白・配置を指定します。Webの街のデザイナーに相当します。同じHTMLでもCSSを変えると見た目を変えられますが、文章の意味や処理の内容そのものは別に考えます。
ボタンを緑にしたり、文字を大きくしたりします。スタイルシート言語です。
作りたいもの、動かす環境、対応する道具を一緒に確認しましょう。
ボタンや画面切替など、ページに動きを付ける。
クリックや入力をきっかけに画面を更新したり、サーバーから情報を取得したりする言語です。Webの街の電気技師に相当します。ブラウザのほか、対応する実行環境ではサーバー側でも動きます。
数量を変えたら金額を計算する、という処理を書けるプログラミング言語です。
作りたいもの、動かす環境、対応する道具を一緒に確認しましょう。
ホームページを見るためのアプリ。
SafariやChromeなどが該当します。URLからデータを取りに行き、HTML・CSSを読み、JavaScriptを実行して画面を表示します。サーバー側で実行する処理と、ブラウザ側で実行する処理は区別します。
SafariやChromeなど。HTML・CSSを表示し、JavaScriptも実行します。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
将来、インターネット上でサイトやデータを届けるために使うコンピュータ。
利用者のリクエストを受け、ページや画像、処理結果を返す役割です。専用の機械だけでなく、その役割を担当するソフトウェアもサーバーと呼びます。ブラウザに渡してはいけない秘密の情報は、サーバー側で管理します。
ブラウザからの要求に応じてページを返すなど、サービスを提供します。サーバーソフトウェアを指す場合もあります。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
集計や自動化など、さまざまな処理を書けるプログラミング言語。
短いコードで処理を組み立てやすく、ファイル整理・集計・Web開発・AIの処理などに使われます。Webの街では面倒な繰り返しを引き受ける仕事人です。ブラウザで通常のJavaScriptのようにそのまま動く言語ではありません。
複数のCSVファイルを読み、商品の合計数をまとめる処理などに使えます。
作りたいもの、動かす環境、対応する道具を一緒に確認しましょう。
業務システムなどにも使われるプログラミング言語。
実行には通常JVMという環境を使います。業務システムなどで使われ、変数の型を明示して大きな処理を整理できます。名前は似ていますが、JavaScriptとは別の言語です。
JavaScriptとは別の言語です。名前が似ていても、そのまま同じコードは使えません。
作りたいもの、動かす環境、対応する道具を一緒に確認しましょう。
データベースの情報を検索・追加・更新するための言語。
表のデータに対して「何を取り出したいか」「何を変更したいか」を指示します。画面のデザイン用の言語ではありません。同じSQLでも、使うデータベースによって利用できる構文に違いがあります。
発注履歴から、特定の日付の商品だけを取り出す、といった操作をします。
作りたいもの、動かす環境、対応する道具を一緒に確認しましょう。
コンピュータに実行させる指示をまとめたもの。
人が書いた指示を、決められた実行環境が読み取って処理します。文章として読めることと、実行して正しく動くことは別です。小さな単位で保存・実行し、想定した結果と比べると間違いを見つけやすくなります。
在庫を確認し、足りなければお知らせする一連の指示。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
プログラミング言語などの決まりに沿って書いた内容。
人が書いた指示を、決められた実行環境が読み取って処理します。文章として読めることと、実行して正しく動くことは別です。小さな単位で保存・実行し、想定した結果と比べると間違いを見つけやすくなります。
const 在庫 = 1; もコードの一部です。ソースコードとも呼びます。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
コードを書くときの文法や並べ方の決まり。
コードの書き方と読みやすさに関係します。コメントは説明用で通常実行されず、構文は機械が解釈する規則です。Pythonではインデントが処理のまとまりを表すため、見た目だけの整形とは異なります。
JavaScriptの if の条件は丸括弧で囲みます。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
コードの中に書く、人のための説明。
コードの書き方と読みやすさに関係します。コメントは説明用で通常実行されず、構文は機械が解釈する規則です。Pythonではインデントが処理のまとまりを表すため、見た目だけの整形とは異なります。
JavaScriptでは // の後に、その行の説明を書けます。処理としては実行されません。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
値に名前を付けて扱う仕組み。
データに名前を付け、後の処理から参照できるようにします。たとえば「人数」という名前に3を入れれば、人数を使う計算でその値を参照できます。名前・入っている値・利用できる範囲を分けて考えると理解しやすくなります。
在庫という名前で1という数字を扱います。変更できるかどうかは宣言方法にもよります。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
後から別の値を再代入できない変数を宣言する書き方。
JavaScriptで、同じ変数名に別の値を再代入できないよう宣言します。const count = 3 の後で count = 4 とするとエラーになります。ただし、配列やオブジェクトの中身まで自動的に変更禁止になるわけではありません。
const 在庫 = 1; の後に 在庫 = 2; とするとエラー。配列やオブジェクトの中身まで固定するわけではありません。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
後から別の値を代入できる変数を宣言する書き方。
JavaScriptで、後から値を入れ替えられる変数を宣言します。let count = 0 の後で count = count + 1 として回数を増やせます。宣言したブロック内で使えるため、どこから参照できるかも確認します。
let 数量 = 1; の後に 数量 = 2; と書けます。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
変数に値を設定すること。
右側で求めた値を左側の変数などに入れる操作です。JavaScriptの count = count + 1 は「今の値に1を足して入れ直す」という意味です。数学の等号や、値が等しいか調べる比較とは役割が異なります。
数量 = 3; は、数量に3を設定します。JavaScriptの = は等しいかを調べる記号ではありません。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
計算に使える数字の値。
数を使う計算のための値です。整数と小数では扱いが異なり、浮動小数点数では一部の小数を正確に表せません。金額や測定値を扱うときは、必要な精度と丸め方を決めてから計算します。
300や2など。300 * 2 なら600になります。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
文字を並べたデータ。
名前や説明文など、文字の並びを扱います。"123" は文字列、123 は数値で、見た目が似ていても計算時の扱いが違います。入力欄から得た値を計算に使うときは、数値への変換と入力内容の確認が必要です。
JavaScriptでは「洗剤」を "洗剤" のように引用符で囲みます。"300" も文字列です。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
true（真）とfalse（偽）の2種類の値。
「条件を満たす」「満たさない」を二つの値で表します。条件分岐ではこの判定をもとに進む処理を選びます。表示用の文字列 "false" と、真偽値の false は別の値なので、文字と判定結果を混同しないようにします。
在庫 <= 2 のような比較の結果は、trueかfalseになります。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
計算や比較などの操作を表す記号。
値を計算したり条件を判定したりする記号です。JavaScriptの===は型の自動変換をせず比較し、%は余りを求めます。複数の演算を組み合わせるときは、括弧を使って評価する順序を明確にします。
+ は足し算や文字列の連結、* は掛け算です。役割は記号や値の種類で変わります。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
値の大小や一致を調べること。
値を計算したり条件を判定したりする記号です。JavaScriptの===は型の自動変換をせず比較し、%は余りを求めます。複数の演算を組み合わせるときは、括弧を使って評価する順序を明確にします。
在庫 <= 2 で、在庫が2以下か調べます。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
境目の値を含めて大小を比べる記号。
値を計算したり条件を判定したりする記号です。JavaScriptの===は型の自動変換をせず比較し、%は余りを求めます。複数の演算を組み合わせるときは、括弧を使って評価する順序を明確にします。
2 <= 2 はtrue。3 <= 2 はfalse。>= は「以上」です。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
型を自動変換せず、値が等しいかを調べる記号。
値を計算したり条件を判定したりする記号です。JavaScriptの===は型の自動変換をせず比較し、%は余りを求めます。複数の演算を組み合わせるときは、括弧を使って評価する順序を明確にします。
3 === 3 はtrueですが、3 === "3" はfalseです。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
条件によって、実行する処理を変えること。
条件の結果に応じて実行する処理を変えます。「入力が空なら案内を出す」「入力済みなら送信する」のような選択に使います。どの条件にも当てはまらない場合の動きも決めておくと、予期しない入力に対応できます。
在庫が少なければ発注のお知らせ、足りていれば通常表示にします。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
条件が成り立つ場合に処理するための書き方。
条件の結果に応じて実行する処理を変えます。「入力が空なら案内を出す」「入力済みなら送信する」のような選択に使います。どの条件にも当てはまらない場合の動きも決めておくと、予期しない入力に対応できます。
if (在庫 <= 2) { ... } は、2本以下のときに中の処理を実行します。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
ifの条件が成り立たない場合の処理を書く部分。
条件の結果に応じて実行する処理を変えます。「入力が空なら案内を出す」「入力済みなら送信する」のような選択に使います。どの条件にも当てはまらない場合の動きも決めておくと、予期しない入力に対応できます。
「もし雨なら傘を持つ。そうでなければ持たない」の後半にあたります。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
ひとまとまりの処理を、呼び出して使えるようにしたもの。
何度も使う処理に名前を付け、必要なときに呼び出します。入力となる引数を受け取り、計算や確認の結果を戻り値として返せます。画面に表示することと、結果を呼び出し元へ返すことは別の操作です。
「金額を計算する」という仕事をまとめ、必要なときに呼び出します。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
関数を定義する書き方の一つ。
何度も使う処理に名前を付け、必要なときに呼び出します。入力となる引数を受け取り、計算や確認の結果を戻り値として返せます。画面に表示することと、結果を呼び出し元へ返すことは別の操作です。
function 返事する() { ... } と書くと、「返事する」という処理を定義できます。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
関数を呼び出すときに渡す値。
関数へ渡す入力です。関数を定義するときの受け取り用の名前が仮引数、呼び出すときに実際に渡す値が実引数です。足し算の関数なら、足したい二つの数を引数として渡します。
計算する(300, 2) の300と2。単価と数量を処理へ渡すイメージです。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
関数が呼び出し元へ返す値。
関数が処理した結果を呼び出し元へ渡します。たとえば合計を返せば、その値を次の計算や画面表示に使えます。returnが実行されると、その関数内の以後の処理には通常進みません。
金額計算の関数から600を返し、画面表示などに使います。JavaScriptではreturnを使います。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
複数の値を順番に並べて扱うもの。
複数の値を順番付きでまとめます。利用者の名前一覧などを一つの変数で扱い、繰り返しで順に処理できます。JavaScriptの配列やPythonのリストの位置は通常0から数えるため、最初の値は位置0です。
["洗剤", "ゴミ袋", "手袋"] のような商品一覧を作れます。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
名前と値の組をまとめて扱うもの。
項目名と値を組み合わせてデータをまとめます。たとえば名前・年齢・住所を一人分の情報として扱えます。項目名が存在しない場合の動作を確認し、同じ項目名に別の意味の値を混ぜないようにします。
{商品名: "洗剤", 単価: 300} のように、一つの商品に関する情報をまとめます。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
同じような処理を複数回実行すること。
同じ手順を複数回実行します。件数が決まった一覧処理や、条件を満たすまで続ける処理に使います。終了条件がいつ成立するかを確認しないと、終わらない処理になって画面やプログラムが反応しなくなることがあります。
商品の一覧を順番に調べ、金額を合計する場面などで使います。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
繰り返しを書くための構文。
同じ手順を複数回実行します。件数が決まった一覧処理や、条件を満たすまで続ける処理に使います。終了条件がいつ成立するかを確認しないと、終わらない処理になって画面やプログラムが反応しなくなることがあります。
JavaScriptで for (let i = 0; i < 3; i++) { ... } は、中の処理を3回行います。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
HTMLで要素を表すための記述。
HTMLでは、内容の意味に合う要素を選び、他の要素との入れ子関係も正しく書きます。見た目はCSSで調整できるため、見た目だけを理由に要素を選ばないようにします。必要な属性や、キーボード・読み上げでの伝わり方も確認します。
<p>文章</p> の <p> と </p> は、段落の開始と終了を表すタグです。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
HTML要素に付ける設定や補足情報。
HTMLの開始タグなどに付けて、対象要素の情報や動作を指定します。同じ属性でも使える要素や値が決まっており、どこへ付けても効くわけではありません。値を付けた後に、表示だけでなく実際の操作や送信結果も確認します。
<p id="伝言"> の id="伝言" は属性です。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
HTML要素に付ける、ページ内で一意の目印。
HTMLの要素を識別したりまとめたりする名前です。idは同じ文書内で一意にし、classは複数の要素に共通の分類として付けられます。classは空白で複数指定でき、見た目や処理の対象をまとめる際に使います。
id="伝言" として、JavaScriptからその部品を探せます。同じページ内で重複させません。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
複数のHTML要素に共通の名前を付ける属性。
HTMLの要素を識別したりまとめたりする名前です。idは同じ文書内で一意にし、classは複数の要素に共通の分類として付けられます。classは空白で複数指定でき、見た目や処理の対象をまとめる際に使います。
同じclassのボタンをCSSでまとめて緑にする、といった使い方をします。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
クリックや入力など、処理を始めるきっかけになる出来事。
クリックや入力などが起きたときに処理を呼び出す仕組みです。ボタンを作るだけでは処理は決まらず、イベントと実行する関数を結び付けます。同じ処理を重複登録すると、一回の操作で複数回動くことがあります。
ボタンがクリックされたら、計算処理を呼び出します。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
クリックされたときの処理を指定するための属性やプロパティ。
クリックや入力などが起きたときに処理を呼び出す仕組みです。ボタンを作るだけでは処理は決まらず、イベントと実行する関数を結び付けます。同じ処理を重複登録すると、一回の操作で複数回動くことがあります。
HTMLでは onclick="返事する()" のように書けます。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
イベントが起きたときに呼び出す処理を登録するメソッド。
クリックや入力などが起きたときに処理を呼び出す仕組みです。ボタンを作るだけでは処理は決まらず、イベントと実行する関数を結び付けます。同じ処理を重複登録すると、一回の操作で複数回動くことがあります。
ボタンにclickイベントの処理を登録し、押されたときに実行させます。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
HTMLなどの文書を、プログラムから操作できる構造として表したもの。
HTML文書を、JavaScriptから扱える要素の木構造として表したものです。文字を書き換えたり、ボタンを追加したりできます。ブラウザ上のDOMを変更しても、サーバーに置いた元のHTMLファイルが自動的に書き換わるわけではありません。
JavaScriptで画面の文章を書き換えるとき、DOMの要素を操作します。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
指定したidを持つ要素を取得するメソッド。
条件に合うDOM要素を探す機能です。idによる検索、CSSセレクターでの検索、自分や祖先の検索などで対象が違います。一件の検索では見つからないとnullになるため、操作前に結果を確認します。
document.getElementById("伝言") で、その目印の部品を探します。見つからなければnullを返します。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
要素の文字の内容を読み書きするプロパティ。
要素の内容を文字として取得・設定します。"<b>こんにちは</b>"を入れてもタグとして実行せず、文字として表示します。利用者が入力した文章を表示するときは、HTMLとして解釈するinnerHTMLとの違いが大切です。
textContent = "600円です" とすると、その要素の文字が変わります。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
ブラウザにメッセージのダイアログを出す関数。
ブラウザにメッセージのダイアログを表示します。利用者が閉じるまで通常その画面のJavaScript処理は待ちます。何度も表示すると操作を妨げるため、入力の説明などは画面内のメッセージで伝える方法も考えます。
alert("発注してください") と書くと、お知らせが出ます。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
ブラウザ内に文字列データを保存する仕組み。
ブラウザ側に小さなデータを文字列として保存します。localStorageは通常タブを閉じても残り、sessionStorageはタブのセッション単位です。利用者が消去でき、別の端末とは自動同期しないため、大切な記録の唯一の保存先には向きません。
学習進捗の保存などに使えます。別端末への自動共有はなく、ブラウザのデータ削除などで消えることがあります。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
情報を整理して保存し、検索や更新を行えるようにしたもの。
情報を決まった形で保存し、検索・更新する仕組みです。複数の利用者が同時に使う場合にも、権限や整合性を管理します。表計算ファイルと似た見た目でも、接続・問い合わせ・バックアップなどの運用が必要です。
商品や発注履歴を管理します。ブラウザ内の保存とは別の仕組みもあります。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
意図した結果にならない、プログラムの不具合。
不具合の条件と原因を調べるために使います。「どの画面で、何を入力し、どう操作すると、何が起きるか」を記録すると再現できます。エラーの出た行だけでなく、そこへ渡された値や前の処理も確認します。
2本以下で知らせたいのに、2本以上で知らせてしまうのもバグです。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
不具合の原因を調べて直す作業。
不具合の条件と原因を調べるために使います。「どの画面で、何を入力し、どう操作すると、何が起きるか」を記録すると再現できます。エラーの出た行だけでなく、そこへ渡された値や前の処理も確認します。
入力した数字と計算結果を確かめ、間違った条件式を修正します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
期待した結果になるか、実際に確かめること。
期待する結果と実際の動作を比べて確認します。部品単体、部品同士、利用者の一連の操作などで確認する範囲が異なります。正常な入力だけでなく、空欄・境界値・通信失敗などを含めると不具合を見つけやすくなります。
2本以下で発注するルールなら、2本と3本などを入れて比較します。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
別のプログラムから機能を利用するための窓口や取り決め。
別のプログラムから機能やデータを利用するための窓口です。Web APIでは、URL・HTTPメソッド・送るデータ・返るデータの約束を確認します。窓口が見えることと、誰でも無制限に利用できることは別です。
翻訳サービスに文章を送り、訳文を受け取る。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
JavaScriptに型を扱う仕組みを加えた言語。
JavaScriptに型の情報を加えて、実行前に値の使い方の間違いを見つけやすくする言語です。通常はJavaScriptへ変換して実行します。型の指定だけで外部から来たデータが安全になるわけではないため、実行時の入力確認も必要です。
金額を入れる変数に文字を渡すミスを開発中に見つける。
作りたいもの、動かす環境、対応する道具を一緒に確認しましょう。
メモリや機器に近い処理も記述できる言語。
機械に近い処理や高い性能が必要な場面でも使われる言語です。メモリの扱い方や安全性の仕組みは言語ごとに違います。JavaScriptやPythonのコードをそのまま置き換えられるわけではなく、対応したコンパイラや実行環境を用意します。
組み込み機器の制御プログラムを書く。
作りたいもの、動かす環境、対応する道具を一緒に確認しましょう。
C言語を基礎に、クラスなどの機能を備えた言語。
機械に近い処理や高い性能が必要な場面でも使われる言語です。メモリの扱い方や安全性の仕組みは言語ごとに違います。JavaScriptやPythonのコードをそのまま置き換えられるわけではなく、対応したコンパイラや実行環境を用意します。
高速な画像処理やゲームの処理を書く。
作りたいもの、動かす環境、対応する道具を一緒に確認しましょう。
.NETなどで利用されるプログラミング言語。
アプリやサーバー側の処理などを作るための言語です。作りたいものと公開先に対応する実行環境や開発用の道具を選びます。同じ目的のプログラムでも、構文・ライブラリ・配布方法が言語ごとに異なります。
デスクトップアプリを作る。
作りたいもの、動かす環境、対応する道具を一緒に確認しましょう。
Apple製品向けアプリの開発などに使われる言語。
アプリやサーバー側の処理などを作るための言語です。作りたいものと公開先に対応する実行環境や開発用の道具を選びます。同じ目的のプログラムでも、構文・ライブラリ・配布方法が言語ごとに異なります。
iPhone向けの記録アプリを作る。
作りたいもの、動かす環境、対応する道具を一緒に確認しましょう。
簡潔な文法と並行処理の仕組みを備えた言語。
アプリやサーバー側の処理などを作るための言語です。作りたいものと公開先に対応する実行環境や開発用の道具を選びます。同じ目的のプログラムでも、構文・ライブラリ・配布方法が言語ごとに異なります。
多数の要求を受けるサーバーを作る。
作りたいもの、動かす環境、対応する道具を一緒に確認しましょう。
所有権の仕組みによりメモリ安全性を重視する言語。
機械に近い処理や高い性能が必要な場面でも使われる言語です。メモリの扱い方や安全性の仕組みは言語ごとに違います。JavaScriptやPythonのコードをそのまま置き換えられるわけではなく、対応したコンパイラや実行環境を用意します。
高速なファイル処理ツールを作る。
作りたいもの、動かす環境、対応する道具を一緒に確認しましょう。
オブジェクトを中心に処理を書く言語。
アプリやサーバー側の処理などを作るための言語です。作りたいものと公開先に対応する実行環境や開発用の道具を選びます。同じ目的のプログラムでも、構文・ライブラリ・配布方法が言語ごとに異なります。
Webアプリの処理を書く。
作りたいもの、動かす環境、対応する道具を一緒に確認しましょう。
Webサーバー側の処理などに使われる言語。
アプリやサーバー側の処理などを作るための言語です。作りたいものと公開先に対応する実行環境や開発用の道具を選びます。同じ目的のプログラムでも、構文・ライブラリ・配布方法が言語ごとに異なります。
フォームの入力をサーバーで処理する。
作りたいもの、動かす環境、対応する道具を一緒に確認しましょう。
Javaとの相互利用が可能な言語。
アプリやサーバー側の処理などを作るための言語です。作りたいものと公開先に対応する実行環境や開発用の道具を選びます。同じ目的のプログラムでも、構文・ライブラリ・配布方法が言語ごとに異なります。
Android向けアプリを作る。
作りたいもの、動かす環境、対応する道具を一緒に確認しましょう。
人がプログラミング言語で書いた指示の文章。
人が書いた指示を、決められた実行環境が読み取って処理します。文章として読めることと、実行して正しく動くことは別です。小さな単位で保存・実行し、想定した結果と比べると間違いを見つけやすくなります。
エディタでindex.htmlを開いて読む。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
問題を解くための手順。
処理の手順やデータの扱い方を整理する考え方です。件数が増えると処理時間や必要なメモリが変わります。たとえば二分探索は順序付け済みのデータが前提なので、使う方法の条件を先に確かめます。
金額が小さい順に商品を並べる。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
行頭を字下げして構造を分かりやすくすること。
コードの書き方と読みやすさに関係します。コメントは説明用で通常実行されず、構文は機械が解釈する規則です。Pythonではインデントが処理のまとまりを表すため、見た目だけの整形とは異なります。
条件分岐の中を一段下げて書く。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
ソースコードを別の実行形式などへ変換すること。
コードが動くまでには、解釈や変換を行う環境が必要です。事前に変換するか実行時に解釈するかなどは処理系によって異なります。言語名だけでなく、動かす環境と版を確認すると再現しやすくなります。
TypeScriptをJavaScriptへ変換する。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
プログラムを解釈して実行する仕組み。
コードが動くまでには、解釈や変換を行う環境が必要です。事前に変換するか実行時に解釈するかなどは処理系によって異なります。言語名だけでなく、動かす環境と版を確認すると再現しやすくなります。
Pythonの処理系でスクリプトを実行する。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
プログラムを動かすためのソフトや設定。
コードが動くまでには、解釈や変換を行う環境が必要です。事前に変換するか実行時に解釈するかなどは処理系によって異なります。言語名だけでなく、動かす環境と版を確認すると再現しやすくなります。
ブラウザでJavaScriptを動かす。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
処理系に実行させるプログラム。
コードが動くまでには、解釈や変換を行う環境が必要です。事前に変換するか実行時に解釈するかなどは処理系によって異なります。言語名だけでなく、動かす環境と版を確認すると再現しやすくなります。
毎日の集計処理をファイルに書く。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
文章やソースコードを編集するソフト。
エディタはファイルを編集し、ターミナルでは文字の命令で作業します。GUIは画面の部品、CLIは文字のコマンドで操作する方式です。CLIでは今いるフォルダが対象に影響するため、変更や削除の前に場所を確認します。
HTMLの見出しを書き換える。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
文字でコマンドを入力し、結果を見る画面。
エディタはファイルを編集し、ターミナルでは文字の命令で作業します。GUIは画面の部品、CLIは文字のコマンドで操作する方式です。CLIでは今いるフォルダが対象に影響するため、変更や削除の前に場所を確認します。
python app.py を入力する。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
操作を実行するための命令。
エディタはファイルを編集し、ターミナルでは文字の命令で作業します。GUIは画面の部品、CLIは文字のコマンドで操作する方式です。CLIでは今いるフォルダが対象に影響するため、変更や削除の前に場所を確認します。
フォルダの中身を一覧表示する。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
ファイルやフォルダの場所を表す文字列。
ファイルやフォルダの場所を表す住所です。相対パスは基準の場所からたどり、絶対パスは決まった起点から示します。HTML・CSS・実行中のプログラムでは基準が異なる場合があるため、どこから探す指定かを確認します。
images/logo.pngで画像の場所を指定する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
基準の場所から見たファイルの位置。
ファイルやフォルダの場所を表す住所です。相対パスは基準の場所からたどり、絶対パスは決まった起点から示します。HTML・CSS・実行中のプログラムでは基準が異なる場合があるため、どこから探す指定かを確認します。
同じフォルダのstyle.cssを指定する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
起点からの場所を省略せず表したパス。
ファイルやフォルダの場所を表す住所です。相対パスは基準の場所からたどり、絶対パスは決まった起点から示します。HTML・CSS・実行中のプログラムでは基準が異なる場合があるため、どこから探す指定かを確認します。
/home/user/data.csvのように指定する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
ファイル名の末尾で種類を示す部分。
ファイルの整理や操作に使います。拡張子は種類の目印ですが、名前を変えるだけで内容の形式は変わりません。編集したものを保存する際は保存先と権限を確認し、元ファイルが必要なら別名のコピーを残します。
.htmlはHTMLファイルに使われる。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
ファイルをまとめて整理する場所。
ファイルの整理や操作に使います。拡張子は種類の目印ですが、名前を変えるだけで内容の形式は変わりません。編集したものを保存する際は保存先と権限を確認し、元ファイルが必要なら別名のコピーを残します。
公開するファイルをpublicにまとめる。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
文字と数値の対応を定めた仕組み。
文字とデータの対応に関わります。Unicodeは文字を識別する共通の体系、UTF-8はその文字をバイトで表す方式の一つです。保存時と読み込み時の方式が合わないと文字化けすることがあります。
UTF-8で日本語の文章を保存する。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
Unicodeの文字をバイト列として表す方式の一つ。
文字とデータの対応に関わります。Unicodeは文字を識別する共通の体系、UTF-8はその文字をバイトで表す方式の一つです。保存時と読み込み時の方式が合わないと文字化けすることがあります。
HTMLのcharsetにUTF-8を指定する。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
世界の文字などに共通の番号を割り当てる規格。
文字とデータの対応に関わります。Unicodeは文字を識別する共通の体系、UTF-8はその文字をバイトで表す方式の一つです。保存時と読み込み時の方式が合わないと文字化けすることがあります。
日本語と英語を同じ文書で扱う。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
文字コードの解釈の違いなどで文字が正しく表示されない状態。
文字とデータの対応に関わります。Unicodeは文字を識別する共通の体系、UTF-8はその文字をバイトで表す方式の一つです。保存時と読み込み時の方式が合わないと文字化けすることがあります。
日本語のCSVを違う文字コードで開くと起こり得る。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
小数部分を持たない数。
数を使う計算のための値です。整数と小数では扱いが異なり、浮動小数点数では一部の小数を正確に表せません。金額や測定値を扱うときは、必要な精度と丸め方を決めてから計算します。
在庫数を9として扱う。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
仮数と指数で表す数値形式。丸め誤差が生じることがある。
数を使う計算のための値です。整数と小数では扱いが異なり、浮動小数点数では一部の小数を正確に表せません。金額や測定値を扱うときは、必要な精度と丸め方を決めてから計算します。
0.1と0.2の和が厳密な0.3にならない場合がある。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
データを別の型へ変換すること。
文字などを数として扱える形に変えます。parseIntは整数、parseFloatは小数を含む数を読み取ります。文字列の途中まで読んで数を返す場合があるため、入力全体が正しい形式かの確認は別に必要です。
文字列の「12」を数値12へ変える。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
値が意図的に存在しないことを表す値。
有効なデータがない状態を表すために使われます。JavaScriptではnullは意図的な空の値、undefinedは値が設定されていない場合などに現れます。PythonではNoneを使います。0や空文字とは区別して判定します。
未選択の商品をnullで表す。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
値がまだ設定されていない場合などに現れる値。
有効なデータがない状態を表すために使われます。JavaScriptではnullは意図的な空の値、undefinedは値が設定されていない場合などに現れます。PythonではNoneを使います。0や空文字とは区別して判定します。
未代入の変数を読むとundefinedになる。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
数値として有効でない演算結果などを表す値。
NaNはJavaScriptで数として有効な結果を得られなかったことを示す特別な数値です。Number.isNaNでその値を判定できます。NaN === NaN はfalseなので、普通の等号比較だけで判定しないようにします。
Number('abc')の結果を確認する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
条件の組み合わせや否定を表す演算子。
値を計算したり条件を判定したりする記号です。JavaScriptの===は型の自動変換をせず比較し、%は余りを求めます。複数の演算を組み合わせるときは、括弧を使って評価する順序を明確にします。
在庫不足かつ対象商品なら発注する。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
割り算で生じる余り。
値を計算したり条件を判定したりする記号です。JavaScriptの===は型の自動変換をせず比較し、%は余りを求めます。複数の演算を組み合わせるときは、括弧を使って評価する順序を明確にします。
7 % 3の結果は1。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
変数などの名前を参照できる範囲。
名前がどの範囲の値を参照するかに関係します。Pythonでglobalはモジュールの変数、nonlocalは外側の関数の変数への再代入を指定します。広い範囲の値を変更すると影響を追いにくいため、引数と戻り値で渡す方法も考えます。
関数の中だけで使う変数を作る。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
プログラムの広い範囲から参照できる変数。
名前がどの範囲の値を参照するかに関係します。Pythonでglobalはモジュールの変数、nonlocalは外側の関数の変数への再代入を指定します。広い範囲の値を変更すると影響を追いにくいため、引数と戻り値で渡す方法も考えます。
複数の関数が同じ設定値を参照する。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
関数など、限定された範囲で使う変数。
名前がどの範囲の値を参照するかに関係します。Pythonでglobalはモジュールの変数、nonlocalは外側の関数の変数への再代入を指定します。広い範囲の値を変更すると影響を追いにくいため、引数と戻り値で渡す方法も考えます。
集計関数の中だけで合計を保持する。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
変更しない値や、再代入できない名前。言語により意味が異なる。
処理の中で固定して扱う値や名前です。上限回数などに名前を付ければ、意味を読み取りやすくなります。言語によって定数の仕組みは異なり、Pythonで名前を大文字にするだけでは変更が機械的に禁止されません。
JavaScriptのconstは再代入を禁止する。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
条件が成立する間、処理を繰り返す構文。
同じ手順を複数回実行します。件数が決まった一覧処理や、条件を満たすまで続ける処理に使います。終了条件がいつ成立するかを確認しないと、終わらない処理になって画面やプログラムが反応しなくなることがあります。
未処理のデータがある間、読み取りを続ける。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
ループなどから途中で抜ける命令。
繰り返しの途中で進み方を変更します。breakは対象のループを抜け、continueは今回の残りの処理を飛ばして次の周回へ進みます。関数から戻るreturnとは、抜ける範囲が異なります。
目的の商品が見つかったら検索を終える。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
ループの残りを飛ばし、次の繰り返しへ進む命令。
繰り返しの途中で進み方を変更します。breakは対象のループを抜け、continueは今回の残りの処理を飛ばして次の周回へ進みます。関数から戻るreturnとは、抜ける範囲が異なります。
空欄の行を飛ばして次の行を読む。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
関数の実行を終え、呼び出し元へ値などを返す命令。
関数が処理した結果を呼び出し元へ渡します。たとえば合計を返せば、その値を次の計算や画面表示に使えます。returnが実行されると、その関数内の以後の処理には通常進みません。
計算した合計金額を返す。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
値に応じて処理を分ける構文。
条件の結果に応じて実行する処理を変えます。「入力が空なら案内を出す」「入力済みなら送信する」のような選択に使います。どの条件にも当てはまらない場合の動きも決めておくと、予期しない入力に対応できます。
選ばれた画面名に応じて表示を切り替える。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
関数が自分自身を呼び出すこと。
関数が自分自身を呼び出して、同じ形の小さな問題へ分けて処理します。フォルダの中のフォルダをたどる処理などに使えます。必ず終了できる条件を用意し、深すぎる呼び出しで制限に達しないか確認します。
フォルダの中のフォルダを順番に調べる。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
処理中の問題を通常の流れと別の経路で伝える仕組み。
処理を続けられない問題を、通常の成功結果とは別の経路で扱います。ファイルがない、入力形式が違うなどの場面で使います。問題を隠して終わるのではなく、利用者向けの案内と調査用の記録を分けて用意します。
存在しないファイルを開いた際の問題を扱う。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
例外が発生する可能性のある処理を囲む構文。
処理を続けられない問題を、通常の成功結果とは別の経路で扱います。ファイルがない、入力形式が違うなどの場面で使います。問題を隠して終わるのではなく、利用者向けの案内と調査用の記録を分けて用意します。
ファイル読み込みの失敗に備える。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
try内などから伝わった例外を受け取って処理する構文。
処理を続けられない問題を、通常の成功結果とは別の経路で扱います。ファイルがない、入力形式が違うなどの場面で使います。問題を隠して終わるのではなく、利用者向けの案内と調査用の記録を分けて用意します。
通信失敗を画面に表示する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
tryに関連する処理の終了時に実行する節。
成功や例外の発生にかかわらず、後片付けなどを行うための部分です。ファイルを閉じるなど、どちらの経路でも必要な処理を置きます。プログラム自体の強制終了などでも必ず動く、という保証ではありません。
成功・失敗にかかわらず後片付けを行う。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
矢印記号を使った関数の書き方。通常の関数とはthisの扱いなどが異なる。
JavaScriptの関数を => で書く方法です。n => n * 2 は受け取った数の2倍を返します。通常のfunctionとthisの扱いなどが異なり、波括弧で本文を書く場合は必要な戻り値をreturnで指定します。
x => x * 2で値を2倍にする。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
別の処理に渡し、その処理から呼び出してもらう関数。
通信など時間のかかる処理について、開始と完了を分けて扱います。完了後に結果を使う必要があるため、Promiseやawaitなどで順序を整理します。awaitで待てることと、複数の処理が自動で同時実行されることは別です。
クリックされた時に実行する関数を渡す。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
非同期処理の完了や失敗を表すオブジェクト。
通信など時間のかかる処理について、開始と完了を分けて扱います。完了後に結果を使う必要があるため、Promiseやawaitなどで順序を整理します。awaitで待てることと、複数の処理が自動で同時実行されることは別です。
通信が終わってから結果を扱う。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
Promiseを返す非同期関数を定義するキーワード。
通信など時間のかかる処理について、開始と完了を分けて扱います。完了後に結果を使う必要があるため、Promiseやawaitなどで順序を整理します。awaitで待てることと、複数の処理が自動で同時実行されることは別です。
async functionで通信処理を書く。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
Promiseの結果を待って処理を進めるための構文。
通信など時間のかかる処理について、開始と完了を分けて扱います。完了後に結果を使う必要があるため、Promiseやawaitなどで順序を整理します。awaitで待てることと、複数の処理が自動で同時実行されることは別です。
await fetch(url)で応答を受け取る。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
完了を待つ間も別の処理を進められる実行方式。
通信など時間のかかる処理について、開始と完了を分けて扱います。完了後に結果を使う必要があるため、Promiseやawaitなどで順序を整理します。awaitで待てることと、複数の処理が自動で同時実行されることは別です。
データ取得中も画面操作を受け付ける。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
処理の完了を待って次へ進む方式。
前の処理が終わってから次へ進む方式です。手順を順に追いやすい反面、時間のかかる処理が同じ実行の流れを占有すると後続も待ちます。ブラウザでは重い計算を続けると操作への反応が遅くなることがあります。
計算した結果を次の計算に使う。
開始から終了まで順に追い、条件に当てはまらない場合や失敗時の動きも確認しましょう。
HTTP通信などでデータを取得するAPI。
JavaScriptからURLへリクエストし、応答を受け取ります。応答のJSONや本文を取り出す処理も別に必要です。404などのHTTPエラーでもPromiseが成功側になるため、response.okやstatusで応答の状態を確認します。
JSONファイルを読み込む。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
文字列で構造化データを表す形式。
JSONは文字列・数・配列・オブジェクトなどを共通の形式で表す方法です。parseはJSONの文字から値へ、stringifyは値からJSONの文字へ変換します。JSONだけでは関数などをそのまま保存できず、不正な文字列のparseはエラーになります。
商品名と数量を一組のデータにする。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
項目をカンマなどで区切った表形式のテキスト。
行を改行、項目をカンマなどで区切る文字形式です。表計算ソフトや集計プログラムで交換しやすい一方、数値や日付の型を十分に表せません。項目内のカンマ・改行・引用符を扱う規則があるため、単純なsplitだけで読むと崩れる場合があります。
在庫表を表計算ソフトと受け渡す。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
文字の並びのパターンを表す記法。
文字の並びのパターンを指定して検索や判定を行います。文字列全体の形式を確認したい場合は、先頭と末尾の条件も指定します。繰り返しの多い複雑な式は処理が重くなる場合があるため、実際の入力で確認します。
数字だけの入力かを調べる。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
バッククォートで囲み、式を埋め込める文字列の記法。
文章の中に計算結果や変数の値を入れやすくする記法です。JavaScriptではバッククォートと${...}、Pythonではfを付けた文字列と{...}を使います。書き方が違うので、両方の記法を混ぜないようにします。
商品名を含む案内文を組み立てる。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
配列やオブジェクトの中身を取り出して代入する書き方。
配列やオブジェクトから複数の値を取り出し、名前を付けます。JavaScriptのconst [a, b] = [1, 2]ならaが1、bが2になります。受け取る構造が想定と違う場合や、項目がない場合の値も確認します。
商品データから名前と価格を取り出す。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
配列の要素などを展開する構文。
浅いコピーでは外側を複製しても内部のオブジェクトを共有する場合があります。深いコピーは内部の値もたどって複製しますが、どんな値も複製できるとは限りません。structuredCloneでも関数など対応しない値があります。
二つの配列を一つにまとめる。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
配列の各要素を変換した新しい配列を作るメソッド。
配列の各要素から新しい値を作り、その結果を新しい配列にまとめます。[1, 2].map(n => n * 2) は [2, 4] です。値を選別するfilterや、一つの結果へ集約するreduceとは用途が異なります。
各商品の税込価格の配列を作る。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
条件を満たす要素の新しい配列を作るメソッド。
条件がtrueとなる要素だけで新しい配列を作ります。[1, 2, 3].filter(n => n >= 2) は [2, 3] です。見つからなければ空配列で、findのように一件だけを返す方法ではありません。
在庫不足の商品だけを取り出す。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
配列の要素を順番に処理し、一つの結果へまとめるメソッド。
配列の要素を順に処理し、途中の結果を次の計算へ渡して一つの結果を作ります。[1, 2, 3].reduce((sum, n) => sum + n, 0) は6です。空配列も扱う場合は初期値を明示します。
明細の金額を合計する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
条件を満たす最初の配列要素を返すメソッド。
条件に合う一件の要素を探します。findは先頭側から、findLastは末尾側から探し、見つからなければundefinedです。配列の位置を知りたい場合はfindIndexやfindLastIndexを使います。
商品番号が一致する商品を探す。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
配列の要素を並べ替えるメソッド。元の配列も変わる。
比較関数を指定すると数や文字の順序で並べられます。JavaScriptのsortは元の配列を変更し、toSortedは並べ替えた新しい配列を返します。数の昇順には (a, b) => a - b のような比較が必要です。
価格の昇順に並べる。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
配列の末尾に要素を追加するメソッド。
JavaScriptの配列を直接変更する操作です。別の変数も同じ配列を参照している場合、そちらから見える内容も変わります。戻り値が配列とは限らないため、変更された元の配列と返された値を分けて確認します。
注文リストに商品を加える。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
配列や文字列に指定した値が含まれるかを調べるメソッド。
文字列や配列に対象が含まれるか、文字列の先頭・末尾が一致するかを調べます。真偽値で結果を返します。通常大文字と小文字は区別するため、検索の方針に応じて表記をそろえてから比較します。
商品名に「洗剤」があるか調べる。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
CSSセレクターに一致する最初の要素を取得するメソッド。
条件に合うDOM要素を探す機能です。idによる検索、CSSセレクターでの検索、自分や祖先の検索などで対象が違います。一件の検索では見つからないとnullになるため、操作前に結果を確認します。
画面の入力欄を取得する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
CSSセレクターに一致する要素の一覧を取得するメソッド。
条件に合うDOM要素を探す機能です。idによる検索、CSSセレクターでの検索、自分や祖先の検索などで対象が違います。一件の検索では見つからないとnullになるため、操作前に結果を確認します。
すべての商品ボタンを取得する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
新しいHTML要素などを作るメソッド。
JavaScriptで画面の要素を作成・配置します。作っただけでは画面に現れず、DOMへ追加する必要があります。既存の要素を別の位置へ追加すると移動になる場合があり、自動的な複製とは異なります。
検索結果用のボタンを作る。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
要素などを子ノードとして末尾へ追加するメソッド。
JavaScriptで画面の要素を作成・配置します。作っただけでは画面に現れず、DOMへ追加する必要があります。既存の要素を別の位置へ追加すると移動になる場合があり、自動的な複製とは異なります。
作ったボタンを結果欄へ入れる。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
要素のCSSクラスを操作するための仕組み。
DOM要素のclassを追加・削除・切り替えするための機能です。classList.add("active")で状態用の名前を加え、その名前に対応するCSSを適用できます。クラスを付けてもCSSの指定や処理がなければ目的の動作にはなりません。
選択中のボタンに色を付ける。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
要素の内側をHTML文字列として取得・設定するプロパティ。
文字列をHTMLとして解釈して画面に挿入します。装飾付きの内容を作れますが、利用者の入力や外部データを無確認で入れると危険な内容が混ざる可能性があります。文章だけならtextContentなどを使います。
信頼できる固定HTMLを表示する。未確認の入力は直接入れない。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
キャンセル可能なイベントの既定動作を止めるメソッド。
イベントの標準動作と伝わり方を制御します。preventDefaultは送信やリンク移動などの標準動作を止め、stopPropagationは親要素などへの伝達を止めます。互いに別の作用なので、必要な方を選びます。
フォーム送信による画面遷移を止める。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
指定時間が過ぎた後に処理を実行できるよう予約する関数。
指定した時間の後や、一定間隔で処理を呼び出す予約です。指定時間ぴったりに必ず動くわけではなく、他の処理やタブの状態で遅れる場合があります。不要になった予約は解除し、重複実行を防ぎます。
保存完了メッセージを後で消す。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
一定間隔で処理を繰り返すよう予約する関数。
指定した時間の後や、一定間隔で処理を呼び出す予約です。指定時間ぴったりに必ず動くわけではなく、他の処理やタブの状態で遅れる場合があります。不要になった予約は解除し、重複実行を防ぎます。
画面の時計を定期的に更新する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
開発者向けコンソールに値を出力するメソッド。
開発者向けのコンソールに値を出して調査します。計算途中やイベント発生を確認できますが、利用者に見せる画面のメッセージとは別です。公開コードで秘密の情報や個人情報を出さないようにします。
計算途中の合計を確認する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
CSSで装飾対象の要素を指定する記法。
CSSでは、対象となる要素と複数の指定の優先関係を判断します。セレクターが当たっていても別の指定に負ける場合があります。:where()の詳細度は0で、:is()や:not()は引数の詳細度が関係するため、一律に同じ強さではありません。
.cardでカードに同じ装飾を付ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
オブジェクトが持つ値の名前や、CSSの設定項目。
プロパティは対象の持つ情報、メソッドは対象に関連する関数です。オブジェクトのuser.nameは情報、配列のitems.push(...)は操作という区別です。CSSのプロパティという場合は色や幅などの指定項目を指します。
CSSのcolorで文字色を指定する。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
オブジェクトなどに属する呼び出し可能な処理。
プロパティは対象の持つ情報、メソッドは対象に関連する関数です。オブジェクトのuser.nameは情報、配列のitems.push(...)は操作という区別です。CSSのプロパティという場合は色や幅などの指定項目を指します。
配列のpushで要素を追加する。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
要素や内容の周囲に設ける空間。
要素の中身・内側の余白・境界線・外側の余白を分けて考えます。paddingは内側、marginは外側です。box-sizing: border-boxなら指定した幅にpaddingとborderを含めるため、画面の幅からはみ出す問題を整理しやすくなります。
ボタンを離して押し間違いを減らす。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素の外側の余白を指定するCSSプロパティ。
要素の中身・内側の余白・境界線・外側の余白を分けて考えます。paddingは内側、marginは外側です。box-sizing: border-boxなら指定した幅にpaddingとborderを含めるため、画面の幅からはみ出す問題を整理しやすくなります。
カード同士の間隔を空ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素の枠と内容の間の余白を指定するCSSプロパティ。
要素の中身・内側の余白・境界線・外側の余白を分けて考えます。paddingは内側、marginは外側です。box-sizing: border-boxなら指定した幅にpaddingとborderを含めるため、画面の幅からはみ出す問題を整理しやすくなります。
ボタン内の文字の周囲を広げる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素の境界線を指定するCSSプロパティ。
要素の中身・内側の余白・境界線・外側の余白を分けて考えます。paddingは内側、marginは外側です。box-sizing: border-boxなら指定した幅にpaddingとborderを含めるため、画面の幅からはみ出す問題を整理しやすくなります。
入力欄を緑色の線で囲む。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
主に一方向へ要素を配置するCSSの仕組み。
複数の要素を配置するCSSの仕組みです。Flexboxは一つの軸に沿う配置、Gridは行と列の組み合わせを整理する用途が得意です。画面が狭い場合の折り返しや列数も指定し、内容が増えても読める配置にします。
メニューを横並びにする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
行と列を使って要素を配置するCSSの仕組み。
複数の要素を配置するCSSの仕組みです。Flexboxは一つの軸に沿う配置、Gridは行と列の組み合わせを整理する用途が得意です。画面が狭い場合の折り返しや列数も指定し、内容が増えても読める配置にします。
ひらがな表を五列に並べる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
画面幅などに応じて表示を調整する設計。
画面の広さなどに合わせて表示を調整します。端末名だけで分けず、実際の表示領域と内容の量を見て配置します。狭い画面、文字の拡大、横向きでも文章や操作ボタンが重ならないかを確認します。
スマートフォンではカードを一列にする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
画面幅などの条件でCSSを適用する仕組み。
画面の広さなどに合わせて表示を調整します。端末名だけで分けず、実際の表示領域と内容の量を見て配置します。狭い画面、文字の拡大、横向きでも文章や操作ボタンが重ならないかを確認します。
狭い画面で文字サイズや列数を変える。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
Webページを表示する領域。
画面の広さなどに合わせて表示を調整します。端末名だけで分けず、実際の表示領域と内容の量を見て配置します。狭い画面、文字の拡大、横向きでも文章や操作ボタンが重ならないかを確認します。
画面幅に合わせてページを配置する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
入力情報をまとめて扱うHTMLの仕組み。
利用者が入力・選択・実行する画面の部品です。見た目だけでなく適切なHTML要素を使うと、キーボード操作などを助けられます。フォーム内のbuttonは送信になる場合があるため、用途に応じてtypeを指定します。
担当者名と発注数を入力する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
文字や数値などを入力するHTML要素。
利用者が入力・選択・実行する画面の部品です。見た目だけでなく適切なHTML要素を使うと、キーボード操作などを助けられます。フォーム内のbuttonは送信になる場合があるため、用途に応じてtypeを指定します。
数量を入力する欄を作る。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
入力欄に対応する説明を示すHTML要素。
入力欄やボタンの目的を利用者へ伝えます。placeholderは入力例であり、入力すると消えるためラベルの代わりにはなりません。読み上げ用の名前と画面に見える名前が一致するようにすると操作を理解しやすくなります。
担当者名の入力欄に見出しを付ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
選択肢から項目を選ぶHTML要素。
利用者が入力・選択・実行する画面の部品です。見た目だけでなく適切なHTML要素を使うと、キーボード操作などを助けられます。フォーム内のbuttonは送信になる場合があるため、用途に応じてtypeを指定します。
翻訳する言語を選ぶ。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
押して操作するHTML要素。
利用者が入力・選択・実行する画面の部品です。見た目だけでなく適切なHTML要素を使うと、キーボード操作などを助けられます。フォーム内のbuttonは送信になる場合があるため、用途に応じてtypeを指定します。
保存を実行するボタンを作る。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
対話用の小窓を表すHTML要素。
利用者が入力・選択・実行する画面の部品です。見た目だけでなく適切なHTML要素を使うと、キーボード操作などを助けられます。フォーム内のbuttonは送信になる場合があるため、用途に応じてtypeを指定します。
用語の説明を小窓で開く。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
さまざまな人が情報や機能を利用できるようにすること。
見え方や操作方法が異なる人でも内容と機能を利用できるようにします。見出し・入力ラベル・フォーカス・色の区別などを組み合わせます。マウスで動くことだけで判断せず、キーボードや読み上げで意味が伝わるかを確かめます。
キーボードだけでもボタンを操作できるようにする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
画像の内容や役割を文字で伝える説明。
画像が見えない場合でも、画像の意味を伝えるための文章です。写真の全特徴を長く説明するより、その場で必要な意味を示します。意味のない装飾画像では空のaltを使い、不要な読み上げを避けます。
ロゴ画像のaltにサイト名を書く。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
Webの要求と応答をやり取りする通信プロトコル。
ブラウザとサーバーの通信に関係します。HTTPSではTLSを使い通信経路を暗号化し、証明書で接続先の確認を助けます。ただしHTTPSのサイトでも、内容が正しいことや運営者が信頼できることまで保証されるわけではありません。
ブラウザがページを要求する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
TLSで保護されたHTTP通信。
ブラウザとサーバーの通信に関係します。HTTPSではTLSを使い通信経路を暗号化し、証明書で接続先の確認を助けます。ただしHTTPSのサイトでも、内容が正しいことや運営者が信頼できることまで保証されるわけではありません。
通信内容を暗号化して送受信する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
Web上などの資源の場所とアクセス方法を表す文字列。
Web上の場所を指す住所です。https://example.com/lesson?num=1 なら、通信方式・ドメイン・パス・条件を含みます。似た見た目の文字でも接続先が違う場合があるため、ドメイン部分をよく確認します。
公開ページのアドレスを共有する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
インターネット上の名前の階層を構成する識別名。
人が覚えやすいWeb上の名前です。example.comに対するhelp.example.comのように、前に名前を足して用途を分けることがあります。ドメイン名と、ページを置くサーバーやサービスは別に設定します。
example.comという名前を使う。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
ドメイン名に対応する情報を問い合わせる仕組み。
ドメイン名と接続先などの情報を結び付ける仕組みです。Webの街では住所案内に相当します。用途別のレコードを登録し、キャッシュがあるため設定変更が全利用者へ同時に見えるとは限りません。
名前からサーバーのIPアドレスを調べる。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
IPネットワークで通信先などを識別するアドレス。
ネットワーク上で通信先を識別するための番号です。IPv4とIPv6で表し方が違います。一つのIPを複数のサイトで共有する場合もあり、IPだけでアクセスした人やサイトの正体を確定できるとは限りません。
通信するサーバーを指定する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
相手のシステムへ送る要求。
ブラウザなどが送る依頼がリクエスト、サーバーが返す応答がレスポンスです。URLだけでなく、メソッド・ヘッダー・本文も動作に影響します。通信できた場合でも処理が成功したかは、ステータスや返された内容で確認します。
商品一覧を取得したいとサーバーへ伝える。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
要求に対して返される応答。
ブラウザなどが送る依頼がリクエスト、サーバーが返す応答がレスポンスです。URLだけでなく、メソッド・ヘッダー・本文も動作に影響します。通信できた場合でも処理が成功したかは、ステータスや返された内容で確認します。
商品一覧のJSONを受け取る。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
主に資源の取得に使うHTTPメソッド。
HTTPメソッドは、同じURLへの依頼でも目的を区別します。GETは取得、POSTはデータ送信など、PUTは置換、PATCHは部分的な変更、HEADは本文なしの取得、OPTIONSは通信方法の確認に使います。許可するメソッドはサーバー側でも検査します。
記事の内容を読み込む。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
資源にデータを送り処理を求めるHTTPメソッド。
HTTPメソッドは、同じURLへの依頼でも目的を区別します。GETは取得、POSTはデータ送信など、PUTは置換、PATCHは部分的な変更、HEADは本文なしの取得、OPTIONSは通信方法の確認に使います。許可するメソッドはサーバー側でも検査します。
注文内容を送信する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
HTTP応答の結果を表す三桁の番号。
通信の結果を番号で示します。2xxは成功、3xxは移動や再利用に関わる応答、4xxは依頼や権限などの問題、5xxは処理側の問題です。番号だけで原因を確定せず、URL・送信内容・返された説明やログを合わせて確認します。
404は対象の資源が見つからないことを表す。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
再利用のためにデータを一時的に保持する仕組み。
以前取得したデータを再利用し、表示や通信を速くします。ブラウザや配信サービスなど複数の場所に存在します。更新後に古い画面が見えるときは、保存期間・再確認の条件・ファイルのURLを確かめます。
同じ画像の再取得を減らす。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
ブラウザが保持し、条件に応じて通信に付ける小さなデータ。
Cookieはブラウザに保存され、条件に合う通信に付けて送られる小さな情報です。セッションでは、その情報などを手掛かりに利用者の状態を管理します。ログイン状態に関わる値には、安全な送信・保存の設定が必要です。
ログイン状態の識別に使う。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
一連の操作や通信を関連付けて扱う単位。
Cookieはブラウザに保存され、条件に合う通信に付けて送られる小さな情報です。セッションでは、その情報などを手掛かりに利用者の状態を管理します。ログイン状態に関わる値には、安全な送信・保存の設定が必要です。
ログイン後の操作を同じ利用者として扱う。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
別のオリジンへのブラウザ通信で応答の読み取り許可を管理する仕組み。
オリジンは通信方式・ホスト名・ポートの組み合わせです。ブラウザが別オリジンの応答を読むとき、CORSの許可が必要になる場合があります。許可はサーバーの応答で示し、CORSだけでAPIへの全アクセスを防げるわけではありません。
外部APIの応答を読み取れるかをサーバーが指定する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
URLのスキーム・ホスト・ポートの組み合わせ。
オリジンは通信方式・ホスト名・ポートの組み合わせです。ブラウザが別オリジンの応答を読むとき、CORSの許可が必要になる場合があります。許可はサーバーの応答で示し、CORSだけでAPIへの全アクセスを防げるわけではありません。
異なるドメインのページは異なるオリジンになる。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
用意されたHTMLなどを配信する方式のサイト。
フロントエンドは利用者の画面、バックエンドはサーバー側の処理に関わります。静的配信のページでもJavaScriptで画面を動かせます。「動的」は動画があることを指すのではなく、処理やデータによって内容が変化することを指します。
index.htmlをアップロードして公開する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
要求やデータに応じて内容を生成するサイト。
フロントエンドは利用者の画面、バックエンドはサーバー側の処理に関わります。静的配信のページでもJavaScriptで画面を動かせます。「動的」は動画があることを指すのではなく、処理やデータによって内容が変化することを指します。
利用者ごとに注文履歴を表示する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
主に利用者の画面や操作を担当する部分。
フロントエンドは利用者の画面、バックエンドはサーバー側の処理に関わります。静的配信のページでもJavaScriptで画面を動かせます。「動的」は動画があることを指すのではなく、処理やデータによって内容が変化することを指します。
検索欄と検索結果の表示を作る。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
主にサーバー側でデータ処理などを担当する部分。
フロントエンドは利用者の画面、バックエンドはサーバー側の処理に関わります。静的配信のページでもJavaScriptで画面を動かせます。「動的」は動画があることを指すのではなく、処理やデータによって内容が変化することを指します。
注文をデータベースに保存する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
サイトなどを動かし配信する環境を提供すること。
フロントエンドは利用者の画面、バックエンドはサーバー側の処理に関わります。静的配信のページでもJavaScriptで画面を動かせます。「動的」は動画があることを指すのではなく、処理やデータによって内容が変化することを指します。
公開用ファイルを配信サービスに置く。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
プログラムやファイルを実行・公開環境に配置すること。
作ったファイルやプログラムを、利用者が使う環境へ反映する作業です。Webの街では開門の儀式に当たります。手元で保存しただけでは公開先は変わらないので、反映後のURL・表示・動作まで確認します。
修正版を公開環境へ反映する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
復元に備えてデータのコピーを保管すること。
バックアップは戻せるデータを残すこと、リストアはそこから復元することです。保存先・取得時点・復元対象を明確にします。ファイルが存在するだけでは復旧できるとは限らず、必要な設定も含めて戻せるかを確認します。
更新前のHTMLを別名で残す。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
変更の履歴を記録して管理すること。
ファイルの変更を履歴として記録し、以前の状態と比較したり戻したりします。保存するだけのバックアップとは異なり、変更のまとまりに説明を付けられます。未記録の変更と、履歴に記録済みの変更を区別します。
以前の内容との差分を確認する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
ファイルの変更履歴を管理する分散型システム。
ファイルの変更を履歴として記録し、以前の状態と比較したり戻したりします。保存するだけのバックアップとは異なり、変更のまとまりに説明を付けられます。未記録の変更と、履歴に記録済みの変更を区別します。
修正内容をコミットとして記録する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
Gitなどで変更のまとまりを履歴に記録すること。
Gitの変更履歴に、一まとまりの修正を記録します。「ボタンの文字を修正」など目的が分かる説明を付けると後で探せます。コミットは手元でも作れるため、それだけでGitHubへ送信されたりサイトが公開されたりするわけではありません。
用語追加を一つの変更として残す。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
変更履歴を分岐させる仕組み。
ブランチで変更の流れを分け、マージで一つにまとめます。同じ箇所の異なる変更などで自動的に統合できない場合がコンフリクトです。単に片方を捨てず、両方の意図を読み、統合後に動作を確認します。
公開版とは別に修正作業を進める。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
分岐した変更を統合すること。
ブランチで変更の流れを分け、マージで一つにまとめます。同じ箇所の異なる変更などで自動的に統合できない場合がコンフリクトです。単に片方を捨てず、両方の意図を読み、統合後に動作を確認します。
修正した内容を公開用ブランチへ取り込む。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
二つの内容の違い。
二つの状態を比べて追加・削除・変更された部分を示します。サイト修正では、意図した箇所だけ変わっているかを確認できます。変更行が少なくても影響が広い場合があるので、対象を利用する処理も確認します。
追加した用語だけを確認する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
変更前の状態に戻すこと。
変更を公開するときの記録と環境の管理に関わります。確認用の環境で動いても、本番の設定やデータでは結果が異なる場合があります。公開した版と変更内容、問題が出た場合に戻す版を結び付けて残します。
不具合があれば直前の公開版へ戻す。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
関数などの小さな単位で動作を確かめること。
期待する結果と実際の動作を比べて確認します。部品単体、部品同士、利用者の一連の操作などで確認する範囲が異なります。正常な入力だけでなく、空欄・境界値・通信失敗などを含めると不具合を見つけやすくなります。
合計計算関数に既知の値を渡す。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
複数の部分を組み合わせて動作を確かめること。
期待する結果と実際の動作を比べて確認します。部品単体、部品同士、利用者の一連の操作などで確認する範囲が異なります。正常な入力だけでなく、空欄・境界値・通信失敗などを含めると不具合を見つけやすくなります。
入力から保存までの連携を確認する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
変更後に既存機能が壊れていないか確かめること。
期待する結果と実際の動作を比べて確認します。部品単体、部品同士、利用者の一連の操作などで確認する範囲が異なります。正常な入力だけでなく、空欄・境界値・通信失敗などを含めると不具合を見つけやすくなります。
用語追加後も編集後記が開くかを確認する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
入力などが条件を満たすか検証すること。
入力や出力を安全に扱うための別々の処理です。バリデーションは条件の検査、サニタイズは不要な内容の除去、エスケープは記号をその文脈で文字として扱う変換です。HTML・URL・SQLなど、出力先に合う方法を使います。
数量が負数ではないことを確認する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
操作や処理の記録。
必要な操作だけを許可し、後から何が起きたか確認できるようにします。記録には日時・対象・結果などを含めると役立ちます。一方でパスワードや秘密のキーを記録しないようにし、閲覧できる人と保存期間も決めます。
保存日時と担当者を残す。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
利用者などが誰であるかを確認すること。
認証は「誰か」を確認し、認可は「その人に何を許すか」を決めます。ログインできた人でも、他人の情報や管理機能には別の権限確認が必要です。ボタンを隠すだけでは保護にならず、処理する側で検査します。
パスワードなどで本人を確認する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
誰が何の操作をできるかを判断すること。
認証は「誰か」を確認し、認可は「その人に何を許すか」を決めます。ログインできた人でも、他人の情報や管理機能には別の権限確認が必要です。ボタンを隠すだけでは保護にならず、処理する側で検査します。
管理者だけに商品削除を許可する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
鍵を使い、元の情報を読み取りにくい形へ変換すること。
データの保護や確認に関係します。暗号化は鍵で元の内容に戻す仕組み、ハッシュは通常元へ戻すためのものではありません。署名は改ざんなどの確認に使い、秘密鍵は公開してはいけません。用途に合う方式を選ぶ必要があります。
通信内容を保護する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
データから一定の規則で計算した値。
データの保護や確認に関係します。暗号化は鍵で元の内容に戻す仕組み、ハッシュは通常元へ戻すためのものではありません。署名は改ざんなどの確認に使い、秘密鍵は公開してはいけません。用途に合う方式を選ぶ必要があります。
ファイルが変わっていないか確認する。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
実行環境からプログラムへ渡す設定値。
サービスへの接続情報や設定値を、コードと分けて管理するために使います。環境変数は必ずしも秘密ではありませんが、APIキーなど秘密の値は公開HTML・ブラウザのJavaScript・共有する履歴に入れないようにします。
接続先をコードとは別に設定する。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
API利用者やプロジェクトを識別するための文字列。
サービスへの接続情報や設定値を、コードと分けて管理するために使います。環境変数は必ずしも秘密ではありませんが、APIキーなど秘密の値は公開HTML・ブラウザのJavaScript・共有する履歴に入れないようにします。
外部サービスの利用を管理する。秘密のキーは公開HTMLへ書かない。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
データベースで行と列からなるデータのまとまり。
データベースの表がテーブル、横の一件分がレコード、名前や日付など縦の項目がカラムです。表計算に似ていますが、型や制約を使って保存できる値を管理します。項目名と保存する値の意味を揃えることが大切です。
商品マスターを保存する。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
表の一行に相当するデータ。
データベースの表がテーブル、横の一件分がレコード、名前や日付など縦の項目がカラムです。表計算に似ていますが、型や制約を使って保存できる値を管理します。項目名と保存する値の意味を揃えることが大切です。
一商品の名前・価格・番号をまとめる。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
表の列に相当する項目。
データベースの表がテーブル、横の一件分がレコード、名前や日付など縦の項目がカラムです。表計算に似ていますが、型や制約を使って保存できる値を管理します。項目名と保存する値の意味を揃えることが大切です。
商品名の列を設ける。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
各行を一意に識別するための列や列の組み合わせ。
主キーは一行を一意に区別し、外部キーは別の表の行との関係を表します。複数の項目を組み合わせて一意にするものが複合主キーです。同じ人の名前がある場合でも、識別番号を使えば取り違えを防ぎやすくなります。
商品IDで商品を区別する。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
他の表のキーとの対応を制約として扱う仕組み。
主キーは一行を一意に区別し、外部キーは別の表の行との関係を表します。複数の項目を組み合わせて一意にするものが複合主キーです。同じ人の名前がある場合でも、識別番号を使えば取り違えを防ぎやすくなります。
注文明細の商品IDを商品マスターへ対応させる。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
データの検索を効率化するための補助構造。
検索を助けるため、表のデータに索引を付けます。辞書の見出しから目的の項目を探すイメージです。検索を速める一方で保存容量や更新の負担が増えるため、実際に使う検索条件に合う索引を選びます。
商品番号で探す処理を速くする。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
データを問い合わせるSQL文。
SELECTで項目を選び、WHEREで対象の行を絞り、GROUP BYで集計の単位を作り、HAVINGで集計後の条件を指定し、ORDER BYで結果を並べます。表示順はORDER BYで明示しなければ保証されません。
必要な商品の名前と価格を取り出す。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
対象とする行の条件を指定するSQLの句。
SELECTで項目を選び、WHEREで対象の行を絞り、GROUP BYで集計の単位を作り、HAVINGで集計後の条件を指定し、ORDER BYで結果を並べます。表示順はORDER BYで明示しなければ保証されません。
在庫が2以下の商品を検索する。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
表に行を追加するSQL文。
保存したデータを追加・変更・削除するSQLです。UPDATEやDELETEでは条件を付けないと多くの行が対象になることがあります。まず同じ条件のSELECTで対象を確かめ、必要ならトランザクションやバックアップを使います。
新しい商品を登録する。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
表の既存の行を更新するSQL文。
保存したデータを追加・変更・削除するSQLです。UPDATEやDELETEでは条件を付けないと多くの行が対象になることがあります。まず同じ条件のSELECTで対象を確かめ、必要ならトランザクションやバックアップを使います。
特定商品の価格を変更する。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
表から行を削除するSQL文。
保存したデータを追加・変更・削除するSQLです。UPDATEやDELETEでは条件を付けないと多くの行が対象になることがあります。まず同じ条件のSELECTで対象を確かめ、必要ならトランザクションやバックアップを使います。
指定したテストデータを削除する。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
複数の表の行を条件に従って結び付ける仕組み。
複数の表を関係付けて結果を作ります。INNER JOINは一致する組、外部結合は一致相手がない行も残し、CROSS JOINは組み合わせを作ります。一対多の関係で同じ行が複数回現れる場合があるため、件数や合計を確認します。
注文表に商品名を組み合わせる。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
同じ値などで行をまとめ、集計するための句。
SELECTで項目を選び、WHEREで対象の行を絞り、GROUP BYで集計の単位を作り、HAVINGで集計後の条件を指定し、ORDER BYで結果を並べます。表示順はORDER BYで明示しなければ保証されません。
商品別に注文数を合計する。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
結果を並べる順序を指定する句。
SELECTで項目を選び、WHEREで対象の行を絞り、GROUP BYで集計の単位を作り、HAVINGで集計後の条件を指定し、ORDER BYで結果を並べます。表示順はORDER BYで明示しなければ保証されません。
注文日が新しい順に表示する。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
複数の処理を一つのまとまりとして扱う仕組み。
複数の変更を一まとまりとして扱い、途中までの状態が残る問題を避けます。送金なら減額と増額の両方がそろって成立するようにします。失敗時に戻す範囲や、外部サービスへの処理まで戻せるかは別に設計します。
注文保存と在庫更新をまとめて確定する。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
順序を持つ要素の集まりを扱う型。
複数の値を順番付きでまとめます。利用者の名前一覧などを一つの変数で扱い、繰り返しで順に処理できます。JavaScriptの配列やPythonのリストの位置は通常0から数えるため、最初の値は位置0です。
商品名を複数まとめて保持する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
キーと値を対応させて保持する型。
項目名と値を組み合わせてデータをまとめます。たとえば名前・年齢・住所を一人分の情報として扱えます。項目名が存在しない場合の動作を確認し、同じ項目名に別の意味の値を混ぜないようにします。
商品番号から商品名を取り出す。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
要素の並びを変更できないシーケンス型。
Pythonで順番のある値をまとめる型です。作ったタプルの要素の差し替えはできません。ただし中に入れたリストなどまで変更不能になるわけではなく、一要素のタプルでは末尾のカンマが必要です。
座標の二つの値をまとめる。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
重複しない要素を扱う型。
重複する値を一つにまとめたり、含まれるかを調べたりするのに使います。Setや集合は位置で値を取り出す配列とは扱いが違います。JavaScriptでは同じ内容の別オブジェクトは別の値として扱われます。
重複する商品番号をまとめる。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
関数を定義するキーワード。
何度も使う処理に名前を付け、必要なときに呼び出します。入力となる引数を受け取り、計算や確認の結果を戻り値として返せます。画面に表示することと、結果を呼び出し元へ返すことは別の操作です。
合計を返す関数を定義する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
文字や値を出力する関数。
Pythonで文字を表示したり、利用者の入力を受け取ったりします。inputの結果は通常文字列なので、数の計算には変換が必要です。printは画面に表示する操作であり、関数の戻り値として結果を渡すreturnとは別です。
計算した金額を表示する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
要素数や長さを求める関数。
Pythonで件数や繰り返しを扱います。rangeの終わりの数は通常含まれず、enumerateは位置と値を組にし、zipは複数の並びを組にします。zipは通常短い方の長さで終わるため、件数の違いを見落とさないようにします。
用語の登録数を数える。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
整数の並びを表すオブジェクトを作る仕組み。
Pythonで件数や繰り返しを扱います。rangeの終わりの数は通常含まれず、enumerateは位置と値を組にし、zipは複数の並びを組にします。zipは通常短い方の長さで終わるため、件数の違いを見落とさないようにします。
for文で10回繰り返す。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
例外を受け取って処理する節。
処理を続けられない問題を、通常の成功結果とは別の経路で扱います。ファイルがない、入力形式が違うなどの場面で使います。問題を隠して終わるのではなく、利用者向けの案内と調査用の記録を分けて用意します。
ファイルがない場合に案内を出す。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
資源の開始・終了処理などを管理する構文。
Pythonでファイルを開いて読み書きするときに使います。withを使うとブロック終了時にファイルを閉じられます。書き込みモードのwは既存内容を消すので、元ファイルを残す必要がある場合は保存先とモードを確認します。
読み終わったファイルを閉じる。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
モジュールなどを読み込んで利用する構文。
Pythonでは、受け取る値の種類と戻り値を確認して使います。値を返す処理と、元のデータを変更する処理は同じではありません。空のデータや形式が違う入力でも確認し、必要な場合は例外を扱う処理を加えます。
CSVを扱う機能を読み込む。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
機能をまとめて分けたプログラムの単位。
機能を整理したり再利用したりするための単位や道具です。ライブラリは必要な機能を呼び出し、フレームワークは処理全体の枠組みを提供します。名称が同じでも利用環境や版が違うと使い方が変わることがあります。
計算処理を別ファイルにまとめる。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
関連するコードなどをまとめて配布・管理する単位。
機能を整理したり再利用したりするための単位や道具です。ライブラリは必要な機能を呼び出し、フレームワークは処理全体の枠組みを提供します。名称が同じでも利用環境や版が違うと使い方が変わることがあります。
必要な機能をまとめて導入する。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
再利用できる関数や機能の集まり。
機能を整理したり再利用したりするための単位や道具です。ライブラリは必要な機能を呼び出し、フレームワークは処理全体の枠組みを提供します。名称が同じでも利用環境や版が違うと使い方が変わることがあります。
既存のCSV読み込み機能を使う。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
アプリの構成や処理の流れを支える共通の土台。
機能を整理したり再利用したりするための単位や道具です。ライブラリは必要な機能を呼び出し、フレームワークは処理全体の枠組みを提供します。名称が同じでも利用環境や版が違うと使い方が変わることがあります。
決められた構成に沿ってWebアプリを作る。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
プロジェクトごとにパッケージなどを分ける環境。
外部のコードを導入し、必要な版や実行環境を管理します。開発時だけ必要な道具と、動作時に必要なものを分けます。別の人や環境でも同じ構成を再現できるよう、依存情報と版を記録します。
別の開発で使うライブラリの版を分離する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
Pythonパッケージを導入・管理するツール。
外部のコードを導入し、必要な版や実行環境を管理します。開発時だけ必要な道具と、動作時に必要なものを分けます。別の人や環境でも同じ構成を再現できるよう、依存情報と版を記録します。
必要なパッケージをインストールする。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
繰り返しや条件を使ってリストなどを簡潔に作る書き方。
Pythonの一覧や辞書を操作する方法です。元のデータを変更する処理と、新しい結果を返す処理は別です。appendは一つの値を追加し、extendは中身を順に追加します。取り出す範囲や欠けた項目の扱いも確認します。
各商品の価格を2倍にしたリストを作る。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
値を順番に取り出すための仕組み。
値を必要な順に一つずつ取り出す方式です。全部の結果を一度に作らないため、大きな一覧を扱うときに役立ちます。読み進めると状態が変わり、同じものを再び最初から使えるとは限りません。
データを一件ずつ処理する。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
値を必要に応じて順番に生成する仕組み。
値を必要な順に一つずつ取り出す方式です。全部の結果を一度に作らないため、大きな一覧を扱うときに役立ちます。読み進めると状態が変わり、同じものを再び最初から使えるとは限りません。
大量の行を一度に保持せず扱う。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
目的に合わせて表現や構造を一定の形へそろえること。
データをそろえたり、必要なものを探したりする方法です。同じ意味の表記をまとめることと、別の値を勝手に一つにすることは区別します。検索や重複の判断に使う項目を明確にし、件数が変わる理由を説明できるようにします。
検索前に全角英数字を半角へそろえる。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
漢字や英字の読み方を表す情報。
データをそろえたり、必要なものを探したりする方法です。同じ意味の表記をまとめることと、別の値を勝手に一つにすることは区別します。検索や重複の判断に使う項目を明確にし、件数が変わる理由を説明できるようにします。
Pythonに「ぱいそん」を登録して検索する。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
指定した文字列を一部に含むかで調べる方式。
データをそろえたり、必要なものを探したりする方法です。同じ意味の表記をまとめることと、別の値を勝手に一つにすることは区別します。検索や重複の判断に使う項目を明確にし、件数が変わる理由を説明できるようにします。
「すくりぷと」でJavaScriptを探す。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
値が全体として一致するかを調べる方式。
データをそろえたり、必要なものを探したりする方法です。同じ意味の表記をまとめることと、別の値を勝手に一つにすることは区別します。検索や重複の判断に使う項目を明確にし、件数が変わる理由を説明できるようにします。
商品番号が完全に同じものを探す。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
先頭の文字列が一致するかを調べる方式。
データをそろえたり、必要なものを探したりする方法です。同じ意味の表記をまとめることと、別の値を勝手に一つにすることは区別します。検索や重複の判断に使う項目を明確にし、件数が変わる理由を説明できるようにします。
「あ」で始まる読み方の用語を探す。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
多数の結果を複数のページに分ける仕組み。
データをそろえたり、必要なものを探したりする方法です。同じ意味の表記をまとめることと、別の値を勝手に一つにすることは区別します。検索や重複の判断に使う項目を明確にし、件数が変わる理由を説明できるようにします。
検索結果を50件ずつ表示する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
条件を加えて対象を限定すること。
データをそろえたり、必要なものを探したりする方法です。同じ意味の表記をまとめることと、別の値を勝手に一つにすることは区別します。検索や重複の判断に使う項目を明確にし、件数が変わる理由を説明できるようにします。
Pythonの用語だけを表示する。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
同じものが複数ある場合にまとめること。
データをそろえたり、必要なものを探したりする方法です。同じ意味の表記をまとめることと、別の値を勝手に一つにすることは区別します。検索や重複の判断に使う項目を明確にし、件数が変わる理由を説明できるようにします。
同じ用語を二重登録しないようにする。
型と単位をそろえ、0・空文字・値なし・境界値で結果を確認しましょう。
インターネット上の住所として使う名前。
サイトの独自ドメインを設定する。
ドメイン名と接続先の情報を対応させる仕組み。
ドメインを公開先へ向ける。
通信を暗号化してWebページをやり取りする方式。
問い合わせフォームを安全な通信で開く。
通信を暗号化し相手との接続を保護する技術。
HTTPS通信の安全性を支える。
複数地域のサーバーからコンテンツを効率よく配信する仕組み。
画像やページを近い拠点から届ける。
一度取得したデータを一時保存して再利用する仕組み。
更新後に古い画面が残っていないか確認する。
Gitで管理するファイルと変更履歴のまとまり。
サイトのコードを一つのリポジトリで管理する。
変更内容を確認して統合を依頼する仕組み。
修正を公開前に確認する。
GitHub上の操作をきっかけに処理を自動実行する仕組み。
更新後に自動デプロイを動かす。
テストや公開作業を継続的に自動化する考え方や仕組み。
コミット後の確認と公開を自動化する。
リクエストを受けてサーバー側の処理を実行するプログラム。
フォームやAPIの処理を行う。
サーバー本体の管理を意識せず処理を実行できる方式。
必要なときだけ処理を動かす。
URLや条件に応じて処理先や表示先を決めること。
特定のパスを対応するページへつなぐ。
アクセスを別のURLへ自動的に移動させる仕組み。
古いURLから新しいURLへ案内する。
利用者が文字などを入力して送信するための画面部品。
お問い合わせ内容を入力して送る。
望まれていない大量のメッセージや迷惑な送信。
問い合わせフォームの迷惑送信を防ぐ。
人による正規のアクセスかを確認し自動送信を抑える仕組みの一つ。
フォームのボット対策に利用する。
受信したメールを指定した宛先へ転送する仕組み。
独自ドメイン宛てのメールを受け取る。
本物を装って認証情報などを盗もうとする手口。
不審なメールのリンクを開かない。
機器やデータへ害を与える目的で作られたソフトウェアの総称。
不審な添付ファイルに注意する。
システムの状態や異常を継続して確認すること。
エラーやアクセス状況を確認する。
ログなどを使ってシステム内部の状態を把握しやすくする考え方。
不具合の原因を記録から追う。
閲覧数や利用状況などを集計してサイト改善に役立てること。
よく読まれるページを確認する。
ある出来事をきっかけに別のサービスへ自動で通知する仕組み。
フォーム送信を別サービスへ知らせる。
文書がHTMLであるとブラウザへ伝える宣言。
HTML文書の先頭で<!DOCTYPE html>と宣言し、標準の描画モードを選ぶために使います。通常の表示要素ではなく、画面に文章として出すものではありません。宣言がないと互換モードの扱いになり、配置の計算が想定と違うことがあります。
HTMLの先頭に<!DOCTYPE html>を書く。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
ページの設定や検索向け情報を置く部分。
headはタイトルやメタ情報、CSSの参照など、bodyは主に画面に表示する内容を置く領域です。ページのタイトルはhead内のtitleに、本文の見出しはbody内に書きます。同じ「タイトル」でも置く場所と役割が異なります。
文字コードやタイトルをheadに入れる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
画面に表示する内容を置く部分。
headはタイトルやメタ情報、CSSの参照など、bodyは主に画面に表示する内容を置く領域です。ページのタイトルはhead内のtitleに、本文の見出しはbody内に書きます。同じ「タイトル」でも置く場所と役割が異なります。
見出しや本文をbodyに入れる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
ブラウザのタブや検索結果に使われるページ名。
titleはタブなどのページ名、metaは説明や文字コードなどの情報、langは内容の言語を示します。本文の見出しや説明と整合させます。langを設定しても文章が自動翻訳されるわけではありません。
各ページに固有のtitleを付ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
文字コードなどのページ情報を示す要素。
titleはタブなどのページ名、metaは説明や文字コードなどの情報、langは内容の言語を示します。本文の見出しや説明と整合させます。langを設定しても文章が自動翻訳されるわけではありません。
metaで画面幅の設定を指定する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
文書の主な言語を示す属性。
titleはタブなどのページ名、metaは説明や文字コードなどの情報、langは内容の言語を示します。本文の見出しや説明と整合させます。langを設定しても文章が自動翻訳されるわけではありません。
日本語のページではlang="ja"とする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
画像を見られない人にも内容を伝える文字情報。
画像が見えない場合でも、画像の意味を伝えるための文章です。写真の全特徴を長く説明するより、その場で必要な意味を示します。意味のない装飾画像では空のaltを使い、不要な読み上げを避けます。
商品の写真に短い説明を添える。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
ページの中心となる内容を囲む要素。
本文・案内・独立した内容・主題別のまとまり・補助内容などの意味を付けます。似た枠でも役割に合う要素を選びます。sectionにはまとまりの主題が分かる見出しを付けるなど、ページ全体の構造を考えます。
本文全体をmainの中に置く。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
主な移動リンクのまとまりを示す要素。
本文・案内・独立した内容・主題別のまとまり・補助内容などの意味を付けます。似た枠でも役割に合う要素を選びます。sectionにはまとまりの主題が分かる見出しを付けるなど、ページ全体の構造を考えます。
学習メニューをnavで囲む。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
独立して読める記事などを表す要素。
本文・案内・独立した内容・主題別のまとまり・補助内容などの意味を付けます。似た枠でも役割に合う要素を選びます。sectionにはまとまりの主題が分かる見出しを付けるなど、ページ全体の構造を考えます。
編集後記の一話をarticleにする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
共通の話題を持つ文書の区切り。
本文・案内・独立した内容・主題別のまとまり・補助内容などの意味を付けます。似た枠でも役割に合う要素を選びます。sectionにはまとまりの主題が分かる見出しを付けるなど、ページ全体の構造を考えます。
章ごとにsectionと見出しを設ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
ページや区画の冒頭を示す要素。
headerは導入や案内、footerは末尾の補足、addressは記事やページに関連する連絡先を示します。headerとfooterはページ全体だけでなく記事内にも使えます。addressは単に住所らしい文章すべてへ使う要素ではありません。
ロゴと題名をheaderに置く。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
ページや区画の末尾を示す要素。
headerは導入や案内、footerは末尾の補足、addressは記事やページに関連する連絡先を示します。headerとfooterはページ全体だけでなく記事内にも使えます。addressは単に住所らしい文章すべてへ使う要素ではありません。
著作権表示をfooterに置く。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
本文から参照する図や写真をまとめる要素。
図や表に説明を関連付ける際に使います。figureの説明はfigcaption、表の説明はcaptionを使うため、似た名前でも用途が違います。画像の代替テキストと説明文も役割を分けて用意します。
図とその説明をfigureにまとめる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
フォームの関連する入力欄をまとめる要素。
関連するフォーム項目をまとめ、そのまとまりに名前を付けます。たとえば複数の選択肢をfieldsetで囲み、legendで「希望する連絡方法」と示します。個々の入力欄のlabelも必要なので、グループ名だけで代用しません。
連絡先の入力欄をfieldsetで囲む。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
入力欄を必須にする属性。
フォームの入力を必須にする指定です。対応する入力欄が空なら、通常ブラウザが送信を止めて案内します。ブラウザ側の確認は回避できるため、保存や送信のサーバー側でも必須条件を検査します。
メール欄にrequiredを付ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
入力欄に一時的な入力例を示す属性。
入力欄やボタンの目的を利用者へ伝えます。placeholderは入力例であり、入力すると消えるためラベルの代わりにはなりません。読み上げ用の名前と画面に見える名前が一致するようにすると操作を理解しやすくなります。
検索欄に「用語を入力」と表示する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素の意味を支援技術へ伝える名前。
入力欄やボタンの目的を利用者へ伝えます。placeholderは入力例であり、入力すると消えるためラベルの代わりにはなりません。読み上げ用の名前と画面に見える名前が一致するようにすると操作を理解しやすくなります。
アイコンだけのボタンに名前を付ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
折りたたみ部分の開閉状態を示す属性。
画面の役割・状態・要素同士の関係を、支援技術にも伝えます。ARIAを付けても開閉やキー操作の処理が自動で追加されるわけではありません。実際の状態と属性を一致させ、まず適切なHTML要素を使います。
メニューが開いたらtrueにする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
マウスを使わずキーで画面を利用すること。
見え方や操作方法が異なる人でも内容と機能を利用できるようにします。見出し・入力ラベル・フォーカス・色の区別などを組み合わせます。マウスで動くことだけで判断せず、キーボードや読み上げで意味が伝わるかを確かめます。
Tabキーでボタンへ移動できるか確かめる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
フォーカス中の要素の外側に描く輪郭線。
キーボードで現在どの部品を操作するかを示します。ダイアログを開いたときは内部へ移し、閉じたときは元の操作部品へ戻すと迷いにくくなります。見える目印を消さず、Tabキーで自然な順に移動できるか確認します。
操作中のボタンを輪郭線で示す。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素をどの基準で配置するかを決めるCSS指定。
画面内の配置や重なりを制御します。absoluteなどでは通常の文章の流れから外れるため、他の要素と重なることがあります。z-indexはすべての要素を一つの数で比較するわけではなく、重なりのグループにも影響されます。
position: stickyで見出しを追従させる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
スクロール中に指定位置へ留まる配置方法。
画面内の配置や重なりを制御します。absoluteなどでは通常の文章の流れから外れるため、他の要素と重なることがあります。z-indexはすべての要素を一つの数で比較するわけではなく、重なりのグループにも影響されます。
目次を画面上部に固定する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
基準の要素からの距離で位置を決める配置。
画面内の配置や重なりを制御します。absoluteなどでは通常の文章の流れから外れるため、他の要素と重なることがあります。z-indexはすべての要素を一つの数で比較するわけではなく、重なりのグループにも影響されます。
カードの右上に小さな印を置く。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
画像を枠にどう収めるか指定するCSS。
画像や動画の形と、枠の中での表示位置を調整します。containは全体を収め、coverは枠を埋める代わりに一部が切れることがあります。文字入り画像や説明用動画では、大切な部分が切れていないか確認します。
写真を枠いっぱいに切り抜いて表示する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
最小値と最大値の間で大きさを調整するCSS関数。
最小値・希望する値・最大値の範囲でCSSの値を決めます。clamp(1rem, 3vw, 2rem)なら画面幅に合わせつつ極端に小さく大きくなりすぎない文字サイズにできます。文字拡大時にも読めるかを確認します。
画面幅に合わせて文字サイズを変える。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
異なる単位も組み合わせて値を計算するCSS関数。
CSSの値を計算式で指定します。calc(100% - 24px)のように、異なる単位を組み合わせて余白を引けます。+や-の前後には空白を入れ、計算の基準となる親要素のサイズも確認します。
横幅を100%から余白分だけ引く。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素の最小の幅を指定するCSS。
親要素の配置方法と組み合わせて、子要素の大きさ・並び・間隔を調整します。指定が効く条件はプロパティごとに違います。内容が長い場合や画面が狭い場合も試し、縮み方や折り返しで読みにくくならないか確認します。
ボタンが細くなりすぎないようにする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素の高さの上限を指定するCSS。
親要素の配置方法と組み合わせて、子要素の大きさ・並び・間隔を調整します。指定が効く条件はプロパティごとに違います。内容が長い場合や画面が狭い場合も試し、縮み方や折り返しで読みにくくならないか確認します。
長い一覧の高さを抑える。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
画面に収まらない内容を動かすための部品。
領域内に収まらない内容を移動して読むための目印です。端末によって常時表示されるとは限りません。長い説明ではスクロール可能な範囲を明確にし、閉じるボタンなど必要な操作へ戻れるようにします。
一覧の下までスクロールする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
画面の端や切り欠きへの表示範囲を指定する設定。
端末の画面やブラウザの表示領域に応じた余白・サイズを考える際に使います。アドレスバーや画面の切り欠きで使える領域が変わるため、固定ボタンなどは実機で確認します。画面の高さとキーボード表示時の使える高さも同じとは限りません。
iPhoneの安全領域に合わせて余白を取る。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
端末の切り欠きなどを避けるための余白情報。
端末の画面やブラウザの表示領域に応じた余白・サイズを考える際に使います。アドレスバーや画面の切り欠きで使える領域が変わるため、固定ボタンなどは実機で確認します。画面の高さとキーボード表示時の使える高さも同じとは限りません。
下部ボタンをホームバーより上に置く。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
指で押せるリンクやボタンの反応範囲。
読みやすさや操作しやすさを調整する際の考え方です。小さい文字や近すぎるボタンは、スマホや文字の拡大で使いづらくなります。読み込み前後、タッチ操作、明暗の違いでも情報が分かるかを確認します。
小さなリンクの押せる面積を広げる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
ポインターを要素に重ねた状態。
読みやすさや操作しやすさを調整する際の考え方です。小さい文字や近すぎるボタンは、スマホや文字の拡大で使いづらくなります。読み込み前後、タッチ操作、明暗の違いでも情報が分かるかを確認します。
ボタンに触れたとき色を変える。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
小さい画面から設計して広い画面へ広げる方法。
画面の広さなどに合わせて表示を調整します。端末名だけで分けず、実際の表示領域と内容の量を見て配置します。狭い画面、文字の拡大、横向きでも文章や操作ボタンが重ならないかを確認します。
まずiPhoneで読みやすい配置を決める。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
画面で使う色の組み合わせ。
読みやすさや操作しやすさを調整する際の考え方です。小さい文字や近すぎるボタンは、スマホや文字の拡大で使いづらくなります。読み込み前後、タッチ操作、明暗の違いでも情報が分かるかを確認します。
本文と背景に十分な明るさの差を付ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
指定書体が使えないときの代わりの書体。
読みやすさや操作しやすさを調整する際の考え方です。小さい文字や近すぎるボタンは、スマホや文字の拡大で使いづらくなります。読み込み前後、タッチ操作、明暗の違いでも情報が分かるかを確認します。
日本語フォントの後に標準書体を指定する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
Webから読み込んで使う書体。
読みやすさや操作しやすさを調整する際の考え方です。小さい文字や近すぎるボタンは、スマホや文字の拡大で使いづらくなります。読み込み前後、タッチ操作、明暗の違いでも情報が分かるかを確認します。
見出しに専用のフォントを指定する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
ページを開いた直後に見える範囲。
読みやすさや操作しやすさを調整する際の考え方です。小さい文字や近すぎるボタンは、スマホや文字の拡大で使いづらくなります。読み込み前後、タッチ操作、明暗の違いでも情報が分かるかを確認します。
最初の画面に学習開始の入口を置く。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
読み込み中に部品の位置が急に動くこと。
Webページの表示や操作の快適さを測る指標に関わります。LCPは主要な内容の表示、INPは操作への反応、CLSは予期しない配置のずれです。測定した条件をそろえ、数値だけでなく実際の利用時の不便も確認します。
画像の縦横を指定してずれを減らす。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
変数や設定に最初に入れておく値。
初期値は処理を始めるときの値、状態は現在の選択や入力などを表す情報です。画面の見た目と状態の値が食い違うと、押したボタンと処理結果が合わなくなります。初回表示と再読み込み時の扱いも決めます。
点数の初期値を0にする。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
画面や処理が今どうなっているかを表す情報。
初期値は処理を始めるときの値、状態は現在の選択や入力などを表す情報です。画面の見た目と状態の値が食い違うと、押したボタンと処理結果が合わなくなります。初回表示と再読み込み時の扱いも決めます。
選択中のタブを状態として保存する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
クリックなどが起きたときに動く処理。
クリックや入力などが起きたときに処理を呼び出す仕組みです。ボタンを作るだけでは処理は決まらず、イベントと実行する関数を結び付けます。同じ処理を重複登録すると、一回の操作で複数回動くことがあります。
ボタンにclickの処理を登録する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
入力内容を確定して送る操作。
利用者が入力・選択・実行する画面の部品です。見た目だけでなく適切なHTML要素を使うと、キーボード操作などを助けられます。フォーム内のbuttonは送信になる場合があるため、用途に応じてtypeを指定します。
送信前に必須欄を確認する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
待ち時間のある処理を扱うための関数。
通信など時間のかかる処理について、開始と完了を分けて扱います。完了後に結果を使う必要があるため、Promiseやawaitなどで順序を整理します。awaitで待てることと、複数の処理が自動で同時実行されることは別です。
APIから取得した内容を画面に表示する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
失敗の理由などを持つJavaScriptの値。
処理を続けられない問題を、通常の成功結果とは別の経路で扱います。ファイルがない、入力形式が違うなどの場面で使います。問題を隠して終わるのではなく、利用者向けの案内と調査用の記録を分けて用意します。
catchで受け取ったメッセージを表示する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
例外を発生させて処理を中断する命令。
処理を続けられない問題を、通常の成功結果とは別の経路で扱います。ファイルがない、入力形式が違うなどの場面で使います。問題を隠して終わるのではなく、利用者向けの案内と調査用の記録を分けて用意します。
入力が不正ならエラーを投げる。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
成功と失敗のどちらでも最後に実行する部分。
成功や例外の発生にかかわらず、後片付けなどを行うための部分です。ファイルを閉じるなど、どちらの経路でも必要な処理を置きます。プログラム自体の強制終了などでも必ず動く、という保証ではありません。
読み込み表示を最後に消す。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
値が配列かを調べるJavaScriptのメソッド。
値の種類や所属を調べ、処理を分けるために使います。JavaScriptで配列を調べるならArray.isArrayが適しています。typeof nullが"object"になるなど例外的な結果もあるため、判定方法を目的に合わせます。
受け取ったデータが配列か確認する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
オブジェクトのキーを配列で取り出すメソッド。
JavaScriptのオブジェクトの項目名・値・対応を扱います。keysは名前、valuesは値、entriesは名前と値の組を返します。継承した項目と直接持つ項目を区別したい場合はhasOwnなどで確認します。
設定項目の名前を一覧にする。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
キーと値の組を配列で取り出すメソッド。
JavaScriptのオブジェクトの項目名・値・対応を扱います。keysは名前、valuesは値、entriesは名前と値の組を返します。継承した項目と直接持つ項目を区別したい場合はhasOwnなどで確認します。
項目名と値を順に表示する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
変換してできた配列を一段平らにするメソッド。
配列への変換や値の取り出し、処理結果のまとめ方に関わります。at(-1)は末尾の要素を取り出し、flatMapは各要素の結果を一段平らにします。どの形の値が返るかを見て、後の処理に渡します。
分類ごとの項目を一つの一覧にする。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
配列のすべての要素が条件を満たすか調べる。
配列の各値が条件を満たすかを調べ、真偽値を返します。everyは全部、someは少なくとも一つが条件を満たすかを調べます。空配列ではeveryはtrue、someはfalseになる点も押さえます。
回答がすべて入力されたか確認する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
配列に条件を満たす要素が一つでもあるか調べる。
配列の各値が条件を満たすかを調べ、真偽値を返します。everyは全部、someは少なくとも一つが条件を満たすかを調べます。空配列ではeveryはtrue、someはfalseになる点も押さえます。
未読の通知があるか確かめる。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
文字列が指定した文字から始まるか調べる。
文字列や配列に対象が含まれるか、文字列の先頭・末尾が一致するかを調べます。真偽値で結果を返します。通常大文字と小文字は区別するため、検索の方針に応じて表記をそろえてから比較します。
用語が入力文字で始まるか判定する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
文字列の前後の空白を取り除くメソッド。
文字列の前後の空白や表記を整える方法です。元の文字列を書き換えるのではなく、新しい文字列を得ます。正規化をしても、すべての表記ゆれや意味の違いが自動で解消されるわけではありません。
検索語の余分な空白を消す。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
URLの一部分として使う文字を安全な形に変換する。
URLに条件を入れたり、要素へ分解したりするために使います。空白や&などをそのまま連結すると意味が変わるため、対応する機能で組み立てます。#以降のフラグメントは通常サーバーへのHTTPリクエストには含まれません。
検索語をクエリに入れる前に変換する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
URLの検索条件を読み書きするための機能。
URLに条件を入れたり、要素へ分解したりするために使います。空白や&などをそのまま連結すると意味が変わるため、対応する機能で組み立てます。#以降のフラグメントは通常サーバーへのHTTPリクエストには含まれません。
URLからキーワードを取り出す。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
要素が画面に入ったかを監視する機能。
変更や表示領域との位置関係などを監視し、変化が起きたときに処理します。一定時間ごとに全部を調べ続けるより、必要な変化に反応できます。不要になった監視は解除し、監視中の変更が繰り返しを起こさないか確認します。
画像が近づいてから読み込む。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
画面の要素の変化を監視する機能。
変更や表示領域との位置関係などを監視し、変化が起きたときに処理します。一定時間ごとに全部を調べ続けるより、必要な変化に反応できます。不要になった監視は解除し、監視中の変更が繰り返しを起こさないか確認します。
一覧が書き換わったことを検知する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
通信などの処理を中止するための仕組み。
対応する非同期処理へ、中止を求める合図を送ります。画面を移動した後の不要な通信などに使います。中止の合図を送っても、すでにサーバーで行われた保存や送信が自動で取り消されるわけではありません。
検索語が変わったら古い通信を止める。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
細かい時間差を測るための時刻を得る機能。
処理がいつ実行されるかや、時間の計測に関係します。JavaScriptの通常の処理が長く続くと、イベントや描画の実行も待たされます。予約した処理の種類ごとにタイミングが違うので、見た目の更新と重い計算を分けます。
処理の開始と終了の差を測る。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
日時を扱うJavaScriptの値。
同じ瞬間でも地域の時差により表示する日付や時刻が変わります。保存する基準と画面表示の地域を分けると混乱を防げます。Date.nowは経過ミリ秒、toISOStringはUTCの文字列で、Date.parseは文字形式によって解釈が変わることがあります。
公開日を年月日で表示する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
地域ごとに定められた時刻の基準。
同じ瞬間でも地域の時差により表示する日付や時刻が変わります。保存する基準と画面表示の地域を分けると混乱を防げます。Date.nowは経過ミリ秒、toISOStringはUTCの文字列で、Date.parseは文字形式によって解釈が変わることがあります。
日本時間で公開日時を表示する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
世界で共通の基準として使う時刻。
同じ瞬間でも地域の時差により表示する日付や時刻が変わります。保存する基準と画面表示の地域を分けると混乱を防げます。Date.nowは経過ミリ秒、toISOStringはUTCの文字列で、Date.parseは文字形式によって解釈が変わることがあります。
記録をUTCで保存して表示時に変換する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
通信の内容や条件を伝える付加情報。
通信の依頼・応答や付帯情報、本文を扱います。本文は文字・JSON・ファイルなどの形式を持ちます。本文を一度読むとそのまま再度読めない場合があるため、読み取る場所と形式を決めておきます。
Content-Typeでデータ形式を伝える。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
送るデータの種類を示すHTTPヘッダー。
HTTPヘッダーでデータ形式・保存方針・認証などの情報を伝えます。本文の内容と設定が合っていないと正しく扱われないことがあります。User-Agentは送信者が指定でき、認証情報を含むヘッダーは公開ログなどへ残さないようにします。
JSONを返すときapplication/jsonにする。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
通信するブラウザなどを名乗る情報。
HTTPヘッダーでデータ形式・保存方針・認証などの情報を伝えます。本文の内容と設定が合っていないと正しく扱われないことがあります。User-Agentは送信者が指定でき、認証情報を含むヘッダーは公開ログなどへ残さないようにします。
アクセスログでブラウザの種類を見る。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
移動先が恒久的に変わったことを示す応答。
別のURLへ移動するようブラウザへ知らせます。301は恒久的、302は一時的な移動として扱われます。移動先がさらに元へ戻る設定だとループになるため、最終的に正しいページへ到達するかを確認します。
旧ページから新ページへ転送する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
移動先が一時的に変わったことを示す応答。
別のURLへ移動するようブラウザへ知らせます。301は恒久的、302は一時的な移動として扱われます。移動先がさらに元へ戻る設定だとループになるため、最終的に正しいページへ到達するかを確認します。
作業中だけ別ページへ転送する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
サーバーが閲覧を許可しないことを示す応答。
通信の結果を番号で示します。2xxは成功、3xxは移動や再利用に関わる応答、4xxは依頼や権限などの問題、5xxは処理側の問題です。番号だけで原因を確定せず、URL・送信内容・返された説明やログを合わせて確認します。
権限のない管理画面へのアクセスを拒む。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
短時間に要求が多すぎることを示す応答。
通信の結果を番号で示します。2xxは成功、3xxは移動や再利用に関わる応答、4xxは依頼や権限などの問題、5xxは処理側の問題です。番号だけで原因を確定せず、URL・送信内容・返された説明やログを合わせて確認します。
続けて送信したら少し待って再試行する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
サービスが一時的に利用できないことを示す応答。
通信の結果を番号で示します。2xxは成功、3xxは移動や再利用に関わる応答、4xxは依頼や権限などの問題、5xxは処理側の問題です。番号だけで原因を確定せず、URL・送信内容・返された説明やログを合わせて確認します。
保守中に503を返す。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
ドメインに対応する通信先などを記す設定。
DNSには用途ごとに種類の違う情報を登録します。AとAAAAは接続先IP、CNAMEは別名、MXはメール配送先、TXTは文字情報、NSは管理するDNSサーバーです。TTLはキャッシュ時間に関わり、用途に合う種類を選びます。
サイト用のレコードを追加する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
ドメイン名をIPv4アドレスに結び付けるDNS設定。
DNSには用途ごとに種類の違う情報を登録します。AとAAAAは接続先IP、CNAMEは別名、MXはメール配送先、TXTは文字情報、NSは管理するDNSサーバーです。TTLはキャッシュ時間に関わり、用途に合う種類を選びます。
サブドメインのAレコードを確認する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
別のドメイン名を参照させるDNS設定。
DNSには用途ごとに種類の違う情報を登録します。AとAAAAは接続先IP、CNAMEは別名、MXはメール配送先、TXTは文字情報、NSは管理するDNSサーバーです。TTLはキャッシュ時間に関わり、用途に合う種類を選びます。
サブドメインをサービスの名前へ向ける。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
メールを受け取るサーバーを示すDNS設定。
DNSには用途ごとに種類の違う情報を登録します。AとAAAAは接続先IP、CNAMEは別名、MXはメール配送先、TXTは文字情報、NSは管理するDNSサーバーです。TTLはキャッシュ時間に関わり、用途に合う種類を選びます。
独自ドメインのメール受信先を設定する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
DNS情報をキャッシュする目安の時間。
DNSには用途ごとに種類の違う情報を登録します。AとAAAAは接続先IP、CNAMEは別名、MXはメール配送先、TXTは文字情報、NSは管理するDNSサーバーです。TTLはキャッシュ時間に関わり、用途に合う種類を選びます。
設定変更の反映待ちでTTLを確認する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
通信先の身元確認と暗号化に使う証明書。
HTTPSで接続先の確認に使う証明書には有効期間があります。更新に失敗するとブラウザで警告が出る場合があります。更新を自動化していても期限や接続状態を確認し、対象のドメインと証明書が一致しているかを調べます。
HTTPSの接続で証明書を確認する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
通信証明書が有効な期間の終わり。
HTTPSで接続先の確認に使う証明書には有効期間があります。更新に失敗するとブラウザで警告が出る場合があります。更新を自動化していても期限や接続状態を確認し、対象のドメインと証明書が一致しているかを調べます。
期限前に自動更新を確認する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
画質と容量を調整して表示を速くすること。
画像の容量・画質・表示方法を用途に合わせます。写真と図では適した形式が異なり、非可逆圧縮では元の情報を完全には戻せません。透過が必要な画像では対応形式を使い、見た目と読み込み速度の両方を確認します。
大きすぎる写真を縮小する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
Web向けの画像形式の一つ。
画像の容量・画質・表示方法を用途に合わせます。写真と図では適した形式が異なり、非可逆圧縮では元の情報を完全には戻せません。透過が必要な画像では対応形式を使い、見た目と読み込み速度の両方を確認します。
写真をWebPで保存して容量を減らす。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
圧縮効率の高い画像形式の一つ。
画像の容量・画質・表示方法を用途に合わせます。写真と図では適した形式が異なり、非可逆圧縮では元の情報を完全には戻せません。透過が必要な画像では対応形式を使い、見た目と読み込み速度の両方を確認します。
対応環境でAVIF画像を配信する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
主要な内容が表示されるまでの時間を測る指標。
Webページの表示や操作の快適さを測る指標に関わります。LCPは主要な内容の表示、INPは操作への反応、CLSは予期しない配置のずれです。測定した条件をそろえ、数値だけでなく実際の利用時の不便も確認します。
大きな画像の読み込みを改善する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
操作に対する画面更新までの反応を測る指標。
Webページの表示や操作の快適さを測る指標に関わります。LCPは主要な内容の表示、INPは操作への反応、CLSは予期しない配置のずれです。測定した条件をそろえ、数値だけでなく実際の利用時の不便も確認します。
ボタンを押してからの遅れを確認する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
画面の予期しないずれを測る指標。
Webページの表示や操作の快適さを測る指標に関わります。LCPは主要な内容の表示、INPは操作への反応、CLSは予期しない配置のずれです。測定した条件をそろえ、数値だけでなく実際の利用時の不便も確認します。
画像の寸法を指定してずれを抑える。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
検索エンジンがページを巡って内容を取得すること。
人の代わりに自動でページやデータへアクセスするプログラムです。検索用の巡回もあれば、無差別にURLを探すアクセスもあります。名前を名乗るUser-Agentだけで正規の巡回だと断定せず、送信元や動作も確認します。
公開後に検索ロボットの巡回を待つ。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
検索エンジンがページを検索用の情報に登録すること。
検索でページを見つけてもらうための改善や確認に関わります。公開、クロール、検索用の登録は別の段階です。サイトマップを送っただけで登録や順位が保証されるわけではなく、内容やアクセス状況を継続して確認します。
公開した記事の登録状況を確認する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
同じ内容を持つページの代表URLを示す指定。
検索サービスにページの関係や意味を伝える情報です。canonicalは代表URLの指定、JSON-LDは構造化データを記述する形式です。記述だけで検索表示が保証されるわけではなく、実際の本文や公開URLと一致させます。
重複するURLの代表を一つ指定する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
ページの内容を決まった形式で検索エンジンへ伝える情報。
検索サービスにページの関係や意味を伝える情報です。canonicalは代表URLの指定、JSON-LDは構造化データを記述する形式です。記述だけで検索表示が保証されるわけではなく、実際の本文や公開URLと一致させます。
記事のタイトルと公開日を示す。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
構造化データを書く形式の一つ。
検索サービスにページの関係や意味を伝える情報です。canonicalは代表URLの指定、JSON-LDは構造化データを記述する形式です。記述だけで検索表示が保証されるわけではなく、実際の本文や公開URLと一致させます。
記事の情報をscript要素に記述する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
SNSでリンクを共有した際の表示情報を指定する規格。
ページのタイトル・説明・共有画像などの情報を、サービスやブラウザへ伝えます。本文に見える文字とは別に、HTMLのheadなどへ設定します。SNS側が以前の情報を保存していると、更新直後の共有表示に反映されないことがあります。
共有カードのタイトルと画像を設定する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
検索結果での表示や登録状況を確認する道具。
検索でページを見つけてもらうための改善や確認に関わります。公開、クロール、検索用の登録は別の段階です。サイトマップを送っただけで登録や順位が保証されるわけではなく、内容やアクセス状況を継続して確認します。
サイトマップの送信結果を見る。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
サイトの利用状況を集計する仕組み。
配信や運用状態の確認に使います。アクセス数は人の数と一致するとは限らず、ボットや再読み込みを含む場合があります。障害の判断では、期間・エラー率・表示速度などを合わせて見ます。
読まれている記事を確認する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
見つからないURLを開いたときの案内ページ。
存在しないURLを開いた利用者へ案内するページです。戻れるリンクや検索などを用意すると迷いにくくなります。見た目に「見つかりません」と書くだけでなく、HTTPステータスも404で返すことが大切です。
移動先がなくてもホームへの道を示す。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
版ごとの変更点をまとめた記録。
変更を公開するときの記録と環境の管理に関わります。確認用の環境で動いても、本番の設定やデータでは結果が異なる場合があります。公開した版と変更内容、問題が出た場合に戻す版を結び付けて残します。
用語集を増やした内容を版の記録に残す。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
これまでの修正内容を時系列で示す一覧。
変更を公開するときの記録と環境の管理に関わります。確認用の環境で動いても、本番の設定やデータでは結果が異なる場合があります。公開した版と変更内容、問題が出た場合に戻す版を結び付けて残します。
不具合の修正日を記録する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
公開前に本番に近い状態で動作を確かめる場所。
変更を公開するときの記録と環境の管理に関わります。確認用の環境で動いても、本番の設定やデータでは結果が異なる場合があります。公開した版と変更内容、問題が出た場合に戻す版を結び付けて残します。
新しい版を先にステージングで確認する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
利用者が実際に使う公開中の環境。
変更を公開するときの記録と環境の管理に関わります。確認用の環境で動いても、本番の設定やデータでは結果が異なる場合があります。公開した版と変更内容、問題が出た場合に戻す版を結び付けて残します。
確認が済んだ変更を本番環境に反映する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
公開後に主要な機能が動くか短時間で確かめる検査。
期待する結果と実際の動作を比べて確認します。部品単体、部品同士、利用者の一連の操作などで確認する範囲が異なります。正常な入力だけでなく、空欄・境界値・通信失敗などを含めると不具合を見つけやすくなります。
ホームと検索と問い合わせを順に試す。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
開閉できる説明欄を作るHTML要素。
detailsが開閉する内容のまとまり、summaryがその見出しです。FAQなどの補足を折りたためます。summaryだけ見ても内容の目的が分かる文章にし、重要な案内を閉じた部分へ隠しすぎないようにします。
長い補足を折りたたんで表示する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
details要素の開閉見出しを指定する要素。
detailsが開閉する内容のまとまり、summaryがその見出しです。FAQなどの補足を折りたためます。summaryだけ見ても内容の目的が分かる文章にし、重要な案内を閉じた部分へ隠しすぎないようにします。
「詳しい説明」を押すと本文が開く。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
本文と間接的に関係する補足を表す要素。
本文・案内・独立した内容・主題別のまとまり・補助内容などの意味を付けます。似た枠でも役割に合う要素を選びます。sectionにはまとまりの主題が分かる見出しを付けるなど、ページ全体の構造を考えます。
記事の横に関連情報を置く。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
日付や時刻を表し機械にも意味を伝える要素。
日時を表す内容に意味を付けます。datetime属性で機械にも読める形式を添え、表示は「10月12日」のように人向けの表記にできます。表示の日時と属性の日時が一致するようにします。
更新日をdatetime属性と一緒に記す。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
記事やページの連絡先情報を表す要素。
headerは導入や案内、footerは末尾の補足、addressは記事やページに関連する連絡先を示します。headerとfooterはページ全体だけでなく記事内にも使えます。addressは単に住所らしい文章すべてへ使う要素ではありません。
運営者の問い合わせ先を掲載する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
まとまった引用文を表す要素。
blockquoteはまとまった引用、preは空白や改行を保つ内容、codeはコードの断片を示します。見た目の字下げや等幅文字だけが目的ではありません。コード中の<などは文字として扱えるようエスケープして表示します。
出典を示して文章を引用する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
空白や改行を保ったまま表示する要素。
blockquoteはまとまった引用、preは空白や改行を保つ内容、codeはコードの断片を示します。見た目の字下げや等幅文字だけが目的ではありません。コード中の<などは文字として扱えるようエスケープして表示します。
複数行のコード例を載せる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
文章の中でプログラムのコードを表す要素。
blockquoteはまとまった引用、preは空白や改行を保つ内容、codeはコードの断片を示します。見た目の字下げや等幅文字だけが目的ではありません。コード中の<などは文字として扱えるようエスケープして表示します。
説明中の変数名をコードとして示す。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
条件に応じた画像候補をまとめる要素。
画面幅や対応形式に応じて画像・音声・動画の候補を示します。pictureでは最終的なimgも用意し、そのaltで画像の意味を伝えます。候補を増やしても必要な内容が端末によって違って見えないように確認します。
画面幅によって別の画像を表示する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
画像や動画などの候補ファイルを指定する要素。
画面幅や対応形式に応じて画像・音声・動画の候補を示します。pictureでは最終的なimgも用意し、そのaltで画像の意味を伝えます。候補を増やしても必要な内容が端末によって違って見えないように確認します。
picture内でWebP画像を指定する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
動画をページ内で再生する要素。
動画や音声をページに組み込みます。再生用の操作部品や対応形式を用意します。自動再生は端末や設定で制限されるため、再生できない場合も操作や説明が分かるようにします。
操作説明の動画を載せる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
音声をページ内で再生する要素。
動画や音声をページに組み込みます。再生用の操作部品や対応形式を用意します。自動再生は端末や設定で制限されるため、再生できない場合も操作や説明が分かるようにします。
発音の見本を聞けるようにする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
スクリプトで図や画像を描くための領域。
JavaScriptなどで図形や画像を描く領域です。描画した内容は通常のHTML文章のような意味構造を持たないため、グラフやゲームの重要な情報は説明や操作方法も用意します。表示サイズと内部の描画サイズも区別します。
JavaScriptでゲームの画面を描く。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
別のページをページ内に埋め込む要素。
別のページを自分のページ内に表示します。動画サービスなどの埋め込みにも使います。表示先によっては埋め込みを拒否される場合があり、許可する機能やsandbox、読み上げ用のtitleも確認します。
許可された外部コンテンツを表示する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
data-で始まる独自の情報を要素に持たせる属性。
HTML要素に付く属性を読み書きします。data-*は独自の小さな情報を要素に持たせ、datasetで扱えます。多くの属性値は文字なので、"false"を真偽値falseと同じつもりで使わないようにします。
data-categoryに分類名を保存する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
画面条件に応じて選べる画像候補を指定する属性。
画像の容量・画質・表示方法を用途に合わせます。写真と図では適した形式が異なり、非可逆圧縮では元の情報を完全には戻せません。透過が必要な画像では対応形式を使い、見た目と読み込み速度の両方を確認します。
高密度画面向けの画像も用意する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
画像などを読み込むタイミングを指定する属性。
画像の容量・画質・表示方法を用途に合わせます。写真と図では適した形式が異なり、非可逆圧縮では元の情報を完全には戻せません。透過が必要な画像では対応形式を使い、見た目と読み込み速度の両方を確認します。
lazyで画面に近づいてから読み込ませる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
入力欄の自動補完の種類などを指定する属性。
入力の補完、内容の編集、ドラッグなどに関わる指定です。指定を付けるだけでデータの保存やドロップ後の処理まで完成するわけではありません。タッチ・キーボードでも同じ目的を果たせる方法を用意します。
メール欄にemailを指定する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
対応する入力欄やボタンを操作不可にする属性。
フォーム部品の操作を制限します。readonlyは値の編集を禁止し、disabledは部品を無効にします。disabledの値は通常フォーム送信に含まれないため、見た目だけの違いではありません。
送信中は送信ボタンを無効にする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
対応する入力欄の内容を編集不可にする属性。
フォーム部品の操作を制限します。readonlyは値の編集を禁止し、disabledは部品を無効にします。disabledの値は通常フォーム送信に含まれないため、見た目だけの違いではありません。
発行済み番号を変更できない欄にする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素の表示方式を指定するCSSプロパティ。
要素の見せ方を変えます。display:noneは配置の場所も消し、visibility:hiddenは通常その場所を残して非表示にし、opacity:0は透明にします。透明でも操作対象になる場合があるため、見え方と操作可能性を別に確認します。
flexで子要素を並べる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素の見える状態を指定するCSSプロパティ。
要素の見せ方を変えます。display:noneは配置の場所も消し、visibility:hiddenは通常その場所を残して非表示にし、opacity:0は透明にします。透明でも操作対象になる場合があるため、見え方と操作可能性を別に確認します。
hiddenで場所を残して非表示にする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素全体の不透明度を指定するプロパティ。
要素の見せ方を変えます。display:noneは配置の場所も消し、visibility:hiddenは通常その場所を残して非表示にし、opacity:0は透明にします。透明でも操作対象になる場合があるため、見え方と操作可能性を別に確認します。
0.5で半透明にする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
FlexboxやGridなどの項目間の隙間を指定する。
親要素の配置方法と組み合わせて、子要素の大きさ・並び・間隔を調整します。指定が効く条件はプロパティごとに違います。内容が長い場合や画面が狭い場合も試し、縮み方や折り返しで読みにくくならないか確認します。
カードの間を16px空ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
FlexboxやGridで項目の整列位置を指定する。
親要素の配置方法と組み合わせて、子要素の大きさ・並び・間隔を調整します。指定が効く条件はプロパティごとに違います。内容が長い場合や画面が狭い場合も試し、縮み方や折り返しで読みにくくならないか確認します。
横並びの項目を縦方向の中央にそろえる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
配置方向の余った空間の配分を指定する。
親要素の配置方法と組み合わせて、子要素の大きさ・並び・間隔を調整します。指定が効く条件はプロパティごとに違います。内容が長い場合や画面が狭い場合も試し、縮み方や折り返しで読みにくくならないか確認します。
ボタンを中央に寄せる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
Flexboxの項目を折り返すか指定する。
親要素の配置方法と組み合わせて、子要素の大きさ・並び・間隔を調整します。指定が効く条件はプロパティごとに違います。内容が長い場合や画面が狭い場合も試し、縮み方や折り返しで読みにくくならないか確認します。
画面が狭いとカードを次の行に送る。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
Gridの列の数や幅を指定する。
複数の要素を配置するCSSの仕組みです。Flexboxは一つの軸に沿う配置、Gridは行と列の組み合わせを整理する用途が得意です。画面が狭い場合の折り返しや列数も指定し、内容が増えても読める配置にします。
同じ幅のカードを3列に並べる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
Gridで幅などの最小値と最大値を指定する関数。
親要素の配置方法と組み合わせて、子要素の大きさ・並び・間隔を調整します。指定が効く条件はプロパティごとに違います。内容が長い場合や画面が狭い場合も試し、縮み方や折り返しで読みにくくならないか確認します。
列幅に最小200pxと伸縮する上限を与える。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
指定した幅に余白や枠を含めるか決める。
要素の中身・内側の余白・境界線・外側の余白を分けて考えます。paddingは内側、marginは外側です。box-sizing: border-boxなら指定した幅にpaddingとborderを含めるため、画面の幅からはみ出す問題を整理しやすくなります。
border-boxで枠を含めた幅にする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素の箱に影を付けるプロパティ。
CSSで表示や操作時の見え方を調整します。色や形だけで重要な情報を区別すると分からない人もいるため、文字や他の目印も添えます。スマホではマウスと同じ操作を前提にせず、タッチでも目的が分かる表示にします。
カードの周囲に薄い影を付ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
枠の角の丸みを指定するプロパティ。
CSSで表示や操作時の見え方を調整します。色や形だけで重要な情報を区別すると分からない人もいるため、文字や他の目印も添えます。スマホではマウスと同じ操作を前提にせず、タッチでも目的が分かる表示にします。
ボタンの角を丸くする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素を移動・回転・拡大縮小する。
位置・大きさ・状態の変化に動きを付けます。動きが多いと読みにくく感じる人もいるため、動きを減らす設定にも対応します。見た目を動かすtransformが、周囲の通常の配置の取り直しをするとは限りません。
scaleで画像を少し拡大する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
時間に沿ってスタイルを変化させる指定。
位置・大きさ・状態の変化に動きを付けます。動きが多いと読みにくく感じる人もいるため、動きを減らす設定にも対応します。見た目を動かすtransformが、周囲の通常の配置の取り直しをするとは限りません。
待機マークを回転させる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
CSSアニメーションの途中の状態を定義する。
位置・大きさ・状態の変化に動きを付けます。動きが多いと読みにくく感じる人もいるため、動きを減らす設定にも対応します。見た目を動かすtransformが、周囲の通常の配置の取り直しをするとは限りません。
開始と終了の回転角度を決める。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
利用者が動きを減らしたい設定か確認する条件。
位置・大きさ・状態の変化に動きを付けます。動きが多いと読みにくく感じる人もいるため、動きを減らす設定にも対応します。見た目を動かすtransformが、周囲の通常の配置の取り直しをするとは限りません。
設定に合わせてアニメーションを控える。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
利用者の明暗の配色設定を確認する条件。
利用者の明るい表示・暗い表示の好みをCSSから参照します。dark条件で暗い背景を使う場合は文字・境界線・入力欄の色も合わせます。背景だけを変えて、文字が読めなくならないか確認します。
暗い配色を希望する人に対応する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
操作状況に応じてフォーカス表示が必要な要素を選ぶ。
キーボードで現在どの部品を操作するかを示します。ダイアログを開いたときは内部へ移し、閉じたときは元の操作部品へ戻すと迷いにくくなります。見える目印を消さず、Tabキーで自然な順に移動できるか確認します。
キーボード操作中のボタンに枠を付ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
指定条件に合う関連要素を持つ要素を選ぶ疑似クラス。
条件に合う子要素や関連する要素を持つ要素を選べるCSSセレクターです。カード内に画像がある場合だけカードの配置を変えるなどに使えます。条件を広げすぎると意図しない要素にも当たるため、対象を絞ります。
画像を含むカードの余白を変える。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
複数のCSS指定から適用する値を決める仕組み。
CSSでは、対象となる要素と複数の指定の優先関係を判断します。セレクターが当たっていても別の指定に負ける場合があります。:where()の詳細度は0で、:is()や:not()は引数の詳細度が関係するため、一律に同じ強さではありません。
優先度や詳細度、記述順で色が決まる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
値の型を文字列で調べる演算子。
値の種類や所属を調べ、処理を分けるために使います。JavaScriptで配列を調べるならArray.isArrayが適しています。typeof nullが"object"になるなど例外的な結果もあるため、判定方法を目的に合わせます。
typeof 42でnumberが返る。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
オブジェクトとコンストラクターの関係を調べる演算子。
値の種類や所属を調べ、処理を分けるために使います。JavaScriptで配列を調べるならArray.isArrayが適しています。typeof nullが"object"になるなど例外的な結果もあるため、判定方法を目的に合わせます。
日付オブジェクトかを確認する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
コンストラクターを使ってオブジェクトを作る演算子。
オブジェクトの作成や共有する処理の定義に関係します。JavaScriptのthisは呼び出し方によって対象が変わる場合があります。クラス全体の機能と個々のインスタンスの機能を分けて考えると、呼び出し先を理解しやすくなります。
new Date()で日時のオブジェクトを作る。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
呼び出し方などによって決まる対象を指す値。
オブジェクトの作成や共有する処理の定義に関係します。JavaScriptのthisは呼び出し方によって対象が変わる場合があります。クラス全体の機能と個々のインスタンスの機能を分けて考えると、呼び出し先を理解しやすくなります。
通常のメソッド内で呼び出し元の情報を扱う。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
親クラスのコンストラクターやメソッドを参照する。
オブジェクトの作成や共有する処理の定義に関係します。JavaScriptのthisは呼び出し方によって対象が変わる場合があります。クラス全体の機能と個々のインスタンスの機能を分けて考えると、呼び出し先を理解しやすくなります。
子クラスから親の初期化を呼ぶ。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
クラスそのものに属するメンバーを定義する。
オブジェクトの作成や共有する処理の定義に関係します。JavaScriptのthisは呼び出し方によって対象が変わる場合があります。クラス全体の機能と個々のインスタンスの機能を分けて考えると、呼び出し先を理解しやすくなります。
インスタンスを作らず補助メソッドを使う。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
プロパティを読むときに実行する処理。
オブジェクトの作成や共有する処理の定義に関係します。JavaScriptのthisは呼び出し方によって対象が変わる場合があります。クラス全体の機能と個々のインスタンスの機能を分けて考えると、呼び出し先を理解しやすくなります。
合計金額を計算して返す。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
プロパティに値を設定するときに実行する処理。
オブジェクトの作成や共有する処理の定義に関係します。JavaScriptのthisは呼び出し方によって対象が変わる場合があります。クラス全体の機能と個々のインスタンスの機能を分けて考えると、呼び出し先を理解しやすくなります。
負の値を受け付けないようにする。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
識別子などに使える一意の値を作る型。
JavaScriptで特別な値やオブジェクトの動作を扱う仕組みです。たとえばBigIntは大きな整数を扱いますが、Numberとそのまま混ぜて計算できません。通常の値やMapなどで足りるかを確認し、必要な場面で使います。
ほかのキーと衝突しないキーを作る。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
大きな整数を精度を失わず扱うための型。
JavaScriptで特別な値やオブジェクトの動作を扱う仕組みです。たとえばBigIntは大きな整数を扱いますが、Numberとそのまま混ぜて計算できません。通常の値やMapなどで足りるかを確認し、必要な場面で使います。
通常のNumberでは正確に表せない整数を扱う。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
一部の値を弱い参照のキーとして持つ対応表。
JavaScriptで特別な値やオブジェクトの動作を扱う仕組みです。たとえばBigIntは大きな整数を扱いますが、Numberとそのまま混ぜて計算できません。通常の値やMapなどで足りるかを確認し、必要な場面で使います。
オブジェクトに関連する補助情報を保存する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
一部の値を弱い参照で管理する集合。
JavaScriptで特別な値やオブジェクトの動作を扱う仕組みです。たとえばBigIntは大きな整数を扱いますが、Numberとそのまま混ぜて計算できません。通常の値やMapなどで足りるかを確認し、必要な場面で使います。
処理済みオブジェクトを記録する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
オブジェクトへの操作を仲介する仕組み。
JavaScriptで特別な値やオブジェクトの動作を扱う仕組みです。たとえばBigIntは大きな整数を扱いますが、Numberとそのまま混ぜて計算できません。通常の値やMapなどで足りるかを確認し、必要な場面で使います。
プロパティへの書き込みを検査する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
オブジェクト操作のための組み込みメソッド群。
JavaScriptで特別な値やオブジェクトの動作を扱う仕組みです。たとえばBigIntは大きな整数を扱いますが、Numberとそのまま混ぜて計算できません。通常の値やMapなどで足りるかを確認し、必要な場面で使います。
プロパティ取得をメソッドで行う。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
複数の非同期処理がすべて成功するのを待つ。
複数の非同期処理をまとめて扱います。allは全部の成功、allSettledは全部の成否、raceは最初の決着、anyは最初の成功に注目します。どれも他の処理を自動で中止する仕組みではありません。
複数のデータ取得結果をまとめて受け取る。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
複数の非同期処理の成功・失敗をすべて受け取る。
複数の非同期処理をまとめて扱います。allは全部の成功、allSettledは全部の成否、raceは最初の決着、anyは最初の成功に注目します。どれも他の処理を自動で中止する仕組みではありません。
失敗した取得も含めて結果を一覧にする。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
複数の非同期処理のうち最初に確定した結果を受け取る。
複数の非同期処理をまとめて扱います。allは全部の成功、allSettledは全部の成否、raceは最初の決着、anyは最初の成功に注目します。どれも他の処理を自動で中止する仕組みではありません。
最も早く終わった処理の結果を使う。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
複数の非同期処理のうち最初の成功を受け取る。
複数の非同期処理をまとめて扱います。allは全部の成功、allSettledは全部の成否、raceは最初の決着、anyは最初の成功に注目します。どれも他の処理を自動で中止する仕組みではありません。
候補の配信先から最初に取得できた結果を使う。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
現在の処理の後に実行する小さな処理を予約する。
処理がいつ実行されるかや、時間の計測に関係します。JavaScriptの通常の処理が長く続くと、イベントや描画の実行も待たされます。予約した処理の種類ごとにタイミングが違うので、見た目の更新と重い計算を分けます。
同期処理が終わってから状態を整える。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
画面更新に合わせた処理を予約する。
処理がいつ実行されるかや、時間の計測に関係します。JavaScriptの通常の処理が長く続くと、イベントや描画の実行も待たされます。予約した処理の種類ごとにタイミングが違うので、見た目の更新と重い計算を分けます。
次の描画でアニメーションを進める。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
対応するデータを深く複製する関数。
浅いコピーでは外側を複製しても内部のオブジェクトを共有する場合があります。深いコピーは内部の値もたどって複製しますが、どんな値も複製できるとは限りません。structuredCloneでも関数など対応しない値があります。
入れ子の配列を独立したデータに複製する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
対象オブジェクトのプロパティ変更などを制限する。
元の値を変更しない方針や、変更を制限する仕組みです。変更履歴を追いやすくします。Object.freezeは通常そのオブジェクトの直接のプロパティを凍結するもので、内部のオブジェクトまで自動で凍結しません。
設定の最上位プロパティを変更不可にする。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
列挙可能な自身のプロパティを別の対象へコピーする。
浅いコピーでは外側を複製しても内部のオブジェクトを共有する場合があります。深いコピーは内部の値もたどって複製しますが、どんな値も複製できるとは限りません。structuredCloneでも関数など対応しない値があります。
設定オブジェクトを浅く統合する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
オブジェクトの列挙可能な自身の値を配列で取得する。
JavaScriptのオブジェクトの項目名・値・対応を扱います。keysは名前、valuesは値、entriesは名前と値の組を返します。継承した項目と直接持つ項目を区別したい場合はhasOwnなどで確認します。
商品ごとの価格を配列にする。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
キーと値の組の一覧からオブジェクトを作る。
JavaScriptのオブジェクトの項目名・値・対応を扱います。keysは名前、valuesは値、entriesは名前と値の組を返します。継承した項目と直接持つ項目を区別したい場合はhasOwnなどで確認します。
項目名と入力値の組を設定に変える。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
反復可能なものなどから配列を作る。
配列への変換や値の取り出し、処理結果のまとめ方に関わります。at(-1)は末尾の要素を取り出し、flatMapは各要素の結果を一段平らにします。どの形の値が返るかを見て、後の処理に渡します。
取得した要素の一覧を配列に変える。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
指定位置の配列要素を取得するメソッド。
配列への変換や値の取り出し、処理結果のまとめ方に関わります。at(-1)は末尾の要素を取り出し、flatMapは各要素の結果を一段平らにします。どの形の値が返るかを見て、後の処理に渡します。
at(-1)で最後の要素を読む。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
元の配列の要素を削除・追加するメソッド。
JavaScriptの配列を直接変更する操作です。別の変数も同じ配列を参照している場合、そちらから見える内容も変わります。戻り値が配列とは限らないため、変更された元の配列と返された値を分けて確認します。
途中の商品を1件削除する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
配列などをつないだ新しい配列を作る。
元の配列を直接変更せず、新しい配列を得る方法です。ただし要素の中のオブジェクトまで別物になるとは限りません。コピーの後に内部の値を変更する場合は、浅いコピーと深いコピーの違いも確認します。
二つの商品一覧をまとめる。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
配列の要素を文字列としてつなぐメソッド。
文字列の組み立てや分割、置き換えなどに使います。どの文字で区切るか、何回処理するかによって結果が変わります。絵文字などでは見た目の一文字と内部の長さが一致しないことがある点も確認します。
名前の一覧を読点で区切って表示する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
元の配列の要素順を逆にするメソッド。
JavaScriptの配列を直接変更する操作です。別の変数も同じ配列を参照している場合、そちらから見える内容も変わります。戻り値が配列とは限らないため、変更された元の配列と返された値を分けて確認します。
表示順を逆順に変える。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
一致する文字列などをすべて置き換える。
文字列の組み立てや分割、置き換えなどに使います。どの文字で区切るか、何回処理するかによって結果が変わります。絵文字などでは見た目の一文字と内部の長さが一致しないことがある点も確認します。
文章内の特定の表記をそろえる。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
文字列を区切りに従って配列に分ける。
文字列の組み立てや分割、置き換えなどに使います。どの文字で区切るか、何回処理するかによって結果が変わります。絵文字などでは見た目の一文字と内部の長さが一致しないことがある点も確認します。
カンマ区切りの入力を分割する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
文字列の先頭に文字を補って指定長にする。
文字列の組み立てや分割、置き換えなどに使います。どの文字で区切るか、何回処理するかによって結果が変わります。絵文字などでは見た目の一文字と内部の長さが一致しないことがある点も確認します。
月の数字を01のように表示する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
数値を指定した小数点以下の桁数の文字列にする。
数の確認・丸め・計算を行います。四捨五入、切り上げ、切り下げ、0へ向かう切り捨ては負の数で結果が違います。toFixedの結果は文字列なので、その後に数の計算をする場合は扱いを区別します。
金額を小数点以下2桁で表示する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
値が有限のNumberか確認する。
数の確認・丸め・計算を行います。四捨五入、切り上げ、切り下げ、0へ向かう切り捨ては負の数で結果が違います。toFixedの結果は文字列なので、その後に数の計算をする場合は扱いを区別します。
計算結果が無限大でないか調べる。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
値がNumberのNaNか確認する。
NaNはJavaScriptで数として有効な結果を得られなかったことを示す特別な数値です。Number.isNaNでその値を判定できます。NaN === NaN はfalseなので、普通の等号比較だけで判定しないようにします。
数値変換の失敗結果を調べる。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
最も近い整数に丸める関数。
数の確認・丸め・計算を行います。四捨五入、切り上げ、切り下げ、0へ向かう切り捨ては負の数で結果が違います。toFixedの結果は文字列なので、その後に数の計算をする場合は扱いを区別します。
平均点を整数で表示する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
指定値以下の最大の整数を返す関数。
数の確認・丸め・計算を行います。四捨五入、切り上げ、切り下げ、0へ向かう切り捨ては負の数で結果が違います。toFixedの結果は文字列なので、その後に数の計算をする場合は扱いを区別します。
小数のページ番号を切り下げる。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
指定値以上の最小の整数を返す関数。
数の確認・丸め・計算を行います。四捨五入、切り上げ、切り下げ、0へ向かう切り捨ては負の数で結果が違います。toFixedの結果は文字列なので、その後に数の計算をする場合は扱いを区別します。
必要なページ数を切り上げる。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
リストの末尾に一つの要素を追加するメソッド。
Pythonの一覧や辞書を操作する方法です。元のデータを変更する処理と、新しい結果を返す処理は別です。appendは一つの値を追加し、extendは中身を順に追加します。取り出す範囲や欠けた項目の扱いも確認します。
読み込んだ名前を一覧に追加する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
反復可能なものの各要素をリスト末尾に追加する。
Pythonの一覧や辞書を操作する方法です。元のデータを変更する処理と、新しい結果を返す処理は別です。appendは一つの値を追加し、extendは中身を順に追加します。取り出す範囲や欠けた項目の扱いも確認します。
別のリストの内容をまとめて追加する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
指定位置の要素を取り除いて返すメソッド。
Pythonの一覧や辞書を操作する方法です。元のデータを変更する処理と、新しい結果を返す処理は別です。appendは一つの値を追加し、extendは中身を順に追加します。取り出す範囲や欠けた項目の扱いも確認します。
末尾の作業を取り出す。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
辞書から値を取得し、未登録なら既定値を返す。
Pythonの一覧や辞書を操作する方法です。元のデータを変更する処理と、新しい結果を返す処理は別です。appendは一つの値を追加し、extendは中身を順に追加します。取り出す範囲や欠けた項目の扱いも確認します。
未設定の名前を「ゲスト」として扱う。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
辞書のキーと値の組を扱うビューを取得する。
Pythonの一覧や辞書を操作する方法です。元のデータを変更する処理と、新しい結果を返す処理は別です。appendは一つの値を追加し、extendは中身を順に追加します。取り出す範囲や欠けた項目の扱いも確認します。
商品名と価格を順に表示する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
集合に要素を追加するメソッド。
重複する値を一つにまとめたり、含まれるかを調べたりするのに使います。Setや集合は位置で値を取り出す配列とは扱いが違います。JavaScriptでは同じ内容の別オブジェクトは別の値として扱われます。
訪問済みの番号を記録する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
ファイルを指定したモードで開く関数。
Pythonでファイルを開いて読み書きするときに使います。withを使うとブロック終了時にファイルを閉じられます。書き込みモードのwは既存内容を消すので、元ファイルを残す必要がある場合は保存先とモードを確認します。
UTF-8の文章ファイルを読む。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
開いたファイルなどから内容を読み取る。
Pythonでファイルを開いて読み書きするときに使います。withを使うとブロック終了時にファイルを閉じられます。書き込みモードのwは既存内容を消すので、元ファイルを残す必要がある場合は保存先とモードを確認します。
文章ファイルを文字列として取得する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
開いたファイルなどへ内容を書き込む。
Pythonでファイルを開いて読み書きするときに使います。withを使うとブロック終了時にファイルを閉じられます。書き込みモードのwは既存内容を消すので、元ファイルを残す必要がある場合は保存先とモードを確認します。
結果を文章ファイルに保存する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
JSONの読み込みや書き出しを行う標準モジュール。
Pythonに付属する機能をimportして使います。ファイル・日時・集計などを自分で一から作らずに扱えます。特にファイル変更や外部コマンド実行では、対象のパス・引数・権限を確認してから実行します。
設定ファイルを辞書として読み込む。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
CSV形式の読み書きを行う標準モジュール。
Pythonに付属する機能をimportして使います。ファイル・日時・集計などを自分で一から作らずに扱えます。特にファイル変更や外部コマンド実行では、対象のパス・引数・権限を確認してから実行します。
表の各行を順に読み込む。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
日付や時刻を扱う標準モジュール。
Pythonに付属する機能をimportして使います。ファイル・日時・集計などを自分で一から作らずに扱えます。特にファイル変更や外部コマンド実行では、対象のパス・引数・権限を確認してから実行します。
今日の日付を記録する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
二つの日付や時刻の間の期間を表す型。
Pythonに付属する機能をimportして使います。ファイル・日時・集計などを自分で一から作らずに扱えます。特にファイル変更や外部コマンド実行では、対象のパス・引数・権限を確認してから実行します。
締切日から7日前を計算する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
要素が何回現れるか数えるクラス。
Pythonに付属する機能をimportして使います。ファイル・日時・集計などを自分で一から作らずに扱えます。特にファイル変更や外部コマンド実行では、対象のパス・引数・権限を確認してから実行します。
文章中の単語の回数を数える。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
未登録のキーに初期値を用意する辞書。
Pythonに付属する機能をimportして使います。ファイル・日時・集計などを自分で一から作らずに扱えます。特にファイル変更や外部コマンド実行では、対象のパス・引数・権限を確認してから実行します。
分類ごとの空リストを自動で作る。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
データ保持用クラスの定型処理を生成する仕組み。
Pythonの関数やクラスの定義を整理する仕組みです。デコレーターは対象の機能を包んで動作を変えるなどの用途があります。型ヒントは通常の実行で型を自動強制するものではないので、入力データの検査とは分けます。
名前と価格を持つ商品クラスを作る。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
引数や戻り値などの想定する型を記す情報。
Pythonの関数やクラスの定義を整理する仕組みです。デコレーターは対象の機能を包んで動作を変えるなどの用途があります。型ヒントは通常の実行で型を自動強制するものではないので、入力データの検査とは分けます。
関数が整数を返すことを示す。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
条件が成り立つかを検査する文。
想定した条件が成立するかを検査し、違えば問題として知らせます。開発中の確認に便利ですが、Pythonのassertは設定で省略される場合があります。利用者の入力検査やアクセス権限の確認の唯一の手段には使いません。
開発中に計算結果を確かめる。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
Python標準のテスト用モジュール。
Pythonでは、受け取る値の種類と戻り値を確認して使います。値を返す処理と、元のデータを変更する処理は同じではありません。空のデータや形式が違う入力でも確認し、必要な場合は例外を扱う処理を加えます。
関数の出力が期待どおりか検査する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
モジュールの名前を表す特別な変数。
Pythonの標準的な操作や構文です。受け取れる値の種類と、結果として返る値を確認して使います。変換できない入力や空の対象ではエラーになる処理もあるため、短い例だけでなく実際に渡すデータで確認します。
直接実行か読み込みかで処理を分ける。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
左側の行を残しながら別の表と結合する。
複数の表を関係付けて結果を作ります。INNER JOINは一致する組、外部結合は一致相手がない行も残し、CROSS JOINは組み合わせを作ります。一対多の関係で同じ行が複数回現れる場合があるため、件数や合計を確認します。
注文がない会員も会員一覧に残す。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
結合条件に合う行同士を組み合わせる。
複数の表を関係付けて結果を作ります。INNER JOINは一致する組、外部結合は一致相手がない行も残し、CROSS JOINは組み合わせを作ります。一対多の関係で同じ行が複数回現れる場合があるため、件数や合計を確認します。
注文と一致する商品情報を取得する。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
右側の行を残しながら別の表と結合する。
複数の表を関係付けて結果を作ります。INNER JOINは一致する組、外部結合は一致相手がない行も残し、CROSS JOINは組み合わせを作ります。一対多の関係で同じ行が複数回現れる場合があるため、件数や合計を確認します。
右の表を基準に対応情報を取得する。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
二つの表の行のすべての組み合わせを作る。
複数の表を関係付けて結果を作ります。INNER JOINは一致する組、外部結合は一致相手がない行も残し、CROSS JOINは組み合わせを作ります。一対多の関係で同じ行が複数回現れる場合があるため、件数や合計を確認します。
色とサイズの全組み合わせを作る。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
複数の検索結果を重複行を除いてまとめる。
SQLの結果をまとめたり、条件や実行方法を調整したりするために使います。重複を残すか、NULLをどう扱うかなどで件数が変わります。データベースによって対応する構文や動作が違うため、実際の製品で結果と負荷を確認します。
二つの会員一覧を統合する。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
複数の検索結果を重複を残してまとめる。
SQLの結果をまとめたり、条件や実行方法を調整したりするために使います。重複を残すか、NULLをどう扱うかなどで件数が変わります。データベースによって対応する構文や動作が違うため、実際の製品で結果と負荷を確認します。
売上の全明細をまとめる。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
副問い合わせの結果に行があるか確認する。
SQLの結果をまとめたり、条件や実行方法を調整したりするために使います。重複を残すか、NULLをどう扱うかなどで件数が変わります。データベースによって対応する構文や動作が違うため、実際の製品で結果と負荷を確認します。
注文したことがある会員を探す。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
値が両端を含む範囲内か調べる。
SQLの結果をまとめたり、条件や実行方法を調整したりするために使います。重複を残すか、NULLをどう扱うかなどで件数が変わります。データベースによって対応する構文や動作が違うため、実際の製品で結果と負荷を確認します。
価格が100以上500以下の商品を探す。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
値が指定した候補のいずれかと一致するか調べる。
SQLの結果をまとめたり、条件や実行方法を調整したりするために使います。重複を残すか、NULLをどう扱うかなどで件数が変わります。データベースによって対応する構文や動作が違うため、実際の製品で結果と負荷を確認します。
複数の分類の商品をまとめて探す。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
条件に応じて結果の値を切り替える式。
SQLの結果をまとめたり、条件や実行方法を調整したりするために使います。重複を残すか、NULLをどう扱うかなどで件数が変わります。データベースによって対応する構文や動作が違うため、実際の製品で結果と負荷を確認します。
点数に応じて評価名を表示する。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
候補のうち最初のNULLでない値を返す。
SQLのNULLは値が不明・存在しない状態を表し、0や空文字とは異なります。NULLとの比較には通常IS NULLやIS NOT NULLを使います。COALESCEで代替値を選べますが、欠損と本来の0を混ぜてよいかは別に判断します。
未設定の表示名を別の名前で補う。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
SQL文の中に組み込む別の問い合わせ。
SQLの結果をまとめたり、条件や実行方法を調整したりするために使います。重複を残すか、NULLをどう扱うかなどで件数が変わります。データベースによって対応する構文や動作が違うため、実際の製品で結果と負荷を確認します。
平均価格より高い商品を取得する。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
WITHで名前を付けて使う問い合わせ結果。
SQLの結果をまとめたり、条件や実行方法を調整したりするために使います。重複を残すか、NULLをどう扱うかなどで件数が変わります。データベースによって対応する構文や動作が違うため、実際の製品で結果と負荷を確認します。
集計の途中結果に名前を付ける。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
行を残したまま関連する行の集計などを行う関数。
行の数・合計・平均や、グループ内の順位などを求めます。集計関数でまとめることと、各行を残したままウィンドウ関数で結果を付けることは別です。COUNT(*)とCOUNT(列)ではNULLを数える扱いが異なります。
各明細に分類ごとの合計を添える。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
指定順序で行に連番を付ける関数。
行の数・合計・平均や、グループ内の順位などを求めます。集計関数でまとめることと、各行を残したままウィンドウ関数で結果を付けることは別です。COUNT(*)とCOUNT(列)ではNULLを数える扱いが異なります。
日付順に番号を付ける。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
同点を同順位とし次の順位を飛ばす関数。
行の数・合計・平均や、グループ内の順位などを求めます。集計関数でまとめることと、各行を残したままウィンドウ関数で結果を付けることは別です。COUNT(*)とCOUNT(列)ではNULLを数える扱いが異なります。
売上順位を1、1、3と表示する。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
問い合わせに名前を付け表のように使う仕組み。
SQLの結果をまとめたり、条件や実行方法を調整したりするために使います。重複を残すか、NULLをどう扱うかなどで件数が変わります。データベースによって対応する構文や動作が違うため、実際の製品で結果と負荷を確認します。
必要な列だけを見せる一覧を用意する。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
行の値が指定条件を満たすようにする制約。
表の構造や、保存してよい値の条件を決めます。画面側の検査だけでなくデータベースにも条件を持たせると、不整合を防ぎやすくなります。既存データに新しい条件を追加する場合、すでに保存された値への影響を確認します。
価格が負にならないようにする。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
表同士の参照関係が矛盾しない性質。
表の構造や、保存してよい値の条件を決めます。画面側の検査だけでなくデータベースにも条件を持たせると、不整合を防ぎやすくなります。既存データに新しい条件を追加する場合、すでに保存された値への影響を確認します。
存在しない会員への注文を防ぐ。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
問い合わせをどの方法で処理するか示す情報。
SQLの結果をまとめたり、条件や実行方法を調整したりするために使います。重複を残すか、NULLをどう扱うかなどで件数が変わります。データベースによって対応する構文や動作が違うため、実際の製品で結果と負荷を確認します。
索引が使われるか確認する。
対象の行数、重複、NULLを確認し、変更するSQLでは実行前に対象を確かめましょう。
指定先の状態を置き換えるためのHTTPメソッド。
HTTPメソッドは、同じURLへの依頼でも目的を区別します。GETは取得、POSTはデータ送信など、PUTは置換、PATCHは部分的な変更、HEADは本文なしの取得、OPTIONSは通信方法の確認に使います。許可するメソッドはサーバー側でも検査します。
資源の全体を送って更新する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
資源の一部分を変更するためのHTTPメソッド。
HTTPメソッドは、同じURLへの依頼でも目的を区別します。GETは取得、POSTはデータ送信など、PUTは置換、PATCHは部分的な変更、HEADは本文なしの取得、OPTIONSは通信方法の確認に使います。許可するメソッドはサーバー側でも検査します。
プロフィールの表示名だけを更新する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
本文を受け取らずヘッダーを確認するメソッド。
HTTPメソッドは、同じURLへの依頼でも目的を区別します。GETは取得、POSTはデータ送信など、PUTは置換、PATCHは部分的な変更、HEADは本文なしの取得、OPTIONSは通信方法の確認に使います。許可するメソッドはサーバー側でも検査します。
ファイルの更新情報を確認する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
通信先が対応する操作などを確認するメソッド。
HTTPメソッドは、同じURLへの依頼でも目的を区別します。GETは取得、POSTはデータ送信など、PUTは置換、PATCHは部分的な変更、HEADは本文なしの取得、OPTIONSは通信方法の確認に使います。許可するメソッドはサーバー側でも検査します。
CORSの事前確認に使われる。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
リクエストが成功したことを示す状態コード。
通信の結果を番号で示します。2xxは成功、3xxは移動や再利用に関わる応答、4xxは依頼や権限などの問題、5xxは処理側の問題です。番号だけで原因を確定せず、URL・送信内容・返された説明やログを合わせて確認します。
ページの取得が成功する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
新しい資源が作成されたことを示す状態コード。
通信の結果を番号で示します。2xxは成功、3xxは移動や再利用に関わる応答、4xxは依頼や権限などの問題、5xxは処理側の問題です。番号だけで原因を確定せず、URL・送信内容・返された説明やログを合わせて確認します。
新規登録のAPIが作成結果を返す。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
処理成功と本文なしを示す状態コード。
通信の結果を番号で示します。2xxは成功、3xxは移動や再利用に関わる応答、4xxは依頼や権限などの問題、5xxは処理側の問題です。番号だけで原因を確定せず、URL・送信内容・返された説明やログを合わせて確認します。
削除完了を本文なしで返す。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
条件付き取得で変更がないことを示す状態コード。
通信の結果を番号で示します。2xxは成功、3xxは移動や再利用に関わる応答、4xxは依頼や権限などの問題、5xxは処理側の問題です。番号だけで原因を確定せず、URL・送信内容・返された説明やログを合わせて確認します。
保存済みの内容を再利用する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
要求の形式などに問題がある状態コード。
通信の結果を番号で示します。2xxは成功、3xxは移動や再利用に関わる応答、4xxは依頼や権限などの問題、5xxは処理側の問題です。番号だけで原因を確定せず、URL・送信内容・返された説明やログを合わせて確認します。
不正なリクエスト形式を受け付けない。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
必要な認証情報が有効でない状態コード。
通信の結果を番号で示します。2xxは成功、3xxは移動や再利用に関わる応答、4xxは依頼や権限などの問題、5xxは処理側の問題です。番号だけで原因を確定せず、URL・送信内容・返された説明やログを合わせて確認します。
ログインが必要なAPIで認証を求める。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
中継先から不正な応答を受け取った状態コード。
通信の結果を番号で示します。2xxは成功、3xxは移動や再利用に関わる応答、4xxは依頼や権限などの問題、5xxは処理側の問題です。番号だけで原因を確定せず、URL・送信内容・返された説明やログを合わせて確認します。
代理サーバーが上流の応答に失敗する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
中継先の応答を待つ時間を超えた状態コード。
通信の結果を番号で示します。2xxは成功、3xxは移動や再利用に関わる応答、4xxは依頼や権限などの問題、5xxは処理側の問題です。番号だけで原因を確定せず、URL・送信内容・返された説明やログを合わせて確認します。
上流の処理が遅く待機期限を超える。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
キャッシュの保存や再利用の方針を指定するヘッダー。
HTTPヘッダーでデータ形式・保存方針・認証などの情報を伝えます。本文の内容と設定が合っていないと正しく扱われないことがあります。User-Agentは送信者が指定でき、認証情報を含むヘッダーは公開ログなどへ残さないようにします。
再利用前の確認を求める。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
資源の版を識別するHTTPの値。
HTTPヘッダーでデータ形式・保存方針・認証などの情報を伝えます。本文の内容と設定が合っていないと正しく扱われないことがあります。User-Agentは送信者が指定でき、認証情報を含むヘッダーは公開ログなどへ残さないようにします。
前回の版から変わったか確認する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
送る本文に適用した圧縮などを示すヘッダー。
HTTPヘッダーでデータ形式・保存方針・認証などの情報を伝えます。本文の内容と設定が合っていないと正しく扱われないことがあります。User-Agentは送信者が指定でき、認証情報を含むヘッダーは公開ログなどへ残さないようにします。
gzipで圧縮したことを伝える。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
受け取りたいデータ形式を伝えるヘッダー。
HTTPヘッダーでデータ形式・保存方針・認証などの情報を伝えます。本文の内容と設定が合っていないと正しく扱われないことがあります。User-Agentは送信者が指定でき、認証情報を含むヘッダーは公開ログなどへ残さないようにします。
JSONの応答を希望すると伝える。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
認証用の情報を送るHTTPヘッダー。
HTTPヘッダーでデータ形式・保存方針・認証などの情報を伝えます。本文の内容と設定が合っていないと正しく扱われないことがあります。User-Agentは送信者が指定でき、認証情報を含むヘッダーは公開ログなどへ残さないようにします。
APIにアクセストークンを添える。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
CORSで本通信の前に許可を確認する通信。
オリジンは通信方式・ホスト名・ポートの組み合わせです。ブラウザが別オリジンの応答を読むとき、CORSの許可が必要になる場合があります。許可はサーバーの応答で示し、CORSだけでAPIへの全アクセスを防げるわけではありません。
OPTIONSで送信方法を確認する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
URLの疑問符以降に付ける検索条件などの情報。
URLに条件を入れたり、要素へ分解したりするために使います。空白や&などをそのまま連結すると意味が変わるため、対応する機能で組み立てます。#以降のフラグメントは通常サーバーへのHTTPリクエストには含まれません。
検索語をURLに付ける。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
URLの#以降でページ内の位置などを示す部分。
URLに条件を入れたり、要素へ分解したりするために使います。空白や&などをそのまま連結すると意味が変わるため、対応する機能で組み立てます。#以降のフラグメントは通常サーバーへのHTTPリクエストには含まれません。
見出しの位置へ移動する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
公開して使う非対称暗号の鍵。
データの保護や確認に関係します。暗号化は鍵で元の内容に戻す仕組み、ハッシュは通常元へ戻すためのものではありません。署名は改ざんなどの確認に使い、秘密鍵は公開してはいけません。用途に合う方式を選ぶ必要があります。
署名の確認に使う。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
所有者が秘密に保つ非対称暗号の鍵。
データの保護や確認に関係します。暗号化は鍵で元の内容に戻す仕組み、ハッシュは通常元へ戻すためのものではありません。署名は改ざんなどの確認に使い、秘密鍵は公開してはいけません。用途に合う方式を選ぶ必要があります。
署名を作る鍵を外部に出さない。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
作成元や改ざんの有無を検証するための情報。
データの保護や確認に関係します。暗号化は鍵で元の内容に戻す仕組み、ハッシュは通常元へ戻すためのものではありません。署名は改ざんなどの確認に使い、秘密鍵は公開してはいけません。用途に合う方式を選ぶ必要があります。
配布ファイルの署名を確認する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
パスワードのハッシュ計算などに加える値。
データの保護や確認に関係します。暗号化は鍵で元の内容に戻す仕組み、ハッシュは通常元へ戻すためのものではありません。署名は改ざんなどの確認に使い、秘密鍵は公開してはいけません。用途に合う方式を選ぶ必要があります。
同じパスワードでも同じ保存値になりにくくする。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
多くの候補を順に試して秘密を探る攻撃。
攻撃に利用される弱点や方法に関係します。入力の検査、アクセス権限の確認、更新、通信回数の制限などを目的に応じて行います。ログに不審な依頼があることと、その依頼が成功したことは区別して調べます。
パスワード候補を大量に試す。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
よく使われる文字列の候補を試す攻撃。
攻撃に利用される弱点や方法に関係します。入力の検査、アクセス権限の確認、更新、通信回数の制限などを目的に応じて行います。ログに不審な依頼があることと、その依頼が成功したことは区別して調べます。
ありふれたパスワードが狙われる。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
多数の端末などから通信を集中させる妨害攻撃。
Webの防御を助ける設定や考え方です。一つを有効にすればすべての攻撃を防げるわけではありません。通信、Cookie、実行できる内容、許可する操作など、各機能が守る範囲を区別して組み合わせます。
サイトへの要求を大量に送る。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
Webへの通信を検査して攻撃を抑える仕組み。
Webの防御を助ける設定や考え方です。一つを有効にすればすべての攻撃を防げるわけではありません。通信、Cookie、実行できる内容、許可する操作など、各機能が守る範囲を区別して組み合わせます。
不審な入力を含む要求を遮断する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
スクリプトなどの読み込み元を制限する方針。
Webの防御を助ける設定や考え方です。一つを有効にすればすべての攻撃を防げるわけではありません。通信、Cookie、実行できる内容、許可する操作など、各機能が守る範囲を区別して組み合わせます。
許可した配信元のコードだけを読み込む。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
ブラウザーにHTTPSでの接続を求める仕組み。
Webの防御を助ける設定や考え方です。一つを有効にすればすべての攻撃を防げるわけではありません。通信、Cookie、実行できる内容、許可する操作など、各機能が守る範囲を区別して組み合わせます。
次回以降の接続をHTTPSにする。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
別サイトからの通信でCookieを送る条件の指定。
Webの防御を助ける設定や考え方です。一つを有効にすればすべての攻撃を防げるわけではありません。通信、Cookie、実行できる内容、許可する操作など、各機能が守る範囲を区別して組み合わせます。
認証Cookieの送信範囲を調整する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
CookieをJavaScriptから読み取れなくする指定。
Webの防御を助ける設定や考え方です。一つを有効にすればすべての攻撃を防げるわけではありません。通信、Cookie、実行できる内容、許可する操作など、各機能が守る範囲を区別して組み合わせます。
セッション情報の読み出しを制限する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
Cookieを原則HTTPS接続でのみ送る指定。
Webの防御を助ける設定や考え方です。一つを有効にすればすべての攻撃を防げるわけではありません。通信、Cookie、実行できる内容、許可する操作など、各機能が守る範囲を区別して組み合わせます。
認証Cookieに付ける。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
パスを悪用して許可範囲外のファイルを狙う攻撃。
攻撃に利用される弱点や方法に関係します。入力の検査、アクセス権限の確認、更新、通信回数の制限などを目的に応じて行います。ログに不審な依頼があることと、その依頼が成功したことは区別して調べます。
上位フォルダーへの不正な参照を防ぐ。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
入力された任意の転送先へ誘導できる問題。
攻撃に利用される弱点や方法に関係します。入力の検査、アクセス権限の確認、更新、通信回数の制限などを目的に応じて行います。ログに不審な依頼があることと、その依頼が成功したことは区別して調べます。
転送先を許可したURLに限定する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
APIキーなど公開してはいけない設定情報。
サービスへの接続情報や設定値を、コードと分けて管理するために使います。環境変数は必ずしも秘密ではありませんが、APIキーなど秘密の値は公開HTML・ブラウザのJavaScript・共有する履歴に入れないようにします。
秘密の値を公開コードから分離する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
誰がいつ何をしたか追跡するための記録。
必要な操作だけを許可し、後から何が起きたか確認できるようにします。記録には日時・対象・結果などを含めると役立ちます。一方でパスワードや秘密のキーを記録しないようにし、閲覧できる人と保存期間も決めます。
管理設定の変更者を確認する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
より強い権限を得ること。
攻撃に利用される弱点や方法に関係します。入力の検査、アクセス権限の確認、更新、通信回数の制限などを目的に応じて行います。ログに不審な依頼があることと、その依頼が成功したことは区別して調べます。
一般利用者が管理機能を使えないか点検する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
場所などだけで信用せずアクセスを検証する考え方。
Webの防御を助ける設定や考え方です。一つを有効にすればすべての攻撃を防げるわけではありません。通信、Cookie、実行できる内容、許可する操作など、各機能が守る範囲を区別して組み合わせます。
社内からでも認証や権限を確認する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
公開鍵方式を利用したログイン用の認証情報。
アカウントの本人確認を助ける方法です。二要素認証では異なる種類の要素を組み合わせ、パスキーは対応する端末などを使います。端末を失った場合に備えて復旧方法も確認し、復旧用の情報は他人に渡さないようにします。
端末の本人確認でログインする。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
学習したパターンを使って文章や画像などを生成するAI。
学習で得たパターンを使い、入力に応じた文章などを生成します。回答を作る処理が推論です。自然な文章でも内容が正しいとは限らず、重要な説明やコードは根拠や実際の動作と照らし合わせます。
サイト作成の相談文を作る。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
大量の文章などを学習して言語を扱うモデル。
学習で得たパターンを使い、入力に応じた文章などを生成します。回答を作る処理が推論です。自然な文章でも内容が正しいとは限らず、重要な説明やコードは根拠や実際の動作と照らし合わせます。
質問への回答文を生成する。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
言語モデルが文章を処理するための小さな単位。
AIが入力や出力を処理する単位と、参照できる情報の範囲に関わります。トークン数は文字数や会話の回数と同じではありません。長い会話では古い情報が参照範囲から外れる場合があるため、必要な前提をまとめ直します。
一つの単語が複数の単位に分かれることがある。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
判断に使われる周辺情報や会話の文脈。
AIが入力や出力を処理する単位と、参照できる情報の範囲に関わります。トークン数は文字数や会話の回数と同じではありません。長い会話では古い情報が参照範囲から外れる場合があるため、必要な前提をまとめ直します。
目的とこれまでの作業をAIに伝える。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
モデルが一度に扱える文脈の範囲。
AIが入力や出力を処理する単位と、参照できる情報の範囲に関わります。トークン数は文字数や会話の回数と同じではありません。長い会話では古い情報が参照範囲から外れる場合があるため、必要な前提をまとめ直します。
長い会話では入力の整理が必要になる。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
AIが事実に合わない内容をもっともらしく生成すること。
AIが事実と異なる内容を、もっともらしく生成する現象です。実在しない機能名・資料・URLなども含まれます。言い切り方の強さで正しさを判断せず、公式資料や実物で確認します。
存在しない資料名を回答する。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
学習済みモデルを使って入力から結果を得る処理。
学習で得たパターンを使い、入力に応じた文章などを生成します。回答を作る処理が推論です。自然な文章でも内容が正しいとは限らず、重要な説明やコードは根拠や実際の動作と照らし合わせます。
質問を入力して回答を生成する。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
モデルの学習に用いる情報。
AIの振る舞いや入力、外部機能との連携に関係します。学習でモデルを変えることと、回答時に資料を渡すことは別です。温度の設定だけで事実の正しさは保証されず、使う目的に合う評価例で確認します。
文章や画像を学習に利用する。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
学習済みモデルに追加学習を行い調整すること。
AIの振る舞いや入力、外部機能との連携に関係します。学習でモデルを変えることと、回答時に資料を渡すことは別です。温度の設定だけで事実の正しさは保証されず、使う目的に合う評価例で確認します。
特定の文体や課題に合わせる。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
検索した資料を参照情報として生成に使う方法。
関連する資料を探し、その内容をAIへの入力に添える方法に関わります。文章を数値の並びに変える埋め込みを使うと、言葉が完全一致しなくても近い内容を探せます。ただし検索結果の誤りや古さまで自動的に解消されるわけではありません。
用語集を検索してから説明を作る。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
文章などの特徴を数値の並びで表す方法。
関連する資料を探し、その内容をAIへの入力に添える方法に関わります。文章を数値の並びに変える埋め込みを使うと、言葉が完全一致しなくても近い内容を探せます。ただし検索結果の誤りや古さまで自動的に解消されるわけではありません。
意味の近い文章を検索する。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
数値で表した特徴の近さを使う検索。
関連する資料を探し、その内容をAIへの入力に添える方法に関わります。文章を数値の並びに変える埋め込みを使うと、言葉が完全一致しなくても近い内容を探せます。ただし検索結果の誤りや古さまで自動的に解消されるわけではありません。
言葉が違っても内容の近い資料を探す。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
AIの役割や基本方針などを伝える指示。
AIに与える指示と、外部資料や利用者の入力との境界に関わります。資料に書かれた命令を、そのまま運営側の指示として扱うと意図しない動作につながります。重要な権限確認はAIの判断だけに任せず、プログラム側でも行います。
初心者向けの言葉で答えるよう指定する。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
生成時の選択のばらつきを調整する設定。
AIの振る舞いや入力、外部機能との連携に関係します。学習でモデルを変えることと、回答時に資料を渡すことは別です。温度の設定だけで事実の正しさは保証されず、使う目的に合う評価例で確認します。
説明の揺れを抑えるため設定を調整する。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
結果をまとまる途中から順に送る応答方式。
データを一度に全部そろえる代わりに、小さなかたまりを順に扱います。大きなファイルやAIの逐次応答などに使えます。途中で切れた場合や、受け手の処理が遅い場合も考えて終了・中断を扱います。
AIの回答が少しずつ表示される。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
入力や参照資料でAIの指示を不正に変えようとする攻撃。
AIに与える指示と、外部資料や利用者の入力との境界に関わります。資料に書かれた命令を、そのまま運営側の指示として扱うと意図しない動作につながります。重要な権限確認はAIの判断だけに任せず、プログラム側でも行います。
資料中の命令をそのまま実行しない設計にする。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
AIから外部機能の実行を要求する仕組み。
AIの振る舞いや入力、外部機能との連携に関係します。学習でモデルを変えることと、回答時に資料を渡すことは別です。温度の設定だけで事実の正しさは保証されず、使う目的に合う評価例で確認します。
検索機能で資料を取得する。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
文章や画像など複数の種類の情報を扱うこと。
AIの振る舞いや入力、外部機能との連携に関係します。学習でモデルを変えることと、回答時に資料を渡すことは別です。温度の設定だけで事実の正しさは保証されず、使う目的に合う評価例で確認します。
画面画像と質問を一緒に入力する。
まず小さな例を試し、意味・操作・結果を自分の言葉で結び付けてみましょう。
決めた課題でモデルの結果を検査すること。
AIの振る舞いや入力、外部機能との連携に関係します。学習でモデルを変えることと、回答時に資料を渡すことは別です。温度の設定だけで事実の正しさは保証されず、使う目的に合う評価例で確認します。
用語の説明が正しいか見本問題で確認する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
望ましくない入出力や操作を抑える仕組み。
AIに与える指示と、外部資料や利用者の入力との境界に関わります。資料に書かれた命令を、そのまま運営側の指示として扱うと意図しない動作につながります。重要な権限確認はAIの判断だけに任せず、プログラム側でも行います。
個人情報を回答に含めないよう検査する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
JavaScriptのパッケージを管理するためのツールなどの名称。
外部のコードを導入し、必要な版や実行環境を管理します。開発時だけ必要な道具と、動作時に必要なものを分けます。別の人や環境でも同じ構成を再現できるよう、依存情報と版を記録します。
必要なライブラリを導入する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
JavaScriptプロジェクトの設定などを記すファイル。
外部のコードを導入し、必要な版や実行環境を管理します。開発時だけ必要な道具と、動作時に必要なものを分けます。別の人や環境でも同じ構成を再現できるよう、依存情報と版を記録します。
依存するパッケージや実行コマンドを記す。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
依存パッケージの解決結果などを記録するファイル。
外部のコードを導入し、必要な版や実行環境を管理します。開発時だけ必要な道具と、動作時に必要なものを分けます。別の人や環境でも同じ構成を再現できるよう、依存情報と版を記録します。
同じ版の依存関係を再現しやすくする。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
動作のために別の部品などを必要とする関係。
外部のコードを導入し、必要な版や実行環境を管理します。開発時だけ必要な道具と、動作時に必要なものを分けます。別の人や環境でも同じ構成を再現できるよう、依存情報と版を記録します。
アプリが外部ライブラリを利用する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
開発や検査などに使う依存パッケージ。
外部のコードを導入し、必要な版や実行環境を管理します。開発時だけ必要な道具と、動作時に必要なものを分けます。別の人や環境でも同じ構成を再現できるよう、依存情報と版を記録します。
コード検査ツールを開発用として導入する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
ソースから配布や実行に使う成果物を作る作業。
開発時の確認や、配信用のファイル作成に関わります。自動確認は決めた条件の範囲を調べるもので、全部の不具合を保証するものではありません。開発用のコードと、実際に配信する成果物の対応も確認します。
複数のソースを公開用ファイルにまとめる。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
関連するコードなどをまとめるツール。
開発時の確認や、配信用のファイル作成に関わります。自動確認は決めた条件の範囲を調べるもので、全部の不具合を保証するものではありません。開発用のコードと、実際に配信する成果物の対応も確認します。
複数のモジュールを配信用にまとめる。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
不要な空白などを減らしコードを小さくすること。
開発時の確認や、配信用のファイル作成に関わります。自動確認は決めた条件の範囲を調べるもので、全部の不具合を保証するものではありません。開発用のコードと、実際に配信する成果物の対応も確認します。
公開用JavaScriptの容量を減らす。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
変換後のコードと元のコードを対応付ける情報。
開発時の確認や、配信用のファイル作成に関わります。自動確認は決めた条件の範囲を調べるもので、全部の不具合を保証するものではありません。開発用のコードと、実際に配信する成果物の対応も確認します。
圧縮後のエラーを元の行で調べる。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
コードの問題や規則違反を検査するツール。
開発時の確認や、配信用のファイル作成に関わります。自動確認は決めた条件の範囲を調べるもので、全部の不具合を保証するものではありません。開発用のコードと、実際に配信する成果物の対応も確認します。
未使用の変数を見つける。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
コードの見た目を規則に沿って整えるツール。
開発時の確認や、配信用のファイル作成に関わります。自動確認は決めた条件の範囲を調べるもので、全部の不具合を保証するものではありません。開発用のコードと、実際に配信する成果物の対応も確認します。
インデントや改行をそろえる。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
Gitで追跡しないファイルの条件を記すファイル。
Gitの作業状態や履歴を操作するために使います。手元の変更・記録済みの変更・共有先の変更は別です。操作前にstatusやdiffで状態を確認し、.gitignoreで除外しても既に履歴へ入った秘密が消えるわけではない点に注意します。
生成ファイルを追跡対象から外す。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
作業中の変更や追跡状態を確認するコマンド。
Gitの作業状態や履歴を操作するために使います。手元の変更・記録済みの変更・共有先の変更は別です。操作前にstatusやdiffで状態を確認し、.gitignoreで除外しても既に履歴へ入った秘密が消えるわけではない点に注意します。
変更したファイルの一覧を見る。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
ファイルなどの差分を確認するコマンド。
Gitの作業状態や履歴を操作するために使います。手元の変更・記録済みの変更・共有先の変更は別です。操作前にstatusやdiffで状態を確認し、.gitignoreで除外しても既に履歴へ入った秘密が消えるわけではない点に注意します。
修正した行をコミット前に確認する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
作業中の変更を一時的に退避するコマンド。
Gitの作業状態や履歴を操作するために使います。手元の変更・記録済みの変更・共有先の変更は別です。操作前にstatusやdiffで状態を確認し、.gitignoreで除外しても既に履歴へ入った秘密が消えるわけではない点に注意します。
別の作業に切り替える前に変更を預ける。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
指定コミットの変更を現在のブランチに適用する。
Gitの作業状態や履歴を操作するために使います。手元の変更・記録済みの変更・共有先の変更は別です。操作前にstatusやdiffで状態を確認し、.gitignoreで除外しても既に履歴へ入った秘密が消えるわけではない点に注意します。
必要な修正だけを取り込む。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
指定コミットの変更を打ち消す新しいコミットを作る。
Gitの作業状態や履歴を操作するために使います。手元の変更・記録済みの変更・共有先の変更は別です。操作前にstatusやdiffで状態を確認し、.gitignoreで除外しても既に履歴へ入った秘密が消えるわけではない点に注意します。
履歴を残して修正を取り消す。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
特定の版などに目印の名前を付けること。
Gitの作業状態や履歴を操作するために使います。手元の変更・記録済みの変更・共有先の変更は別です。操作前にstatusやdiffで状態を確認し、.gitignoreで除外しても既に履歴へ入った秘密が消えるわけではない点に注意します。
公開した版にv3.29の目印を付ける。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
互換性の変化に応じて版番号を付ける規則。
Gitの作業状態や履歴を操作するために使います。手元の変更・記録済みの変更・共有先の変更は別です。操作前にstatusやdiffで状態を確認し、.gitignoreで除外しても既に履歴へ入った秘密が消えるわけではない点に注意します。
大きな変更・機能追加・修正を番号で区別する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
作業やビルドで作られた配布・確認用の結果。
変更を公開するときの記録と環境の管理に関わります。確認用の環境で動いても、本番の設定やデータでは結果が異なる場合があります。公開した版と変更内容、問題が出た場合に戻す版を結び付けて残します。
公開用ZIPを保存する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
文章の一部を強調する要素。
emは語の強調、strongは重要性、spanやdivは汎用のまとまりを表します。太字や斜体にするだけならCSSで調整できます。意味のある要素を使える箇所で、すべてを汎用要素に置き換えないようにします。
注意する言葉をemで囲む。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
重要な内容を示す要素。
emは語の強調、strongは重要性、spanやdivは汎用のまとまりを表します。太字や斜体にするだけならCSSで調整できます。意味のある要素を使える箇所で、すべてを汎用要素に置き換えないようにします。
締切をstrongで囲む。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
文章の一部分をまとめる要素。
emは語の強調、strongは重要性、spanやdivは汎用のまとまりを表します。太字や斜体にするだけならCSSで調整できます。意味のある要素を使える箇所で、すべてを汎用要素に置き換えないようにします。
一語だけ色を変える。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
特別な意味を持たない汎用のまとまり。
emは語の強調、strongは重要性、spanやdivは汎用のまとまりを表します。太字や斜体にするだけならCSSで調整できます。意味のある要素を使える箇所で、すべてを汎用要素に置き換えないようにします。
複数のボタンをまとめる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
文章の中で改行する要素。
brは意味のある改行、hrは話題の区切りを示します。段落間の余白を増やすためにbrを連続させるより、段落とCSSの余白を使います。見た目の線と文章の意味の区切りも分けて考えます。
住所の行を分ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
内容の区切りを示す要素。
brは意味のある改行、hrは話題の区切りを示します。段落間の余白を増やすためにbrを連続させるより、段落とCSSの余白を使います。見た目の線と文章の意味の区切りも分けて考えます。
話題の変わり目に入れる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
順序のある一覧を示す要素。
olは順番に意味のある一覧、ulは順番に意味のない一覧、liはその一項目です。手順ならol、特徴の列挙ならulなどと使い分けます。番号の見た目を消しても、内容として順序が必要かを考えて選びます。
操作手順を番号付きにする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
順序を持たない一覧を示す要素。
olは順番に意味のある一覧、ulは順番に意味のない一覧、liはその一項目です。手順ならol、特徴の列挙ならulなどと使い分けます。番号の見た目を消しても、内容として順序が必要かを考えて選びます。
持ち物を箇条書きにする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
一覧の各項目を示す要素。
olは順番に意味のある一覧、ulは順番に意味のない一覧、liはその一項目です。手順ならol、特徴の列挙ならulなどと使い分けます。番号の見た目を消しても、内容として順序が必要かを考えて選びます。
持ち物一つをliで囲む。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
名前と説明の組を並べる要素。
名前と説明の組をまとめます。dtが用語などの名前、ddが対応する説明です。見た目を二列にするためだけでなく、内容同士の関係を示す目的で使います。複数の説明が一つの名前に対応する場合もあります。
用語と意味を対にする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
説明一覧で名前を示す要素。
名前と説明の組をまとめます。dtが用語などの名前、ddが対応する説明です。見た目を二列にするためだけでなく、内容同士の関係を示す目的で使います。複数の説明が一つの名前に対応する場合もあります。
HTMLという用語名を書く。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
説明一覧で説明を示す要素。
名前と説明の組をまとめます。dtが用語などの名前、ddが対応する説明です。見た目を二列にするためだけでなく、内容同士の関係を示す目的で使います。複数の説明が一つの名前に対応する場合もあります。
HTMLの意味を書く。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
表の題名を示す要素。
図や表に説明を関連付ける際に使います。figureの説明はfigcaption、表の説明はcaptionを使うため、似た名前でも用途が違います。画像の代替テキストと説明文も役割を分けて用意します。
表に月別売上という題を付ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
表の見出し行をまとめる要素。
表の見出し・本文・まとめや、行とセルを表します。thは見出し、tdは通常のデータで、scopeなどを使うと対応を伝えやすくなります。ページ全体の配置用ではなく、行と列で関係のあるデータに使います。
氏名や日付の行を囲む。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
表の本体の行をまとめる要素。
表の見出し・本文・まとめや、行とセルを表します。thは見出し、tdは通常のデータで、scopeなどを使うと対応を伝えやすくなります。ページ全体の配置用ではなく、行と列で関係のあるデータに使います。
売上データの行を囲む。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
表の集計などの行をまとめる要素。
表の見出し・本文・まとめや、行とセルを表します。thは見出し、tdは通常のデータで、scopeなどを使うと対応を伝えやすくなります。ページ全体の配置用ではなく、行と列で関係のあるデータに使います。
合計行を囲む。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
表の一行を示す要素。
表の見出し・本文・まとめや、行とセルを表します。thは見出し、tdは通常のデータで、scopeなどを使うと対応を伝えやすくなります。ページ全体の配置用ではなく、行と列で関係のあるデータに使います。
一人分の情報を一行にする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
表の見出しセルを示す要素。
表の見出し・本文・まとめや、行とセルを表します。thは見出し、tdは通常のデータで、scopeなどを使うと対応を伝えやすくなります。ページ全体の配置用ではなく、行と列で関係のあるデータに使います。
列の見出しに氏名と書く。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
表のデータセルを示す要素。
表の見出し・本文・まとめや、行とセルを表します。thは見出し、tdは通常のデータで、scopeなどを使うと対応を伝えやすくなります。ページ全体の配置用ではなく、行と列で関係のあるデータに使います。
金額を一つのセルに入れる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
表のセルが何列にまたがるかを指定する。
表のセルを複数の列・行にまたがらせます。見た目の結合が増えると見出しとの対応が分かりにくくなるため、できるだけ単純な表にします。行ごとの列数が合っているか、狭い画面でも内容を読めるか確認します。
二列分の合計欄を作る。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
表のセルが何行にまたがるかを指定する。
表のセルを複数の列・行にまたがらせます。見た目の結合が増えると見出しとの対応が分かりにくくなるため、できるだけ単純な表にします。行ごとの列数が合っているか、狭い画面でも内容を読めるか確認します。
三行共通の分類欄を作る。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
複数行の文字を入力できる要素。
利用者が入力・選択・実行する画面の部品です。見た目だけでなく適切なHTML要素を使うと、キーボード操作などを助けられます。フォーム内のbuttonは送信になる場合があるため、用途に応じてtypeを指定します。
問い合わせ本文の欄を作る。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
選択欄の候補を示す要素。
選択肢や入力候補を作ります。optionは個々の候補、optgroupはselect内の候補のまとまり、datalistは入力の候補一覧です。datalistの候補があることだけで、それ以外の入力が禁止されるわけではありません。
都道府県の候補を並べる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
選択欄の候補を分類する要素。
選択肢や入力候補を作ります。optionは個々の候補、optgroupはselect内の候補のまとまり、datalistは入力の候補一覧です。datalistの候補があることだけで、それ以外の入力が禁止されるわけではありません。
地域ごとに県をまとめる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
fieldsetの入力項目群に題を付ける要素。
関連するフォーム項目をまとめ、そのまとまりに名前を付けます。たとえば複数の選択肢をfieldsetで囲み、legendで「希望する連絡方法」と示します。個々の入力欄のlabelも必要なので、グループ名だけで代用しません。
連絡先という題を付ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
処理の進み具合を示す要素。
progressは作業の進み具合、meterは範囲内の測定値、outputは計算や操作の結果に使います。同じ棒状の見た目でも、進捗と測定値は別です。値と最大・最小などの条件をそろえ、文章でも状況を伝えます。
アップロードの進捗を表示する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
一定範囲内の測定値を示す要素。
progressは作業の進み具合、meterは範囲内の測定値、outputは計算や操作の結果に使います。同じ棒状の見た目でも、進捗と測定値は別です。値と最大・最小などの条件をそろえ、文章でも状況を伝えます。
保存容量の使用率を表示する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
入力欄に候補を提供する要素。
選択肢や入力候補を作ります。optionは個々の候補、optgroupはselect内の候補のまとまり、datalistは入力の候補一覧です。datalistの候補があることだけで、それ以外の入力が禁止されるわけではありません。
自由入力できる県名候補を出す。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
計算などの結果を示す要素。
progressは作業の進み具合、meterは範囲内の測定値、outputは計算や操作の結果に使います。同じ棒状の見た目でも、進捗と測定値は別です。値と最大・最小などの条件をそろえ、文章でも状況を伝えます。
料金計算の答えを表示する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
リンク先を保存する意図を示す属性。
リンク先の開き方や関係を指定します。downloadはダウンロードの案内に使えますが、別オリジンなどでは意図どおりになるとは限りません。新しいタブで開く場合は、利用者が移動先を理解できる表示にします。
同じサイトのZIPの保存リンクに付ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
リンク先などを開く場所を指定する。
リンク先の開き方や関係を指定します。downloadはダウンロードの案内に使えますが、別オリジンなどでは意図どおりになるとは限りません。新しいタブで開く場合は、利用者が移動先を理解できる表示にします。
_blankで別のタブを開く。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
現在の文書とリンク先の関係を示す。
リンク先の開き方や関係を指定します。downloadはダウンロードの案内に使えますが、別オリジンなどでは意図どおりになるとは限りません。新しいタブで開く場合は、利用者が移動先を理解できる表示にします。
stylesheetでCSSを関連付ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
外部スクリプトをHTML解析後に実行する指定。
外部JavaScriptの読み込みと実行のタイミングに関わります。通常の外部スクリプトではdeferは文書の解析後に順序を保って実行し、asyncは読み込み完了後に実行します。互いに依存するファイルは実行順に注意します。
画面の要素ができてから処理する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
外部スクリプトを準備でき次第実行する指定。
外部JavaScriptの読み込みと実行のタイミングに関わります。通常の外部スクリプトではdeferは文書の解析後に順序を保って実行し、asyncは読み込み完了後に実行します。互いに依存するファイルは実行順に注意します。
独立した集計用スクリプトに付ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
通常は要素を表示しない指定。
要素の見せ方を変えます。display:noneは配置の場所も消し、visibility:hiddenは通常その場所を残して非表示にし、opacity:0は透明にします。透明でも操作対象になる場合があるため、見え方と操作可能性を別に確認します。
まだ使わない案内を隠す。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素のフォーカス移動への参加を指定する。
キーボードで現在どの部品を操作するかを示します。ダイアログを開いたときは内部へ移し、閉じたときは元の操作部品へ戻すと迷いにくくなります。見える目印を消さず、Tabキーで自然な順に移動できるか確認します。
-1で通常のTab移動から外す。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素の内容を編集可能にする指定。
入力の補完、内容の編集、ドラッグなどに関わる指定です。指定を付けるだけでデータの保存やドロップ後の処理まで完成するわけではありません。タッチ・キーボードでも同じ目的を果たせる方法を用意します。
画面内で文章を編集する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素をドラッグ可能にする指定。
入力の補完、内容の編集、ドラッグなどに関わる指定です。指定を付けるだけでデータの保存やドロップ後の処理まで完成するわけではありません。タッチ・キーボードでも同じ目的を果たせる方法を用意します。
カードをつかんで移動する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
支援技術に要素の役割を伝える属性。
画面の役割・状態・要素同士の関係を、支援技術にも伝えます。ARIAを付けても開閉やキー操作の処理が自動で追加されるわけではありません。実際の状態と属性を一致させ、まず適切なHTML要素を使います。
操作部品の役割を明示する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
内容の更新を支援技術に通知する指定。
画面の役割・状態・要素同士の関係を、支援技術にも伝えます。ARIAを付けても開閉やキー操作の処理が自動で追加されるわけではありません。実際の状態と属性を一致させ、まず適切なHTML要素を使います。
検索件数の変化を読み上げてもらう。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素の補足説明を別の要素と結び付ける。
画面の役割・状態・要素同士の関係を、支援技術にも伝えます。ARIAを付けても開閉やキー操作の処理が自動で追加されるわけではありません。実際の状態と属性を一致させ、まず適切なHTML要素を使います。
入力欄と入力例を関連付ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
支援技術から要素を隠す指定。
操作や読み上げへの影響を指定します。pointer-events:noneは主にポインターの対象から外し、aria-hiddenは支援技術への情報から隠します。見た目を消す指定ではなく、キーボード操作も自動で全部無効になるとは限りません。
意味のない装飾を読み上げ対象から外す。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
一覧の中で現在の項目を示す。
画面の役割・状態・要素同士の関係を、支援技術にも伝えます。ARIAを付けても開閉やキー操作の処理が自動で追加されるわけではありません。実際の状態と属性を一致させ、まず適切なHTML要素を使います。
現在開いているページを示す。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
操作対象の要素を示す属性。
画面の役割・状態・要素同士の関係を、支援技術にも伝えます。ARIAを付けても開閉やキー操作の処理が自動で追加されるわけではありません。実際の状態と属性を一致させ、まず適切なHTML要素を使います。
開閉ボタンと案内欄を結び付ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
画面の情報を音声などで伝える支援ソフト。
見え方や操作方法が異なる人でも内容と機能を利用できるようにします。見出し・入力ラベル・フォーカス・色の区別などを組み合わせます。マウスで動くことだけで判断せず、キーボードや読み上げで意味が伝わるかを確かめます。
見出しを順に読み上げる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
繰り返すメニューを飛ばすリンク。
ページ上部から本文などへすぐ移動できるリンクです。キーボード利用者が毎回長いメニューを順にたどらずに済みます。リンク先のidと実際の本文領域を一致させ、フォーカスしたときにリンクが見えるようにします。
本文へ直接移動する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
フォーカス移動を一定の範囲内に保つ仕組み。
キーボードで現在どの部品を操作するかを示します。ダイアログを開いたときは内部へ移し、閉じたときは元の操作部品へ戻すと迷いにくくなります。見える目印を消さず、Tabキーで自然な順に移動できるか確認します。
開いたモーダル内でTab移動させる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
操作終了後に元の操作位置へフォーカスを戻すこと。
キーボードで現在どの部品を操作するかを示します。ダイアログを開いたときは内部へ移し、閉じたときは元の操作部品へ戻すと迷いにくくなります。見える目印を消さず、Tabキーで自然な順に移動できるか確認します。
ダイアログを閉じて元のボタンへ戻す。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
支援技術に伝わる操作部品などの名前。
入力欄やボタンの目的を利用者へ伝えます。placeholderは入力例であり、入力すると消えるためラベルの代わりにはなりません。読み上げ用の名前と画面に見える名前が一致するようにすると操作を理解しやすくなります。
アイコンだけのボタンに検索と名付ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
Webのアクセシビリティに関する指針。
見え方や操作方法が異なる人でも内容と機能を利用できるようにします。見出し・入力ラベル・フォーカス・色の区別などを組み合わせます。マウスで動くことだけで判断せず、キーボードや読み上げで意味が伝わるかを確かめます。
文字や操作の使いやすさを確認する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
文字の大きさを指定するCSSプロパティ。
文章の見た目や読みやすさを調整します。本文・見出し・ボタンで役割に合う値を指定し、文字を拡大しても内容が切れないようにします。文字の見た目の調整と、HTMLで見出しや強調の意味を付けることは別です。
本文を1remにする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
文字の太さを指定するCSSプロパティ。
文章の見た目や読みやすさを調整します。本文・見出し・ボタンで役割に合う値を指定し、文字を拡大しても内容が切れないようにします。文字の見た目の調整と、HTMLで見出しや強調の意味を付けることは別です。
見出しを太くする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
使うフォントの候補を指定する。
文章の見た目や読みやすさを調整します。本文・見出し・ボタンで役割に合う値を指定し、文字を拡大しても内容が切れないようにします。文字の見た目の調整と、HTMLで見出しや強調の意味を付けることは別です。
日本語用のフォントを選ぶ。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
行の高さを指定するCSSプロパティ。
文章の見た目や読みやすさを調整します。本文・見出し・ボタンで役割に合う値を指定し、文字を拡大しても内容が切れないようにします。文字の見た目の調整と、HTMLで見出しや強調の意味を付けることは別です。
本文の行間を広げる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
文字と文字の間隔を指定する。
文章の見た目や読みやすさを調整します。本文・見出し・ボタンで役割に合う値を指定し、文字を拡大しても内容が切れないようにします。文字の見た目の調整と、HTMLで見出しや強調の意味を付けることは別です。
見出しの字間を少し広げる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
行の中で文字などをそろえる位置を指定する。
文章の見た目や読みやすさを調整します。本文・見出し・ボタンで役割に合う値を指定し、文字を拡大しても内容が切れないようにします。文字の見た目の調整と、HTMLで見出しや強調の意味を付けることは別です。
タイトルを中央にする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
文字に下線などを付ける指定。
文章の見た目や読みやすさを調整します。本文・見出し・ボタンで役割に合う値を指定し、文字を拡大しても内容が切れないようにします。文字の見た目の調整と、HTMLで見出しや強調の意味を付けることは別です。
リンクに下線を付ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
はみ出した文字の表示方法を指定する。
領域からはみ出す文章や、改行の仕方を調整します。長いURLや英単語でも横幅を押し広げない指定が必要になる場合があります。省略記号を付けても全文が読めるとは限らないため、必要な情報は別の方法でも確認できるようにします。
条件を整えて末尾を三点にする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
空白や改行の扱いを指定する。
領域からはみ出す文章や、改行の仕方を調整します。長いURLや英単語でも横幅を押し広げない指定が必要になる場合があります。省略記号を付けても全文が読めるとは限らないため、必要な情報は別の方法でも確認できるようにします。
コードの改行を保つ。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
単語の途中で改行する扱いを指定する。
領域からはみ出す文章や、改行の仕方を調整します。長いURLや英単語でも横幅を押し広げない指定が必要になる場合があります。省略記号を付けても全文が読めるとは限らないため、必要な情報は別の方法でも確認できるようにします。
長い文字列の折り返しを調整する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
長い単語がはみ出す場合の折り返しを指定する。
領域からはみ出す文章や、改行の仕方を調整します。長いURLや英単語でも横幅を押し広げない指定が必要になる場合があります。省略記号を付けても全文が読めるとは限らないため、必要な情報は別の方法でも確認できるようにします。
長いURLを枠内に収める。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
背景の色を指定する。
CSSで表示や操作時の見え方を調整します。色や形だけで重要な情報を区別すると分からない人もいるため、文字や他の目印も添えます。スマホではマウスと同じ操作を前提にせず、タッチでも目的が分かる表示にします。
カードの背景を白くする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
背景に画像などを指定する。
CSSで表示や操作時の見え方を調整します。色や形だけで重要な情報を区別すると分からない人もいるため、文字や他の目印も添えます。スマホではマウスと同じ操作を前提にせず、タッチでも目的が分かる表示にします。
見出しの背景に模様を置く。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
背景画像の表示サイズを指定する。
CSSで表示や操作時の見え方を調整します。色や形だけで重要な情報を区別すると分からない人もいるため、文字や他の目印も添えます。スマホではマウスと同じ操作を前提にせず、タッチでも目的が分かる表示にします。
coverで背景全体を覆う。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
直線方向に変化する色の画像を作る。
CSSで表示や操作時の見え方を調整します。色や形だけで重要な情報を区別すると分からない人もいるため、文字や他の目印も添えます。スマホではマウスと同じ操作を前提にせず、タッチでも目的が分かる表示にします。
青から白へ変わる背景を作る。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
中心から外側へ変化する色の画像を作る。
CSSで表示や操作時の見え方を調整します。色や形だけで重要な情報を区別すると分からない人もいるため、文字や他の目印も添えます。スマホではマウスと同じ操作を前提にせず、タッチでも目的が分かる表示にします。
円状に色が変わる背景を作る。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
マウスポインターの形を指定する。
CSSで表示や操作時の見え方を調整します。色や形だけで重要な情報を区別すると分からない人もいるため、文字や他の目印も添えます。スマホではマウスと同じ操作を前提にせず、タッチでも目的が分かる表示にします。
操作箇所に指の形を表示する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素がポインター操作の対象になるかを指定する。
操作や読み上げへの影響を指定します。pointer-events:noneは主にポインターの対象から外し、aria-hiddenは支援技術への情報から隠します。見た目を消す指定ではなく、キーボード操作も自動で全部無効になるとは限りません。
装飾をクリック対象から外す。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
文字を選択できるかを指定する。
CSSで表示や操作時の見え方を調整します。色や形だけで重要な情報を区別すると分からない人もいるため、文字や他の目印も添えます。スマホではマウスと同じ操作を前提にせず、タッチでも目的が分かる表示にします。
操作部品の文字選択を抑える。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
利用者による要素のサイズ変更を指定する。
CSSで表示や操作時の見え方を調整します。色や形だけで重要な情報を区別すると分からない人もいるため、文字や他の目印も添えます。スマホではマウスと同じ操作を前提にせず、タッチでも目的が分かる表示にします。
入力欄を縦方向に広げられるようにする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素の幅と高さの比率を指定する。
画像や動画の形と、枠の中での表示位置を調整します。containは全体を収め、coverは枠を埋める代わりに一部が切れることがあります。文字入り画像や説明用動画では、大切な部分が切れていないか確認します。
動画の枠を16対9にする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
画像などの枠内の位置を指定する。
画像や動画の形と、枠の中での表示位置を調整します。containは全体を収め、coverは枠を埋める代わりに一部が切れることがあります。文字入り画像や説明用動画では、大切な部分が切れていないか確認します。
人物の顔が中央に来るよう調整する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
Flexboxの主軸の向きを指定する。
親要素の配置方法と組み合わせて、子要素の大きさ・並び・間隔を調整します。指定が効く条件はプロパティごとに違います。内容が長い場合や画面が狭い場合も試し、縮み方や折り返しで読みにくくならないか確認します。
ボタンを縦に並べる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
余った幅などを分け合う割合を指定する。
親要素の配置方法と組み合わせて、子要素の大きさ・並び・間隔を調整します。指定が効く条件はプロパティごとに違います。内容が長い場合や画面が狭い場合も試し、縮み方や折り返しで読みにくくならないか確認します。
入力欄を余白いっぱいに伸ばす。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
幅などが不足したとき縮む割合を指定する。
親要素の配置方法と組み合わせて、子要素の大きさ・並び・間隔を調整します。指定が効く条件はプロパティごとに違います。内容が長い場合や画面が狭い場合も試し、縮み方や折り返しで読みにくくならないか確認します。
ボタンが縮まないよう0にする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
Flexboxの要素の基準サイズを指定する。
親要素の配置方法と組み合わせて、子要素の大きさ・並び・間隔を調整します。指定が効く条件はプロパティごとに違います。内容が長い場合や画面が狭い場合も試し、縮み方や折り返しで読みにくくならないか確認します。
カードの基準幅を指定する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
一つの要素の交差軸方向の配置を指定する。
親要素の配置方法と組み合わせて、子要素の大きさ・並び・間隔を調整します。指定が効く条件はプロパティごとに違います。内容が長い場合や画面が狭い場合も試し、縮み方や折り返しで読みにくくならないか確認します。
一つのボタンだけ位置を変える。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
FlexboxやGridで表示順を指定する。
親要素の配置方法と組み合わせて、子要素の大きさ・並び・間隔を調整します。指定が効く条件はプロパティごとに違います。内容が長い場合や画面が狭い場合も試し、縮み方や折り返しで読みにくくならないか確認します。
画面の並びを調整し読み上げ順も確認する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
Gridの行のサイズを指定する。
複数の要素を配置するCSSの仕組みです。Flexboxは一つの軸に沿う配置、Gridは行と列の組み合わせを整理する用途が得意です。画面が狭い場合の折り返しや列数も指定し、内容が増えても読める配置にします。
上下二段の高さを決める。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
Grid内で要素が占める列を指定する。
親要素の配置方法と組み合わせて、子要素の大きさ・並び・間隔を調整します。指定が効く条件はプロパティごとに違います。内容が長い場合や画面が狭い場合も試し、縮み方や折り返しで読みにくくならないか確認します。
見出しを二列にまたがらせる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
Grid内で要素が占める行を指定する。
親要素の配置方法と組み合わせて、子要素の大きさ・並び・間隔を調整します。指定が効く条件はプロパティごとに違います。内容が長い場合や画面が狭い場合も試し、縮み方や折り返しで読みにくくならないか確認します。
写真を二行にまたがらせる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
名前付きの領域でGrid配置を指定する。
複数の要素を配置するCSSの仕組みです。Flexboxは一つの軸に沿う配置、Gridは行と列の組み合わせを整理する用途が得意です。画面が狭い場合の折り返しや列数も指定し、内容が増えても読める配置にします。
ヘッダーと本文の配置を定義する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素の配置をまとめて指定する。
親要素の配置方法と組み合わせて、子要素の大きさ・並び・間隔を調整します。指定が効く条件はプロパティごとに違います。内容が長い場合や画面が狭い場合も試し、縮み方や折り返しで読みにくくならないか確認します。
Gridの中身を中央にする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
Gridの残りの空間を分ける割合の単位。
相対的な大きさを指定する単位です。remはルート要素の文字サイズ、emは使うプロパティに応じた文字サイズ、chは文字「0」の幅、frはGridの残り領域の配分に関わります。数字だけでなく、何を基準にする単位かを確認します。
1frと2frで幅を分ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
ビューポート幅の百分の一を表す単位。
端末の画面やブラウザの表示領域に応じた余白・サイズを考える際に使います。アドレスバーや画面の切り欠きで使える領域が変わるため、固定ボタンなどは実機で確認します。画面の高さとキーボード表示時の使える高さも同じとは限りません。
画面幅に応じた幅を指定する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
ビューポート高さを基準にした単位。
端末の画面やブラウザの表示領域に応じた余白・サイズを考える際に使います。アドレスバーや画面の切り欠きで使える領域が変わるため、固定ボタンなどは実機で確認します。画面の高さとキーボード表示時の使える高さも同じとは限りません。
画面の高さに応じた枠を作る。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
変化するビューポート高さを基準にする単位。
端末の画面やブラウザの表示領域に応じた余白・サイズを考える際に使います。アドレスバーや画面の切り欠きで使える領域が変わるため、固定ボタンなどは実機で確認します。画面の高さとキーボード表示時の使える高さも同じとは限りません。
スマホの表示領域の変化に合わせる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
小さいビューポート高さを基準にする単位。
端末の画面やブラウザの表示領域に応じた余白・サイズを考える際に使います。アドレスバーや画面の切り欠きで使える領域が変わるため、固定ボタンなどは実機で確認します。画面の高さとキーボード表示時の使える高さも同じとは限りません。
ブラウザの操作バーがある高さを基準にする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
大きいビューポート高さを基準にする単位。
端末の画面やブラウザの表示領域に応じた余白・サイズを考える際に使います。アドレスバーや画面の切り欠きで使える領域が変わるため、固定ボタンなどは実機で確認します。画面の高さとキーボード表示時の使える高さも同じとは限りません。
操作バーが隠れた高さを基準にする。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
文字サイズを基準にした相対単位。
相対的な大きさを指定する単位です。remはルート要素の文字サイズ、emは使うプロパティに応じた文字サイズ、chは文字「0」の幅、frはGridの残り領域の配分に関わります。数字だけでなく、何を基準にする単位かを確認します。
ボタンの余白を文字に合わせる。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
フォントの0の幅を基準にした単位。
相対的な大きさを指定する単位です。remはルート要素の文字サイズ、emは使うプロパティに応じた文字サイズ、chは文字「0」の幅、frはGridの残り領域の配分に関わります。数字だけでなく、何を基準にする単位かを確認します。
入力欄のおおよその幅を決める。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
兄弟の中で特定の順番の要素を選ぶ。
CSSでは、対象となる要素と複数の指定の優先関係を判断します。セレクターが当たっていても別の指定に負ける場合があります。:where()の詳細度は0で、:is()や:not()は引数の詳細度が関係するため、一律に同じ強さではありません。
表の偶数行に色を付ける。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
条件に当てはまらない要素を選ぶ。
CSSでは、対象となる要素と複数の指定の優先関係を判断します。セレクターが当たっていても別の指定に負ける場合があります。:where()の詳細度は0で、:is()や:not()は引数の詳細度が関係するため、一律に同じ強さではありません。
無効でないボタンを選ぶ。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
複数の候補に当てはまる要素を選ぶ。
CSSでは、対象となる要素と複数の指定の優先関係を判断します。セレクターが当たっていても別の指定に負ける場合があります。:where()の詳細度は0で、:is()や:not()は引数の詳細度が関係するため、一律に同じ強さではありません。
複数種類の見出しをまとめて指定する。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
詳細度を増やさず複数の候補を選ぶ。
CSSでは、対象となる要素と複数の指定の優先関係を判断します。セレクターが当たっていても別の指定に負ける場合があります。:where()の詳細度は0で、:is()や:not()は引数の詳細度が関係するため、一律に同じ強さではありません。
上書きしやすい基本スタイルを作る。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素の内容の前に疑似要素を作る。
HTMLに新しい要素を直接書き足さず、CSSで装飾用の内容などを表現します。::beforeは内容の前、::afterは後に対応します。重要な説明や操作を装飾だけに入れると伝わらない場合があるため、本文のHTMLにも意味を持たせます。
装飾の記号を前に置く。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
要素の内容の後に疑似要素を作る。
HTMLに新しい要素を直接書き足さず、CSSで装飾用の内容などを表現します。::beforeは内容の前、::afterは後に対応します。重要な説明や操作を装飾だけに入れると伝わらない場合があるため、本文のHTMLにも意味を持たせます。
リンクの後ろに装飾を置く。
指定する要素・値・他の指定との関係を確認し、スマホとキーボード操作でも試しましょう。
配列の各要素に処理を行うメソッド。
配列の各要素に対して処理を行います。各回の戻り値をまとめた配列は作らないため、変換結果が欲しい場合はmapを使います。async関数を渡してもforEach自体が全処理の完了を待つわけではありません。
名前を一つずつ表示する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
条件に合う最初の要素の位置を返す。
配列などの中で見つかった位置を数で返します。最初の位置は0で、見つからない場合は-1です。ifで数をそのまま判定すると位置0を見落とすため、-1との比較などで判定します。
該当する名前の位置を調べる。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
条件に合う最後の要素を返す。
条件に合う一件の要素を探します。findは先頭側から、findLastは末尾側から探し、見つからなければundefinedです。配列の位置を知りたい場合はfindIndexやfindLastIndexを使います。
最後の未完了の項目を探す。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
条件に合う最後の要素の位置を返す。
配列などの中で見つかった位置を数で返します。最初の位置は0で、見つからない場合は-1です。ifで数をそのまま判定すると位置0を見落とすため、-1との比較などで判定します。
最後のエラーの位置を調べる。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
値や文字が最初に現れる位置を調べる。
配列などの中で見つかった位置を数で返します。最初の位置は0で、見つからない場合は-1です。ifで数をそのまま判定すると位置0を見落とすため、-1との比較などで判定します。
配列の中の名前の位置を探す。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
値や文字が最後に現れる位置を調べる。
配列などの中で見つかった位置を数で返します。最初の位置は0で、見つからない場合は-1です。ifで数をそのまま判定すると位置0を見落とすため、-1との比較などで判定します。
最後の区切り文字の位置を探す。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
配列の先頭の要素を取り出す。
JavaScriptの配列を直接変更する操作です。別の変数も同じ配列を参照している場合、そちらから見える内容も変わります。戻り値が配列とは限らないため、変更された元の配列と返された値を分けて確認します。
待ち行列の最初の項目を処理する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
配列の先頭に要素を追加する。
JavaScriptの配列を直接変更する操作です。別の変数も同じ配列を参照している場合、そちらから見える内容も変わります。戻り値が配列とは限らないため、変更された元の配列と返された値を分けて確認します。
新着記事を先頭に加える。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
配列の末尾の要素を取り出す。
JavaScriptの配列を直接変更する操作です。別の変数も同じ配列を参照している場合、そちらから見える内容も変わります。戻り値が配列とは限らないため、変更された元の配列と返された値を分けて確認します。
最後に追加した項目を取り出す。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
配列や文字列の一部分を取り出す。
元の配列を直接変更せず、新しい配列を得る方法です。ただし要素の中のオブジェクトまで別物になるとは限りません。コピーの後に内部の値を変更する場合は、浅いコピーと深いコピーの違いも確認します。
配列の最初の三件を取得する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
入れ子の配列を指定した深さまで平らにする。
元の配列を直接変更せず、新しい配列を得る方法です。ただし要素の中のオブジェクトまで別物になるとは限りません。コピーの後に内部の値を変更する場合は、浅いコピーと深いコピーの違いも確認します。
二重の配列を一列にする。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
配列の指定範囲を同じ値で埋める。
JavaScriptの配列を直接変更する操作です。別の変数も同じ配列を参照している場合、そちらから見える内容も変わります。戻り値が配列とは限らないため、変更された元の配列と返された値を分けて確認します。
配列を0で初期化する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
元の配列を変えず並べ替えた配列を返す。
比較関数を指定すると数や文字の順序で並べられます。JavaScriptのsortは元の配列を変更し、toSortedは並べ替えた新しい配列を返します。数の昇順には (a, b) => a - b のような比較が必要です。
元の順番を保って名前順の一覧を作る。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
元の配列を変えず逆順の配列を返す。
元の配列を直接変更せず、新しい配列を得る方法です。ただし要素の中のオブジェクトまで別物になるとは限りません。コピーの後に内部の値を変更する場合は、浅いコピーと深いコピーの違いも確認します。
記録を新しい順で表示する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
元の配列を変えず要素の追加や削除を行った配列を返す。
元の配列を直接変更せず、新しい配列を得る方法です。ただし要素の中のオブジェクトまで別物になるとは限りません。コピーの後に内部の値を変更する場合は、浅いコピーと深いコピーの違いも確認します。
一覧のコピーから一件を削除する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
文字列が指定した文字で終わるか調べる。
文字列や配列に対象が含まれるか、文字列の先頭・末尾が一致するかを調べます。真偽値で結果を返します。通常大文字と小文字は区別するため、検索の方針に応じて表記をそろえてから比較します。
ファイル名の末尾が.zipか確認する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
英字などを小文字にする。
文字列の前後の空白や表記を整える方法です。元の文字列を書き換えるのではなく、新しい文字列を得ます。正規化をしても、すべての表記ゆれや意味の違いが自動で解消されるわけではありません。
検索前に英字の大小をそろえる。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
英字などを大文字にする。
文字列の前後の空白や表記を整える方法です。元の文字列を書き換えるのではなく、新しい文字列を得ます。正規化をしても、すべての表記ゆれや意味の違いが自動で解消されるわけではありません。
表示用の略称を大文字にする。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
文字列の先頭の空白を除く。
文字列の前後の空白や表記を整える方法です。元の文字列を書き換えるのではなく、新しい文字列を得ます。正規化をしても、すべての表記ゆれや意味の違いが自動で解消されるわけではありません。
先頭の余分な空白を取り除く。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
文字列の末尾の空白を除く。
文字列の前後の空白や表記を整える方法です。元の文字列を書き換えるのではなく、新しい文字列を得ます。正規化をしても、すべての表記ゆれや意味の違いが自動で解消されるわけではありません。
末尾の余分な空白を取り除く。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
文字列の末尾に文字を補う。
文字列の組み立てや分割、置き換えなどに使います。どの文字で区切るか、何回処理するかによって結果が変わります。絵文字などでは見た目の一文字と内部の長さが一致しないことがある点も確認します。
表示する文字列の長さをそろえる。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
文字列を指定回数繰り返す。
文字列の組み立てや分割、置き換えなどに使います。どの文字で区切るか、何回処理するかによって結果が変わります。絵文字などでは見た目の一文字と内部の長さが一致しないことがある点も確認します。
区切り記号を五個作る。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
指定位置の文字を返す。
文字列の組み立てや分割、置き換えなどに使います。どの文字で区切るか、何回処理するかによって結果が変わります。絵文字などでは見た目の一文字と内部の長さが一致しないことがある点も確認します。
先頭の文字を取得する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
指定位置のUnicodeコードポイントを取得する。
文字列の組み立てや分割、置き換えなどに使います。どの文字で区切るか、何回処理するかによって結果が変わります。絵文字などでは見た目の一文字と内部の長さが一致しないことがある点も確認します。
絵文字の番号を確認する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
Unicodeの表現形式をそろえる。
文字列の前後の空白や表記を整える方法です。元の文字列を書き換えるのではなく、新しい文字列を得ます。正規化をしても、すべての表記ゆれや意味の違いが自動で解消されるわけではありません。
検索前に全角英字などを整える。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
正規表現に合う部分を探す。
文字の並びのパターンを指定して検索や判定を行います。文字列全体の形式を確認したい場合は、先頭と末尾の条件も指定します。繰り返しの多い複雑な式は処理が重くなる場合があるため、実際の入力で確認します。
文字列から数字を取り出す。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
正規表現に合う結果を順に取得する。
文字の並びのパターンを指定して検索や判定を行います。文字列全体の形式を確認したい場合は、先頭と末尾の条件も指定します。繰り返しの多い複雑な式は処理が重くなる場合があるため、実際の入力で確認します。
複数の一致箇所とその情報を読む。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
正規表現に合う部分があるか調べる。
文字の並びのパターンを指定して検索や判定を行います。文字列全体の形式を確認したい場合は、先頭と末尾の条件も指定します。繰り返しの多い複雑な式は処理が重くなる場合があるため、実際の入力で確認します。
入力が数字だけか確認する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
文字列から整数を読み取る。
文字などを数として扱える形に変えます。parseIntは整数、parseFloatは小数を含む数を読み取ります。文字列の途中まで読んで数を返す場合があるため、入力全体が正しい形式かの確認は別に必要です。
十進数指定で42を整数にする。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
文字列から小数を読み取る。
文字などを数として扱える形に変えます。parseIntは整数、parseFloatは小数を含む数を読み取ります。文字列の途中まで読んで数を返す場合があるため、入力全体が正しい形式かの確認は別に必要です。
3.5を数値として読む。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
値が整数の数値か調べる。
数の確認・丸め・計算を行います。四捨五入、切り上げ、切り下げ、0へ向かう切り捨ては負の数で結果が違います。toFixedの結果は文字列なので、その後に数の計算をする場合は扱いを区別します。
人数に小数がないか確認する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
整数を安全に正確に表せる範囲か調べる。
数の確認・丸め・計算を行います。四捨五入、切り上げ、切り下げ、0へ向かう切り捨ては負の数で結果が違います。toFixedの結果は文字列なので、その後に数の計算をする場合は扱いを区別します。
大きな整数の精度を確認する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
数値の小数部分を取り除く。
数の確認・丸め・計算を行います。四捨五入、切り上げ、切り下げ、0へ向かう切り捨ては負の数で結果が違います。toFixedの結果は文字列なので、その後に数の計算をする場合は扱いを区別します。
3.8を3にする。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
数値の絶対値を返す。
数の確認・丸め・計算を行います。四捨五入、切り上げ、切り下げ、0へ向かう切り捨ては負の数で結果が違います。toFixedの結果は文字列なので、その後に数の計算をする場合は扱いを区別します。
二つの数の差の大きさを求める。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
与えた数値の最小値を返す。
数の確認・丸め・計算を行います。四捨五入、切り上げ、切り下げ、0へ向かう切り捨ては負の数で結果が違います。toFixedの結果は文字列なので、その後に数の計算をする場合は扱いを区別します。
三つの料金の最小値を求める。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
与えた数値の最大値を返す。
数の確認・丸め・計算を行います。四捨五入、切り上げ、切り下げ、0へ向かう切り捨ては負の数で結果が違います。toFixedの結果は文字列なので、その後に数の計算をする場合は扱いを区別します。
最高得点を求める。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
0以上1未満の疑似乱数を返す。
0以上1未満の疑似乱数を返します。ゲームの抽選や表示の変化に使えますが、パスワードや秘密のトークン作成などの安全性が必要な用途には向きません。その用途ではcryptoの対応する機能を使います。
ゲームの候補をランダムに選ぶ。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
数値のべき乗を計算する。
数の確認・丸め・計算を行います。四捨五入、切り上げ、切り下げ、0へ向かう切り捨ては負の数で結果が違います。toFixedの結果は文字列なので、その後に数の計算をする場合は扱いを区別します。
2の3乗を計算する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
数値の平方根を求める。
数の確認・丸め・計算を行います。四捨五入、切り上げ、切り下げ、0へ向かう切り捨ては負の数で結果が違います。toFixedの結果は文字列なので、その後に数の計算をする場合は扱いを区別します。
9から3を求める。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
オブジェクト自身が指定プロパティを持つか調べる。
JavaScriptのオブジェクトの項目名・値・対応を扱います。keysは名前、valuesは値、entriesは名前と値の組を返します。継承した項目と直接持つ項目を区別したい場合はhasOwnなどで確認します。
設定に名前欄があるか確認する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
Mapからキーに対応する値を取得する。
キーに対応する値を保存する対応表です。JavaScriptのMapでは文字だけでなくオブジェクトなどもキーにできます。getの結果がundefinedのとき、キーがないのかundefinedを保存したのかはhasで区別できます。
利用者番号から名前を取得する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
Mapにキーと値の組を保存する。
キーに対応する値を保存する対応表です。JavaScriptのMapでは文字だけでなくオブジェクトなどもキーにできます。getの結果がundefinedのとき、キーがないのかundefinedを保存したのかはhasで区別できます。
番号と名前を登録する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
Mapに指定キーがあるか調べる。
キーに対応する値を保存する対応表です。JavaScriptのMapでは文字だけでなくオブジェクトなどもキーにできます。getの結果がundefinedのとき、キーがないのかundefinedを保存したのかはhasで区別できます。
番号が登録済みか確認する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
Setに指定した値があるか調べる。
重複する値を一つにまとめたり、含まれるかを調べたりするのに使います。Setや集合は位置で値を取り出す配列とは扱いが違います。JavaScriptでは同じ内容の別オブジェクトは別の値として扱われます。
参加者が登録済みか確認する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
Setから指定した値を削除する。
重複する値を一つにまとめたり、含まれるかを調べたりするのに使います。Setや集合は位置で値を取り出す配列とは扱いが違います。JavaScriptでは同じ内容の別オブジェクトは別の値として扱われます。
参加者の一覧から一人を除く。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
言語や地域に合わせて数値を表示する。
地域や言語に応じて数・日付の表示や文字の並べ方を調整します。保存する値そのものと、利用者に見せる表記を分けて扱います。表示済みの文字列をそのまま数や日時に戻せるとは限りません。
金額に桁区切りと通貨記号を付ける。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
言語や地域に合わせて日時を表示する。
地域や言語に応じて数・日付の表示や文字の並べ方を調整します。保存する値そのものと、利用者に見せる表記を分けて扱います。表示済みの文字列をそのまま数や日時に戻せるとは限りません。
日付を日本語の表示にする。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
言語に応じた文字列の比較を行う。
地域や言語に応じて数・日付の表示や文字の並べ方を調整します。保存する値そのものと、利用者に見せる表記を分けて扱います。表示済みの文字列をそのまま数や日時に戻せるとは限りません。
名前の並べ替えに使う。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
現在時刻を1970年からのミリ秒数で返す。
同じ瞬間でも地域の時差により表示する日付や時刻が変わります。保存する基準と画面表示の地域を分けると混乱を防げます。Date.nowは経過ミリ秒、toISOStringはUTCの文字列で、Date.parseは文字形式によって解釈が変わることがあります。
処理時間を記録する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
日付の文字列をミリ秒数に変換する。
同じ瞬間でも地域の時差により表示する日付や時刻が変わります。保存する基準と画面表示の地域を分けると混乱を防げます。Date.nowは経過ミリ秒、toISOStringはUTCの文字列で、Date.parseは文字形式によって解釈が変わることがあります。
ISO形式の日付を読み取る。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
日時をUTCのISO形式で表す。
同じ瞬間でも地域の時差により表示する日付や時刻が変わります。保存する基準と画面表示の地域を分けると混乱を防げます。Date.nowは経過ミリ秒、toISOStringはUTCの文字列で、Date.parseは文字形式によって解釈が変わることがあります。
記録用の日時文字列を作る。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
URLを各部分に分けて扱うオブジェクト。
URLに条件を入れたり、要素へ分解したりするために使います。空白や&などをそのまま連結すると意味が変わるため、対応する機能で組み立てます。#以降のフラグメントは通常サーバーへのHTTPリクエストには含まれません。
ホスト名やパスを読み取る。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
フォームの値やファイルをまとめる仕組み。
フォームの名前と値をまとめ、送信しやすい形にします。ファイルも含められます。ブラウザからFormDataを送る場合は、multipart/form-dataの境界をブラウザに設定させるため、Content-Typeを手動で固定しないようにします。
画像付きのフォームを送る。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
画像などのバイナリーデータを扱うオブジェクト。
文字以外のデータやファイルの中身を扱います。ファイル名・内容・容量は別の情報です。画像や大きなファイルを処理するときは、形式と容量を確認し、全部を一度に読み込む必要があるかも考えます。
ダウンロード用データを作る。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
ファイルの内容や名前などを扱うオブジェクト。
文字以外のデータやファイルの中身を扱います。ファイル名・内容・容量は別の情報です。画像や大きなファイルを処理するときは、形式と容量を確認し、全部を一度に読み込む必要があるかも考えます。
選択された画像の名前を確認する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
ファイルの内容を非同期に読み取る仕組み。
文字以外のデータやファイルの中身を扱います。ファイル名・内容・容量は別の情報です。画像や大きなファイルを処理するときは、形式と容量を確認し、全部を一度に読み込む必要があるかも考えます。
選択画像のプレビューを作る。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
固定長のバイナリーデータの領域。
文字以外のデータやファイルの中身を扱います。ファイル名・内容・容量は別の情報です。画像や大きなファイルを処理するときは、形式と容量を確認し、全部を一度に読み込む必要があるかも考えます。
画像のバイト列を保持する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
文字列をUTF-8のバイト列に変換する。
文字列とバイト列の間を変換します。文字コードに合う読み方が必要で、日本語の一文字が一バイトとは限りません。文字数とデータ容量を別に数えると、送信や保存の上限を判断しやすくなります。
送信用の文字データを作る。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
バイト列を文字列に変換する。
文字列とバイト列の間を変換します。文字コードに合う読み方が必要で、日本語の一文字が一バイトとは限りません。文字数とデータ容量を別に数えると、送信や保存の上限を判断しやすくなります。
取得したテキストを読む。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
データを少しずつ読み取る仕組み。
データを一度に全部そろえる代わりに、小さなかたまりを順に扱います。大きなファイルやAIの逐次応答などに使えます。途中で切れた場合や、受け手の処理が遅い場合も考えて終了・中断を扱います。
長い応答を順に受け取る。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
データを少しずつ書き込む仕組み。
データを一度に全部そろえる代わりに、小さなかたまりを順に扱います。大きなファイルやAIの逐次応答などに使えます。途中で切れた場合や、受け手の処理が遅い場合も考えて終了・中断を扱います。
届くデータを順に保存する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
流れるデータを途中で変換する仕組み。
データを一度に全部そろえる代わりに、小さなかたまりを順に扱います。大きなファイルやAIの逐次応答などに使えます。途中で切れた場合や、受け手の処理が遅い場合も考えて終了・中断を扱います。
受信データを加工して渡す。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
HTTP応答の本文やヘッダーを扱うオブジェクト。
通信の依頼・応答や付帯情報、本文を扱います。本文は文字・JSON・ファイルなどの形式を持ちます。本文を一度読むとそのまま再度読めない場合があるため、読み取る場所と形式を決めておきます。
取得した本文をjsonで読む。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
HTTP要求のURLや方法などを扱うオブジェクト。
通信の依頼・応答や付帯情報、本文を扱います。本文は文字・JSON・ファイルなどの形式を持ちます。本文を一度読むとそのまま再度読めない場合があるため、読み取る場所と形式を決めておきます。
受信した要求のメソッドを確認する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
HTTPヘッダーをまとめて扱うオブジェクト。
通信の依頼・応答や付帯情報、本文を扱います。本文は文字・JSON・ファイルなどの形式を持ちます。本文を一度読むとそのまま再度読めない場合があるため、読み取る場所と形式を決めておきます。
Content-Typeを設定する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
処理中止を伝えるための信号。
対応する非同期処理へ、中止を求める合図を送ります。画面を移動した後の不要な通信などに使います。中止の合図を送っても、すでにサーバーで行われた保存や送信が自動で取り消されるわけではありません。
fetchに中止の指示を渡す。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
イベントを受け取る対象の基本的な仕組み。
イベントの受け取り先や伝わり方に関係します。親要素でまとめて処理すると、後から追加した子要素にも対応しやすくなります。解除には登録時の関数などが必要なので、使い捨ての関数を重ねて登録しないようにします。
ボタンにイベント処理を登録する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
対象にイベントを送るメソッド。
イベントの受け取り先や伝わり方に関係します。親要素でまとめて処理すると、後から追加した子要素にも対応しやすくなります。解除には登録時の関数などが必要なので、使い捨ての関数を重ねて登録しないようにします。
独自の更新イベントを通知する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
独自の情報を付けて作れるイベント。
イベントの受け取り先や伝わり方に関係します。親要素でまとめて処理すると、後から追加した子要素にも対応しやすくなります。解除には登録時の関数などが必要なので、使い捨ての関数を重ねて登録しないようにします。
更新件数をイベントで渡す。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
登録したイベント処理を解除する。
イベントの受け取り先や伝わり方に関係します。親要素でまとめて処理すると、後から追加した子要素にも対応しやすくなります。解除には登録時の関数などが必要なので、使い捨ての関数を重ねて登録しないようにします。
不要になったクリック処理を外す。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
イベントが別の要素へ伝わるのを止める。
イベントの標準動作と伝わり方を制御します。preventDefaultは送信やリンク移動などの標準動作を止め、stopPropagationは親要素などへの伝達を止めます。互いに別の作用なので、必要な方を選びます。
内側の操作が外側へ伝わらないようにする。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
自分や親をたどって条件に合う要素を探す。
条件に合うDOM要素を探す機能です。idによる検索、CSSセレクターでの検索、自分や祖先の検索などで対象が違います。一件の検索では見つからないとnullになるため、操作前に結果を確認します。
押した箇所からカードを探す。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
要素がCSSセレクターに合うか調べる。
条件に合うDOM要素を探す機能です。idによる検索、CSSセレクターでの検索、自分や祖先の検索などで対象が違います。一件の検索では見つからないとnullになるため、操作前に結果を確認します。
クリック対象がボタンか確認する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
要素のdata属性を扱うための窓口。
HTML要素に付く属性を読み書きします。data-*は独自の小さな情報を要素に持たせ、datasetで扱えます。多くの属性値は文字なので、"false"を真偽値falseと同じつもりで使わないようにします。
data-idから項目番号を読む。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
要素の属性値を取得する。
HTML要素に付く属性を読み書きします。data-*は独自の小さな情報を要素に持たせ、datasetで扱えます。多くの属性値は文字なので、"false"を真偽値falseと同じつもりで使わないようにします。
リンクのhrefを読む。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
要素の属性値を設定する。
HTML要素に付く属性を読み書きします。data-*は独自の小さな情報を要素に持たせ、datasetで扱えます。多くの属性値は文字なので、"false"を真偽値falseと同じつもりで使わないようにします。
aria-expandedの状態を変える。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
要素の属性を取り除く。
HTML要素に付く属性を読み書きします。data-*は独自の小さな情報を要素に持たせ、datasetで扱えます。多くの属性値は文字なので、"false"を真偽値falseと同じつもりで使わないようにします。
disabledを外して操作可能にする。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
子要素を指定した内容に置き換える。
JavaScriptで画面の要素を作成・配置します。作っただけでは画面に現れず、DOMへ追加する必要があります。既存の要素を別の位置へ追加すると移動になる場合があり、自動的な複製とは異なります。
検索結果の一覧を入れ替える。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
指定位置にHTMLを解析して挿入する。
文字列をHTMLとして解釈して画面に挿入します。装飾付きの内容を作れますが、利用者の入力や外部データを無確認で入れると危険な内容が混ざる可能性があります。文章だけならtextContentなどを使います。
信頼できる固定のHTMLを追加する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
要素を一時的にまとめる軽量の容器。
JavaScriptで画面の要素を作成・配置します。作っただけでは画面に現れず、DOMへ追加する必要があります。既存の要素を別の位置へ追加すると移動になる場合があり、自動的な複製とは異なります。
多数の項目をまとめて追加する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
HTMLの解析などが完了したときのイベント。
HTMLの解析と対象のdeferスクリプトなどが終わった時点に発生するイベントです。画像などすべての読み込み完了を意味するわけではありません。DOM操作を始めるタイミングに使えますが、既に発生済みの後に登録する場合は別に扱います。
画面の初期設定を開始する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
入力によって値が変わったときのイベント。
利用者の操作に応じて処理を呼び出すきっかけです。入力途中と値の確定、フォーム送信、フォーカス移動、キー操作では発生するタイミングが違います。クリックだけに限定せず、キーボードなどの操作も想定します。
文字を打つたびに検索する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
入力の変更が確定したときなどのイベント。
利用者の操作に応じて処理を呼び出すきっかけです。入力途中と値の確定、フォーム送信、フォーカス移動、キー操作では発生するタイミングが違います。クリックだけに限定せず、キーボードなどの操作も想定します。
選択欄の変更に対応する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
フォーム送信時に発生するイベント。
利用者の操作に応じて処理を呼び出すきっかけです。入力途中と値の確定、フォーム送信、フォーカス移動、キー操作では発生するタイミングが違います。クリックだけに限定せず、キーボードなどの操作も想定します。
入力内容を確認して送る。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
要素にフォーカスが入ったときのイベント。
利用者の操作に応じて処理を呼び出すきっかけです。入力途中と値の確定、フォーム送信、フォーカス移動、キー操作では発生するタイミングが違います。クリックだけに限定せず、キーボードなどの操作も想定します。
入力欄の補足を表示する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
要素からフォーカスが外れたときのイベント。
利用者の操作に応じて処理を呼び出すきっかけです。入力途中と値の確定、フォーム送信、フォーカス移動、キー操作では発生するタイミングが違います。クリックだけに限定せず、キーボードなどの操作も想定します。
入力欄を離れたとき内容を確認する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
キーを押したときのイベント。
利用者の操作に応じて処理を呼び出すきっかけです。入力途中と値の確定、フォーム送信、フォーカス移動、キー操作では発生するタイミングが違います。クリックだけに限定せず、キーボードなどの操作も想定します。
Escapeでダイアログを閉じる。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
マウスや指などで押し始めたときのイベント。
利用者の操作に応じて処理を呼び出すきっかけです。入力途中と値の確定、フォーム送信、フォーカス移動、キー操作では発生するタイミングが違います。クリックだけに限定せず、キーボードなどの操作も想定します。
ドラッグ操作を開始する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
要素のサイズの変化を監視する仕組み。
変更や表示領域との位置関係などを監視し、変化が起きたときに処理します。一定時間ごとに全部を調べ続けるより、必要な変化に反応できます。不要になった監視は解除し、監視中の変更が繰り返しを起こさないか確認します。
枠の大きさに合わせて図を調整する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
ブラウザの履歴を扱う機能。
ページ全体を読み直さずURLや履歴を扱う仕組みです。pushStateで履歴を追加しても画面が自動で切り替わるわけではありません。戻る・進むの操作や、URLを直接開いた場合にも正しい内容が出るようにします。
画面切り替えを履歴に記録する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
ページを読み直さず履歴の項目を追加する。
ページ全体を読み直さずURLや履歴を扱う仕組みです。pushStateで履歴を追加しても画面が自動で切り替わるわけではありません。戻る・進むの操作や、URLを直接開いた場合にも正しい内容が出るようにします。
SPAの移動先をURLに反映する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
履歴の移動で状態が変わったときのイベント。
ページ全体を読み直さずURLや履歴を扱う仕組みです。pushStateで履歴を追加しても画面が自動で切り替わるわけではありません。戻る・進むの操作や、URLを直接開いた場合にも正しい内容が出るようにします。
戻る操作に合わせて画面を更新する。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
暗号用途に適した乱数を配列に入れる。
安全性を考慮した乱数や識別子をブラウザなどで作るために使います。randomUUIDは重複しにくい識別子を生成します。識別子が推測しにくいことだけでアクセス権限の確認を省けるわけではありません。
安全性が必要なランダム値を作る。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
ランダムなUUIDを作る。
安全性を考慮した乱数や識別子をブラウザなどで作るために使います。randomUUIDは重複しにくい識別子を生成します。識別子が推測しにくいことだけでアクセス権限の確認を省けるわけではありません。
記録ごとに識別番号を付ける。
対象の値、戻り値、元の値が変わるかを確認し、データがない場合も試しましょう。
変更できないバイト列を扱う型。
文字以外のデータやファイルの中身を扱います。ファイル名・内容・容量は別の情報です。画像や大きなファイルを処理するときは、形式と容量を確認し、全部を一度に読み込む必要があるかも考えます。
画像の内容をバイト列で読む。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
変更できるバイト列を扱う型。
文字以外のデータやファイルの中身を扱います。ファイル名・内容・容量は別の情報です。画像や大きなファイルを処理するときは、形式と容量を確認し、全部を一度に読み込む必要があるかも考えます。
バイトの一部分を書き換える。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
値を浮動小数点数へ変換する。
Pythonの標準的な操作や構文です。受け取れる値の種類と、結果として返る値を確認して使います。変換できない入力や空の対象ではエラーになる処理もあるため、短い例だけでなく実際に渡すデータで確認します。
文字列3.5を数値にする。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
値を整数へ変換する。
Pythonの標準的な操作や構文です。受け取れる値の種類と、結果として返る値を確認して使います。変換できない入力や空の対象ではエラーになる処理もあるため、短い例だけでなく実際に渡すデータで確認します。
文字列42を整数にする。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
値を文字列へ変換する。
Pythonの標準的な操作や構文です。受け取れる値の種類と、結果として返る値を確認して使います。変換できない入力や空の対象ではエラーになる処理もあるため、短い例だけでなく実際に渡すデータで確認します。
数値を表示用の文字にする。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
値の真偽を判定する。
Pythonで値を真偽値として判定します。boolで空の文字列などはFalseになりますが、文字列"False"は空ではないためTrueです。anyは一つでも真、allは全部が真かを調べ、空の対象ではanyはFalse、allはTrueになります。
空のリストが偽になることを確かめる。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
絶対値を求める。
Pythonの標準的な操作や構文です。受け取れる値の種類と、結果として返る値を確認して使います。変換できない入力や空の対象ではエラーになる処理もあるため、短い例だけでなく実際に渡すデータで確認します。
-5の大きさを5として取得する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
指定した精度に丸める。
小数の丸めや精度に関係します。Pythonのroundではちょうど中間の場合に偶数側へ丸める方式が使われます。金額などで決まった丸め規則が必要な場合は、decimalなどで数の表現と規則を明示します。
表示用に小数点以下を丸める。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
最小の値を取得する。
Pythonの標準的な操作や構文です。受け取れる値の種類と、結果として返る値を確認して使います。変換できない入力や空の対象ではエラーになる処理もあるため、短い例だけでなく実際に渡すデータで確認します。
最低点を調べる。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
最大の値を取得する。
Pythonの標準的な操作や構文です。受け取れる値の種類と、結果として返る値を確認して使います。変換できない入力や空の対象ではエラーになる処理もあるため、短い例だけでなく実際に渡すデータで確認します。
最高点を調べる。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
数値などを合計する。
Pythonの標準的な操作や構文です。受け取れる値の種類と、結果として返る値を確認して使います。変換できない入力や空の対象ではエラーになる処理もあるため、短い例だけでなく実際に渡すデータで確認します。
売上の一覧を合計する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
一つでも真になる要素があるか調べる。
Pythonで値を真偽値として判定します。boolで空の文字列などはFalseになりますが、文字列"False"は空ではないためTrueです。anyは一つでも真、allは全部が真かを調べ、空の対象ではanyはFalse、allはTrueになります。
未入力欄が一つでもあるか確認する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
すべての要素が真になるか調べる。
Pythonで値を真偽値として判定します。boolで空の文字列などはFalseになりますが、文字列"False"は空ではないためTrueです。anyは一つでも真、allは全部が真かを調べ、空の対象ではanyはFalse、allはTrueになります。
全項目が条件を満たすか確認する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
逆順に読むためのイテレーターを返す。
Pythonの標準的な操作や構文です。受け取れる値の種類と、結果として返る値を確認して使います。変換できない入力や空の対象ではエラーになる処理もあるため、短い例だけでなく実際に渡すデータで確認します。
記録を後ろから読む。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
順に値を取り出すイテレーターを作る。
値を必要な順に一つずつ取り出す方式です。全部の結果を一度に作らないため、大きな一覧を扱うときに役立ちます。読み進めると状態が変わり、同じものを再び最初から使えるとは限りません。
一覧を一件ずつ読む準備をする。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
イテレーターから次の値を取り出す。
値を必要な順に一つずつ取り出す方式です。全部の結果を一度に作らないため、大きな一覧を扱うときに役立ちます。読み進めると状態が変わり、同じものを再び最初から使えるとは限りません。
次の一件を取得する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
標準入力から一行を文字列として読む。
Pythonで文字を表示したり、利用者の入力を受け取ったりします。inputの結果は通常文字列なので、数の計算には変換が必要です。printは画面に表示する操作であり、関数の戻り値として結果を渡すreturnとは別です。
名前を入力してもらう。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
オブジェクトの説明を表示する。
Pythonの標準的な操作や構文です。受け取れる値の種類と、結果として返る値を確認して使います。変換できない入力や空の対象ではエラーになる処理もあるため、短い例だけでなく実際に渡すデータで確認します。
関数の使い方を調べる。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
オブジェクトなどの名前一覧を取得する。
Pythonの標準的な操作や構文です。受け取れる値の種類と、結果として返る値を確認して使います。変換できない入力や空の対象ではエラーになる処理もあるため、短い例だけでなく実際に渡すデータで確認します。
使える属性の候補を確認する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
名前を指定して属性を取得する。
Pythonの標準的な操作や構文です。受け取れる値の種類と、結果として返る値を確認して使います。変換できない入力や空の対象ではエラーになる処理もあるため、短い例だけでなく実際に渡すデータで確認します。
設定名を文字列で指定して読む。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
名前を指定して属性を設定する。
Pythonの標準的な操作や構文です。受け取れる値の種類と、結果として返る値を確認して使います。変換できない入力や空の対象ではエラーになる処理もあるため、短い例だけでなく実際に渡すデータで確認します。
指定した設定名の値を変える。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
指定した属性があるか調べる。
Pythonの標準的な操作や構文です。受け取れる値の種類と、結果として返る値を確認して使います。変換できない入力や空の対象ではエラーになる処理もあるため、短い例だけでなく実際に渡すデータで確認します。
必要な属性があるか確認する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
値を関数のように呼び出せるか調べる。
Pythonの標準的な操作や構文です。受け取れる値の種類と、結果として返る値を確認して使います。変換できない入力や空の対象ではエラーになる処理もあるため、短い例だけでなく実際に渡すデータで確認します。
コールバック候補を確認する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
値を確認しやすい表現の文字列にする。
Pythonの標準的な操作や構文です。受け取れる値の種類と、結果として返る値を確認して使います。変換できない入力や空の対象ではエラーになる処理もあるため、短い例だけでなく実際に渡すデータで確認します。
改行文字を含む値を調べる。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
短い無名関数を作る式。
Pythonの標準的な操作や構文です。受け取れる値の種類と、結果として返る値を確認して使います。変換できない入力や空の対象ではエラーになる処理もあるため、短い例だけでなく実際に渡すデータで確認します。
並べ替えに使う基準を書いて渡す。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
値を返してジェネレーターの処理を一時停止する。
値を必要な順に一つずつ取り出す方式です。全部の結果を一度に作らないため、大きな一覧を扱うときに役立ちます。読み進めると状態が変わり、同じものを再び最初から使えるとは限りません。
大量の行を一行ずつ渡す。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
外側の関数の変数を使う宣言。
名前がどの範囲の値を参照するかに関係します。Pythonでglobalはモジュールの変数、nonlocalは外側の関数の変数への再代入を指定します。広い範囲の値を変更すると影響を追いにくいため、引数と戻り値で渡す方法も考えます。
内側の関数で外側のカウントを更新する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
モジュール全体の変数を使う宣言。
名前がどの範囲の値を参照するかに関係します。Pythonでglobalはモジュールの変数、nonlocalは外側の関数の変数への再代入を指定します。広い範囲の値を変更すると影響を追いにくいため、引数と戻り値で渡す方法も考えます。
関数内で全体の状態を更新する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
値の構造に応じて処理を分ける構文。
Pythonの標準的な操作や構文です。受け取れる値の種類と、結果として返る値を確認して使います。変換できない入力や空の対象ではエラーになる処理もあるため、短い例だけでなく実際に渡すデータで確認します。
受け取ったデータの形で分岐する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
インスタンスを自動で受け取らないメソッドの指定。
Pythonの関数やクラスの定義を整理する仕組みです。デコレーターは対象の機能を包んで動作を変えるなどの用途があります。型ヒントは通常の実行で型を自動強制するものではないので、入力データの検査とは分けます。
クラスに補助計算をまとめる。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
クラスを自動で受け取るメソッドの指定。
Pythonの関数やクラスの定義を整理する仕組みです。デコレーターは対象の機能を包んで動作を変えるなどの用途があります。型ヒントは通常の実行で型を自動強制するものではないので、入力データの検査とは分けます。
別形式の入力からインスタンスを作る。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
メソッドを属性のように扱う指定。
Pythonの関数やクラスの定義を整理する仕組みです。デコレーターは対象の機能を包んで動作を変えるなどの用途があります。型ヒントは通常の実行で型を自動強制するものではないので、入力データの検査とは分けます。
計算結果を値のように読み出す。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
オブジェクトの表示用文字列を定めるメソッド。
Pythonで、自作のクラスを標準の操作に対応させるための特殊メソッドです。文字表示、長さ、繰り返し、withによる開始・終了などで呼ばれます。決められた戻り値や終了条件に合わせて実装します。
商品を名前で表示する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
オブジェクトの確認用表現を定めるメソッド。
Pythonで、自作のクラスを標準の操作に対応させるための特殊メソッドです。文字表示、長さ、繰り返し、withによる開始・終了などで呼ばれます。決められた戻り値や終了条件に合わせて実装します。
中の値が分かる形で表示する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
lenで返す長さを定めるメソッド。
Pythonで、自作のクラスを標準の操作に対応させるための特殊メソッドです。文字表示、長さ、繰り返し、withによる開始・終了などで呼ばれます。決められた戻り値や終了条件に合わせて実装します。
独自の容器の件数を返す。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
繰り返し処理用のイテレーターを返すメソッド。
Pythonで、自作のクラスを標準の操作に対応させるための特殊メソッドです。文字表示、長さ、繰り返し、withによる開始・終了などで呼ばれます。決められた戻り値や終了条件に合わせて実装します。
独自の一覧をforで読めるようにする。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
イテレーターの次の値を返すメソッド。
Pythonで、自作のクラスを標準の操作に対応させるための特殊メソッドです。文字表示、長さ、繰り返し、withによる開始・終了などで呼ばれます。決められた戻り値や終了条件に合わせて実装します。
次の項目を順番に渡す。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
withに入るときの処理を定めるメソッド。
Pythonで、自作のクラスを標準の操作に対応させるための特殊メソッドです。文字表示、長さ、繰り返し、withによる開始・終了などで呼ばれます。決められた戻り値や終了条件に合わせて実装します。
利用開始時の準備を行う。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
withを出るときの処理を定めるメソッド。
Pythonで、自作のクラスを標準の操作に対応させるための特殊メソッドです。文字表示、長さ、繰り返し、withによる開始・終了などで呼ばれます。決められた戻り値や終了条件に合わせて実装します。
終了時に資源を解放する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
OSに関わる操作を提供する標準モジュール。
Pythonに付属する機能をimportして使います。ファイル・日時・集計などを自分で一から作らずに扱えます。特にファイル変更や外部コマンド実行では、対象のパス・引数・権限を確認してから実行します。
環境変数を読む。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
Python実行環境に関わる情報や機能を提供する。
Pythonに付属する機能をimportして使います。ファイル・日時・集計などを自分で一から作らずに扱えます。特にファイル変更や外部コマンド実行では、対象のパス・引数・権限を確認してから実行します。
起動時の引数を読む。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
ファイルのコピーなどの操作を提供する。
Pythonに付属する機能をimportして使います。ファイル・日時・集計などを自分で一から作らずに扱えます。特にファイル変更や外部コマンド実行では、対象のパス・引数・権限を確認してから実行します。
フォルダをまとめてコピーする。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
別のプログラムを起動する機能を提供する。
Pythonに付属する機能をimportして使います。ファイル・日時・集計などを自分で一から作らずに扱えます。特にファイル変更や外部コマンド実行では、対象のパス・引数・権限を確認してから実行します。
外部の変換コマンドを実行する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
処理の記録を管理する標準モジュール。
Pythonに付属する機能をimportして使います。ファイル・日時・集計などを自分で一から作らずに扱えます。特にファイル変更や外部コマンド実行では、対象のパス・引数・権限を確認してから実行します。
エラーを日時付きで記録する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
コマンドの引数を解析する標準モジュール。
Pythonに付属する機能をimportして使います。ファイル・日時・集計などを自分で一から作らずに扱えます。特にファイル変更や外部コマンド実行では、対象のパス・引数・権限を確認してから実行します。
入力ファイル名の引数を受け取る。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
繰り返しを組み合わせる道具を提供する。
Pythonに付属する機能をimportして使います。ファイル・日時・集計などを自分で一から作らずに扱えます。特にファイル変更や外部コマンド実行では、対象のパス・引数・権限を確認してから実行します。
二つの一覧の全組み合わせを作る。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
関数を扱う補助機能を提供する。
Pythonに付属する機能をimportして使います。ファイル・日時・集計などを自分で一から作らずに扱えます。特にファイル変更や外部コマンド実行では、対象のパス・引数・権限を確認してから実行します。
同じ計算結果を再利用する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
平均や中央値などを計算する標準モジュール。
Pythonに付属する機能をimportして使います。ファイル・日時・集計などを自分で一から作らずに扱えます。特にファイル変更や外部コマンド実行では、対象のパス・引数・権限を確認してから実行します。
測定値の中央値を求める。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
十進数の精度を管理して計算する標準モジュール。
小数の丸めや精度に関係します。Pythonのroundではちょうど中間の場合に偶数側へ丸める方式が使われます。金額などで決まった丸め規則が必要な場合は、decimalなどで数の表現と規則を明示します。
金額を十進数で計算する。
入力の型、戻り値、例外の条件を確認し、元のデータを残して小さく試しましょう。
Cloudflare上でコードを実行するサービス。
利用者のリクエストなどに応じ、サービス側の実行環境で処理を動かします。サーバーレスでもサーバーは存在し、利用者が機械の管理を直接行わない方式です。処理時間や利用できる機能には実行環境ごとの条件があります。
問い合わせのAPIを動かす。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
キーと値の組を保存する分散ストレージ。
キーと値を組み合わせて保存する仕組みです。小さな設定や共有データの読み取りに使えます。更新がすべての読み取り先へ即時に見えるとは限らないため、厳密な残数管理などでは必要な整合性を確認します。
設定値をキーで保存する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
SQLiteを基礎にした管理型データベース。
表のデータをSQLで扱うデータベースに関わります。データ型・利用できる構文・接続方式などは製品ごとに異なります。ブラウザから認証情報を使って直接自由に操作させず、サーバー側の処理で許可する操作を管理します。
利用記録を表に保存する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
ファイルなどをオブジェクトとして保存するサービス。
画像や動画などを、名前となるキーを付けて保存する方式です。バケットは保存先のまとまりです。ファイルを保存することと公開することは別で、外から読める範囲や上書き・削除の権限を確認します。
画像をバケットへ保存する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
状態を持つ処理を調整するCloudflareの仕組み。
データの保持や実行状態の管理に関係します。毎回新しく実行されるか、状態を共有するかは機能ごとに異なります。実行中の変数に入れた値が次のリクエストでも必ず残るとは限らないため、必要な保存方法を選びます。
同じ部屋のチャット状態を管理する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
Cloudflare上でAIモデルの推論を利用するサービス。
WorkersなどからAIモデルの推論を呼び出すためのサービスです。相談画面の表示と、AIを実際に呼び出す処理は別です。利用を数える際もページ閲覧数と推論の回数を区別し、モデルと使用量の条件を確認します。
相談室で文章の応答を作る。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
自動化された不正利用を抑えるための確認サービス。
フォームなどの利用が自動攻撃によるものかを判定するための仕組みです。画面に部品を置くだけでなく、受け取ったトークンをサーバー側で検証します。検証結果に応じて送信処理を進めるか決めます。
フォーム送信前に確認する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
Cloudflareの開発や公開を行うコマンドツール。
WranglerはWorkersの開発・確認・公開に使う道具です。バインディングはWorkerから保存先やAIなどの機能へアクセスするための接続設定です。コードに書いた名前と設定した名前が一致しているかを確認します。
Workerを公開する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
コードから外部の資源を使うための接続設定。
WranglerはWorkersの開発・確認・公開に使う道具です。バインディングはWorkerから保存先やAIなどの機能へアクセスするための接続設定です。コードに書いた名前と設定した名前が一致しているかを確認します。
WorkerにKVへの窓口を渡す。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
名前を区別して管理するまとまり。
データの保持や実行状態の管理に関係します。毎回新しく実行されるか、状態を共有するかは機能ごとに異なります。実行中の変数に入れた値が次のリクエストでも必ず残るとは限らないため、必要な保存方法を選びます。
用途ごとにKVの保存先を分ける。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
オブジェクトストレージの保存先のまとまり。
画像や動画などを、名前となるキーを付けて保存する方式です。バケットは保存先のまとまりです。ファイルを保存することと公開することは別で、外から読める範囲や上書き・削除の権限を確認します。
画像用の保存場所を作る。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
データをキー付きのオブジェクトとして保存する方式。
画像や動画などを、名前となるキーを付けて保存する方式です。バケットは保存先のまとまりです。ファイルを保存することと公開することは別で、外から読める範囲や上書き・削除の権限を確認します。
写真や動画を保存する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
利用者に近い拠点などで処理する考え方。
利用者のリクエストなどに応じ、サービス側の実行環境で処理を動かします。サーバーレスでもサーバーは存在し、利用者が機械の管理を直接行わない方式です。処理時間や利用できる機能には実行環境ごとの条件があります。
近い拠点から応答する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
サーバー管理をサービス側に任せて実行する方式。
利用者のリクエストなどに応じ、サービス側の実行環境で処理を動かします。サーバーレスでもサーバーは存在し、利用者が機械の管理を直接行わない方式です。処理時間や利用できる機能には実行環境ごとの条件があります。
コードの処理に集中して開発する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
実行環境の準備から始める初回起動。
データの保持や実行状態の管理に関係します。毎回新しく実行されるか、状態を共有するかは機能ごとに異なります。実行中の変数に入れた値が次のリクエストでも必ず残るとは限らないため、必要な保存方法を選びます。
最初の応答時間を測る。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
準備済みの実行環境を再利用する起動。
データの保持や実行状態の管理に関係します。毎回新しく実行されるか、状態を共有するかは機能ごとに異なります。実行中の変数に入れた値が次のリクエストでも必ず残るとは限らないため、必要な保存方法を選びます。
続く要求の応答時間を確認する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
処理の開始から終了までの時間。
サービスの利用を、リクエスト数・保存容量・処理時間などの単位で測ります。CPU時間は実際の計算に使う時間、実行時間は待ち時間も含む経過時間として扱われる場合があります。どの指標に上限や課金があるかはサービスの定義で確認します。
一回の要求にかかった時間を測る。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
CPUが実際に計算に使った時間。
サービスの利用を、リクエスト数・保存容量・処理時間などの単位で測ります。CPU時間は実際の計算に使う時間、実行時間は待ち時間も含む経過時間として扱われる場合があります。どの指標に上限や課金があるかはサービスの定義で確認します。
通信待ちと計算時間を区別する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
サービスを使った量。
サービスの利用を、リクエスト数・保存容量・処理時間などの単位で測ります。CPU時間は実際の計算に使う時間、実行時間は待ち時間も含む経過時間として扱われる場合があります。どの指標に上限や課金があるかはサービスの定義で確認します。
要求数や保存容量を確認する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
割り当てられた利用量の枠。
サービスの利用を、リクエスト数・保存容量・処理時間などの単位で測ります。CPU時間は実際の計算に使う時間、実行時間は待ち時間も含む経過時間として扱われる場合があります。どの指標に上限や課金があるかはサービスの定義で確認します。
利用可能な要求数を確認する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
料金計算に使う量の単位。
サービスの利用を、リクエスト数・保存容量・処理時間などの単位で測ります。CPU時間は実際の計算に使う時間、実行時間は待ち時間も含む経過時間として扱われる場合があります。どの指標に上限や課金があるかはサービスの定義で確認します。
要求数や保存量の単位を確認する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
条件に応じて出す注意の通知。
配信や運用状態の確認に使います。アクセス数は人の数と一致するとは限らず、ボットや再読み込みを含む場合があります。障害の判断では、期間・エラー率・表示速度などを合わせて見ます。
使用量の増加を知らせる。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
状況や設定をまとめた管理画面。
配信や運用状態の確認に使います。アクセス数は人の数と一致するとは限らず、ボットや再読み込みを含む場合があります。障害の判断では、期間・エラー率・表示速度などを合わせて見ます。
公開状態と使用量を確認する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
自動で処理やアクセスをするプログラム。
人の代わりに自動でページやデータへアクセスするプログラムです。検索用の巡回もあれば、無差別にURLを探すアクセスもあります。名前を名乗るUser-Agentだけで正規の巡回だと断定せず、送信元や動作も確認します。
検索用の巡回を確認する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
Webページを自動で巡回するプログラム。
人の代わりに自動でページやデータへアクセスするプログラムです。検索用の巡回もあれば、無差別にURLを探すアクセスもあります。名前を名乗るUser-Agentだけで正規の巡回だと断定せず、送信元や動作も確認します。
検索エンジンがページを収集する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
IPアドレスからホスト名を調べる仕組み。
正引きは名前からIPを調べ、逆引きはIPから登録された名前を調べます。両方を組み合わせると接続元を確認する手掛かりになります。逆引き名だけで決めず、正引きで元のIPに戻るかや公式の確認条件も調べます。
アクセス元の名前を確認する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
ホスト名からIPアドレスを調べる仕組み。
正引きは名前からIPを調べ、逆引きはIPから登録された名前を調べます。両方を組み合わせると接続元を確認する手掛かりになります。逆引き名だけで決めず、正引きで元のIPに戻るかや公式の確認条件も調べます。
ドメインの接続先を確認する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
ホスト名をIPv6アドレスに結び付けるDNS情報。
DNSには用途ごとに種類の違う情報を登録します。AとAAAAは接続先IP、CNAMEは別名、MXはメール配送先、TXTは文字情報、NSは管理するDNSサーバーです。TTLはキャッシュ時間に関わり、用途に合う種類を選びます。
IPv6の接続先を登録する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
文字列を登録するDNS情報。
DNSには用途ごとに種類の違う情報を登録します。AとAAAAは接続先IP、CNAMEは別名、MXはメール配送先、TXTは文字情報、NSは管理するDNSサーバーです。TTLはキャッシュ時間に関わり、用途に合う種類を選びます。
サイト所有権確認の文字列を登録する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
ゾーンを管理するDNSサーバーを示す情報。
DNSには用途ごとに種類の違う情報を登録します。AとAAAAは接続先IP、CNAMEは別名、MXはメール配送先、TXTは文字情報、NSは管理するDNSサーバーです。TTLはキャッシュ時間に関わり、用途に合う種類を選びます。
ドメインの管理先を確認する。
ブラウザ側とサーバー側を分け、設定と実際の通信結果の両方を確認しましょう。
ファイルなどで扱える軽量のデータベースエンジン。
表のデータをSQLで扱うデータベースに関わります。データ型・利用できる構文・接続方式などは製品ごとに異なります。ブラウザから認証情報を使って直接自由に操作させず、サーバー側の処理で許可する操作を管理します。
小規模な記録をSQLで管理する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
多様な機能を持つデータベース管理システム。
表のデータをSQLで扱うデータベースに関わります。データ型・利用できる構文・接続方式などは製品ごとに異なります。ブラウザから認証情報を使って直接自由に操作させず、サーバー側の処理で許可する操作を管理します。
複数の利用者のデータを管理する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
広く使われるデータベース管理システム。
表のデータをSQLで扱うデータベースに関わります。データ型・利用できる構文・接続方式などは製品ごとに異なります。ブラウザから認証情報を使って直接自由に操作させず、サーバー側の処理で許可する操作を管理します。
Webサービスの記録を保存する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
メモリ中心でデータを扱う保存システム。
データの保持や実行状態の管理に関係します。毎回新しく実行されるか、状態を共有するかは機能ごとに異なります。実行中の変数に入れた値が次のリクエストでも必ず残るとは限らないため、必要な保存方法を選びます。
素早く参照する値を保存する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
データの構造や規則の定義。
表の構造や、保存してよい値の条件を決めます。画面側の検査だけでなくデータベースにも条件を持たせると、不整合を防ぎやすくなります。既存データに新しい条件を追加する場合、すでに保存された値への影響を確認します。
表の列や型を決める。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
データの構造などを変更する手順。
保存データやその構造を変更する作業に関わります。論理削除は削除の印を付けて残し、物理削除は記録を取り除きます。構造変更や初期データ投入では、既存の情報への影響とやり直し方を先に確認します。
表に新しい列を追加する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
初期状態を作るためのデータ。
保存データやその構造を変更する作業に関わります。論理削除は削除の印を付けて残し、物理削除は記録を取り除きます。構造変更や初期データ投入では、既存の情報への影響とやり直し方を先に確認します。
分類の一覧を最初に登録する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
削除済みの印を付けてデータを残す方式。
保存データやその構造を変更する作業に関わります。論理削除は削除の印を付けて残し、物理削除は記録を取り除きます。構造変更や初期データ投入では、既存の情報への影響とやり直し方を先に確認します。
非表示にして復元可能にする。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
保存したデータそのものを削除する方式。
保存データやその構造を変更する作業に関わります。論理削除は削除の印を付けて残し、物理削除は記録を取り除きます。構造変更や初期データ投入では、既存の情報への影響とやり直し方を先に確認します。
不要な記録を実際に取り除く。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
条件に応じて追加か更新を行う処理。
SQLの結果をまとめたり、条件や実行方法を調整したりするために使います。重複を残すか、NULLをどう扱うかなどで件数が変わります。データベースによって対応する構文や動作が違うため、実際の製品で結果と負荷を確認します。
既存の設定を更新し未登録なら追加する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
対応する相手がない行も含める表の結合。
複数の表を関係付けて結果を作ります。INNER JOINは一致する組、外部結合は一致相手がない行も残し、CROSS JOINは組み合わせを作ります。一対多の関係で同じ行が複数回現れる場合があるため、件数や合計を確認します。
購入のない利用者も一覧に残す。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
同じ表を別名で結合すること。
複数の表を関係付けて結果を作ります。INNER JOINは一致する組、外部結合は一致相手がない行も残し、CROSS JOINは組み合わせを作ります。一対多の関係で同じ行が複数回現れる場合があるため、件数や合計を確認します。
社員と上司の名前を同じ表から得る。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
複数の列をまとめた検索用の仕組み。
検索を助けるため、表のデータに索引を付けます。辞書の見出しから目的の項目を探すイメージです。検索を速める一方で保存容量や更新の負担が増えるため、実際に使う検索条件に合う索引を選びます。
分類と日付での検索を助ける。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
対象値の重複を許さないインデックス。
検索を助けるため、表のデータに索引を付けます。辞書の見出しから目的の項目を探すイメージです。検索を速める一方で保存容量や更新の負担が増えるため、実際に使う検索条件に合う索引を選びます。
同じ会員番号の重複登録を防ぐ。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
互いの資源解放を待ち続けて進まない状態。
同時に複数の処理がデータを変更する際の競合を扱います。楽観的ロックは更新時の確認、悲観的ロックは事前に変更を制限する方式です。ロックを持つ範囲と時間を減らし、失敗時の再試行も考えます。
複数の更新処理の待ち合いを調べる。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
更新時に変更の競合を確認する方式。
同時に複数の処理がデータを変更する際の競合を扱います。楽観的ロックは更新時の確認、悲観的ロックは事前に変更を制限する方式です。ロックを持つ範囲と時間を減らし、失敗時の再試行も考えます。
版番号が同じ場合だけ保存する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
先に対象の利用を制限して競合を防ぐ方式。
同時に複数の処理がデータを変更する際の競合を扱います。楽観的ロックは更新時の確認、悲観的ロックは事前に変更を制限する方式です。ロックを持つ範囲と時間を減らし、失敗時の再試行も考えます。
更新中の行を他の更新から守る。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
トランザクションの信頼性に関する四つの性質。
複数の変更を一まとまりとして扱い、途中までの状態が残る問題を避けます。送金なら減額と増額の両方がそろって成立するようにします。失敗時に戻す範囲や、外部サービスへの処理まで戻せるかは別に設計します。
送金の更新を一まとまりで扱う。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
途中の状態を見せず一まとまりで行う操作。
複数の変更を一まとまりとして扱い、途中までの状態が残る問題を避けます。送金なら減額と増額の両方がそろって成立するようにします。失敗時に戻す範囲や、外部サービスへの処理まで戻せるかは別に設計します。
カウンターを一回の操作で更新する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
接続を再利用するための管理機構。
SQLの結果をまとめたり、条件や実行方法を調整したりするために使います。重複を残すか、NULLをどう扱うかなどで件数が変わります。データベースによって対応する構文や動作が違うため、実際の製品で結果と負荷を確認します。
毎回の接続準備を減らす。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
データの項目や意味をまとめた資料。
表の構造や、保存してよい値の条件を決めます。画面側の検査だけでなくデータベースにも条件を持たせると、不整合を防ぎやすくなります。既存データに新しい条件を追加する場合、すでに保存された値への影響を確認します。
列名と用途を記録する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
データの種類と関係を示す図。
データ同士の関係を整理します。一人が複数の注文を持つ関係が一対多、複数の人と複数の講座の関係などが多対多です。多対多では対応を中間テーブルに記録すると、重複や更新の混乱を防ぎやすくなります。
利用者と注文の関係を描く。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
一つのデータに複数のデータが対応する関係。
データ同士の関係を整理します。一人が複数の注文を持つ関係が一対多、複数の人と複数の講座の関係などが多対多です。多対多では対応を中間テーブルに記録すると、重複や更新の混乱を防ぎやすくなります。
一人の利用者に複数の注文がある。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
互いに複数のデータが対応する関係。
データ同士の関係を整理します。一人が複数の注文を持つ関係が一対多、複数の人と複数の講座の関係などが多対多です。多対多では対応を中間テーブルに記録すると、重複や更新の混乱を防ぎやすくなります。
受講者と講座を対応させる。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
二つの表の対応関係を保存する表。
データ同士の関係を整理します。一人が複数の注文を持つ関係が一対多、複数の人と複数の講座の関係などが多対多です。多対多では対応を中間テーブルに記録すると、重複や更新の混乱を防ぎやすくなります。
受講者番号と講座番号を組にする。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
データが規則に合い矛盾しないこと。
表の構造や、保存してよい値の条件を決めます。画面側の検査だけでなくデータベースにも条件を持たせると、不整合を防ぎやすくなります。既存データに新しい条件を追加する場合、すでに保存された値への影響を確認します。
存在しない利用者への注文を防ぐ。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
保存したバックアップから元に戻すこと。
バックアップは戻せるデータを残すこと、リストアはそこから復元することです。保存先・取得時点・復元対象を明確にします。ファイルが存在するだけでは復旧できるとは限らず、必要な設定も含めて戻せるかを確認します。
失ったデータを復元する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
ある時点の状態を保存したもの。
バックアップは戻せるデータを残すこと、リストアはそこから復元することです。保存先・取得時点・復元対象を明確にします。ファイルが存在するだけでは復旧できるとは限らず、必要な設定も含めて戻せるかを確認します。
変更前の状態を残す。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
障害から戻すための手順。
バックアップは戻せるデータを残すこと、リストアはそこから復元することです。保存先・取得時点・復元対象を明確にします。ファイルが存在するだけでは復旧できるとは限らず、必要な設定も含めて戻せるかを確認します。
バックアップの戻し方を文書にする。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
利用目的や要求を満たすか確認するテスト。
期待する結果と実際の動作を比べて確認します。部品単体、部品同士、利用者の一連の操作などで確認する範囲が異なります。正常な入力だけでなく、空欄・境界値・通信失敗などを含めると不具合を見つけやすくなります。
利用者の手順で完成を確認する。
対象・日時・結果を記録し、変更前へ戻せる状態と公開先の動作を確認しましょう。
うまく動かないときは、まず「どのページで」「何をしたら」「どうなったか」を確かめましょう。一つずつ確認すれば、原因を探しやすくなります。
学習中の疑問や画面の困りごとを、そのまま質問できます。
お問い合わせフォームで送信ボタンを押した後は、結果が分かるまで何度も押さず、まず送信結果を確認してください。
id とJavaScriptで指定した名前が同じか確認します。エラー表示が出ている場合は、その文を消さずに控えてください。原因を探す大切な手掛かりです。
用語集では、名前や読み方から探せます。例えば「HTML」「変数」「API」などを入力し、説明と使用例を確認してください。
「開いていたページ」「押したボタンや行った操作」「期待した動き」「実際に起きたこと」「iPhone・PCなどの端末」を書いていただくと、確認しやすくなります。パスワードなどの秘密の情報は送らないでください。
ゼロから学ぶ人のための案内役
品質改善のため、相談件数・日時・会話ごとの匿名ID・成否を30日間記録します。運営者だけが確認します。
同意しなくても相談できます。「会話を消す」は画面上の会話だけを消します。保存済みの記録の削除はお問い合わせください。
1日10回まで。名前・メールアドレス・パスワードなどの個人情報は入力しないでください。AIの回答は間違うことがあります。
50代・介護の仕事をしながら、AIと一緒にプログラミングをゼロから勉強しています。実際に作り、失敗し、修正する過程も含めて、このサイトで紹介していきます。
大学では一通り勉強しました。ただ、その頃は学んだことを生活や仕事に取り入れようとは考えていませんでした。
今は仕事の中で感じる不便を、仕組みにして解決したいと思うようになりました。学びと経験が、今になってつながり始めています。
「分からない」を置き去りにしない。作りながら学び、失敗も学びに変える。
このサイトは、プログラミング経験のない人でも、AIと一緒に考えながら自分の手で一つずつ形にできる場所を目指します。
完成した答えだけを見せるのではなく、迷ったこと、うまく動かなかったこと、AIに相談したこと、直して動いた瞬間まで残します。年齢や経験に関係なく「自分にも作れた」と感じられる学びを大切にします。
10月11日の正式公開はゴールではありません。学習の家、AI案内所、工房、画廊、交流広場へと、学ぶ人と一緒に町を育てていきます。
10月11日の正式公開は完成ではなく出発点です。初心者が学ぶだけで終わらず、AIと相談し、試し、失敗し、直し、作品として残せる町を少しずつ育てていきます。
記事・用語集・テスト
作ったプログラム・実践例
11月。AI相談とプロンプト集。
12月課題。作品と制作過程を展示。
将来。投稿・コメント・作品交流。
10月11日を安定版の節目として、記事・スマホ表示・翻訳など現在の機能を安定させます。10月後半は実際の利用状況を確認し、見つかった問題を修正します。
記事どうしの導線、案内表示、AI案内所、プロンプト集などを整えます。初心者が迷わず町を歩けるように、公開後の反応を見ながら使いやすさを改善します。
完成品だけでなく「試作 → 失敗 → AIと相談 → 修正 → 完成」の過程まで展示します。初心者が完成までの道筋を見られる画廊にします。
学習記録・作品投稿・コメントなど、このサイトに必要な機能から小さく試します。読むだけのサイトから、参加できる場所へ進めます。
ユーザー登録、プロフィール、作品展示、反応・交流などを段階的に検討します。必要になった段階でサーバー、データベース、認証、プライバシー対策を本格的に学びます。
広告だけを目的にせず、まず役に立つ記事と作品を蓄積します。その後、教材、テンプレート、小規模ツール、サポートなど、サイトの内容と自然につながる方法を検討します。
JavaScript講座・全10回 / 第4回 / 1ページ目（全3ページ）
掲載日：2026年9月13日
第1回で、「在庫が2本以下なら知らせる」という仕事を任されたJavaScriptくん。
翌日、KAZUはもう一つ仕事を頼むことにしました。
さすがに、このくらいの計算なら人でもできます。
でも、商品が10種類、20種類、100種類になったらどうでしょう。
単価が違い、数量も違い、最後に全部の合計を出す。人が電卓で一つずつ計算すれば、時間もかかりますし、入力ミスも起きます。
KAZUは考えました。
そこで、最初の仕事を渡します。
const 商品名 = "洗剤";
const 単価 = 300;
const 数量 = 2;
const 金額 = 単価 * 数量;JavaScriptくんの返事は、こうです。
ここで大事なのは、単に「300 × 2」と書いていないことです。
商品名、単価、数量、金額。
数字に意味のある名前を付けています。
たとえば、次のコードでも計算はできます。
const a = 300;
const b = 2;
const c = a * b;でも、数日後に見たとき、aが何で、bが何だったのか思い出せるでしょうか。
仕事でも、「あれ」「それ」「いつものやつ」では、新しく入った人には伝わりません。
プログラムも同じです。
「単価」「数量」のように意味が分かる名前を付けておけば、人が読み直したときにも分かりやすくなります。
今回のポイント：JavaScriptに仕事を頼むときは、数字だけでなく「何の数字なのか」まで名前を付ける。
ところが、ここでKAZUは一つ気づきました。
そうです。
JavaScriptくんが頭の中で600円と計算しても、画面に出さなければ、使う人には分かりません。
次は、計算結果を画面へ出してもらいます。
JavaScript講座・全10回 / 第4回 / 2ページ目（全3ページ）
掲載日：2026年9月13日
KAZUは、JavaScriptくんにもう一度頼みました。
ここで、HTMLさんの出番です。
HTMLさんは、結果を表示する場所を用意します。
<p id="結果">ここに金額が出ます</p>「結果」という目印を付けました。
するとJavaScriptくんは、その場所を探して文字を書き換えます。
document.getElementById("結果").textContent =
商品名 + "：" + 金額 + "円";画面には、
洗剤：600円
と表示されます。
| 担当 | 仕事 |
|---|---|
| HTMLさん | 結果を表示する場所を作る |
| JavaScriptくん | 計算して、その場所の文字を書き換える |
ここで、前回の第1回と同じ考え方が出てきます。
画面の部品があることと、その部品が動くことは別です。
HTMLで表示場所を作り、JavaScriptでそこに結果を入れる。
この役割分担がつながって、初めて利用者に結果が伝わります。
ここまでの仕事を、3つに分けるとこうなります。
KAZUは、発注システムの画面を思い出しました。
ここで、また一つ問題が出ます。
利用者が数量に「2」ではなく、空欄や文字を入れたらどうなるのでしょう。
JavaScriptくんは、指示されたとおり計算しようとします。
でも、正しく計算できない入力なら、こちらで止める仕組みが必要です。
次は、動く機能を「使える機能」に近づけます。
JavaScript講座・全10回 / 第4回 / 3ページ目（全3ページ）
掲載日：2026年9月13日
KAZUは、数量入力欄を作りました。
1、2、3……と数字を入れれば、計算できます。
ところが、試しに空欄のままボタンを押してみました。
今度は文字を入れてみます。
ここで分かるのは、正しい入力だけで動作確認してはいけないということです。
実際の利用者は、こちらが想定したとおりに入力してくれるとは限りません。
空欄かもしれない。0かもしれない。マイナスの数字かもしれない。文字かもしれない。
そこで、計算する前に確認します。
const 数量 = Number(入力欄.value);
if (!Number.isFinite(数量) || 数量 < 0) {
結果.textContent = "数量を正しく入力してください";
} else {
結果.textContent = "合計：" + (単価 * 数量) + "円";
}今は細かい記号を全部覚えなくても大丈夫です。
やっていることは、
という3段階です。
| 入力 | 確認すること |
|---|---|
| 1 | 300円になるか |
| 2 | 600円になるか |
| 0 | 0円として扱うか、入力を促すか |
| 空欄 | エラー表示になるか |
| 文字 | 間違った金額を出さないか |
KAZUは、ここで少し考え方が変わりました。
これが、実際に使うプログラムを作るときの大切な確認です。
第4回まとめ：JavaScriptくんは計算が速い。ただし「何を入力として受け取るか」「間違った入力をどう扱うか」は、人が決めてあげる必要があります。
次回は、JavaScriptの中で何度も登場する「変数」にもう少し踏み込みます。
JavaScriptくんの机の上には、名前の付いた箱が並び始めます。
JavaScript講座・全10回 / 第5回 / 1ページ目（全3ページ）
掲載日：2026年9月13日
電卓係として働き始めたJavaScriptくん。
今度は、KAZUが在庫の数字を管理してほしいと頼みます。
let 在庫 = 3;ここで登場するのが、変数です。
初心者向けには「名前付きの箱」と説明されることがあります。
「在庫」という名前の箱に3が入っている、と考えるとイメージしやすいからです。
そして1本使ったので、こうします。
在庫 = 在庫 - 1;すると、在庫は2になります。
KAZUは少し不思議に思いました。
確かに、数学の「=」なら左右が等しいという意味です。
でもJavaScriptでは、ここでの「=」は右側を計算して、その結果を左側へ入れるという意味です。
「今の在庫3から1を引いて、その結果2を、在庫という名前に入れ直す」。
そう読むと理解しやすくなります。
ただし、ここでも第1回と同じ注意があります。
棚から本当に1本使っただけでは、JavaScriptの在庫は勝手に2にはなりません。
人がボタンを押す、数量を入力する、バーコードを読むなど、現実の変化をプログラムへ伝える仕組みが必要です。
今日の第一歩：変数は、現実の情報をプログラムの中で扱うための「名前付きの値」。現実が変わったら、その変化をプログラムにも伝える。
JavaScript講座・全10回 / 第5回 / 2ページ目（全3ページ）
掲載日：2026年9月13日
JavaScriptくんの机には、いろいろな情報が並び始めました。
現在の在庫、最低在庫、税率、数量。
KAZUは全部同じように作ろうとしました。
let 税率 = 0.10;
let 最低在庫 = 2;
let 数量 = 1;これでも動きます。
でも、AIが一つ質問しました。
そこで、変えないものは const、変わるものは let と考えてみます。
const 税率 = 0.10;
const 最低在庫 = 2;
let 数量 = 1;constで作った名前に、あとから別の値を再代入しようとするとエラーになります。
const 最低在庫 = 2;
最低在庫 = 5; // エラー一方、letなら変更できます。
let 数量 = 1;
数量 = 2;最初は、何でもletにした方が自由で便利に見えます。
でも、変える必要のない値まで変えられると、後から思わぬところで書き換わる可能性が増えます。
仕事でも、変更してよい欄と、勝手に変えてはいけない基準があります。
プログラムでも同じです。
設計のコツ：文法を覚えるより、「この値は途中で変わるのか？」と考える習慣を持つ。
JavaScript講座・全10回 / 第5回 / 3ページ目（全3ページ）
掲載日：2026年9月13日
ある日、KAZUは少し前に書いたコードを見返しました。
const a = 300;
const b = 2;
const c = a * b;書いた本人なのに、分かりません。
そこで、名前を変えてみます。
const 単価 = 300;
const 数量 = 2;
const 合計金額 = 単価 * 数量;今度は、コードを読むだけで意味が分かります。
これは小さな違いですが、コードが長くなるほど効いてきます。
プログラムは、機械が実行できればいいように見えます。
でも実際には、人間も何度も読みます。
不具合が出たとき。機能を追加するとき。数週間後に続きを作るとき。
そこで、名前の付け方が重要になります。
たとえば発注システムなら、
のように、意味が分かる名前にしておくと、後で見直しやすくなります。
もちろん、短い名前が必ず悪いわけではありません。
ただ、初心者のうちは、意味の分かる名前を付けた方が、自分でコードを説明しやすくなります。
その通りです。
第5回まとめ：変数は値を扱うための仕組み。大切なのは、何を表す値か、途中で変わるか、名前を見て意味が分かるかです。
次回は、JavaScriptくんに「判断」をもっと本格的に任せます。
そして、たった1文字の記号が結果を逆にしてしまう怖さも体験します。
JavaScript講座・全10回 / 第6回 / 1ページ目（全3ページ）
掲載日：2026年9月13日
KAZUは、在庫管理のルールをJavaScriptくんに説明しました。
コードはこうなります。
if (在庫 <= 2) {
表示 = "発注が必要です";
}ここで使われている <= は「以下」です。
つまり、2本ちょうども含みます。
ところが、KAZUは試しにこう書き換えました。
if (在庫 < 2) {
表示 = "発注が必要です";
}今度は「2本未満」です。
すると、在庫が2本のときには発注の表示が出ません。
JavaScriptくんは間違っていません。
書かれた指示どおりに動いています。
間違えたのは、人間側の条件です。
条件式を書く前に、日本語でルールを書いてみます。
ここまで書けば、「2を含める」ことがはっきりします。
第6回の第一歩：記号から考えず、先に「どの数字なら、どの結果にしたいか」を決める。
JavaScript講座・全10回 / 第6回 / 2ページ目（全3ページ）
掲載日：2026年9月13日
KAZUは、在庫0本と10本でテストしました。
0本なら「発注が必要です」。
10本なら「在庫は足りています」。
どちらも正しく見えます。
KAZUは、そこで初めて境目を試します。
| 在庫 | 期待する結果 |
|---|---|
| 1本 | 発注が必要 |
| 2本 | 発注が必要 |
| 3本 | 在庫は足りている |
もし条件が 在庫 < 2 なら、2本のところだけ間違います。
0本と10本しか試していなければ、このバグには気づけません。
条件分岐では、切り替わる境目の数字が特に重要です。
最低在庫が2なら、
を試します。
これは、発注システムだけではありません。
「18歳以上」「100点未満」「期限まで3日以内」など、条件があるところでは同じ考え方が使えます。
テストのコツ：条件の境目、その1つ下、その1つ上。この3つをまず試す。
JavaScript講座・全10回 / 第6回 / 3ページ目（全3ページ）
掲載日：2026年9月13日
在庫表示を、もっと分かりやすくしたいとKAZUは考えました。
0本なら「在庫切れ」。
1〜2本なら「発注が必要」。
3本以上なら「在庫あり」。
JavaScriptくんに頼みます。
if (在庫 === 0) {
表示 = "在庫切れ";
} else if (在庫 <= 2) {
表示 = "発注が必要";
} else {
表示 = "在庫あり";
}ここで重要なのは、条件の順番です。
0本は「2本以下」にも当てはまります。
だから、先に「0本か」を確認しています。
もし「2本以下」を先に書けば、0本でも「発注が必要」となり、「在庫切れ」という特別な表示まで進みません。
KAZUは、紙にこう書きました。
| 在庫 | 表示 | 色 |
|---|---|---|
| 0 | 在庫切れ | 赤 |
| 1〜2 | 発注が必要 | 黄 |
| 3以上 | 在庫あり | 緑 |
先に表があれば、コードにしたときの確認もしやすくなります。
これは、現在作っている在庫管理の「緑・黄・赤」の考え方にもつながります。
第6回まとめ：if文は「判断」を任せる仕組み。大切なのは、条件の意味、境目の確認、そして複数条件の順番です。
次回は、商品が増えてきます。
KAZUはJavaScriptくんに100個の商品の確認を頼もうとします。
そして、「同じことを100回書くの？」という問題にぶつかります。
JavaScript講座・全10回 / 第7回 / 1ページ目（全3ページ）
掲載日：2026年9月13日
ある日、KAZUは商品一覧を見ながら考えていました。
洗剤、ゴミ袋、手袋、ペーパータオル……。
商品が増えてきました。
KAZUは、最初こう書こうとしました。
console.log("洗剤");
console.log("ゴミ袋");
console.log("手袋");3個なら書けます。
でも、100個なら100行です。
そこで、商品を一つの一覧にまとめます。
const 商品 = ["洗剤", "ゴミ袋", "手袋"];そして、順番に取り出します。
for (const 名前 of 商品) {
console.log(名前);
}JavaScriptくんは、洗剤、ゴミ袋、手袋と順番に処理します。
商品が10個になっても100個になっても、同じ仕組みで進められます。
プログラムの強みの一つは、同じ手順を何度でも繰り返せることです。
人は100回同じ確認をすると疲れます。
JavaScriptくんは、100回でも1000回でも、同じ指示なら同じように実行します。
第7回の第一歩：同じ形の処理を何度も書き始めたら、「繰り返しにできないか」を考える。
JavaScript講座・全10回 / 第7回 / 2ページ目（全3ページ）
掲載日：2026年9月13日
次は、商品の金額を合計します。
const 金額一覧 = [300, 500, 200];
let 合計 = 0;
for (const 金額 of 金額一覧) {
合計 = 合計 + 金額;
}正しい合計は1000円です。
ところが、ある日、KAZUが作った計算では結果が合いません。
そこで、JavaScriptくんに途中経過を報告してもらいます。
for (const 金額 of 金額一覧) {
合計 = 合計 + 金額;
console.log("途中の合計", 合計);
}表示は、
と進みます。
もし2回目で急におかしくなれば、その周辺を調べればよいと分かります。
これは、デバッグの基本的な考え方です。
「最終結果が違う」だけでは、原因の場所が分かりません。
途中の値を見えるようにすると、どこまでは正しく、どこからおかしいかを絞り込めます。
確認のコツ：結果が違ったら、途中の値を表示して「どこから違うか」を探す。
JavaScript講座・全10回 / 第7回 / 3ページ目（全3ページ）
掲載日：2026年9月13日
JavaScriptくんは、繰り返し処理が得意です。
でも、その便利さには注意も必要です。
もし条件を間違えたまま100件を処理すれば、100件まとめて間違えます。
KAZUは、発注が必要な商品だけを出す処理を作ります。
for (const 商品 of 商品一覧) {
if (商品.在庫 <= 商品.最低在庫) {
console.log(商品.名前 + "：発注");
}
}ここでは、商品を1件ずつ取り出し、その商品の在庫と最低在庫を比較しています。
正しければ、とても便利です。
でも、もし比較記号を逆に書けば、在庫が十分ある商品ばかり発注対象にするかもしれません。
いきなり100件の本番データで試すより、まず3件だけ用意します。
| 商品 | 在庫 | 最低在庫 | 期待 |
|---|---|---|---|
| 洗剤 | 1 | 2 | 発注 |
| 手袋 | 5 | 2 | 発注不要 |
| ゴミ袋 | 2 | 2 | 発注 |
これなら、
を一度に確認できます。
JavaScriptくんの得意なところと、怖いところが同じ場所にあります。
速く、何度でも、同じ処理をする。
正しい指示なら強力です。
間違った指示でも、やはり高速です。
第7回まとめ：繰り返しは、大量の同じ作業を任せる仕組み。小さいデータで確認し、条件と途中経過を見てから件数を増やす。
ここまでで、JavaScriptくんには「計算」「値の保持」「判断」「繰り返し」という仕事を任せられるようになりました。
少しずつ、単なるボタンの動きから「システムらしい処理」へ近づいてきました。
編集後記は、過去の内容を消さず、1回ごとに別ページとして残していきます。
KAZU × AI 編集後記
私はプログラマーではありません。介護の仕事をしながら、「仕事の中の面倒な作業を、もっと簡単にできないだろうか」と考えたことが、プログラミングに興味を持つきっかけでした。
システムを試作していくうちに、プログラムを作ること自体が面白くなってきました。そこで思いついたのが、初心者がゼロから一緒に学べるホームページです。
完成した教材だけを並べるのではありません。私自身が分からないところから始め、AIに質問し、実際に作り、失敗し、直していく。その過程まで記事にしてしまおうと考えました。
ホームページの骨格。
服装や見た目。
動作や判断。
この3つの役割を知ったことで、「ホームページは一つの言語だけで作るわけではない」ということが少しずつ見えてきました。
最初の試作では、見た目はホームページらしくなりました。しかし実際に触ってみると、画面はあるのにボタンや機能が十分に動きませんでした。
ここで初めて、「見た目ができること」と「システムとして動くこと」は別だと実感しました。そこでJavaScriptを使い、記事画面の切替、ボタン、ミニテスト、学習進捗、用語検索などを実際に動かすようにしました。
日本だけでなく海外の初心者にも読んでもらえる可能性を考え、言語切替を付けることにしました。最初は日本語と英語から始めました。しかし、ここでも簡単にはいきませんでした。
言語を選んでも表示が変わらない。調べると、古い翻訳処理と新しい翻訳処理を重ねて追加したことで、JavaScriptの定義が重複し、処理全体が止まる原因になっていました。
翻訳部分だけを継ぎ足して直すのではなく、一度整理して一つの仕組みにまとめ直しました。すると言語切替が動くようになりました。不具合が出たとき、目の前だけ直すより、構造自体を整理した方がよい場合があることを学びました。
現在の試作では、日本語、英語、フランス語、スウェーデン語、中国語、韓国語、ミャンマー語、インドネシア語、タイ語を選べる形にしています。
すると次は、メニューや見出しは切り替わるのに、一部だけ日本語が残る問題が出ました。表示されている文章の中に、翻訳データへ登録していないものがあったためです。そこで画面の文章を見直し、翻訳対象をまとめて管理する方向へ修正しました。
大学では経営情報を学び、コンピューターや情報処理についても一通り勉強しました。ただ、その頃は、学んだことを自分の生活や仕事に取り入れようとは、あまり考えていませんでした。勉強したことと、毎日の暮らしや仕事が、自分の中ではまだつながっていなかったのだと思います。
介護の仕事を続ける中で、入力や確認、集計など、「もう少し簡単にできないだろうか」と感じる場面が出てきました。消耗品の在庫を確認して発注につなげること。献立から必要な材料をまとめ、買い出しに使える形にすること。作りたいものが、仕事の中から具体的に見えてきました。
そこで初めて、大学で学んだことを、自分のためにも仕事のためにも使ってみようと思うようになりました。昔の知識をそのまま取り出せば、すぐに作れるというわけではありません。それでも、以前の学びを、今の経験と結びつけながら確かめ直すことはできます。
50代になった今、昔まいた種がようやく芽を出したような感覚があります。使っていなかった知識を掘り起こし、今の自分の経験と結びつけて、もう一度ゼロ地点から形にしていく。それが、今の自分にとっての「ゼロから始めるプログラム言語」なのだと思います。
実際にプログラムを作り始めて、一番最初に感じたのは、「思っていたプログラミングとは少し違う」ということでした。難しい言葉やコードを覚えることだけでなく、まず「どうしたいのか」を考えることが必要でした。
「ここをこうしたい」「このボタンがあった方が使いやすい」「入力するより選べた方が簡単ではないか」「一度入力したものを別の画面にも反映できないか」。普段の仕事で感じていた小さな不便が、プログラムを作る材料になりました。
もちろん、画面ができたからといって、すぐに思いどおりに使えるわけではありませんでした。ボタンを押しても動かない。入力した内容が別の画面に出ない。表示や印刷の形が思っていたものと違う。実際に使って初めて気づくことが、いくつもありました。
一つずつ動かし、どこがおかしいのかを確かめ、直して、もう一度使ってみる。直ったときには「あ、本当に動いた」と感じます。思っていたことが目の前で形になるところに、面白さがありました。
プログラムを作り始めてから、少しずつ自分の強みに気づくようになりました。仕事の中で、どこが面倒なのか、どの確認に手間がかかるのか、どんな表示なら使いやすいのか。そうしたことを、自分の経験から具体的に考えられることです。
見た目が整っていても、必要な内容が反映されなければ困ります。ボタンがあっても動かなければ使えません。自分が使う場面を思い浮かべるからこそ、「ここは変だ」「ここを直したい」と伝えることができます。
分からない技術は、AIに聞きながら確かめています。一方で、何を作りたいか、どこを直したいか、使ってみてどう感じたかは、自分の側から伝えなければなりません。経験を言葉にし、実際の画面で確かめる。その役割を、少しずつ意識するようになりました。
大学時代、僕はコンピュータや経営情報について一通り勉強しました。その当時は、授業として必要なことを学んでいるという感覚が強く、それを自分の生活や仕事に取り入れようとは、あまり考えていませんでした。
今は、先に生活や仕事の課題があります。「この作業を少し簡単にしたい」「必要な情報を分かりやすく見たい」。そのために何が必要なのかを調べ、試しています。学ぶ理由が、自分の日常の中にできました。
大学での学びと、仕事で積み重ねた経験。そして、分からないことを聞きながら形にしていけるAIとのやり取り。それぞれが、今になってつながり始めています。
一回の作業は、「技術面を3項目」「構成を3項目」「僕のことを3項目」。番号を振って、少しずつ進める方針にしました。技術の話だけに偏らず、ページの構成と、その中で何を伝えるかも一緒に考えていきます。
原則として毎日1時間ずつ作業し、2026年10月11日ごろの公開を目指します。技術を一度に大きく変えすぎると、自分でも分からなくなってしまいそうです。今あるものを動かして確認しながら、必要なところを足していきたいと思っています。
プログラムの型も大切ですが、中に何を載せるのかが肝心です。僕が何を考え、どう学び、仕事や生活でどう使おうとしているのか。その内容を、一つずつ積み重ねていきたいと思います。
2026年9月11日現在、サイトは基本構造を作る第1段階の終盤から、全体を仕上げる第2段階の入口にいます。記事、画面移動、動くボタン、進捗保存、ミニテスト、用語集、ヘルプ、スマホ表示、9言語対応の土台まで作ってきました。
まだ完成ではありません。記事追加、翻訳確認、連絡手段、プライバシーポリシー、SEO、公開環境でのテストなどが残っています。
目標は2026年10月11日前後にv1.0を公開することです。仕事をしながら少しずつ進めるからこそ、専門家ではない人間がAIと一緒にどこまで作れるのか、その過程自体を残していきたいと思っています。
KAZU × AI 編集後記
ホームページを作っているうちに、「インターネット上に家を建てるようなものだ」という感覚が強くなってきました。
最初は、一軒の小さな家でいい。記事が一つ増えれば、そこにもう一つ部屋ができる。別のテーマが増えれば、隣にもう一軒建つ。そうやって少しずつ広げていけば、やがて一つの町のようになっていくのかもしれません。
今あるのは、まず「学ぶ場所」です。記事を読み、用語を確認し、実際にコードを触る。
その次には、「作る場所」ができます。実際に作ったプログラムや、試作品、失敗から直した過程を置く工房です。
そして12月の課題として、「画廊」を作りたいと思っています。完成した画面だけではなく、最初の案、修正途中、完成版まで並べれば、作品そのものと制作の過程の両方を見せられます。
さらに先には、Facebookのように人同士が交流できる構造も考えられます。ただし、最初から大きなSNSを作る必要はありません。
学習記録を投稿する。作品を画廊に載せる。ほかの人がコメントする。まずは、このサイトに必要な機能だけを持つ小さな交流広場から始めればいい。
9月から10月は本体サイトを作り、公開まで持っていく。11月は、記事や導線を整える。12月は画廊。2027年に入ったら、小さな交流機能を試す。
一気に完成させるのではなく、一つ完成させてから次へ進む。建物を一軒ずつ増やすように進めれば、途中の成果も残ります。
サイトが育てば、広告、教材、テンプレート、小規模なツールなど、収益化につなげることもできます。ただし、先にお金だけを目的にするのではなく、まず人が読みたくなる内容と、実際に役立つものを蓄積することが大切だと思っています。
今はまだ町の入口です。まず一軒目をしっかり建てる。そして、次の一軒を増やす。その積み重ねを続けていきます。
JavaScript講座・全10回 / 第3回 / 1ページ目（全3ページ）
掲載日：2026年9月12日
ある日、数人さんの職場に、新しい助手がやってきました。
名前は「JavaScriptくん」。
この助手、とにかく計算が速い。商品が100個あっても、同じ手順の計算を延々と続けられます。
ただし、仕事を頼むにはコツがあります。
数人さんが言いました。
「洗剤、そろそろ少ないから、いい感じにしておいて」
JavaScriptくんは動きません。
さぼっているのでしょうか。
いいえ。「そろそろ」「少ない」「いい感じ」の具体的な意味が、プログラムに書かれていないからです。
そこで、指示を変えます。
「洗剤の在庫が2本以下だったら、画面に『発注してください』と表示して」
これなら、動く仕組みを作れます。
const 在庫 = 1;
if (在庫 <= 2) {
alert("洗剤を発注してください");
}今は記号を覚えなくても大丈夫です。書いてあることは、次の3つです。
プログラミングの第一歩は、曖昧なお願いを、実行できる手順に変えることです。
これは、職場の引き継ぎにも似ています。
「いつものようにお願いします」では、初めて担当する人には伝わりません。
「食事が終わったら食器を下げて、テーブルを拭いてください」なら、行動に移しやすくなります。
数人さんが発注システムについて決めた、
「最低在庫数に達したら、発注が必要と分かるようにする」
というルール。それは、まさにプログラムに必要な指示です。
コードを書き始める前から、設計は始まっています。
ただし、JavaScriptくんには棚を見る目はありません。
棚から洗剤を1本使っても、それだけでは画面の数字は変わりません。人が使用数を入力するなど、現実の変化を伝える仕組みが必要です。
計算を任せることと、現実の情報を集めることは、別々の仕事なのです。
JavaScript講座・全10回 / 第3回 / 2ページ目（全3ページ）
掲載日：2026年9月12日
今度は、発注画面を一つ作ることにします。
登場するのは、3人の担当者です。
| 担当者 | 主な仕事 | 発注画面では |
|---|---|---|
| HTMLさん | 部品を用意する | 商品名・入力欄・ボタンを置く |
| CSSさん | 見た目を整える | 色・文字の大きさ・配置を調整する |
| JavaScriptくん | 動作を受け持つ | 計算して、結果を表示する |
HTMLさんが「発注する」というボタンを置きました。
CSSさんが、ボタンを見やすい緑色にしました。
立派な画面になりました。
ところが、押しても発注処理が始まりません。
そこでJavaScriptくんの出番です。
「このボタンが押されたら、この処理をする」という指示をつなぎます。
まずは、押すと文字が変わる小さな例を見てみましょう。
<button onclick="返事する()">呼び出す</button>
<p id="伝言">待機中です</p>
<script>
function 返事する() {
document.getElementById("伝言").textContent =
"はい、何を計算しましょう？";
}
</script>画面には、最初に次のものが出ます。
「呼び出す」ボタンと、「待機中です」という文字です。
ボタンを押すと、文字が変わります。
はい、何を計算しましょう？
このとき、裏側では3つのことが起きています。
functionは、ひとまとまりの仕事に名前を付けるための書き方です。
ここでは、その仕事を「返事する」と名付けました。
id="伝言"は、画面の部品に付けた目印です。
職場で「そこの書類を取って」と言われても、書類が何枚もあれば迷いますよね。
「発注書と書かれたファイルを取って」なら、探す対象が分かります。
JavaScriptも同じです。画面のどの場所を変えるか、目印を使って指定できます。
ここまで分かると、以前の「ボタンが反応しない」という問題の見方が変わります。
見た目が完成していても、呼び出す処理の名前が違っていたり、途中でエラーが起きていたりすると、目的の動作にはつながりません。
画面があることと、仕事の流れがつながっていることは、それぞれ確認が必要です。
JavaScript講座・全10回 / 第3回 / 3ページ目（全3ページ）
掲載日：2026年9月12日
では、JavaScriptくんに発注の判断を一つ任せましょう。
今回は、次のルールです。
洗剤の在庫が2本以下なら、「発注が必要です」。3本以上なら、「在庫は足りています」。
コードにすると、こうなります。
const 在庫 = 1;
const 最低在庫 = 2;
if (在庫 <= 最低在庫) {
alert("発注が必要です");
} else {
alert("在庫は足りています");
}急に難しそうに見えるかもしれませんが、順番に読むと単純です。
const 在庫 = 1;「在庫」という名前を付けて、数字の1を扱います。
こうして情報に名前を付けると、数字だけを並べるより意味が分かりやすくなります。こうした名前付きの情報を扱う仕組みが「変数」です。なお、constで作った名前には、後から別の値を代入できません。
if (在庫 <= 最低在庫)「もし、在庫が最低在庫以下なら」という意味です。
<=は「以下」。今回なら、2本ちょうども含みます。
else「そうでなければ」という意味です。
今回は、在庫が2本以下ではない場合に「在庫は足りています」と表示します。
これで、在庫数によって返事が変わるようになりました。
動作を確かめてみましょう。
| 入れた在庫数 | 出てほしい結果 |
|---|---|
| 0本 | 発注が必要です |
| 1本 | 発注が必要です |
| 2本 | 発注が必要です |
| 3本 | 在庫は足りています |
| 10本 | 在庫は足りています |
ここで、数人さんがわざと記号を変えたとします。
if (在庫 >= 最低在庫)>=は「以上」です。
すると、10本あるのに「発注が必要です」と言い、0本なのに「在庫は足りています」と言ってしまいます。
JavaScriptくんは、胸を張って報告します。
「指示どおりに実行しました！」
たしかに、書かれた指示には従っています。でも、頼みたかった仕事とは逆です。
これが、動いてはいるけれど、結果が間違っている不具合です。
だから確認するときは、「何か表示された」で終わりにせず、「この数字なら、この結果になるはず」と比べます。
特に今回は、境目の2本と3本を確かめると、ルールの間違いを見つけやすくなります。
なお、この例は学習用です。本物の入力画面では、空欄やマイナスの数字が入った場合も考えます。それは、基本の動きを理解してから追加していきましょう。
今日の持ち帰りは、3つです。
次回は、この助手に「商品名」「単価」「数量」を渡します。
いよいよJavaScriptくん、電卓係に就任です。
KAZU × AI 編集後記
Cloudflareで最初の公開に成功したとき、KAZUは画面を見ながら、しばらくそのURLを眺めていました。
それまでのホームページは、自分の端末の中にあるファイルでした。
HTMLを直し、CSSを整え、JavaScriptを動かす。何度も失敗しながら、少しずつ形にしてきました。
でも、その日から意味が変わりました。
「自分の中だけの作品」から、「外から見られるサイト」になった。
公開できたのだから、あとは記事を増やしていけばいい。
KAZUはそう思っていました。
しかし、実際にはそう簡単ではありませんでした。
新しいファイルを作ったのに、公開ページは古いまま。
どのファイルをアップロードしたのか。
最新版はどれなのか。
Cloudflareのどの画面から更新するのか。
公開前とは違う種類の迷いが増えていきました。
ここで初めて、ホームページには二つの仕事があると気づきました。
一つは、ページそのものを作る仕事。
もう一つは、作ったものを公開し、更新し、壊れていないか確認する仕事です。
そこで、動いていた版を消さずに残すことにしました。
v0.67、v0.68、v0.84……。
最新版を作るたびに、前の成功版を保存する。
公開するときだけ、最新版を index.html として使う。
このルールができてから、更新の怖さが少し減りました。
もし新しい版で失敗しても、戻れる場所があります。
さらに、記事を増やすときにも問題が出ました。
同じ内容を追加し直せば、記事が重複する。
新しい編集後記を上書きすれば、過去の記録が消える。
機能を直したつもりが、別の機能を壊すこともある。
そこで、KAZUは更新のたびに確認することを決めました。
前の内容が残っているか。重複していないか。新しい内容だけが増えているか。
公開した日が完成日ではありませんでした。
むしろ、その日からサイトは「育てるもの」になりました。
KAZU × AI 編集後記
最初のころ、KAZUは画面が動くたびにうれしくなりました。
ボタンを押すと画面が変わる。
用語を検索できる。
翻訳ボタンが動く。
ミニテストが進む。
ところが、ある日、記事一覧を見ていて気づきました。
機能は増えていました。
でも、読む記事が少ない。
用語集も、検索機能があっても中身が少なければ意味がありません。
翻訳機能があっても、翻訳する文章そのものが少なければ広がりません。
ここで、KAZUは一つ大きなことに気づきました。
プログラムは器であって、サイトの価値そのものではない。
用語集なら、検索機能と237語の中身がそろって初めて役に立つ。
ミニテストなら、ボタンが動くだけではなく、問題・ヒント・理由があって学習になります。
JavaScript講座も、コードだけを並べるのではなく、なぜそれを使うのか、どこで失敗するのか、どう直したのかまで書くことで、初心者が読み続けやすくなります。
ここで、さらに面白いことに気づきました。
今まで困ったことの多くが、そのまま教材になります。
翻訳が動かなかった。
用語検索が反応しなかった。
Cloudflareでどこを押すか分からなかった。
公開したのに反映されなかった。
サイトマップが最初は取得できなかった。
そのときは「失敗」でした。
でも、順番に整理すれば、初心者が同じところで迷ったときの案内になります。
このサイトの強みは、専門家が完成した知識だけを教える形ではありません。
KAZU自身が、分からないところから始めています。
だから、
「ここが分からなかった」
「ここで間違えた」
「こうしたら直った」
という過程を、そのまま残せます。
この頃から、KAZUの中でサイトの作り方が少し変わりました。
新しい機能を一つ追加するだけでなく、記事を一つ増やす。
新しい用語を足す。
編集後記で制作の裏側を残す。
技術と内容を、一緒に育てる。
KAZU × AI 編集後記
最初にHTMLを触り始めたころ、KAZUはまだ自分がここまで来るとは思っていませんでした。
ホームページの骨組みがHTML。
見た目を整えるのがCSS。
動きを付けるのがJavaScript。
一つずつ聞きながら、確かめながら進めていました。
そんな気持ちが出ることもありました。
学校では、今の若い世代が普通にプログラミングを学ぶ時代です。
「自分はずいぶん遅れて始めたんだな」と感じる瞬間もありました。
KAZUには、ただ勉強するだけではなく、作りたいものがありました。
仕事で使える発注システム。
献立から材料を拾い出す食材システム。
そして、初心者が一緒に学べるホームページ。
先に課題があったから、学ぶ理由がはっきりしていました。
大学では経営情報を学び、コンピューターや情報処理にも触れていました。
でも、その頃は、学んだことを自分の生活や仕事に取り入れるという発想は強くありませんでした。
知識は知識。
仕事は仕事。
別々に存在していました。
それが50代になった今、つながり始めました。
もちろん、順調だったわけではありません。
ボタンが動かない。
翻訳されない。
最新版がどれか分からない。
Cloudflareの画面で迷う。
サイトマップがうまく読まれない。
何度も「どこ？」「なぜ？」と止まりました。
でも、そのたびに画面を確認し、やり直し、少しずつ前へ進みました。
完璧に理解してから進んだのではありません。
進みながら理解した。
そして、Cloudflareで公開されたページを実際に開いたとき。
そのとき、学習が「勉強」だけではなくなりました。
自分で作ったものを、インターネット上に置いた。
その経験が残りました。
若いときに資格を取れば、良い環境に入りやすいかもしれません。
でも、年齢を重ねてからでも、実際に作り、公開し、直し続けることはできます。
大事なのは、一度に全部覚えることではありません。
分からないところを一つずつ潰していく。
毎日少しずつ積み重ねる。
そして、実際に動くものを残す。
コードは、年齢を見ません。
正しければ動く。
間違っていれば動かない。
その厳しさと分かりやすさが、今は面白く感じられます。
KAZU × AI 編集後記
その日の朝、KAZUの手元にあったのは、一つの index.html でした。
見た目も整ってきた。
記事もある。
用語集も動く。
翻訳も付けた。
でも、まだそれは自分の端末の中にあるだけでした。
ここから、「ホームページを作る」作業が、「ホームページを公開する」作業へ変わりました。
最初に迷ったのは、どのファイルを公開するのかでした。
制作途中の版はいくつもあります。
v0.67、v0.68、v0.84……。
そこで、過去版は版名付きで保存し、公開用だけ index.html にすることにしました。
このルールが、後の更新でも基準になりました。
Cloudflareの管理画面を開きます。
Workers & Pages。
そして、zero-kara-prog。
ところが、画面にはたくさんの項目があります。
概要。
デプロイ。
設定。
ドメイン。
どれも、それらしく見えます。
何度か画面を行き来しながら、ようやく「公開したサイトを更新する場所」が見えてきました。
更新しようとしていると、「アプリケーションを作成する」という画面も出てきます。
一瞬、KAZUは考えました。
既存の zero-kara-prog を開く。
そして、
「デプロイ」→「新しいデプロイ」
へ進む。
これが、更新の入口でした。
最新版のindex.htmlを選び、デプロイします。
しばらく待つと、更新が完了します。
でも、ここで終わりではありません。
公開URLを開いて、本当に新しくなったか確認します。
ここで初めて、「デプロイ成功」と「公開ページが正しい」がつながりました。
途中で、「有効なURLがありません」と見える場面もありました。
ファイルは置いたのに、外から見る住所が有効になっていない。
そこで設定のドメイン画面を開き、プロダクションの
zero-kara-prog.mmdei.workers.dev
を有効にしました。
まさに、そんな感覚でした。
公開できたあと、次に考えたのは検索です。
URLを知っている人だけが来るのではなく、Googleにも見つけてもらいたい。
そこで、robots.txt と sitemap.xml を用意しました。
sitemap.xmlをブラウザで開くと、見慣れない英語が表示されます。
「壊れているように見えるもの」が、実は正常。
ここでも、実際に確認しながら一つ覚えました。
Google Search Consoleへサイトマップを送信します。
ところが、最初はうまくいきません。
「取得できませんでした」
そこで、まずsitemap.xmlが直接開けるかを確認しました。
URLから読める。
公開されている。
そのうえで、もう一度送信します。
そして、画面に出た表示は、
「成功しました」
ただの設定画面なのに、その文字が少しうれしく見えました。
次はURL検査です。
トップページのURLを入れます。
しばらく待つと、表示されたのは、
「URL は Google に登録されています」
さらにCloudflareの解析には、GoogleBotのアクセスも見えました。
ここで、インターネット公開が急に現実味を持ちました。
ページを作った。
URLで公開した。
Googleへ知らせた。
そして、Googleが見に来た。
KAZUは、この流れを家づくりにたとえました。
HTMLで家を建てる。
Cloudflareの土地へ置く。
workers.devで住所を付ける。
sitemap.xmlで案内図を作る。
Search ConsoleでGoogleへ知らせる。
最初は「インターネットにつなぐ」という一言しか分かりませんでした。
でも今は、どこを押し、何を置き、どこで確認するのかを順番で説明できます。
ただページを作っただけではありません。
自分の手元のファイルを、世界中からアクセスできる場所へ置くところまで進みました。
KAZU × AI 編集後記
サイトを作り始めたころは、著作権なんてほとんど考えていませんでした。
自分がやっているのは、HTMLを書いて、ボタンを付けて、用語集を作って、ミニテストを増やしているだけ。そんな大げさな話ではないと思っていました。
ところがある日、「翻訳機能って、著作権大丈夫なのかな？」という疑問が出てきます。
例えば、誰かが書いた文章を持ってきて英語にする。
日本語の本を英語にしたら突然持ち主が変わる。そんな魔法があったら出版社は大騒ぎです。
翻訳したから自由に使えるわけではない。ここまでは他人の権利の話でした。
ところが次の瞬間、逆の疑問が出てきます。
編集後記。教材。ミニテスト。用語集。自分で考えた説明。
「あれ？ これ、僕のじゃん」――今さらです。
それまで編集後記は「今日こんなことをやりました」という日記のような感覚でした。でも、文章を考え、言葉を選び、順番を考え、失敗した話まで残しています。
ミニテストも、問題を考え、選択肢を作り、解説を書く。用語集も、難しい言葉をなるべく使わずに説明しようとすると意外に頭を使います。
サイトの中には、少しずつ自分が作ったものが増えていました。
ここで少し調子に乗りかけます。
残念。そんなに甘くありません。
「初心者向けのプログラミングサイトを作る」という発想自体は、誰か一人だけのものにはしにくい。
でも、どう説明するか、どんな文章にするか、どんな図や物語にするか。そこには、その人らしさが出ます。
料理で言えば、「カレーを作る」はみんなできる。でも「自分のレシピや文章まで、そのまま持っていくな」という話です。
文章やイラストの話をしていたら、今度は「名前はどうなる？」という疑問が出てきました。
ここで登場したのが商標です。
家に例えるなら、著作権は家の中に置いた本や絵。商標は玄関の看板。
自分にも独自のブランドがあります。具体的な名称はここでは伏せますが、今後、教材やシステム、別のサービスを同じ看板の下へまとめることも考えられます。
さらに奥の部屋には「特許」がいました。
自動で情報を集める。締切を管理する。エラーを見つける。直し方まで判断する。そうした仕組みが本当に新しい技術として形になれば、特許という世界が関係してくる可能性があります。
もちろん「自動で直ったら便利だよね」だけでは足りません。どう動き、何を見て、どう判断するのかまで具体的にする必要があります。
ある日ネットを見たら、自分の文章、自分のミニテスト、自分の編集後記とよく似たものが別のサイトに並んでいる。
これは嫌です。たぶん最初に「おい」と言います。次に「ちょっと待て」。そのあと「それ僕のやつだろ」です。
だから、いつ作ったか、どのバージョンだったか、どう変更してきたかを残しておくことにも意味があります。
今まで続けてきたバージョン管理や編集後記は、思い出だけでなく「どう作ってきたかの記録」にもなるのです。
作る。公開する。育てる。守る。そして、できれば盗まれない。
プログラムを勉強していたはずなのに、気づけば法律の話までしています。でも、世界へ公開するということは、自分の作品を外へ置くということでもあります。
サイト作りは、まだまだ奥が深い。
KAZU × AI 編集後記
サイトを見ている人には、完成した画面しか見えません。記事がある。ボタンがある。用語集がある。ミニテストがある。
そこへたどり着くまで、裏ではかなりバタバタしています。
記事を一つ作るだけでも、何を書くか決める。資料を集める。書く。直す。もう一回読む。公開日を決める。公開する。終わったと思ったら次の記事が待っています。
そこで一番危険な言葉が出てきます。
便利な言葉です。何も決めなくていい。気持ちも楽です。そして、だいたいやりません。
9月20日までに原稿。22日に確認。24日に公開。こう決めると、急に逃げ道がなくなります。
締切というのは少し怖い。でも、かなり優秀です。
記事Aは20日。記事Bは22日。翻訳確認は23日。公開は24日。用語集更新は25日。
そこでプログラムの出番です。
登録しておけば、「締切まであと3日です」「まだ終わっていません」「今日は確認日です」「公開予定日になりました」と教えてくれます。
しかも文句を言わない。機嫌も悪くならない。淡々と「未完了です」と言ってくる。ある意味、人間より怖い。
昨日と同じ画面に見えても、裏では記事を書き、翻訳し、確認し、修正し、次の公開日を決め、古いデータを残し、次の作業を準備しています。
まるで舞台です。客席から見えるのは役者だけ。でも舞台裏では、衣装、照明、音響、大道具、時間管理、進行が走り回っています。
サイトも同じ。表だけ見れば静か。裏では大騒ぎです。
「いつまで？」と聞かれるのは、できれば避けたいものです。でも、自分でサイトを運営するようになると締切の意味が変わりました。
締切がないと終わらない。期日がないと公開されない。予定がないと次へ進まない。
しかも締切には、「はい、今日はここまで」と止めてくれる役目もあります。線がなければ、もっと直したい、もっと追加したいで、永遠に完成しません。
締切を見て知らせる。未完了を見つける。必要なデータを集める。確認待ちを並べる。公開日になったら準備する。終わったら履歴に残し、次の作業を作る。
ここまでできたら、サイトの中に小さな裏方チームがいるようなものです。
ただし、設定を間違えると全員そろって間違えます。そこは少し怖い。
最初は画面を作ることしか考えていませんでした。今は「どうやって毎週動かし続けるか」まで考えています。
作る。締切を決める。進み具合を見る。記録を残す。公開する。次の仕事を用意する。
これが裏方の仕事です。
家で言えば、壁の中の配線や水道。普段は見えない。でも止まったら大騒ぎ。
どこまで行くのか、自分でも少し分からなくなってきました。でも、かなり面白い。
KAZU × AI 編集後記
ある日、サイトを眺めていて思いました。
記事、ミニテスト、用語集、翻訳、編集後記、LINE、プライバシーポリシー。最初は何もなかった部屋に、少しずつ家具を運び込んできたようなものです。
机。「お、いいじゃん」。椅子。「これも必要」。本棚。「これは絶対いる」。テレビ。「せっかくだから」。観葉植物。「ちょっとオシャレかな」。
サイトも同じでした。機能を増やすのは楽しい。でも、見る人が「記事を読みたい」と思ったとき、どこを押せばいいか分からなければ困ります。
必要なものを、必要な場所に置く。よく使うものは前へ。たまに使うものは少し奥へ。全部を主役にすると、誰も主役に見えません。
家でもサイトでも、「何を置くか」より「何を置かないか」のほうが難しい。
家具屋で気に入ったものを全部買ったら、たぶん家には入りません。機能も、置けばいいというものではありません。
KAZU × AI 編集後記
次に気になったのがボタンでした。
記事、用語集、編集後記、翻訳、LINE、戻る、次へ。いろいろあります。
作った本人には分かります。でも初めて来た人には分かりません。
自分の家に友達を呼んで、「トイレどこ？」と聞かれ、「分かるでしょ」と言っているようなものです。分かるわけがありません。
トイレ、玄関、押し入れ、風呂場。全部同じドアで、全部に「開けてみてください」としか書いてなかったら、かなり困ります。
サイトも「詳しく見る」「こちら」「開く」ばかりでは、どこへ行くか分かりません。
「ミニテストを始める」「用語を調べる」「編集後記を読む」と書いてあったほうが安心です。
重要なボタンは少し目立たせる。戻るボタンは控えめにする。押す前に何が起こるか分かる。それが大事でした。
KAZU × AI 編集後記
パソコンで見ると、サイトはけっこう広い。ボタンも並ぶ。文章もゆったり読めます。
ところがiPhoneで開く。急に部屋が狭くなります。
記事、進捗、ミニテスト、用語集、困ったとき、プロフィール、年間計画、編集後記……。まるでワンルームへ家具を全部持ち込んだ感じです。
パソコン版をそのまま小さくすればいいわけではありません。
文字は小さすぎないか。指で押せる大きさか。ボタン同士が近すぎないか。一番よく使うものが上にあるか。スクロールして迷子にならないか。
「動けばOK」では足りません。使っていて疲れないか。ここまで考えて、ようやくインテリアになります。
サイトのインテリアは一度完成して終わりではありません。記事が増えれば配置も変わる。機能が増えれば整理も必要です。
家だって住み始めてから家具を動かします。サイトも、作って、使って、「あれ？」と思ったら直す。その繰り返しでいい。
豪華じゃなくてもいい。迷わない。疲れない。ちょっと居心地がいい。そんなサイトにしていきたいと思います。
KAZU × AI 編集後記
画面を開いた。最初に出た言葉は、これでした。
HTMLはある。文章もある。ボタンも消えていない。それなのに、どう見てもおかしい。
文字の間隔が妙に広い。カードの位置が落ち着かない。さっき直したはずの場所が、別の画面ではまた崩れている。
ホームページというのは不思議です。完全に壊れているなら、いっそ全部消えてくれた方が分かりやすい。ところがCSSの崩れは、そうはいきません。
一見すると動いている。でも、どこか変です。人間でいえば、普通に歩いているように見えるのに、靴を左右逆に履いているようなものです。
今回のサイトも、まさにそんな状態でした。
HTMLの骨組みは生きている。問題は、その上に着せていたCSSでした。
この時点ではまだ知りませんでした。画面の裏側で、昔のCSSと新しいCSSが、静かに席の取り合いを始めていたことを。
KAZU × AI 編集後記
原因を追い始めると、少しずつ事情が見えてきました。
そこへ最後の大物が登場します。
会議終了。……と思ったら、別の場所にも !important がいました。
最優先が二人いる。もう最優先ではありません。
こちらから見えるのは、その会議の結果だけです。文字が重なる。余白が広がる。カードが変な位置へ行く。ボタンが妙に小さくなる。
ここで一つ分かりました。CSSは、足せば足すほど良くなるわけではありません。良かれと思って追加したものが、あとから邪魔になることがあります。
HTMLが家の骨組みなら、CSSは内装。けれど実際には、壁紙でもあり、照明でもあり、家具でもあり、廊下の幅でもありました。
家具を置きすぎれば歩けません。今回のサイトも、少しそれに近かったのです。
KAZU × AI 編集後記
そこで方針を変えました。
さらに飾るのをやめる。まず、読めるようにする。
PCの本文幅を整える。文字を少し大きくする。行間を広げる。会話欄を見やすくする。カードの高さを無理にそろえない。そして、iPhone側はなるべく触らない。
つまり今回は、デザイン工事というより整理整頓でした。
一つ直す。画面を見る。また直す。もう一度見る。
そして、ようやく画面が戻りました。
短い言葉でした。でも、今日いちばんうれしい言葉でもありました。
今回学んだのは、CSSの書き方だけではありません。
見た目を良くすることと、見やすくすることは同じではない。
飾ることより、読めること。増やすことより、整理すること。
CSSに勝つ必要はありません。CSSと喧嘩しない作り方を覚えればいい。
KAZU × AI 編集後記
HTMLで骨組みを作りました。CSSで内装を整えました。JavaScriptで電気を通しました。
……と思いました。
でも、誰も見に来ません。当たり前でした。家はできている。でも、その家はまだ自分の端末の中にあります。
住所がない。道路もない。
そこで登場したのがCloudflareでした。
最初は名前からして少し強そうでした。Cloud。Flare。なんとなく空から何か降ってきそうな名前です。
でも、実際に使うと役割は分かりやすい。
自分で作った家を、インターネットという街へ持っていき、住所を付けて、人が見に来られるようにする。
index.html を置く。デプロイする。URLを開く。
さっきまで自分の端末の中にしかなかったページが、世界から見られる場所に立っています。
ただし、引っ越して終わりではありませんでした。公開した瞬間から、今度は改修工事が始まりました。
KAZU × AI 編集後記
公開して、直して、確認して。また直す。
文字が重なる。戻るボタンがない。CSSがけんかする。古い指定が残っている。PCとiPhoneで挙動が違う。
そのうち、当然こう思いました。
例えばJavaScriptにページ内を見回らせる。「戻るボタンがない」「同じ要素が重複している」といった問題を確認させる。
Pythonには裏方を任せる。HTMLファイルを読み、同じ修正を複数箇所へ入れたり、決まったパターンをまとめて点検したりする。
CSSは現場の内装担当。HTMLは構造担当。JavaScriptはページの動作担当。Pythonは裏側の作業員。
つまり、「自動修正言語」という一つの魔法の言語があるわけではありません。
複数の言語を組み合わせて、自動修理班を作る。
考えてみれば、ホームページを作っていたはずなのに、気づけば修理会社まで作ろうとしていました。
KAZU × AI 編集後記
「だったら全部自動で直せばいい。」
そう思うと、急に夢が広がります。
でも、自動修正には怖いところがあります。
ロボットに「この部屋、狭いから広くして」と言ったら、壁まで壊すかもしれません。
「ボタンを見やすくして」と言ったら、全部のボタンを巨大化するかもしれません。
これを伝えなければ、PCを直したつもりがiPhoneまで別物になる可能性があります。
実際、今回も「直した」「直ってない」「そこじゃない」を何度か繰り返しました。
ここで大事なことが分かりました。
自動化で最初に必要なのは、プログラムではなく「正しい状態」を決めること。
PCはこう。iPhoneはこう。文字サイズはこれ。このボタンは残す。このページには戻るボタンを付ける。
正解を決めて、その手順を記録し、それからプログラムに覚えさせる。
将来は、HTMLを保存すると自動点検が走り、安全な問題は自動修正し、危険な変更だけ人間が確認する。そして問題がなければCloudflareへ公開する。
そこまで行けば、ホームページの自動修理工場です。
KAZU × AI 編集後記
最初は、もっと簡単な話だと思っていました。
プログラミングのサイトだから、パソコン。コード。キーボード。まあ、その辺だろう。
でも、どうもしっくりきません。
そこで街の写真を見始めました。高い建物。霧の中の街。遠くまで続くビル。
上へ伸びている。遠くまで広がっている。プログラミングで世界が広がる感じにも見えます。
ただ、少し硬い。このままだと「初心者歓迎」というより、「できる人だけ入ってきてください」にも見えます。
それは違う。
そこで光を足した。緑を足した。花を足した。
気がつけば、プログラミングサイトを作っていたはずなのに、庭づくりが始まっていました。
KAZU × AI 編集後記
最初は街でした。
次に、そこへ太陽が出ました。その次に緑が増えました。さらに花が咲きました。
どんどん優しくなる。どんどん明るくなる。
街なのか。庭なのか。学習サイトなのか。旅行ポスターなのか。
だんだん分からなくなってきました。
でも、不思議と嫌ではありませんでした。むしろ、そっちの方が面白い。
プログラミングというと、黒い画面、英数字、難しそう、間違えると怖そう。そんな印象があります。
だったら逆に、花が咲いていてもいい。朝日が差していてもいい。パソコンの横にコーヒーがあってもいい。
コードを書く場所は、もっとやさしくてもいい。
その頃にはもう、「画像を選ぶ」という話ではありませんでした。
このサイトに、どんな空気を流すかを考えていたのです。
KAZU × AI 編集後記
候補の画像を並べてみると、それぞれの性格が見えてきました。
黄色や緑が強く、少し夢の中のようなものは、「始めよう！」と前から引っ張ってくる感じがします。
花と朝の光が自然につながるものは、少し静かです。でも、「まあ、座っていきなよ」と言ってくる感じがあります。
ここでようやく分かりました。
画像には性格がある。
同じサイトでも、画像一枚で先生にも見える。友達にも見える。会社にも、雑誌にも見える。
そして自分が本当に欲しかったのは、「すごいサイトに見せること」だけではありませんでした。
「ここなら自分でも始められそう」と思ってもらうこと。
最初は「ホームページの画像、何にしようかな」でした。
でも最後には、「このサイトは、どんな性格でありたいんだろう」という話になっていました。
画像を決めていたはずなのに、決めていたのはサイトの性格だったのです。
完璧な未来都市でもない。パソコンだけの部屋でもない。
街があり、花があり、光があり、その中に学ぶ場所がある景色。
少し不思議で、少しやさしくて、少し先へ行ってみたくなる。
最後に残ったのは「かっこいい画像」ではありませんでした。
「ここから始めてもいいかも」と思える景色。
それが、このホームページの顔になりそうです。
第48回・記載日：2026年9月26日
KAZU × AI 編集後記
「そろそろ、ちゃんと整理しよう。」
サイトも大きくなってきた。HTML、CSS、JavaScript、画像。最初は数えるほどだったファイルも、気づけばずいぶん増えている。
そこで私は考えた。「きれいに整理すれば、もっと作りやすくなるはずだ。」
フォルダを作る。ファイルを移す。画像もまとめる。CSSもJavaScriptも、それぞれの場所へ。これが「構造化」である。
見た目はきれいになった。「よし。」更新。
……真っ白。
「え？」もう一度更新する。……真っ白。
「なんで？」さっきまで元気に動いていたサイトが、突然しゃべらなくなった。画像もない。デザインもない。ボタンまで怪しい。部屋を大掃除したら、なぜかテレビも冷蔵庫も動かなくなったようなものだ。
そこから復旧作業が始まった。パスを確認。階層を確認。HTMLを見る。CSSを見る。JavaScriptを見る。
一つ直す。「戻った！」と思ったら――画像が出ない。
画像を直す。今度こそ！……別のところが動かない。
「お前たち、さっきまで仲良くやってただろ。」画面に言っても返事はない。
そして、ようやく気づいた。構造化とは、ファイルをきれいに並べることではなかった。
HTMLがCSSを呼ぶ。CSSが画像を呼ぶ。JavaScriptが画面を動かす。全部がつながっている。
つまり構造化とは、「誰が、誰と、どこでつながっているのか」を整理することだった。
この日、サイトは一度壊れた。しかし私の頭の中では、それまでバラバラだったHTML、CSS、JavaScriptが、少しだけ一本につながった。
壊れなければ、たぶん分からなかった。プログラミングとは、なかなか意地悪な先生である。
第49回・記載日：2026年9月26日
KAZU × AI 編集後記
エラーが出る。赤い文字が並ぶ。これは怖い。でも最近は思う。エラーが出るだけ、まだ親切だ。
少なくとも、「ここがおかしいですよ」と教えてくれている。
本当に困るのは――何も起きないときである。
ボタンを押す。……。もう一度押す。……。「おい。」
画像を入れる。出ない。CSSを直す。変わらない。更新する。昨日と同じ。もう一度。同じ。
「お前、何か言え。」
しかし画面は沈黙している。エラーすら出ない。
ここから捜査が始まる。パスか？違う。ファイル名か？違う。CSSか？違う。キャッシュか？……怪しい。古いファイルか？これも怪しい。
一つずつ調べる。直す。更新。ダメ。また直す。更新。ダメ。
そして突然――出た。
「そこだったのか！」誰も拍手してくれない。画面も「おめでとうございます！」とは言わない。ただ、さっきまで出なかった画像が、何事もなかったように普通に出ている。
腹が立つ。でも、うれしい。
プログラミングを始めてから、一つ大事なことを覚えた。「修正した」と「直った」は違う。
コードを書き換えた。それは「修正した」。実際の画面を開く。動く。iPhoneでも確認する。問題ない。そこで初めて、「直った。」なのである。
だから最近は、コードを変更しただけでは安心しない。画面を見るまで信用しない。
なぜならプログラムは時々、直した人間だけを満足させて、何も直っていないことがある。
第50回・記載日：2026年9月26日
KAZU × AI 編集後記
今度はデザインである。サイトを作っていると、機能だけでは物足りなくなってきた。「もう少し、きれいにしたい。」
そこで考えた。アートを入れよう。
そして選んだのが、バラだった。ピンクのバラ。緑の葉。水彩風の柔らかい背景。「いいじゃん。」
パソコンで見る。なかなかいい。そしてiPhoneで開いた。
……文字が読めない。
バラが元気すぎる。文章の後ろから、「私を見て！」と言わんばかりに花が飛び出している。
「お前が主役じゃない。」
修正する。花を少し外側へ。更新。今度は――謎の渦巻きが出た。
「何だこれ？」消す。更新。……いる。もう一度消す。更新。まだいる。
「お前は誰なんだ。」バラより、この謎の模様との戦いになってきた。薄くする。まだ見える。背景を変える。まだいる。まるでサイトの中に住み着いた幽霊である。
そして、あるとき画面を見ながら思った。「ここ……何もなくてよくない？」
カードとカードの間。そこに模様を入れる必要はない。そこで、透明にしてみた。
更新。「あ。」外側のバラが、その隙間から自然に見える。文章のカードは白。文字は読みやすい。バラもちゃんと存在している。
「これだ。」
何度も何度も、「何を足そう？」と考えていた。ところが答えは逆だった。何も置かない。透明にする。それだけだった。
プログラムを始める前、私は「作る」とは何かを追加することだと思っていた。でも実際は違う。足す。消す。戻す。また足す。「変だ。」また消す。そして最後に、何もしない場所を作る。
それもデザインだった。
こうして長かったバラとの戦いは終わった。少なくとも――今日は。
番外編・記載日：2026年9月26日
KAZU × AI 編集後記
その夜も私はiPhoneを握っていた。修正。確認。また修正。時計を見る。もう深夜0時を回っている。
「これで最後。」何度言ったか分からない言葉を言って、更新ボタンを押した。
画面が変わった。そこに現れたのは――404 Not Found
「……またお前か。」最近、こいつとはよく会う。画像が出ない。ページが開かない。リンクが飛ばない。すると突然現れて、404 Not Found
「Not Foundじゃ分からないんだよ。」そうつぶやいた瞬間だった。iPhoneの画面が真っ白に光った。
「うわっ！」目を開ける。そこは長いホテルの廊下だった。左右には無数の扉。そして目の前には、404号室。嫌な予感しかしない。
恐る恐る扉を開ける。……何もない。本当に何もない。
「だから言ったでしょう。」後ろから声がした。振り返る。ホテルマンが立っている。胸の名札には、404 Not Found
「お前だったのか！」「はい。」「いつも急に出てきやがって！」
404は首をかしげた。「しかし、私は何も悪いことをしていません。」
「画像が出なかったぞ。」「その場所に画像がありません。」「ページも開かなかった。」「そのURLにページがありません。」「じゃあどうすればいい？」
404は静かに言った。「正しい場所を探してください。」
腹は立つ。しかし正しい。404とは、「探しているものは、ここにはありません」という返事だったのだ。
そのとき、廊下の奥から声がした。「おーい！こっちは大丈夫だぞー！」陽気な男が手を振っている。胸には、200 OK
「200？」「そう！正常！成功！問題なし！」
ページください。「はいよ！」画像ください。「どうぞ！」データください。「持ってけ！」
なんて気持ちのいい男なんだ。200 OK。つまり、「要求されたものを正常に返しました。」という意味だ。
私は聞いた。「毎日お前だけじゃダメなの？」200の顔が曇った。「それができたら、みんな苦労しない。」
その瞬間、隣の扉が開いた。怖そうな警備員が出てきた。胸には、403 Forbidden
「ここから先は入れません。」「ページはある？」「あります。」「じゃあ見せて。」「ダメです。」「ちょっとだけ。」「ダメです。」「見るだけ。」「ダメです。」
頑固である。404は「ありません。」 403は「あります。でも入れません。」 似ているようで全然違う。
すると今度は、大きな荷物を持った男が歩いてきた。胸には、301 Moved Permanently
「どこ行くの？」「引っ越しました。」「ページが？」「はい。」
301は古い場所へ来た人を、新しい場所へ案内してくれる。つまり、「ここじゃないけど、新しい住所はこちらです。」 意外と親切な男だった。
そのとき。ドン！ ホテル全体が揺れた。照明が消える。200が叫ぶ。「まずい！」
廊下の奥から、ボロボロの男が歩いてきた。胸には、500 Internal Server Error
「500！」「……すみません。」「何があった？」「内部で問題が発生しました。」「だから何が？」「……。」「何？」「よく分かりません。」
一番困るやつが来た。
404なら「ない」。403なら「入れない」。まだ原因の方向が分かる。ところが500は、「中で何かおかしいです。」以上。
「だから何がおかしいんだ！」「それを今から調べます。」500は泣きそうだった。ちょっとかわいそうになってきた。
その横を見る。ソファーで毛布をかぶって寝ている男がいる。胸には、503 Service Unavailable
「おい。」「……。」「起きろ。」「今日は無理です。」「何が？」「サービス。」「ページ見せて。」「今は無理。」「いつならいい？」「そのうち。」
503。サーバーが混雑していたり、一時的にサービスできなかったりすると現れる。人間で言えば、「すみません、本日休業です。」に近い。サーバーにも休みたい日はあるらしい。
すると404が私に言った。「そろそろ戻る時間です。」
私は最後に聞いた。「なあ。エラーコードって、失敗なの？」404は少し考えた。「違います。私たちは、状況を伝えているだけです。」
200。「成功しました。」 301。「引っ越しました。」 向こうから403が言う。「403。入れません。」 404は自分を指さす。「404。見つかりません。」 遠くから500が叫ぶ。「500！こっちで故障しました！」 ソファーから503。「503……今は無理……。」
「寝ながら言うな。」私は笑った。
今まで私は、404や500を見るたび、「またエラーだ。」と思っていた。でも違った。あの数字は、コンピューターから人間へ届いた短い返事だったのである。
問題なのは、エラーコードが出ることではない。その数字が何を言っているのか、人間がまだ知らないこと。
「なるほどな。」そう言った瞬間、再び目の前が白く光った。
気づくと、私は元の場所にいた。手にはiPhone。画面には、404 Not Found
「はいはい。」さっきとは少し違って見えた。「そこにはないんだな。」
ファイルの場所を調べる。一段違っていた。直す。更新。ページが表示された。
画面には何も書かれていない。でも、その向こう側から聞こえた気がした。200 OK
「よし。」私はiPhoneを置いた。
プログラムは無言だと思っていた。違った。ずっと数字でしゃべっていたのである。
ただ、一つだけお願いしたい。次からは――もう少し普通の日本語でしゃべってくれ。
第45回・記載日：2026年9月22日
KAZU × AI 編集後記
サイトに「お問い合わせ」という看板は、前からありました。ところが看板の向こうに手紙を入れても、こちらへ届かない。玄関はあるのに、郵便受けの底が抜けているような状態です。
フォームを開き、名前を書き、メールアドレスを書き、本文を書いて送信。待つ。来ない。もう一度設定を見る。送る。やっぱり来ない。プログラミングより「届いたか確認する時間」の方が長いのでは、と思うほどでした。
原因を一つずつ確認していく途中、入力した文字の間違いにも気づきました。直してもう一度送信。そしてついに、受信箱に問い合わせが到着しました。
たった一通です。でも、この一通でサイトは読むだけの場所から、読者の声が戻ってくる場所へ変わりました。ボタンが動くこと以上に、「向こう側に人がいる」と実感できる機能です。
感想、ご意見、「ここが分かりにくい」「こんな記事が読みたい」も歓迎します。完成してから意見をもらうのではなく、意見をもらいながら育てていくサイトにしていきます。
第46回・記載日：2026年9月22日
KAZU × AI 編集後記
ホームページは世界中から見られる。でも、連絡先をどうするかは別問題でした。個人のメールアドレスをそのまま公開するのは避けたい。かといって、返事ができないお問い合わせ窓口では困ります。
フォームから届く仕組みと、こちらから返信する仕組み。それぞれを確認し、独自ドメインを使ったメール運用の土台を整えました。見た目は小さな変更でも、サイトの信頼性を支える裏側の仕事です。
そして忘れてはいけないのが安全です。知らない添付ファイルや不審なリンクを安易に開かない。メールが使えるようになったからこそ、受信後の扱いも運営の一部になります。
これまでは私から記事を出す一方通行でした。お問い合わせが開通したことで、読者から言葉が戻ってくる道ができました。サイトの「玄関」がようやく本当に開いた気がします。
第47回・記載日：2026年9月22日
KAZU × AI 編集後記
お問い合わせが動いた。そこで終わりにしてしまうと、読者から見れば「何を送っていい場所なのか」が分かりません。
間違いの報告だけでもありません。「面白かった」「ここは難しかった」「次はこれを読みたい」。そんな短い感想も、サイトを育てる材料になります。
だから、はっきり書くことにしました。感想、ご意見を聞かせてください。 作っている側には見えないことを、読む側は見つけてくれます。
最初はページを表示するだけで精一杯でした。今は記事が増え、用語集が増え、編集後記が増え、そして読者とつながる入口までできました。完成品を置くのではなく、成長そのものを記録する。それがこのサイトらしさになってきました。
次に直す場所は、もしかすると読者の一言から始まるかもしれません。
CONTACT
感想・ご意見・ご質問・不具合のご報告など、ぜひこちらからお聞かせください。
教材の内容、使い方、分かりにくいところなど。
翻訳・ボタン・表示など、おかしな動きを見つけたときに。
作品紹介、スポンサー・PR掲載などのご相談。
下のフォームからお問い合わせを送信できます。
送信内容はお問い合わせ対応のために利用します。送信前にプライバシーポリシーをご確認ください。
お問い合わせは、このページのメールフォームに一本化しています。感想・ご意見・ご質問・不具合のご報告はこちらからお送りください。
第3回・記載日：2026年9月12日
KAZU × AI 編集後記
2026年9月12日、Cloudflareでホームページを初めて公開できました。「ひと通り動きます」と伝えられたのは、一つの区切りでした。自分の手元で見ていたページが、インターネットから開けるようになったのです。
そこにたどり着くまでには、何度も画面を確認しました。どのファイルを使うのか。どのフォルダに入れるのか。管理画面のどこを押すのか。説明に出てくる言葉が分かっても、自分の画面のどこを指しているのか分からなければ、次へ進めません。
「手順を追って」「何をひらけば良いの？」。質問を重ねながら、一つずつ確かめました。初心者向けのページを作る自分自身が、案内の分かりやすさを試す立場にもなっていました。
公開できると、次は更新です。しかし、新しいファイルに替えるたびに前のものがなくなったら、うまく動いていた状態へ戻れません。そこで、初回公開に成功したv0.67を基準版として残すことにしました。
保管するファイルにはバージョン名を付け、公開に使うものはindex.htmlにする。中身を作るだけでなく、どれを使っているのか分かるように保管することも、制作の一部だと感じました。
インターネットで開けるようになっても、翻訳や用語集には確認が必要でした。翻訳されない文章がある。探したい言葉が少ない。ひらがなで検索しても出てこない。実際に使うと、まだ足りない部分が見えてきます。
「接続できたこと」と「読みたいものを読めること」は、それぞれ確かめる必要があります。これからは、読者が押すボタン、入力する言葉、読み進める順番を、自分でもたどって確認していきたいと思います。
編集後記についても、「雑になってるよ」と伝えました。ここに残したいのは、完成しましたという短い報告だけではありません。何を尋ね、どこで止まり、どう考えて次に進んだのか。その経緯があってこそ、自分の制作記録になります。
大学で学んだことが、仕事や生活の課題と今になってつながってきた。その出発点から続く記録を、更新のたびに薄くしたくありません。以前の記事を残し、新しい出来事は日付を付けた別の回として増やしていきます。
今日は、公開という一歩を進められました。同時に、使える内容に整える仕事も見えてきました。10月11日ごろの完成目標へ向け、次は一つひとつの使い心地を確かめていきます。
第4回・記載日：2026年9月12日
KAZU × AI 編集後記
どのコンピュータ言語から学べばいいのか。ホームページを作りながら、学ぶ順番も整理しました。名前を次々に覚えるより、今作っているもののどこで使うのかが分かる方が、先へ進みやすそうです。
HTMLで文章やボタンを置く。CSSで色や配置を整える。JavaScriptでボタンを押した後の動きや計算を作る。家づくりにたとえると、形を作り、見た目を整え、暮らすための仕組みを付けていくように考えられます。
今回のLINE画面にも、この考え方を使えます。文章とリンクを置き、追加ボタンを見やすくし、メニューから画面を開けるようにする。大きな機能も、小さな役割に分けると考えやすくなります。
その後は、Pythonでデータを扱う処理や自動化を学び、SQLで保存した情報を取り出す方法を学ぶ。そしてAPIで、ほかのサービスと情報をやり取りする仕組みへ進む方針にしました。APIは言語の名前ではなく、サービスをつなぐための窓口や約束です。
HTML → CSS → JavaScript → Python → SQL → API。この順番を、自分たちの「一軒目の家づくり」として進めます。すべてのホームページに全部が必要という意味ではなく、役割を順番に理解するための学習計画です。
TypeScript、Java、C#、Swiftなどについては、作りたいものに合わせて学ぶ「別の家づくり」と考えることにしました。今すぐ全部を覚えようとせず、一軒目でつかんだ考え方を、次の目的へつなげていきます。
ホームページにメールでやり取りできる画面があれば、という話もしました。一方で、ウイルスへの心配もあります。メール機能は後の課題にし、今回はLINEの友だち追加画面を付けることにしました。
スマートフォンならボタンから、パソコンなら表示されたQRコードから。読むだけだったページに、人とつながる入口を一つ加えます。その先でどう交流するかも、実際に使いながら考えていきたいと思います。
プログラムの型も大切だけれど、中身の内容が肝心。これからも、機能を増やすたびに「何のために付けるのか」「読む人に伝わるか」を確かめながら、一軒目の家を育てていきます。
第27回・記載日：2026年9月18日
KAZU × AI 編集後記・第二章
サイトが動いた。翻訳も動いた。お問い合わせも付いた。
「よし、完成に近づいた！」……と思ったら、次に出てきた言葉がセキュリティだった。
昨日まで「このボタン、もう少しピンクがいいな」などと言っていた人間が、今日はパスワード、アクセス制御、ログの話をしている。急に話が物騒である。
ホームページも家と同じらしい。建てれば終わりではない。玄関を付けたら鍵がいる。窓を作ったら戸締まりがいる。
サイト作りを始めたはずなのに、気がつけば私はインターネット上の戸締まり係になっていた。
第28回・記載日：2026年9月18日
KAZU × AI 編集後記・第二章
セキュリティを設定すると、秘密の番号が次々と登場する。
「これは大事だから保存しておこう」そこで初心者が思いつく最も簡単な方法。スクリーンショット。
……待て。秘密の番号を写真に撮って、いつでも見られる場所に置いたら、それは本当に秘密なのだろうか。
家の合鍵をなくさないように、玄関の横にぶら下げておくようなものである。便利と安全は、どうも仲が悪い。
この日覚えたこと。秘密は「覚えている」から秘密なのではない。「他人から見えない」から秘密なのである。
第29回・記載日：2026年9月18日
KAZU × AI 編集後記・第二章
セキュリティは地味だ。翻訳ボタンなら、押して英語になれば「おお！」となる。お問い合わせフォームなら、メールが届けば「来た！」となる。
ところがセキュリティは違う。何も起きない。
今日も何もない。明日も何もない。最初は「これ、本当に働いているの？」と思う。
でも考えてみれば、防犯装置が毎日大活躍する家には住みたくない。何も起きない日を作る。それがセキュリティの仕事だった。
今日も異常なし。地味だけど満点。
第30回・記載日：2026年9月18日
KAZU × AI 編集後記・第二章
そして現れた。GitHub。 名前からして強そうである。
さらに画面を開くと、Repository。Commit。Branch。英語が三人並んだ。 帰ろうかと思った。
ところが一つずつ調べてみると、やっていることは意外と普通だった。ファイルを置く。変更を記録する。前の状態を残しておく。
「それなら最初からそう言ってくれ！」
プログラミングの世界は、ときどき簡単なことを難しい名前で呼ぶ大会を開催している。
第31回・記載日：2026年9月18日
KAZU × AI 編集後記・第二章
サイトを直すたびに怖かった。「これを変更して全部壊れたらどうしよう」
だからZIPを保存する。v1.60。v1.61。v1.62……。気がつけばバージョンだらけ。
そこへGitHubがやってきた。変更履歴を残せる。前の状態も追える。
ここでようやく分かった。開発で強いのは、一度も失敗しない人ではない。失敗しても戻れる人なのだ。
これはかなり気が楽になる。もっとも、戻す場所を間違えたら、また別の冒険が始まる。
第32回・記載日：2026年9月18日
KAZU × AI 編集後記・第二章
パソコンでサイトを作る。普通はそう考える。ところが私はiPhoneでもやり始めた。
ファイルを開く。GitHubを見る。Cloudflareを見る。アップロードする。できる。ただし画面が小さい。
「…」を探す。ない。スクロールする。まだない。横を見る。いた。
プログラミングを勉強しているはずなのに、一番上達したのは小さなボタンを発見する能力だったかもしれない。
それでも分かった。「iPhoneだからできない」ではない。iPhoneなら、iPhoneなりの戦い方がある。
第33回・記載日：2026年9月18日
KAZU × AI 編集後記・第二章
GitHubにはファイルがある。Cloudflareには公開サイトがある。問題は、この二人がまだ別々に働いていることだった。
そこで連携。GitHubを更新する。Cloudflareが気づく。そして公開する。
初めてその流れを見たとき、「お前たち、いつの間にそんなに仲良くなったんだ」と思った。
昨日までZIPを抱えて右往左往していた人間を横目に、コンピューター同士が勝手に仕事を始める。
少し寂しい。でも、ものすごく便利である。
第34回・記載日：2026年9月18日
KAZU × AI 編集後記・第二章
これまでは、ファイルを作る。ZIPにする。アップロードする。公開する。確認する。毎回この繰り返しだった。
ところがGitHubとCloudflareを連携すると、その一部を機械に任せられる。つまり、自分の仕事を自分で機械に奪わせている。
でもこれは歓迎すべき失業である。単純作業を機械に渡せば、人間は文章を考えたり、新しい機能を作ったりできる。
自動化とは、人間を不要にすることではなかった。
人間が、人間にしかできない仕事へ戻るための仕組みだった。
第35回・記載日：2026年9月18日
KAZU × AI 編集後記・第二章
「自動化」なんと魅力的な言葉だろう。一回設定すれば、あとは全部勝手にやってくれる。そんな魔法を想像していた。
ところが実際にやってみると、「どのファイルですか？」「どこへ公開しますか？」「失敗したらどうしますか？」「どれが最新版ですか？」質問が多い。
自動化は魔法使いではなかった。ものすごく几帳面な新人だった。
人間が「まあ、この辺でいいだろう」と済ませていた部分を、一つ一つ決めなければ動いてくれない。
自動化するには、まず人間の仕事を整理しなければならない。だから自動化はゴールではない。仕事のやり方そのものを見直す先生なのだ。
そして今日も、その先生から宿題が出る。「最新版はどれですか？」 ……そこからか。
第36回・記載日：2026年9月18日
KAZU × AI 編集後記・第三章
GitHubにファイルを置いた。するとCloudflareを見ると、数分前に新しいバージョンができている。
「誰がやった？」 私ではない。いや、正確には私がGitHubを更新した。でもCloudflareのボタンは押していない。勝手に働いている。
これが連携だった。昨日まで「次はどのボタン？」と探していたのに、今日はボタンを押さなくても次へ進む。
便利になった。しかし初心者には新しい問題が発生する。便利すぎて、何が起きたのか分からない。
自動化とは、人間の仕事を減らすと同時に、人間に「仕組みを理解しなさい」という新しい宿題を出してくるものらしい。
第37回・記載日：2026年9月18日
KAZU × AI 編集後記・第三章
GitHubは更新した。Cloudflareも動いた。公開サイトを開く。変わっていない。
なぜだ。GitHubか。Cloudflareか。iPhoneか。キャッシュか。それとも私か。容疑者が多すぎる。
しかし調べていくうちに分かった。自動化が正常でも、元のファイルに新しい内容が入っていなければ、新しい内容は公開されない。
当たり前である。ものすごく当たり前である。しかし自動化を覚えたばかりの人間は、機械が何とかしてくれるような気がしてしまう。
機械は正確だった。間違ったものを渡せば、間違ったものを正確に公開してくれる。
第38回・記載日：2026年9月18日
KAZU × AI 編集後記・第三章
編集後記を追加した。第27回、第28回、第29回……。かなり書いた。公開サイトを見る。第26回まで。
もう一度見る。やっぱり第26回まで。スクロールしても第26回。「27はどこへ行った？」
編集後記が家出したわけではない。調べてみると、公開されているファイルそのものが第26回までだった。
ここで大事なことを覚えた。「原稿を書いた」「ファイルに入れた」「GitHubに保存した」「Cloudflareが公開した」これは全部、別の作業である。
頭の中では一本の道でも、コンピューターにとっては四つの関所だった。
第39回・記載日：2026年9月18日
KAZU × AI 編集後記・第三章
v1.92。v1.93.1。v1.96。全員が言う。「私が最新版です」
困る。パソコンにもある。iPhoneにもある。GitHubにもある。Cloudflareにもある。
ファイル管理を甘く見ると、最新版という言葉が急に信用できなくなる。
そこでルールを決めることにした。作業中の最新版。GitHub上の最新版。現在公開されている最新版。この三つは同じとは限らない。
これは今回かなり大きな発見だった。
第40回・記載日：2026年9月18日
KAZU × AI 編集後記・第三章
公開前にiPhoneで確認しよう。ZIPを解凍した。index.htmlもある。よし、押してみよう。LetsViewが開いた。
……君じゃない。私はホームページを見たい。画面ミラーリングをしたいわけではない。
もう一度やる。またLetsView。どうやらiPhoneがHTMLをLetsViewで開こうとしている。
サイトを作っているのに、サイトを見る前にiPhoneとの交渉が必要になった。
プログラミングでは、コード以外のところから敵が現れる。しかも、その敵はだいたい悪気がない。
第41回・記載日：2026年9月18日
KAZU × AI 編集後記・第三章
画面を開いた。真っ白。エラー表示もない。警告もない。ただ白い。初心者にとって、これはかなり怖い。
赤いエラーならまだいい。「ここが悪い」と言ってくれている。白い画面は何も言わない。無言でこちらを見ている。
しかし、ここでも学んだ。白画面になったからといって、すぐ公開版を変更してはいけない。
まず、ファイルなのか。開き方なのか。ブラウザなのか。公開側なのか。原因を分ける。
直す前に、犯人を決める。 これはサイト作りでかなり重要だった。
第42回・記載日：2026年9月18日
KAZU × AI 編集後記・第三章
初心者のころは、不具合が出るとすぐ直したくなる。新しいファイルを作る。アップロードする。また違う。さらに直す。
気がつけば、何を直していたのか分からなくなる。
今回覚えたのは、逆だった。おかしいときほど、いったん公開版を触らない。正常に動いている版を残す。新しい版は別に作る。確認してから入れ替える。
何もしないことが、一番安全な操作になる瞬間がある。
「押さない」という操作もあるのだ。
第43回・記載日：2026年9月18日
KAZU × AI 編集後記・第三章
Cloudflareのデプロイ画面を開いた。そこには、Add files via upload、main、9分前、そしてGitHub側の情報。
あった。GitHubからCloudflareへ変更が届いている証拠だ。
ここでようやく分かった。連携は壊れていなかった。機械はちゃんと働いていた。問題は別の場所だった。
何時間も疑っていた相手が無実だったと分かった瞬間である。
Cloudflareさん、疑ってすみませんでした。
第44回・記載日：2026年9月18日
KAZU × AI 編集後記・第三章
最初は全部手作業だった。ファイルを作る。ZIPにする。アップロードする。公開する。確認する。
今は少し違う。人間がGitHubに正しいファイルを置く。Cloudflareが受け取る。自動で公開する。
まだ完全自動ではない。失敗もする。確認も必要だ。でも確実に変わった。私は少しずつ、「ボタンを押す人」から「流れを作る人」へ移っている。
プログラミングを始めたころは、コードを書けるようになることが目標だった。ところが実際にサイトを作ってみると、その先には、保存する。守る。つなぐ。確認する。自動化する。という世界があった。
そして次の目標も見えてきた。「正しいファイルを置いたら、安全に自動公開されるサイト」
ここまで来たら、もう最初のころとは違う。ただし最後に一つだけ確認する。「で、最新版はどれだ？」
第23回・記載日：2026年9月15日
KAZU × AI 編集後記
朝の私は甘かった。今日やることは三つ。翻訳機能の修正、語彙の整理整頓、ボタンの配置。文字にすると、たったこれだけである。
ところが最初の翻訳から止まった。パソコンでは動く。iPhoneでは動かない。
直す。「これで大丈夫」。iPhoneで押す。……動かない。また直す。「今度こそ」。……まだ動かない。
Google翻訳、読み込み、ブラウザ、Cookie、タイミング、Safari。調べるほど登場人物が増えていく。
以前、APIを「外部サービスへつながる道路」と考えた。今日、その説明に一行追加したくなった。
一個直して二歩進む。ドカン。また直す。三歩進む。ドカン。
そして何度目かの修正。iPhoneで翻訳ボタンを押す。
……動いた。
たった一つの機能なのに感動した。苦労して直した一つは、ただの一つではない。そこまでに使った時間も失敗も全部、そのボタンの中に入っている。
昨日まで当たり前だったことが、今日は奇跡になる。そんな一日が始まった。
第24回・記載日：2026年9月15日
KAZU × AI 編集後記
翻訳だけで終わるはずがない。次は語彙の整理整頓。そしてボタンの配置だ。
日本語なら「あいうえお順」が分かりやすい。英語ならA–Zが自然だ。だったら両方用意すればいい。言うのは簡単である。
語彙を整理してパソコンを見る。「いいじゃん」。iPhoneを見る。「……なんか違う」。iPhoneを直して「いいじゃん」。パソコンを見る。「……今度はこっちが気になる」。
今日やったのは、パソコンで直してiPhoneで確認しただけではない。パソコンも直した。iPhoneも直した。
翻訳を優先するとボタンが気になる。ボタンを大きくすると画面が窮屈になる。語彙を増やすと探しにくくなる。片方だけ完璧でもダメだった。
ここまで来ると、プログラミングというより家族会議である。
翻訳さんを立てればボタンさんが拗ねる。iPhoneさんを優先すればパソコンさんがこちらを見る。語彙さんを増やせば画面が「狭いです」と訴える。
今日分かった。プログラムに必要なのは知識だけではない。
翻訳、語彙、ボタン。大きく三つを、PCとiPhoneの両方で整えた。
そして最後に出た言葉が「完成！」ではなかった。
機械を相手にしているはずなのに、最後は健康観察のようになった。
第25回・記載日：2026年9月15日
KAZU × AI 編集後記
気がつけば夜だった。丸一日である。
翻訳を直した。語彙を整理した。ボタンを整えた。パソコンも直した。iPhoneも直した。
直す。見る。動かない。また直す。動く。喜ぶ。別のところを見る。また気になる。
最後にCloudflareの画面を開いた。
暗号化リクエスト 458。暗号化率 98.71%。暗号化された帯域幅 391.84MB。
さらに、キャッシュリクエスト 400。キャッシュ率 86.21%。
もちろん458人が来たという意味ではない。今日は自分でもパソコンとiPhoneから何度もアクセスした。それでも、朝から整備していたサイトが数字で返事をしてくれたように見えた。
朝、APIという道路で地雷を踏んだ。昼、翻訳と格闘した。午後、語彙とボタンを整えた。夜、PCとiPhoneのバランスを取った。
そして最後に道路を見ると、ちゃんと車が走っていた。
今日一番学んだのは、ホームページは「作ったら終わり」ではないということだった。
道路を作る。穴を直す。標識を整える。地雷を撤去する。そして、ときどき様子を見る。
整備することは大変だ。でも、一つ直るたびに感動する。今日は大きく三つ直した。だから三回くらい感動してもいい。
さて、明日の朝もちゃんと動いているだろうか。
……最後にもう一度確認しておこうか。
いや、やめよう。
第26回・記載日：2026年9月15日
KAZU × AI 編集後記・開発実況中継
午前5時すぎ。
本日の最初の事件は翻訳。その次は用語集。パソコン側を直したと思ったら、今度はiPhone側です。
修正が一段落し、Cloudflareの管理画面へ。LCP、INP、CLS。次々にアルファベットが登場します。
こちらはまだ工事中のつもりです。玄関を直し、翻訳を直し、用語集を直している。その間に、もうお客さんが入っていました。
もちろん、アクセス数がそのまま人数という意味ではありません。国の判定も完全ではありません。それでも、手元にあったHTMLが公開され、外からアクセスされた記録が残ったことは確かです。
続いて「リファラ」を確認。そこには m.facebook.com、facebook.com、www.facebook.com の文字が並びました。
昨日まで、Facebookに紹介文を書きながら「誰か見るのかな」と半信半疑でした。ところが、アクセス解析にはFacebook系から来た記録が残っていました。
数日前まで、このサイトは自分の手元にあるファイルでした。Cloudflareに置き、翻訳を付け、用語集を増やし、バグを出して、直して、またバグを出して、また直す。
そして今日、数字の向こう側に「訪問」が見えました。
用語集か。教材か。記事か。それとも、この編集後記か。
「お客さんは家のどの部屋に入ったのか？」
ホームページ制作を始めたはずなのに、今度はアクセス解析まで始まりました。
「ゼロから始める」と名前を付けたサイトが、本当にゼロではなくなった日。
今日の数字は、この小さな家の玄関に残った最初の足あとでした。
KAZU × PARTNERS
「ゼロから始めるプログラム言語」では、サイトの成長に合わせて、スポンサー・パートナー・作品紹介・PR掲載の仕組みを少しずつ整えていく予定です。
このサイトは、プログラミングをゼロから学びながら、実際に作り、失敗し、修正し、その過程まで公開していく学習サイトです。
将来的には、学ぶだけではなく、作った作品を紹介する場所、新しいサービスを知ってもらう場所、人と人、作品と企業がつながる場所へ育てていきたいと考えています。
プログラミング、AI、Web制作、教育、PC・IT機器、業務改善など、当サイトの内容と関連するサービスや活動を中心に検討します。
個人の作品や小さなプロジェクトについても、内容を確認したうえで紹介できる仕組みを作っていく予定です。
スポンサー契約や有料掲載の場合は、読者に誤解がないよう「スポンサー」「PR」「広告」などを分かりやすく表示します。掲載内容については、サイトとの相性や安全性を確認したうえで掲載します。
広告をたくさん並べることが目的ではありません。「これは面白い」「これは初心者にも役立ちそう」「この作品をもっと多くの人に知ってほしい」と思えるものを紹介できるページを目指します。
現在、スポンサー・PR掲載の仕組みを準備中です。お問い合わせ方法、掲載条件、料金、掲載期間などについては、準備が整い次第このページでお知らせします。
KAZU
ゼロから始めるプログラム言語
ゼロから始めるプログラム言語 ｜ 更新日：2026年10月20日
当サイト「ゼロから始めるプログラム言語」（以下「当サイト」といいます。）では、利用者の皆さまに安心してご利用いただけるよう、個人情報および利用情報を適切に取り扱います。
運営者：KAZU
対象サイト：mmdei.com
個人情報の取り扱いに関するお問い合わせは、サイト内のお問い合わせフォームからお願いいたします。
お問い合わせフォームでは、お名前、返信用メールアドレス、お問い合わせ内容、その他利用者が任意で入力した情報を取得する場合があります。
AI相談室では、利用者が入力した質問、相談内容、および回答生成に必要な範囲の直近の会話内容を処理します。
また、サイトの利用状況の把握、品質向上、不具合の確認、セキュリティ対策などのため、閲覧ページ、アクセス日時、ブラウザーや端末に関する情報、アクセス元に関する情報などを取得または処理する場合があります。
取得・処理した情報は、お問い合わせへの対応、AI相談への回答生成、当サイトの運営および改善、不具合やエラーの調査、不正アクセスや迷惑行為などへのセキュリティ対策、利用状況の把握およびコンテンツ改善、必要に応じた重要なお知らせのために利用します。
当サイトのお問い合わせフォームでは、フォーム送信サービスとしてWeb3Formsを利用しています。フォームに入力された情報は、お問い合わせ内容を当サイト運営者へ送信するためにWeb3Formsを経由して処理される場合があります。
お問い合わせの際は、パスワード、クレジットカード情報、銀行口座情報、マイナンバーなど、機密性の高い情報を入力しないようお願いいたします。
当サイトでは、ページ配信、安定したサービス提供、セキュリティ、不正アクセスへの対応、障害調査などのためCloudflareを利用しています。その際、IPアドレス、アクセス日時、アクセス先、端末・ブラウザーに関する情報など、アクセスに伴う技術的な情報がCloudflare側で処理・記録される場合があります。
また、サイトの利用状況を把握し、サービス改善やセキュリティ対策に役立てるため、Cloudflare Web Analytics等のアクセス解析機能を利用する場合があります。
当サイトのプログラムでは、サイト運営や障害確認のため、アクセス先のパス、HTTPメソッド、応答ステータス、国・地域・都市、Cloudflareのデータセンター情報、端末種別などを記録する場合があります。当サイト独自のアクセスログには、IPアドレス、Cookie、URLのクエリ文字列、お問い合わせ本文、メールアドレス、AI相談室の質問本文を記録しない設計としています。
当サイトでは、サイトの機能提供、利便性向上、アクセス解析、セキュリティ対策などのため、Cookieまたはこれに類する技術が利用される場合があります。利用者はブラウザーの設定等からCookieを制限・削除できる場合がありますが、その場合、一部の機能が正常に利用できなくなる可能性があります。
学習済みの記事、学習進捗、画面設定などの情報は、次回も続きから利用できるよう、お使いのブラウザーのローカルストレージ等に保存する場合があります。この保存機能は、その情報を運営者へ送信することを目的としたものではありません。ブラウザーのデータを削除した場合、保存されていた情報が失われる場合があります。
当サイトの「愛ちゃんAI相談室」では、利用者が入力した質問と、回答に必要な範囲の直近の会話内容を、回答生成のためCloudflare Workers AIへ送信して処理します。現在、回答生成にはCloudflare Workers AI上のAIモデルを利用しています。
履歴記録機能を有効にしている場合、相談件数・日時・会話ごとの匿名ID・処理の成否を、運営改善のため30日間記録します。質問本文とAI回答は、送信時に任意の保存同意欄を選択した場合だけ記録し、管理者限定の管理室で運営者が確認します。同意しない場合も相談できます。送信時の同意の有無と案内の版を記録します。氏名・メールアドレス・生のIPアドレスはこの相談履歴に記録しません。匿名IDは画面を読み込むたびに変わり、人数を特定するものではありません。これらはアクセスログや学習進捗とは別に保存します。30日を過ぎた履歴は表示対象から外し、毎時の削除処理で削除します。保存済み記録の削除は、相談した日時や内容の手掛かりを添えてお問い合わせください。画面の「会話を消す」だけではサーバーの記録は削除されません。機能を無効にしている場合、この履歴記録は行いません。ただし、通信・AI処理を提供する外部サービス側では、そのサービスの運用、安全性確保、不正利用防止等のため技術情報が処理される場合があります。
AI相談室には、氏名、住所、電話番号、メールアドレス、ログイン情報、パスワード、APIキー、クレジットカード番号、銀行口座、マイナンバー、医療情報など、個人を特定できる情報や秘密情報を入力しないでください。
AIの回答には誤りや古い情報が含まれる可能性があります。医療、法律、金融、契約、セキュリティ設定など重要な判断については、AIの回答だけで判断せず、公式情報や資格を有する専門家等をご確認ください。
当サイトは、AI相談室へ入力された質問を、当サイト独自のAIモデルを再学習させる目的で収集する機能を設けていません。外部サービスにおけるデータの取り扱いについては、各サービス提供者の規約・プライバシーポリシー等が適用される場合があります。
運営者が取得した個人情報は、本人の同意がある場合、法令に基づく場合その他法令上認められる場合を除き、第三者へ提供しません。ただし、お問い合わせ、AI回答生成、アクセス解析、サイト配信、セキュリティ対策など、当サイトの機能提供に必要な外部サービスを利用する場合、必要な範囲で情報が処理される場合があります。
当サイトでは、Cloudflare、Web3Formsその他サイト運営に必要な外部サービスを利用する場合があります。各サービスにおける情報の取り扱いについては、それぞれのサービス提供者が定める規約・プライバシーポリシー等をご確認ください。
管理用アカウントの保護など、取り扱う情報に応じた安全管理に努めます。お問い合わせ情報は、回答、対応履歴の確認その他の利用目的に必要な期間保管し、法令上の保存義務がある場合を除き、必要性がなくなった情報は適切に整理・削除するよう努めます。外部サービス側での保存期間は、各サービス提供者の方針が適用される場合があります。
運営者が保有する個人情報について、法令に基づく開示、訂正、利用停止、削除等をご希望の場合は、サイト内のお問い合わせフォームからご連絡ください。必要な本人確認を行ったうえで、適用される法令に従って対応します。
当サイトではGoogle AdSenseの導入を申請・検討しています。広告配信を開始した場合、Googleや広告パートナーがCookieなどの識別技術を利用し、広告の配信・測定・不正防止のために情報を処理することがあります。パーソナライズ広告が適用される場合があります。Googleによる情報の利用については Googleのパートナーサイトにおけるデータ利用 をご確認ください。広告のカスタマイズについては マイ アド センター で設定できます。適用される法令・配信地域に応じて必要な同意取得や広告設定を行います。
広告・アフィリエイトリンクを掲載する場合は、広告であることを分かりやすく表示します。
当サイトは、法令、サービス内容、利用する外部サービスまたはサイト機能の変更などに応じて、本プライバシーポリシーを変更する場合があります。重要な変更がある場合は、必要に応じて当サイト上でお知らせします。
制定：2026年9月18日 ／ 最終更新：2026年10月20日
学習レクチャー・2026年9月15日更新
HTMLで家の骨組みを作り、CSSで内装を整え、JavaScriptでボタンを動かした。
ようやく落ち着けると思ったところへ、新しい人が来た。
Python「作業員のPythonです。」
KAZU「また覚えるの？ もう頭の中、満室なんだけど。」
Python「今日は一行だけです。」
KAZU「その言葉、前にも聞いたな。一か所直すだけって言われて、夜になった。」
Pythonは黙って、短いコードを置いた。
print("こんにちは、Python！")これをPythonの実行環境で動かすと、実行結果の欄に次の文字が出る。
こんにちは、Python！KAZU「……それだけ？」
Python「それだけです。」
KAZU「来たばかりなのに、あまり働かないね。」
Python「頼まれた仕事は終わりました。」
どうやら、この作業員は勝手に気を利かせない。頼んだことを、頼んだとおりにする。それが長所でもあり、こちらが頭を使う理由でもある。
学習レクチャー・2026年9月15日更新
ここで出てきた print() は、文字や計算結果などを表示するための関数だ。関数は、ひとまず「名前を呼んで仕事を頼める道具」と考えよう。
丸かっこの中に、表示してほしいものを書く。文字を書くときは、" などの引用符で囲む。
では、数字ならどうだろう。
print(3 + 2)
print("3 + 2")結果はこうなる。
5
3 + 2KAZU「同じこと書いたつもりなのに。」
Python「上は計算です。下は『3 + 2』という文字です。」
引用符は飾りではなかった。「これは文字として扱ってください」という目印だったのだ。
学習レクチャー・2026年9月15日更新
調子が出てきたKAZUは、さっそく挨拶を変えてみた。
print("今日もお疲れさまです")今度は自分の言葉が表示された。
たった一行。でも、見本を眺めているだけの状態から、自分で指示を変える側へ一歩進んだ。
なお、このコードはPythonを動かせる環境で実行する。HTMLにそのまま貼るだけでPythonが動くわけではない。作業員にも、働くための持ち場が必要なのである。
KAZU「今日のところは、挨拶ができれば合格にしよう。」
Python「ありがとうございます。次は数字を覚えます。」
KAZU「急に職場の新人研修みたいになってきたな。」
print("3 + 2") を実行すると、何が表示される？
A．5
B．3 + 2
C．何も表示されない
ヒント：引用符の中は文字として扱われる。
答え：B。計算してほしいときは、print(3 + 2) と書く。
挨拶の部分を、自分の好きな言葉に変えてみよう。変えるのは引用符の内側だけ。まずは「一か所変えて、結果を見る」を体験すれば十分だ。
学習レクチャー・2026年9月15日更新
挨拶ができるようになったPythonに、今日は在庫の確認を頼むことにした。
KAZU「手袋が少なくなったら教えて。」
Python「少ないとは、いくつですか？」
KAZU「そこは雰囲気で。」
Python「雰囲気は、まだ受け取っていません。」
人間なら棚を見て「そろそろ危ないかな」と感じる。しかし、プログラムには判断の基準を渡す必要がある。
そこで、手袋の在庫が5より少なければ知らせてもらうことにした。
stock = 3
if stock < 5:
print("手袋の発注を確認")stock は、在庫数につけた名前だ。こうした名前を変数という。
stock = 3 は、「stockという名前で、3を使えるようにする」という指示。最初は、名前のついた箱に数字を入れるイメージでもよい。
ただし、この = は算数の「左右が等しい」という意味とは違う。プログラムでは、値を変数に代入するために使っている。
学習レクチャー・2026年9月15日更新
次の if は「もし」という意味だ。
stock < 5 は「在庫が5より少ない」。条件に当てはまると、その下の表示が実行される。
KAZU「じゃあ、在庫が5なら？」
Python「表示しません。」
KAZU「5も少なくない？」
Python「ご指示は『5より少ない』でした。」
この作業員、なかなか手ごわい。でも間違ってはいない。
5も含めたいなら、条件を stock <= 5 に変える。小さな記号一つで、判断の境界が変わるのだ。
もう一つ大切なのが、print の前にある空白だ。Pythonでは、行頭の字下げで処理のまとまりを表す。この例では「条件に当てはまったときにする仕事」を、一段下げて書いている。通常は半角スペース4個を使う。
KAZU「空白にも仕事があるのか。」
Python「私の職場では、空白も勤務中です。」
学習レクチャー・2026年9月15日更新
続いて、同じ確認を3回表示してみる。
for i in range(3):
print("確認", i + 1)結果は「確認 1」「確認 2」「確認 3」。
for は、順番に取り出した値を使って処理を繰り返す。ここでは range(3) から0、1、2を取り出し、表示するときに1を足している。
変数で覚える。ifで判断する。forで繰り返す。
別々だった道具が、少しずつ仕事の形になってきた。
stock < 5 という条件で、stockが5のとき、発注確認は表示される？
A．表示される
B．表示されない
ヒント：「より少ない」と「以下」は違う。
答え：B。5も含めるなら stock <= 5 と書く。
stockを4、5、6に変えて試そう。条件の境目を確かめると、プログラムが何を判断しているか分かりやすい。
学習レクチャー・2026年9月15日更新
KAZU「手袋だけじゃなくて、ペーパーもゴミ袋も見てほしい。」
Python「一覧をください。」
KAZU「棚を見れば分かるじゃん。」
Python「私は今、その棚を見る機能を持っていません。」
便利なプログラムも、渡されていない情報までは分からない。
そこで、品名と在庫数を組にした一覧を用意した。
items = {
"手袋": 4,
"ペーパー": 9,
"ゴミ袋": 2
}
for name, stock in items.items():
if stock < 5:
print(name, "→ 発注候補")実行すると、こう表示される。
手袋 → 発注候補
ゴミ袋 → 発注候補KAZU「おお、二つ見つけた。」
Python「ペーパーは在庫9なので、今回は表示していません。」
学習レクチャー・2026年9月15日更新
最初の { } で囲まれた部分は、辞書と呼ばれるデータの持ち方だ。品名を手がかりに、その在庫数を扱える。
ここでは「手袋」と4、「ペーパー」と9、「ゴミ袋」と2が、それぞれ組になっている。
items.items() は、その名前と数の組を順番に取り出すために使っている。取り出した品名を name、在庫数を stock として受け取り、一件ずつ条件を確かめる。
KAZU「つまり、一覧を順番に見て、少ないものだけ教えるのか。」
Python「はい。」
KAZU「じゃあ明日には届くね。」
Python「何がですか？」
KAZU「手袋。」
Python「注文はしていません。」
ここが大事なところだ。このプログラムは、発注候補を表示するだけ。注文を送る処理も、業者と通信する処理も入っていない。
「自動化できた」という言葉は、どこまで自動になったのかを確かめないと、意外なすれ違いを生む。
学習レクチャー・2026年9月15日更新
さらに、今回は全商品を同じ基準で判定している。実際には、手袋5箱とゴミ袋5枚では意味が違う。箱・袋・枚などの単位や、商品ごとの最低在庫も決める必要がある。
KAZU「作ったら終わりかと思ったら、仕事の決め事まで出てきた。」
Python「決め事がはっきりすると、私も働きやすくなります。」
自動化は、曖昧な仕事をそのまま機械へ投げることではない。人が基準を整理して、繰り返せる形にすることでもある。
このプログラムがしていることはどれ？
A．業者へ注文を送る
B．在庫が5未満の商品を表示する
C．届いた商品の在庫を増やす
答え：B。画面への表示と、実際の注文は別の処理。
一覧に "洗剤": 1 を追加しよう。前の項目との間にカンマが必要なことにも注意して、発注候補に洗剤が出るか確かめてみよう。
学習レクチャー・2026年9月15日更新
Pythonに在庫確認を頼めるようになった。
しかし、毎回コードを開いて在庫数を書き直すのは、少し面倒だ。
KAZU「昨日は4だったけど、今日は3。明日は納品で増える。これ、どこかにまとめて置けない？」
そこで登場したのが、データベースだった。
SQL「倉庫の準備ですね。」
KAZU「あなたが倉庫？」
SQL「私は倉庫へ指示を出すための言葉です。」
データベースが情報を保存して管理する仕組み。SQLは、その中の情報を取り出したり変更したりするための言語だ。
倉庫と、倉庫への頼み方は別だった。
学習レクチャー・2026年9月15日更新
まずは在庫表を見てみよう。
| id | item | stock |
|---|---|---|
| 1 | 手袋 | 4 |
| 2 | ペーパー | 9 |
| 3 | ゴミ袋 | 2 |
このような表を「テーブル」と呼ぶ。ここでは supplies という名前をつけることにする。
横一列が「行」。一件分のデータだ。縦の項目が「列」。この表にはid、item、stockという三つの列がある。
KAZU「表なら、Excelでも見たことがある。」
SQL「その感覚は役に立ちます。まずは一行に何を入れるか、各列が何を意味するかをそろえましょう。」
学習レクチャー・2026年9月15日更新
では、一番左のidは何だろう。
これは、それぞれの行を区別するための番号だ。同じような品名があっても、どの行を指しているかをはっきりさせられる。
KAZU「手袋って名前で分かるんじゃない？」
SQL「SサイズとMサイズがあったら？」
KAZU「小さい手袋と、普通の手袋。」
SQL「普通とは？」
また出た。プログラムの世界では「普通」がなかなか通用しない。
実際の管理では、サイズや単位なども項目として持たせると、意味がはっきりする。表に情報を詰め込む前に、何をどう区別するかを考えるのが大切なのだ。
なお、先ほどのPythonの辞書は、あの例だけではプログラム終了後に変更をファイルへ保存しない。残しておきたい情報には、ファイルやデータベースへ保存する処理が必要になる。
KAZU「覚えてくれたと思ったのに、帰ると忘れるのか。」
SQL「だから、記録を残す場所を用意します。」
人もプログラムも、申し送りの仕組みが大切らしい。
表の「一件分のデータ」に当たるのは？
A．行
B．列
C．テーブル名
答え：A。列は品名や在庫数などの項目を表す。
自分の在庫表を作るなら、何の列が必要か考えよう。「品名」「在庫数」に加えて「単位」があると、4箱なのか4枚なのかを区別できる。
学習レクチャー・2026年9月15日更新
倉庫に品物の情報が集まった。
最初は3件だった一覧も、30件、100件と増えていく。全部を眺めていると、どこまで確認したか分からなくなる。
KAZU「在庫が少ないものだけ見せて。」
SQL「条件をどうぞ。」
KAZU「あなたもか。」
Pythonとのやり取りで学んだことが、ここでも役に立った。「少ない」を数字で決めればよい。
SELECT item, stock
FROM supplies
WHERE stock < 5;これは、前回の supplies というテーブルがある前提の例だ。
頼み事は、三つに分かれている。
SELECT item, stock は「品名と在庫数を見せて」。
FROM supplies は「suppliesという表から」。
WHERE stock < 5 は「在庫が5より少ない行だけ」。
前回の表なら、手袋4とゴミ袋2が見つかる。
KAZU「文章みたいに読めるね。」
SQL「順番に読むと、何を頼んだか整理できます。」
学習レクチャー・2026年9月15日更新
では、「少ない順に見たい」ときはどうするのだろう。
SELECT item, stock
FROM supplies
WHERE stock < 5
ORDER BY stock ASC;ORDER BY は並べ方を指定する部分。ASC は小さい順を表す。これで、ゴミ袋2、手袋4という順番になる。
KAZU「さっきも、たまたま見やすい順だったけど。」
SQL「並び順が必要なら、明示してください。」
並び順を指定していない結果について、いつも同じ順番で出ると思い込まないことが大切だ。
学習レクチャー・2026年9月15日更新
もう一つ、よく見かける書き方がある。
SELECT *
FROM supplies;* は、この場合「すべての列」を意味する。表の中身を確認するには便利だが、画面で使う項目が決まっているなら、必要な列を指定すると目的が伝わりやすい。
SQLは魔法の検索係ではない。こちらが「何を」「どこから」「どんな条件で」と整理すると、必要な情報を取り出せる。
KAZU「探す技術というより、頼み方の技術でもあるんだね。」
SQL「その頼み方を、何度でも正確に実行できます。」
在庫が5より少ない行に絞っているのは、どの部分？
A．SELECT
B．FROM
C．WHERE
答え：C。SELECTは取り出す列、FROMは元の表、WHEREは行を絞る条件。
条件を stock >= 5 に変えたら、前回の表から何が出るだろう。答えは、在庫9のペーパー。記号を変えると、探す側が反対になる。
学習レクチャー・2026年9月15日更新
品物が届いた。
手袋の在庫が増えたので、表を直すことにする。
KAZU「idが1の手袋を、在庫8にして。」
UPDATE supplies
SET stock = 8
WHERE id = 1;UPDATE supplies は「suppliesを更新する」。
SET stock = 8 は「在庫数を8にする」。
WHERE id = 1 は「idが1の行を対象にする」。
ここでの「8にする」は、「8増やす」とは違う。元が4なら、変更後は8。12にはならない。
KAZU「日本語だと、つい『8追加して』とか言っちゃいそうだね。」
SQL「そこは結果が変わるので、区別してください。」
学習レクチャー・2026年9月15日更新
そして、この回の最重要人物がWHEREさんだ。
もし最後の条件を書かなければ、この文はテーブル内の全行を更新対象にする。手袋だけ直したかったのに、ペーパーもゴミ袋も在庫8になる。
KAZU「みんな仲良く8？」
SQL「在庫管理では困ります。」
「エラーが出ない」ことと「意図どおり」は同じではない。文法が正しくても、頼み方が間違っていれば、間違った仕事が正確に実行される。
そのため、変更する前に同じ条件で対象を確認する習慣が役に立つ。
SELECT id, item, stock
FROM supplies
WHERE id = 1;ここで手袋の行が出ることを確認してから、更新を考える。変更後の結果や、変更件数も確かめたい。
学習レクチャー・2026年9月15日更新
また、データを追加する命令は INSERT、行を削除する命令は DELETE だ。削除も対象条件を間違えると影響が大きいので、練習には専用のデータを使おう。
実際のシステムでは、権限やバックアップ、変更履歴、必要に応じたトランザクションなども組み合わせる。トランザクションは、関連する変更をひとまとまりとして扱う仕組みだ。ただし「何でも後から戻せる魔法」ではなく、確定前かどうかなどの条件がある。
KAZU「便利になるほど、確認が大事になるね。」
SQL「速く直せる道具は、速く間違えることもできます。」
KAZU「WHEREさん、今日は残業お願いします。」
SET stock = 8 の意味は？
A．在庫を8増やす
B．在庫を8にする
C．在庫8の商品だけ探す
答え：B。数を指定して置き換える処理。
コードを書く前に、「どの行を」「どの値に変えるか」を一文で書いてみよう。対象を言葉にできないときは、更新する前に条件を整理するところから始めよう。
学習レクチャー・2026年9月15日更新
自分のページができた。情報を保存する場所も見えてきた。
次に欲しくなったのは、自分の手元にはない情報だった。
KAZU「ページに甲府の天気を出したい。」
Python「天気の情報はありますか？」
KAZU「窓の外は見える。」
Python「明日の分は？」
それは困る。明日の空は、今の窓から見えない。
そこで登場するのがAPIだ。
API「天気情報を提供するサービスへ、決められた方法で問い合わせることができます。」
KAZU「外へつながる道路ってこと？」
API「そのイメージは役立ちます。ただ、道路の先には受付があります。」
学習レクチャー・2026年9月15日更新
好きなところへ勝手に入って、欲しいものを持って帰る仕組みではない。どの窓口へ、どんな形式で頼むかが決まっている。
たとえば「甲府の天気」を頼むつもりでも、相手は都市名ではなく緯度と経度を必要としているかもしれない。
KAZU「『甲府です、よろしく』じゃ駄目なの？」
API「受付が受け取れる形にしてください。」
このように、プログラム同士がやり取りするための窓口やルールがAPIだ。この話ではインターネット経由のAPIを扱うが、APIという言葉自体は、もっと広い場面でも使われる。
返ってきた情報は、そのまま完成した天気画面になるとは限らない。気温や天気のコードなどを受け取り、自分のページ側で文字やアイコンにして表示する場合もある。
つまり、「情報をもらう仕事」と「見やすく見せる仕事」は、分けて考えられる。
KAZU「食材が届いても、料理はこっちでする感じ？」
API「そのたとえなら分かりやすいですね。」
学習レクチャー・2026年9月15日更新
また、サービスによっては利用登録や認証、料金、回数制限がある。必要な鍵の扱いもサービスごとに確認する。秘密にするべきキーを、誰でも読めるHTMLやJavaScriptへ書いてはいけない。
道路が一本できると、外の力を借りられる。ただし、相手の受付時間やルールを無視して走れるわけではないのだ。
APIから天気のデータを受け取ったら、必ず完成した天気画面も一緒に届く？
A．必ず届く
B．データを受け取り、自分で画面を作る場合もある
答え：B。何が返るかは、そのAPIの仕様による。
「外からもらいたい情報」を一つ考えよう。次に、それを「自分の画面でどう見せたいか」も書いてみよう。取得と表示を分けると、必要な仕事が整理できる。
学習レクチャー・2026年9月15日更新
APIの受付へ頼み事を送ることになった。
KAZU「頼んだ。じゃあ結果を出して。」
API「まだ届いていません。」
KAZU「今、頼んだじゃん。」
API「返事が届くまで時間がかかります。」
人間同士なら当たり前のことだが、画面の中では忘れやすい。通信には時間がかかる。頼んだ瞬間に、答えが手元にあるとは限らない。
そこで今日は、JavaScriptからAPIへ問い合わせる流れを見てみる。
以下は、同じサイトに /api/example という窓口が用意され、JSONを返す前提の例だ。窓口そのものを作るコードではない。
async function loadExample() {
const response = await fetch("/api/example");
if (!response.ok) {
throw new Error(
`取得に失敗しました: ${response.status}`
);
}
const data = await response.json();
console.log(data);
}学習レクチャー・2026年9月15日更新
fetch() は、指定した場所へ通信するための関数だ。
await は、その処理の結果が得られるまで、この関数内の続きを待つために使う。その間ずっとブラウザ全体が止まる、という意味ではない。
async は、こうした非同期処理を扱う関数につける。
KAZU「専門用語が三人まとめて来たな。」
API「今日は『頼む、待つ、受け取る』が分かれば先へ進めます。」
response は、相手から返ってきた応答だ。そこには本文のほか、処理の結果を示すステータスなどがある。
ここで注意したい。404などのHTTPエラーが返っても、fetch() はそれだけで失敗として例外を投げるわけではない。そのため、response.ok で成功した応答かを確認している。
続いて response.json() で、本文をJSONとして読み取り、JavaScriptで扱える値にする。
たとえば、返事の本文が次のようなJSONだったとしよう。
{"city": "甲府", "temperature": 25}これは形式を説明するための架空の値で、現在の天気ではない。読み取った後は、data.city で都市名、data.temperature で気温の値を取り出せる。
学習レクチャー・2026年9月15日更新
なお、関数は定義しただけでは実行されない。呼び出して、失敗した場合も受け止める。
loadExample().catch(error => {
console.error(error);
});console.log() の出力先は開発者向けのコンソールだ。ページ本文へ表示するには、別途その処理を書く。
KAZU「窓口も必要。呼び出しも必要。画面表示も別。短いコードの裏に仕事があるね。」
API「一つずつ役割を分けると、困った場所も探しやすくなります。」
fetch("/api/example") と書くだけで、そのAPI窓口自体も作られる？
A．作られる
B．作られない
答え：B。これは既にある窓口へ問い合わせる処理。
コードを「送信」「成功確認」「本文の読み取り」「出力」に分けて読んでみよう。全部を暗記するより、それぞれが何を担当しているかをつかもう。
学習レクチャー・2026年9月15日更新
パソコンでは動いた。
KAZU「完成！」
ところがiPhoneで試すと、思ったように動かない。
KAZU「さっき完成したところなんだけど。」
API「別の環境でも確認できて、よかったですね。」
KAZU「励ましの角度が独特だね。」
通信する機能では、自分のコードだけでなく、ネットワークや相手のサービス、ブラウザの制約なども関わる。動かない原因がAPIとは限らない。ボタンの処理や画面の更新に問題がある場合もある。
だから、「APIが悪い」と決める前に、どこまで進んだかを確かめたい。
ボタンは反応したか。通信は送られたか。返事は来たか。受け取ったデータを表示できたか。
KAZU「道路が悪いと思ったら、玄関のドアが開いていないこともあるのか。」
API「あります。」
そして、原因を直すだけでなく、失敗したときの動きも用意する。
次の例は、前回と同じ窓口が存在する前提だ。
async function loadExample() {
try {
const response = await fetch("/api/example");
if (!response.ok) {
throw new Error(
`HTTPエラー: ${response.status}`
);
}
const data = await response.json();
console.log("取得できました", data);
} catch (error) {
console.error("取得できませんでした", error);
}
}
loadExample();HTTPエラーとは、通信先のサーバーからHTTPの返事が届いたものの、その返事が「処理を完了できなかった」ことを示している状態だ。たとえば、指定したページが見つからないときは404、サーバー側で問題が起きたときは500になる。
response.ok は、返事が成功扱いかどうかを確認するための値だ。ステータスが200番台なら通常は true、404や500のようなHTTPエラーなら false になる。
ただし、response.ok が false になっただけでは、catch へ自動的に移るわけではない。そこで throw new Error(...) を使い、こちらから「これは失敗として扱います」と知らせる。
throw は、問題が起きたことを知らせて、通常の処理を中断する指示だ。たとえるなら、受付で「この依頼は処理できません」と分かった時点で、次の作業を止め、非常口へ案内するようなものだ。
try の中で処理を行い、そこで起きた例外を catch で受け止める。例外とは、プログラムの途中で起きた予想外の問題を知らせる仕組みである。
たとえば、JSONではなく壊れた文字列が返ってきた場合、response.json() の読み取りに失敗して例外が起きる。ネットワーク自体に問題がある場合も、fetch() が例外になることがある。catch があれば、こうした問題を受け止め、エラー表示へ進められる。
学習レクチャー・2026年9月15日更新
ここで、ネットワークエラーとHTTPエラーは区別して考えよう。
ネットワークエラーは、サーバーからHTTPの返事を受け取る前に起きる問題だ。Wi-Fiが切れた、DNSで接続先を見つけられない、通信がタイムアウトしたなどがある。この場合、fetch() 自体が例外になり、response は作られない。
一方、404や500は、サーバーからHTTPの返事が届いたうえで、その内容が「見つからない」「サーバー側で問題が起きている」という意味を示している状態だ。この場合、fetch() は返事を受け取るため、通常は response が作られる。ただし response.ok は false になる。
つまり、次のように整理できる。
fetch() が例外になり、catch へ進むresponse.ok を確認し、必要なら throw して catch で扱う流れを短く言うと、こうだ。
「返事を受け取る」→「response.ok でHTTP上の成功か確認する」→「HTTPエラーなら throw する」→「catch が受け止める」。
ただし、ネットワークエラーの場合は、返事を受け取る前に fetch() が失敗する。そのため、response.ok を確認するところまで進まず、直接 catch へ移る。
KAZU「ネットワークエラーは返事が来ない。404や500は、返事は来たけれど内容が失敗なんだね。」
API「その違いを分けると、再試行するか、設定を直すかを判断しやすくなります。」
学習レクチャー・2026年9月15日更新
たとえば、エラーの種類を分けて表示するなら、次のように書ける。
async function loadExample() {
try {
const response = await fetch("/api/example");
if (response.status === 404) {
throw new Error("指定したAPIが見つかりません");
}
if (response.status >= 500) {
throw new Error("サーバー側で問題が起きています");
}
if (!response.ok) {
throw new Error(`HTTPエラー: ${response.status}`);
}
const data = await response.json();
console.log("取得できました", data);
} catch (error) {
console.error("取得できませんでした", error);
}
}この例では、404と500以上を先に分けている。404ならURLや窓口の設定を確認する必要がある。500以上なら、サーバー側の復旧を待つ、管理者へ連絡するなどの対応が考えられる。
ただし、実際のアプリでは、利用者にHTTPステータスをそのまま見せるのではなく、「情報が見つかりません」「サーバーが混み合っています」など、次の行動が分かる言葉に置き換えることも大切だ。
KAZU「同じ失敗でも、直し方が違うんだね。」
API「はい。返事がないのか、返事はあるが失敗なのかを見分けます。」
ただし、このコードの表示先はコンソールだ。実際の利用者には、画面上で「取得できませんでした。時間をおいて再度お試しください」などと知らせる必要がある。
KAZU「押したのに無言、が一番困るんだよ。」
API「処理中か、成功したか、失敗したかが分かると、次の行動を選べます。」
学習レクチャー・2026年9月15日更新
再試行とは、失敗した処理をもう一度やり直すことだ。ただし、何でも繰り返せばよいわけではない。まず、エラーを「再試行しても直りにくいもの」と「時間を置けば直る可能性があるもの」に分ける。
404のようにURLやAPIの指定が間違っているエラー、400番台の入力ミス、401や403のような認証・権限の問題は、同じ条件で繰り返しても解決しにくい。まずURL、入力値、認証情報、権限などを直す必要がある。
一方、ネットワークエラーや、429（短時間にアクセスしすぎたことを示すエラー）、一部の500番台エラーは、一時的な問題の可能性がある。時間を置いて再試行する設計を検討できる。ただし、500番台でも、処理の内容やAPIの仕様によっては再試行が安全とは限らない。
つまり、すべてのHTTPエラーを一律に再試行してはいけない。ステータスコードだけでなく、処理の種類、APIの仕様、エラーの内容を確認して判断する。
たとえば、天気を読むだけの処理なら、ネットワークエラーや一時的なサーバーエラーが起きたときに、回数を制限して再試行する設計は考えやすい。
function isRetryableStatus(status) {
return status === 408 ||
status === 429 ||
status >= 500;
}
function sleep(ms) {
return new Promise(resolve => {
setTimeout(resolve, ms);
});
}
async function loadWeather() {
const maxAttempts = 3;
for (let attempt = 1; attempt <= maxAttempts; attempt++) {
try {
const response = await fetch("/api/weather");
if (!response.ok) {
const error = new Error(
`HTTPエラー: ${response.status}`
);
error.status = response.status;
throw error;
}
return await response.json();
} catch (error) {
const isNetworkError =
error instanceof TypeError && error.status === undefined;
const isRetryableHttpError =
Number.isInteger(error.status) &&
isRetryableStatus(error.status);
const canRetry =
isNetworkError || isRetryableHttpError;
if (!canRetry || attempt === maxAttempts) {
throw error;
}
const baseDelay = 1000;
const exponentialDelay =
baseDelay * 2 ** (attempt - 1);
const jitter =
Math.floor(Math.random() * 300);
const delay = exponentialDelay + jitter;
console.warn(
`${attempt}回目の失敗。` +
`${delay}ms後に再試行します`
);
await sleep(delay);
}
}
}この例では、最大試行回数を3回にしている。最初の試行を1回目と数え、1回目に失敗したら待って2回目、2回目に失敗したら待って3回目を試す。3回目も失敗したら、それ以上は繰り返さず、最後のエラーを呼び出し元へ伝える。
学習レクチャー・2026年9月15日更新
再試行回数には、最初の試行を含めるかどうかで意味が変わる。ここでは maxAttempts = 3 を「合計3回試す」という意味にしている。設計書や画面表示でも、試行回数の数え方をそろえておく。
isRetryableStatus() では、408、429、500番台を再試行候補にしている。408はリクエストの処理が時間内に終わらなかったことを示す。429はアクセス回数の制限に達したことを示す。500番台はサーバー側の一時的な障害の可能性がある。
ただし、これはあくまで一例だ。APIによっては、503だけを再試行対象にしたり、429ではレスポンスの Retry-After ヘッダーに従ったりする必要がある。429を受け取ったら、固定の待ち時間ではなく、サーバーが指定した待ち時間を優先する設計も考えられる。
また、ネットワークエラーを TypeError だけで判定する方法は、環境によっては十分ではない。fetch() が返すエラーの種類や、アプリ側で定義したエラー情報を確認し、必要なら独自のエラー分類を用意する。ここでは、ネットワークエラーとHTTPエラーを区別する考え方を示すために簡略化している。
待ち時間には、指数バックオフを使っている。
baseDelay * 2 ** (attempt - 1) によって、待ち時間はおおむね1秒、2秒、4秒と伸びる。障害中のサーバーへ、短い間隔で何度もアクセスし続けることを避けやすい。
さらに、ランダムな短い時間を加えている。これをジッターという。同じ時刻に多くの利用者が一斉に再試行するのを避けるためだ。
ただし、待ち時間を無制限に伸ばしてはいけない。実際のアプリでは、1回あたりの最大待ち時間や、全体のタイムアウト時間も設ける。利用者を長く待たせすぎないよう、再試行中は画面に「再接続しています」などと表示し、最終的に失敗したら次の行動を案内する。
KAZU「再試行には、対象にしてよいエラー、回数、待ち時間、上限があるんだね。」
API「はい。『もう一度』を自動化する前に、どの失敗なら安全かを決めます。」
また、500番台でも、処理の内容によっては再試行が危険になる。天気の取得のように読むだけの処理なら比較的安全だが、注文や決済では、サーバーが処理を受け付けた後に返事だけ届かなかった可能性がある。
学習レクチャー・2026年9月15日更新
KAZU「ネットワークエラーなら、サーバーが何もしていないとは限らないのか。」
API「はい。返事が届かなかっただけで、裏側では処理が成功している場合があります。」
さらに、再試行には回数だけでなく、処理の性質も関係する。
注文や決済のように、サーバーの状態を変更する処理を、クライアント側から単純に自動再試行してはいけない。通信が切れた時点で、サーバーが処理を受け付けたかどうか分からないことがあるからだ。
KAZU「画面では失敗に見えても、裏では成功していることがあるのか。」
API「通信が切れた場所によっては、そういうことがあります。」
この場合、単純な再試行は危険だ。天気の取得なら「もう一度聞く」だけで済むが、注文は「もう一度実行する」ことになる。
二重処理とは、本来一回だけ行う仕事が、誤って二回行われることだ。たとえば、サーバーでは注文を受け付けたのに、返事が届く前に通信が切れることがある。画面に「失敗したかもしれません」と表示され、利用者がもう一度押すと、同じ商品が二つ注文される可能性がある。
そのため、注文や決済では、まず「再試行してよい処理」と決めつけず、注文履歴や決済状態を確認する。必要なら、サーバー側に状態確認用のAPIを用意し、元の依頼が処理済みか、未処理か、不明かを確認してから次の操作を決める。
また、同じ依頼を識別するための一意な注文番号やリクエストIDを使い、同じIDの依頼を二回受けても一回分として扱う仕組みを用意する。これは冪等性を確保するための設計である。決済や注文では、サーバー側でこの重複防止を行うことが重要だ。
KAZU「同じ依頼に同じ番号をつけて、二回届いても一回として扱うのか。」
API「はい。ただし、その仕組みがサーバー側で正しく実装されている必要があります。」
利用者が「注文する」ボタンを押したら、画面側でボタンを一時的に無効にする方法もある。ただし、これは連打を防ぐ助けにはなるが、通信切れによる再送まで完全に防ぐものではない。ボタンを無効にしただけで、二重注文を防げたと考えてはいけない。
注文や決済で通信が切れた場合は、「失敗したので、もう一度押してください」とすぐ案内するのではなく、「処理結果を確認しています」「注文履歴を確認してください」など、重複を避ける案内を優先する。状態が不明なまま、同じ処理を自動再試行しない。
一方、天気の取得のように読むだけの処理なら、再試行による二重注文の心配は比較的小さい。処理の種類に応じて、再試行してよいかを判断することが大切だ。
KAZU「再試行は、『もう一度聞く』のか、『もう一度実行する』のかで危険度が違うんだね。」
API「はい。読む処理と、注文・決済のように状態を変える処理は分けて考えます。」
学習レクチャー・2026年9月15日更新
待ち時間の上限、再試行の回数、以前のデータを見せる場合の更新日時。こうしたルールを決めるほど、使う人が困る場面を減らせる。
KAZU「まさにAPIは地雷原だね。」
API「だから地図と帰り道を作りましょう。」
「動いた」は大きな一歩だ。
けれど、ゴールの合図ではない。パソコンだけでなくiPhoneでも、通信が速いときだけでなく遅いときにも試す。成功時だけでなく、ネットワークが切れたとき、404が返ったとき、429が返ったとき、500が返ったとき、返事が遅れたときにも確認する。
動作確認とは、一度動いたと喜ぶことではない。どんな条件なら動き、どんな条件で失敗するのかを知ることだ。
失敗は起きるものとして、処理中・成功・失敗の状態を画面に示す。失敗時には、何が起きたかだけでなく、次に何をすればよいかも伝える。ネットワークエラーなら「接続を確認して、もう一度取得する」、404なら「設定やURLを確認する」、429なら「しばらく待ってから再度試す」、500なら「時間をおいて再度試す」など、原因に合った案内が必要だ。
注文や決済で結果が不明な場合は、「もう一度実行する」ではなく、「注文履歴や決済状態を確認する」と案内する。処理が完了していないことを確認できた場合に限り、重複を防ぐ仕組みを使って再実行を検討する。
KAZU「処理の種類だけでなく、失敗の種類によっても帰り道の案内が変わるんだね。」
API「はい。迷った人を同じ場所へ何度も走らせないことが大切です。」
一つ直ると感動する。三つ直れば、ちょっと自慢したくなる。けれど、その日の最後にもう一度、パソコンとiPhoneを手に取る。
「動いた」は大きな一歩。
その一歩を完成へつなげるのは、動作確認と、失敗したときの備えだ。
完成の声は、成功した画面だけでなく、ネットワークエラー、404、429、500などの失敗画面にも、それぞれの帰り道があることを確かめてからでも遅くない。
学習レクチャー・2026年9月15日更新
APIの処理が失敗したら、何でも無制限に再試行すればよい？
A．よい
B．原因や処理の内容に応じて判断する
答え：B。一時的なネットワークエラー、429、または一部のサーバー側の一時的な障害なら、回数と待ち時間を制限して再試行すると直ることがある。一方、404のようなURLの間違い、入力ミス、認証情報や権限の問題には設定や入力の修正が必要だ。
注文や決済では、通信が切れてもサーバー側で処理が成功している可能性がある。結果が不明なまま同じ処理を再試行すると、二重注文や二重決済になるおそれがあるため、まず注文履歴や決済状態を確認し、サーバー側の重複防止の仕組みも利用する。
自分の画面について、「処理中」「成功」「失敗」の三つの表示を考えよう。パソコンとスマートフォン、通信が速いときと遅いときでも試してみる。
失敗したときは、「何が起きたか」だけでなく、「次に何をすればよいか」も表示する。ネットワークエラー、404、429、500などで、再試行してよいのか、URLや設定を直すのか、時間をおいて待つのかを考えよう。
再試行する場合は、対象にするエラー、合計の試行回数、指数バックオフによる待ち時間、最大待ち時間を決める。無限に繰り返さず、最後は利用者へ分かる形で失敗を伝える。
注文や決済のように状態を変更する処理では、通信が切れたときに自動再試行しない。まず処理結果や履歴を確認し、同じ依頼を一回だけ扱うための注文番号やリクエストIDなど、サーバー側の重複防止策があるかを確認する。
処理とエラーの種類に合った案内を用意し、利用者が迷わず戻れる道を作るところまでが、画面づくりの仕事だ。