AIエージェントの時代に文系大学生がWebアプリ開発からプログラミングを勉強する

高校生の頃、HTMLやCSSを使って簡単なWebサイトを自作した経験がある。

当時世に出たばかりのInkscapeを使い、SVG画像をあれこれ触っていた。

SVGファイルをメモ帳で開き、直接テキストを書き換えてもブラウザに反映されるのが面白かった。

しかし、そこから先にある「JavaScript」や「本格的なプログラミング」の壁は高かった。

高校生の頃に簡単なプログラミング本を買い、Pythonで席替えを自動化する程度は試したことがある。

その後も入門書を何冊か買ったが、どれも全体の3割くらい読んだところで放り投げてしまった。

文系大学生がぶつかったコードの壁

見た目は作れても動かせない

HTMLとCSSを使えば、ボタンの配置や文字の装飾は自由に指定できる。

だが、そのボタンをクリックしたときに裏側で計算を行い、画面の表示を動的に書き換える処理となると、途端に手も足も出なくなった。

入門書を開くと、関数の定義や配列の操作といった抽象的な文法が延々と続く。

「なぜ今これを覚える必要があるのか」が実感できず、モチベーションが続かなかった。

勉強自体は好きだが、自分は生活の中で必要性が高いものを優先する性格だ。

当時はプログラミングの切実な必要性を感じられず、学習が進まなかったのだと思う。

高校生の頃に一度挫折してしまったからこそ、大学に入ってから「やりたいことリスト」の中にプログラミング学習を入れたのかもしれない。

大学生でやりたいことリスト

ロジックをAIに任せる分業スタイル

言葉で仕様を伝える開発への転換

転機となったのは、このブログを開設したタイミングでAIエージェントを本格導入したことだ。

すべてのコードを自力で書くのではなく、得意分野ごとに役割分担をするアプローチに切り替えた。

自分が担当するのは、画面の見た目や「どんな動きをさせたいか」という言葉の設計だ。

そして、裏側で動く複雑なJavaScriptのロジックはAIに書いてもらう。

「右側のボタンを押したら、入力欄のテキストを画像に変換して保存する」といった仕様を日本語で投げるだけだ。

すると、AIが瞬時に動くコードを書き出してくれる。

ゼロからコードを書く苦痛がなくなり、開発のハードルが一気に下がった。

いまでは簡単なWebアプリなら、一週間に5〜6個作れるようになっている。

作業を効率化するWebアプリ開発の実践

専用ツールを数十分で自作する快適さ

実際に作ったのは、日々のブログ運営や作業を効率化するための小さなWebアプリたちだ。

たとえば、記事で使うサムネイルや比較表を一瞬で作成できる専用ツールを自作した。

ブログの雰囲気に合わせたサムネイルを作るだけで十分なので、Canvaのような多機能ツールを使うと逆に時間がかかってしまう。

画像編集ソフトを手作業で開いて毎回作ると確実に気が狂ってしまうため、自分専用の仕組みが必要だった。

ノリでブログを始めたら、Webアプリを開発していた話

ほかにも、マネーフォワード等の既存アプリでは少し物足りなかったため、貯金のモチベーションを維持するための専用資産管理画面なども作成した。

大学生がお金の勉強をして、自分専用の「資産ダッシュボード」を作ってみた話

世の中に素晴らしい既存ツールは数多くあるが、自分の好みに100%合致するものは意外と少ない。

「自分専用の道具」を数十分で作れる体験は、想像以上に快適だった。

開発を進める4つのステップ

開発の手順は非常にシンプルで、以下の4つのステップで進めている。

STEP1:日本語で作りたいものを箇条書きにする

まず、どんな画面でどんな機能が欲しいのか、「要望(作りたいもの)」を日本語で整理する。

STEP2:AIエージェントに初期コードを生成させる

整理した仕様をAIに渡し、動く状態のHTML・CSS・JavaScriptを一括で生成してもらう。

STEP3:画面を見ながらデザインを微調整する

手元で動くものができたら、HTMLやCSSの知識を使ってボタンの配置やフォントサイズを好みに整える。

STEP4:分からないロジックをAIに質問して学ぶ

コードの中で気になる部分や動かない箇所があれば、「この処理は何をしているのか」をAIに質問してその場で疑問を解消する。

AIが専属の家庭教師になってくれるため、分厚い参考書をめくるよりも遥かに早く理解できる。

とはいえ、作り終わったものの仕様や実装から後追いで勉強することの方が、今はまだ多い。

HTMLの基礎知識が指示の精度を上げる理由

Webの基本用語がAIへの解像度を高める

実際にAIと開発を進めて驚いたのは、過去にかじったHTMLやCSSの基礎知識が想像以上に役に立ったことだ。

Webの基本用語を知っていると、AIに対する指示の解像度が格段に上がる。

たとえば「中央に寄せて」とだけ曖昧に指示するよりも、「Flexboxを使って上下左右中央揃えにして」と伝える方がAIの精度は圧倒的に高い。

「入力フォームはinputタグで作り、余白はmarginではなくpaddingで確保してほしい」といった指定もスムーズに通る。

画面と処理のつながりが体感で理解できる

もう一つのメリットは、画面の見た目と裏側の処理のつながりが手触り感を持って理解できる点だ。

HTMLで配置したボタンのIDを、JavaScriptが取得してクリックイベントを発火させる。

自分が作りたいものを動かすからこそ、この仕組みを理解しようと前向きになれる。

文法書でいくら読んでも理解できなかった概念が、「自分が動かしたいアプリ」を通じて自然と腑に落ちた。

AIエージェント時代のプログラミング学習

作りながら必要な知識だけを拾い集める

プログラミングを始める際、分厚い教科書を最初のページから順番に覚える必要はないと思う。

文法をすべて暗記してからアプリを作るのではなく、作りたいもの起点で必要な知識を拾い集める方が圧倒的に挫折しにくい。

AIエージェントは、こちらの拙い要望を具現化してくれる頼もしい相棒だ。

まずは日々の作業を1分でも楽にするような、小さなWebアプリ作りから試してみてはいかがだろうか。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です