Day 1：JavaScriptとは何か
JavaScript入門90日コースの1日目では、「JavaScriptってそもそも何者なのか？」というところから、実際にブラウザで動かしてみるところまでをじっくり体験していきます。 まだプログラミングが初めての方でも、肩の力を抜いて読み進められるように、できるだけやさしく噛み砕いて説明していきます。
JavaScriptでできること
Webページを「動かす」ための言語
JavaScriptは、ひと言でいうと「Webページを動かすためのプログラミング言語」です。 ブラウザの中で動き、画面の内容を書き換えたり、ボタンをクリックしたときに何かを起こしたり、フォームに入力された内容をチェックしたりといった「インタラクティブな動き」を担当します。
例えば、次のようなことがJavaScriptでできます。
- 画面の内容を動的に変える ボタンを押したら文字が変わる、画像が切り替わる、リストが増えるなど。
- ユーザーの操作に反応する クリック、キーボード入力、スクロールなどに応じて処理を実行する。
- フォームの入力チェックをする メールアドレスの形式が正しいか、必須項目が埋まっているかなどを送信前に確認する。
- アニメーションやエフェクトをつける フェードイン・フェードアウト、スライド表示、カウントアップなど。
JavaScriptはブラウザの中だけでなく、Node.jsという仕組みを使うことでサーバー側でも動かすことができ、バックエンド開発やツール作成にも使われています。 ただ、この90日コースの序盤では「ブラウザの中で動くJavaScript」にフォーカスして進めていきます。
HTML・CSS・JavaScriptの役割
三つの役割分担をイメージする
Webページは、ざっくり言うと次の3つの要素でできています。
- HTML：骨組み（構造）
- CSS：見た目（デザイン）
- JavaScript：動き（ふるまい）
それぞれを、人にたとえてイメージしてみましょう。
- HTML（骨組み） 人の「骨格」や「内臓の配置」のようなものです。 どこに見出しがあり、どこに文章があり、どこに画像があるか、といった「構造」を決めます。
- CSS（見た目） 服やメイク、髪型のような「スタイル」を担当します。 文字の色、背景色、余白、レイアウトなどを指定して、見た目を整えます。
- JavaScript（動き） 手を振る、歩く、話す、といった「動き」を担当します。 ボタンを押したら何かが起こる、スクロールしたらアニメーションする、といった振る舞いを作ります。
役割のイメージ例
例えば、簡単なボタン付きページを考えてみます。
- HTML：ボタンそのものを作る
- CSS：ボタンの色や形を整える
- JavaScript：ボタンをクリックしたときの動きを決める
この3つが組み合わさることで、はじめて「見た目も良くて、動きもあるWebページ」が完成します。
ブラウザでJavaScriptを実行する方法
いちばん手軽な「ブラウザのコンソール」
JavaScriptは、特別なソフトをインストールしなくても、今使っているブラウザの中でそのまま実行できます。 まずは「開発者ツール」と呼ばれる機能を使って、JavaScriptを直接打ち込んで動かしてみましょう。
代表的なブラウザでの開き方は次の通りです。
- Google Chrome / Microsoft Edge
- Windows：
F12キー、またはCtrl + Shift + I - macOS：
Command + Option + I
- Windows：
- Firefox
- Windows：
F12キー - macOS：
Command + Option + I
- Windows：
- Safari（Mac）
- まず「環境設定」→「詳細」→「メニューバーに“開発”メニューを表示」にチェック
- その後、メニューバーの「開発」→「JavaScriptコンソールを表示」
開発者ツールを開くと、画面の下や右側にパネルが表示されます。 その中に「Console（コンソール）」というタブがあるので、それをクリックします。
このコンソールが、JavaScriptを直接入力してすぐに試せる「ミニ実行環境」になります。
console.log()とは何か
「コンソールにメッセージを出す」ための基本中の基本
console.log() は、JavaScriptでいちばん最初に覚えると言ってもいいくらい基本的な命令です。 役割はとてもシンプルで、「コンソールにメッセージを表示する」ために使います。
書き方は次のようになります。
console.log("Hello JavaScript");
console：ブラウザのコンソール（開発者ツールのコンソール）を指すオブジェクト.（ドット）：オブジェクトの中の機能（メソッド）を呼び出すための記号log：メッセージを出力するためのメソッド（機能）("Hello JavaScript")：表示したい文字列を引数として渡している部分
つまり、「コンソールに“Hello JavaScript”という文字を表示してね」という命令になります。
開発者ツールの使い方（コンソール編）
コンソールにJavaScriptを書いてみる
- ブラウザで適当なWebページを開く 例：Googleのトップページなど、どこでも構いません。
- 開発者ツールを開く 先ほどのショートカットキーで開きます。
- Consoleタブを選ぶ 「Console」または「コンソール」と書かれたタブをクリックします。
- コンソールの入力欄にJavaScriptを書く 画面の下部に
>のようなプロンプトがあり、その右側が入力欄になっています。 - 次のコードを入力してEnterキーを押す
console.log("Hello JavaScript");
Enterキーを押すと、その下に
Hello JavaScript
と表示されれば成功です。
実践1：「Hello JavaScript」を表示してみる
ステップバイステップでやってみる
ここからは、実際に手を動かしてみる「実践編」です。 まずは、いちばんシンプルな「Hello JavaScript」を表示してみましょう。
手順
- ブラウザで任意のページを開く
- 開発者ツールを開く
- Consoleタブを選ぶ
- 次のコードを入力する
// これはコンソールにメッセージを表示するための基本的なコードです
console.log("Hello JavaScript");
- Enterキーを押す
コンソールに Hello JavaScript と表示されれば、JavaScriptがちゃんと動いている証拠です。
実践2：名前や好きな言葉をコンソールに表示する
自分の言葉でJavaScriptを動かしてみる
次は、読者自身の名前や好きな言葉を表示してみましょう。 プログラミングは「自分のものにする」ことが大事なので、ぜひオリジナルのメッセージで試してみてください。
例1：名前を表示する
// 自分の名前をコンソールに表示する例です
console.log("名前：山田太郎");
// 好きなニックネームでもOKです
console.log("ニックネーム：Taro");
例2：好きな言葉を表示する
// 好きな言葉や座右の銘を表示してみましょう
console.log("好きな言葉：継続は力なり");
// 英語のフレーズでもOKです
console.log("Favorite quote: Keep it simple.");
例3：複数行まとめて書いてみる
// まとめていろいろ表示してみる例です
console.log("こんにちは、JavaScript！");
console.log("今日はJavaScriptの練習をしています。");
console.log("好きな言葉：挑戦し続ける");
console.log("好きな食べ物：カレーライス");
コンソールに自分の情報がずらっと表示されると、「あ、ちゃんと自分の書いたコードが動いているんだ」と実感しやすくなります。
コード例：コメント付きテンプレート
初心者向けの「コンソール練習テンプレート」
ここでは、初心者がそのまま真似して使えるように、コメント付きのテンプレートコードを紹介します。 コンソールにそのまま貼り付けて、少しずつ書き換えながら練習してみてください。
// ==============================
// JavaScript コンソール練習テンプレート
// ==============================
// 1. 挨拶メッセージを表示する
// console.log() はコンソールにメッセージを表示するための命令です
console.log("Hello JavaScript");
// 2. 自分の名前を表示する
// ダブルクォーテーション " " の中に表示したい文字を書きます
console.log("名前：山田太郎");
// 3. 好きな言葉を表示する
console.log("好きな言葉：継続は力なり");
// 4. 好きな食べ物を表示する
console.log("好きな食べ物：ラーメン");
// 5. 好きなプログラミング言語（今はJavaScript！）を表示する
console.log("好きなプログラミング言語：JavaScript");
// 6. 自由にメッセージを書いてみましょう
// 下の行を自分の好きな文章に書き換えてみてください
console.log("今日はJavaScriptの練習をしています。とても楽しいです！");
コメント（// から始まる行）は、JavaScriptにとっては「読み飛ばされる説明文」です。 コードの意味を自分なりに書き込んでいくと、理解がぐっと深まりやすくなります。
ブラウザ以外のJavaScript実行環境（軽く触れておく）
Day 1ではブラウザのコンソールを使いますが、JavaScriptを動かす環境はほかにもあります。
- オンラインのJavaScript実行サイト ブラウザ上でコードを書いて、その場で結果を見られるサービスが多数あります。
- Node.js パソコンにインストールして、ターミナル（コマンドライン）からJavaScriptを実行できる環境です。 サーバーサイド開発やツール作成などにも使われます。
- エディタ＋ブラウザ VS Codeなどのエディタで
.htmlファイルを作り、その中にJavaScriptを書いてブラウザで開く方法もあります。
90日コースの序盤では、「ブラウザのコンソール」がいちばん手軽で、環境構築のハードルも低いので、まずはここから慣れていくのがおすすめです。
Day 1の成果物：JavaScript実行環境を手に入れる
Day 1のゴールは、「JavaScriptをすぐに試せる環境を自分の手で用意できるようになること」です。
- 開発者ツールを開けるようになった
- Consoleタブを見つけられるようになった
console.log()を使ってメッセージを表示できた- 自分の名前や好きな言葉を表示してみた
これができていれば、立派な「JavaScript実行環境」を手に入れたことになります。 ここから先のDay 2以降では、この環境を使って、変数・条件分岐・ループなど、少しずつプログラミングらしい要素を積み上げていきます。
まとめ：まずは「動かしてみる」ことが大事
Day 1では、JavaScriptの役割と、ブラウザでの基本的な実行方法を体験しました。
- JavaScriptは「Webページの動き」を担当する言語
- HTMLは骨組み、CSSは見た目、JavaScriptは動き
- ブラウザの開発者ツールのコンソールで、すぐにJavaScriptを試せる
console.log()でメッセージを表示するのが第一歩
プログラミングは、頭の中だけで理解しようとすると途端に難しく感じますが、「とりあえず動かしてみる」ことを繰り返すと、自然と感覚がつかめてきます。 Day 1のうちに、ぜひ何度もコンソールを開いて、好きなメッセージを表示して遊んでみてください。 それが、90日後にしっかりJavaScriptを使いこなすための、いちばん大事な最初の一歩になります。
