ProgateでJavaScriptの勉強を始めました😃 現在JavaScriptⅡまで終わらせています。変数とかif文やelseの分岐、配列といったものが出てきて、Excelのマクロに似ているなという印象です。
現状はHTML/CSSと同様、お手本を真似して書いており、できたことはテキストの出力のみ。まだJavaScriptの全体像がよくわかっていないので、そもそもJavaScriptでできることが何なのか、調べたくなってきました🧐
とりあえずJavaScriptの勉強を始めてみたけど、JavaScriptってそもそも何ができるの？
JavaScriptはWebページに動きを与える言語です。例えば…
JavaScriptとは？
- HTML＝骨組み（文章やボタンなどの“部品”）
- CSS＝見た目（色・配置・サイズ）
- JavaScript＝動きや反応（クリックしたら開く／数値を計算する／画面を書き換える）
基本はブラウザの中で動く言語です。ボタンを押す・文字を入力する・時間の経過などの“出来事（イベント）”を受け取って、画面の部品（DOM：Document Object Model（ドキュメント・オブジェクト・モデル）を書き換えるのが得意です。
ほうほう。ブラウザの中で動きや反応を担当しているんだね。
そのとおりです。HTMLが構造、CSSが見た目を担当するのに対して、JavaScriptは動きをつける役割を持っています。
具体的に何ができるの？
何ができる？
- インタラクション：メニュー開閉、タブ切り替え、モーダル表示
- 入力チェック：必須チェック、文字数・メール形式の検証
- 動的表示：時計、カウントダウン、スライドショー
- データ操作：計算、条件分岐、繰り返し処理
- 保存：ブラウザにメモ（
localStorage） - 通信：サーバーやAPIからデータ取得
- 描画：Canvasで図形・グラフ
なんかいろいろ出てきたな。よくわからん用語が多いから解説してよ
了解です😊 一つひとつ、初心者でも“目に浮かぶように”理解できるように説明していきますね！
インタラクション（interaction）
意味：
ユーザーがクリック・入力など“何か操作したとき”に、画面が反応すること。
例：
- メニューをクリックすると開く／閉じる
- 「もっと見る」ボタンを押すと追加の文章が出てくる
- ポップアップ（モーダル）が表示される
イメージ：
↑
↓
おお、ボタンを押すとテキストが切り替わるね。
うまく動きましたね！ こうした小さな動作が確認できると、コードを書くのが一段と楽しくなりますよ。
入力チェック
例えば空欄のときに「送信」を押すと、赤色文字で注意メッセージが表示されます。こういった地味な動きもJavaScriptで制御していたりします。
（※「山田 太郎」は未入力のときに自動表示されるサンプルです）
↓
こういった細かい動き（チェック）もJavaScriptでフォローしているんだね。
そうなんです。ユーザーの入力に応じてリアルタイムに反応したり、エラーを表示したりするのもJavaScriptの得意分野です。
動的表示
ライブ時計：24時間/12時間をボタンで切替。端末のローカル時刻で動作。
カウントダウン：datetime-local に目標日時を入れて「開始」。タブが隠れると自動停止→復帰。
スライドショー：自動再生＋前後ボタン＋ドット。ホバーで一時停止、復帰も自動。
おおおー、動画になると動きがわかりやすいね。こういうことができるんだ。時計やスライドショーなど、まさしく「動的表示」だね。こういうのを配置できたら、サイトの雰囲気もカッコよくなりそうだなぁ。
そうですね。JavaScriptを使うと、時計やスライドショーのように動きのある要素を簡単に作れるようになります。ちょっとしたアニメーションでも、サイト全体の印象がぐっと引き締まりますよ。
まとめ
JavaScript第1弾として、今回はJavaScriptで何ができるのかを具体的に見てきました😃 「サイトで動くものを作る」っていうイメージはあったのですが、実際にこういうものが動かせる、という実例を確認できたのは良かったです👍
次回は残りの分も確認し、さらにJavaScriptへの理解を深めて、勉強のモチベーションにしていければなと思います。ではでは。
