ソフトウェア開発

学ぶこと

• HTMLは内容の構造、CSSは見た目、JavaScriptは動作を担当する。
• ファイルを編集する場所とブラウザで結果を見る場所を区別する。
• エラーは失敗の通知ではなく、調べる手がかりとして読む。

やってみよう

1. メモ帳やエディターでindex.htmlを作る。
2. AIに見出し・説明・ボタン1つだけのコードを頼み、ブラウザで開く。
3. 自分で文言と色を変え、ボタンを押した結果を確認する。

学ぶこと

• 「便利に」ではなく、誰が何を入力し何が起きるかを書く。
• 画面で覚えている状態と、保存されたデータは別物。
• 作らない機能を決めると、完成までの道筋が短くなる。

やってみよう

1. 持ち物チェックの操作を「追加・完了・削除」の3つに絞る。
2. AIに実装前の計画を出してもらい、1機能ずつ進める。
3. 空欄・長い名前・連続クリックで動作を試す。

学ぶこと

• 変数は値、関数はまとまり、条件分岐は場合分けとして理解する。
• コンソールのエラーから、ファイル名と行番号を探す。
• 差分は変更した場所の一覧。修正の影響範囲を確認する。

やってみよう

1. 主要な関数3つをAIに説明させ、自分の言葉で言い直す。
2. 1つだけ意図的な不具合を入れ、再現手順を書いて直す。
3. Gitまたは履歴保存で、動く版と実験中の版を分ける。

学ぶこと

• 正常な入力だけでなく、空欄・上限・重複も試す。
• キーボード操作や小さい画面への対応も品質の一部。
• APIキーや秘密の設定は、公開する画面のコードに置かない。

やってみよう

1. AIにテスト観点を提案させ、必要な5項目を自分で選ぶ。
2. 友人に説明せず触ってもらい、迷った操作を記録する。
3. 保存データの消去方法と、読み込み失敗時の表示を用意する。

学ぶこと

• 公開先、独自ドメイン、サーバーの役割を分けて考える。
• アクセス数だけでなく、目的を達成できたかを観察する。
• AIへ任せる変更にも、計画・差分確認・動作確認を残す。

やってみよう

1. 利用方法、制限、問い合わせ先を短くまとめる。
2. 個人情報を集めない小さな版から公開する。
3. 感想を3件集め、優先度の高い改善を1つ実装する。