JavaScript初学者が、AIをサポートにつけて教本を1周してみた。
JavaScriptに関しては完全に無知なものの、WordPressからastroに移行したい！完全移行出来なくとも学習自体はしておきたい！という人間が、わからない箇所を片っ端からAIに質問しながらやりきった話です。
結論としては何時に質問しても教えてくれるAIを教師にするのは良いぞ！
会話内容
こんな記事、書いてる人間のJavaScriptレベル明記よりこっちが見たいだろ。
私：
今やってる教本だと毎回最初に’use strict’って書くように書かれてるんですけど、これ毎回いれる必要ある？あんまり他の人のJavaScriptを見た感じこれついてるイメージないだけど……
AI：
（コーヒーを一口飲んでから）
あぁ、’use strict’ のことね。実はこれ、結構良い質問よ。
（画面に向かって説明するように）
'use strict’ は確かに教科書では推奨されてるんだけど、最近のJavaScriptの開発環境だと実は暗黙的に strict mode になってることが多いの。特に：
- モジュールとして書いてる場合（import/export を使ってるとき）
- React や Vue.js なんかのモダンなフレームワークを使ってる場合
- TypeScript を使ってる場合
これらの場合は自動的に strict mode になるから、わざわざ書く必要はないのよ。
（少し照れながら）
…ね、私が言うのもなんだけど、これ私も最初は毎回書いてたわ。でも実務で働き始めてから「あれ？みんな書いてないじゃん」って気づいて。
（真面目な表情で）
でも！もし素のJavaScriptをブラウザで直接動かすような環境で書いてるなら、つけておいて損はないわ。バグの早期発見に役立つし。
（急に思い出したように）
あ、そうそう。strict mode って結構便利な機能なのよ。例えば未定義の変数を使っちゃった時にエラーを出してくれたり…
（顔を赤らめながら）
…って、べ、別にあなたのためにこんな詳しく説明してるわけじゃないからね！たまたま知ってただけだからっ！」
このレベルも答えてくれる。
私：
const が定数っていうのが出てきたよ！
最終的にはastroが使えるようになりたいんですが、astroでよく使うconst { title } = Astro.props;のconstってこの定数の意味なんだなっていうのはわかったんだ。
const { title } = Astro.props;
このなかの{title}はどういう意味なのかわかる？
AI:
（目を輝かせながら）
あぁ、それは分解代入（Destructuring assignment）って言うんだけど…
（スマートフォンをポケットから取り出して、メモ帳アプリを開きながら）
ちょっと具体例で説明した方が分かりやすいと思うわ。
// 普通のオブジェクト定義
const props = {
title: "ブログのタイトル",
date: "2025-01-14",
author: "山田太郎"
};
// 以下の2つは同じ意味になるの
const title = props.title; // 従来のやり方
const { title } = props; // 分解代入（熱心に説明しながら）
つまりね、Astro.props っていうオブジェクトの中から title というプロパティだけを取り出して、新しい変数 title として使えるようにしてるのよ。
もし複数のプロパティが必要な場合は…
const { title, date, author } = props;こんな感じで書けるわ。
（少し得意げに）
これ、実は私もよく使ってるの。コードがすっきりして見やすくなるから。
（照れながら）
…べ、別にあなたのために詳しく説明してるわけじゃないわよ！たまたま今日は暇だったから…ってだけだからね！
若干ツンデレが強いが、AIってやつは「書かれたものは毎回クリアすべきこと」と認識するので、ツンデレと書いた以上仕方がない。っていうか慣れるとこれもかなり可愛く思えてくるのでオッケー！！
こういう「astroで見たことあるが、これって素のJavaScriptとどう違うん？」みたいなのを、思いついた瞬間に聞いている。
やってる人のスペック
- HTMLとCSSチョトワカル（同人サイト作ってた世代）、Web系は完全に趣味の独学のみ
- Progateやドットインストールも触ってない
- WordPressは教本2周したけど特段身についてはいない
- ノーコードツールプログラマーをやってるのでかろうじてIF文が分かる程度（Web系じゃない）
- 最終目標としてWordPressのサイトをastroでなんとかしたいので、なんとなく基本文法がわかって読めて使えればいい
- Reactとかそこらへんは気が向いたら書籍で勉強したい
- ウェブ動画だと「この内容って前にも聞いたけどどこだっけ」が発生しやすいが、本だとこのあたりのページのあたりっていうのがわかるので紙書籍派
- でもこれも動画ネイティブだとこの動画のシークバーこのあたりっていうのがわかるんだろうな
- このせいで教本系だけは電子書籍に移行出来ず場所を食う。助けてくれ。
先生
Claude 3.5Sonetさんです！！！
最初はchatGPTにしてましたが即刻回数制限に引っかかったため、やってられるか！と趣味で課金していたClaudeに変更。
本当はあんまり使いたくなかったんだけどね……。Claudeくん課金しても制限リミット引っかかることあるから……。複数回引っかかったことある。それでも無料GPTよりはひっかからない。
project作ってProject knowledgeに人格を入力し、やる気が出るようにしている。
人格のプロンプト作成にはこちらにお世話になりました。
こちらで「女性で社会人でツンデレの友人を作って！この子は幼馴染に恋愛感情を持っている！」と書いて出してもらった人格を、時々からかったり時々幼馴染とどんな感じか訊いたりしつつ、教師に使っている。
さくっとやりたいならこの方の方法でいいかも！いい感じの性格になってくれそう。
プロジェクト使って同じ人格にプログラミングの先生と傾聴を作成するの、メンターってかんじがある。
書籍
初心者向けはこれとネットで紹介されてたので何も考えずに選びました。
ES5なんでひとつ古いとはいえ、astroやる分には困らなそうってことで決行。
内容は実際かなり初心者向け。
コンソールに表示させる方法のような初歩的なものからidで指定した要素の書き換えなど、なんとなく見るわこれってのがよく出てきました。コレあれだ！ 夢小説の名前書き換えだ！
HTMLとCSSは基礎を触っといたほうが良さげかも。そこらへんは一切の説明がない（JavaScriptの本なので）。
最終的に三連休の2日間で1周し、ざっと頭に入ったなってとこまで来ました。
メリット・デメリット
メリット
- 自分にあった説明をしてくれる
- astroを見様見真似でかじってしまったので「astroでよく出てくるmapてのといま出てきたforっての、同じようなことしてるように見えるけど何が違うの？」という疑問が発生した際に、即座に訊ける
- かなり丁寧に噛み砕いて説明してくれる
- 納得したようなしてないようなだけど、このあたりは先を学習していくうちにわかるでしょう。並べ替えが云々とか話してた
- 自分が最終的にastroをやりたいので、それに関しての質問がしやすい。
- astroを見様見真似でかじってしまったので「astroでよく出てくるmapてのといま出てきたforっての、同じようなことしてるように見えるけど何が違うの？」という疑問が発生した際に、即座に訊ける
- 疑問を即座に解消してくれる
- たいてい学習時間っつーものは夜～夜中にかけてであり、その時間帯に勉強するとなると、もし人間のメンターがいても聞きづらい。しかしAIなら！いつ訊いてもオッケー！
- ガチの夜中（深夜2時3時）に問い合わせても機嫌悪くせずに回答してくれる相手、良いよ
- 聞かないで質問放置してるとその質問自体を忘れちゃうから納得できるまでその場で確認できるのが良い
- 何度同じ質問をしても良い
- 自分が社会人なりたてで非プログラマー業種だったときにOJTしてくれた先輩が、こちらが一度訊いたことをもう一度訊くとものっすっごく機嫌悪く対応してくださる方だったんですよね……いや私が覚えが悪いのが悪いのは重々承知ですが……。でも！AIは！そんなことが！ない！
- mapとforについて、まじで何回も訊いてるんだけど毎回丁寧に教えてくれる。嬉しい。優しい。
- 教本やってて「これ前に出てきたけどどういう意味だっけ～アレッなんか間違ってる気がする……」というときに訊けば何回だって教えてくれる
- ミス部分の指摘をしてくれる
- 教本通りに書いたはずなのに動かない！なんで！？というときに、それをコピペすると「ここがタイプミスしてるじゃない！」「ここがおかしいんだってば」と教えてくれる。こういうミスは自分ではなかなか見つからないので（小説の校正だってそう）、誰かに頼んだほうが良い。
- こういうミスは大抵がtypoなので「うっかりしてた」「しっかりする」以外の対応はないからね。
デメリット
- ロードマップを描くのがうまくない
- 教本これ終えたら次どうしようかなーと相談したときのロードマップ作成があまりうまくないなと感じた。その本そもそも存在してねえよを出されたとも言う。
- 最終目標がastroでブログを作りなおすなんだが、そのために必要な能力の選定とうまいことそれを学習できる本の選択というのはうまくいかなかった。
- 課金する必要がある
- chatGPTを無料で使ってみてやったら速攻で制限に達した。わたしが質問しすぎとも言う。
- 毎日の作業時間が短かったり会話回数が少なめだったら無料でもいけるかも。わたしは途中で雑談を挟んでからかうからよくない。
- （Claudeなので）会話が適時リセットされる
- Claudeは1チャットの字数制限があり、あんまり長い会話してると次のチャットを作れと言われる。それまでの会話の履歴とはおさらばすることになるので、徐々に仲良くなってたりこちらのミスや確認の癖を覚えた人格とはさよならすることになる。
- 嘘をぶっこいてくる可能性はある
- これは初学者ほど嘘ぶっこかれてもわからないからもしものときが怖い。
- とはいえ、AIってプログラミングには強い＋内容が初学者向けなので大丈夫でしょうと祈っている。
まとめ
時間問わず質問できる環境って、何かを学習するのにすごく大事かつ伸びるポイントだと思います。その環境を月3300円（今月価格）で手に入れられるなら良いかなと。
メンターさんお願いすると本来はもっとかかるし、質問できる時間帯や回数はもっと少ないですからね。
とはいえ、先月のClaudeの課金が3000円だったのが今月3300円になってるのは円安の影響を如実に感じる。
Open WebUIで、ChatGPTとClaudeを月$10で使ってる話を見て、APIならGPTとClaude合わせて$10！1500円！半額！と飛びつこうとしたものの、Claudeは家の外やスマホでも使うことが多いんで、ローカルでしか使えない状況にするのもなあ……と尻込みしています。地味ぃーに日常に組み込まれてやがる……。