こんにちは！
フロントエンドエンジニアのあまんちゅです。
みなさん、 AI 使っていますか？
私も日々活用していますが、最近はAIのサポートがとても強力で、正直、細かい仕組みを理解していなくても“それっぽいコード”が動いてしまうこともあります。
それは便利で心強い一方で、
「このままで本当にいいのかな？」と感じる瞬間が増えてきました。
実際、“なぜそのコードで動くのか”を理解できていないと応用できない場面もあります。
そこで今回から、「AIにも相談しつつ、自分の手で動かし、理解しながら学び直す」という形で、JavaScriptの基礎を整理していくシリーズを始めます。
AIは補助輪、主役は自分の理解。
そんなスタンスで進めていきます。
JavaScriptとは？
JavaScriptは、Webページに動きをつけるためのプログラミング言語です。
Web制作では、次の3つがよくセットで出てきます。
| 役割 | 言語 | 例え |
|---|---|---|
| 構造 | HTML | 骨組み |
| 見た目 | CSS | デザイン・装飾 |
| 動き | JavaScript | ボタンの動作、スクロール演出、入力チェックなど |
最近では、React / Vue / Next.js などのフレームワークにも使われ、Webアプリ制作にも必須の存在です。
まずは動かしてみる
理論より先に、手を動かして動く感覚を掴むところから始めていきます。
今回は、ブラウザの機能を使ってJavaScriptを実行してみます。
✅ コンソールの開き方（Chrome例）
1. 右クリック →「検証」
2. 上部メニューから Console を選択
ここでJavaScriptの動作を確認できます。
Hello JavaScript!
コンソールが開けたら、次のコードを入力してみます。
console.log("Hello JavaScript!");
Enterキーを押すと…
ブラウザが命令を受け取り、結果を出力してくれている状態です。
これがJavaScriptが動作した最初の一歩です🙌
今回のまとめ
- JavaScriptはWebに“動き”をつける言語
- フレームワークにも使われる重要な基礎技術
- ブラウザのコンソールでも実行できる
今回は「とにかく動かしてみる」ことを目的にしました。
一緒に体感した方がいたら、少しでも“手で触れた実感”があればOKだと思います。
Try（練習）
よかったら、コンソールで、以下も試してみてください👇
console.log("今日の目標はJavaScriptの基礎を1つ知ること");
console.log(5 + 3);結果が表示されれば成功です!
次回予告
次回は変数とデータについての内容です！
文字や数字を扱うための「値」と、それを保存する「変数」について触れていきます。
小さく進んで、確実に理解していく予定です！
次回の投稿もお楽しみに！
おまけ
AIとの併走メモ🏃♀️💨
今回の記事は、AIと相談しながらテーマや流れを整理して執筆しています。
「JavaScriptの基礎をちゃんと理解していきたい」という気持ちが出てきたので、その学習ログとしてシリーズ化することにしました。
AIには、
- 学習の進め方の提案
- 記事の構成のヒント
- 書いた内容のブラッシュアップ
といった部分で協力してもらいながら、内容そのものは自分で手を動かして理解していくスタイルです。
“AIにコードを丸投げ”ではなく、AIと一緒に学習計画を立てて、自分の理解で積み上げていきたいと思います！
AIは伴走役。
「考え方」や「理解するプロセス」は自分で育てる。
