JavaScriptを始める前に

留学生のためのJavaScript学習ガイド：Webを動かす魔法まほうを学ぼう

留学生りゅうがくせいのみなさん、こんにちは！プログラミングの世界へようこそ。

みなさんが毎日使っているスマートフォンやパソコンの画面がめん。ボタンを押すとメニューが出てきたり、地図が動いたりしますね。これはすべて「JavaScript（ジャバスクリプト）」という言葉が命令めいれいを出して動かしています。

このガイドでは、自分でウェブページを動かせるようになるための基礎（きそ）をやさしく解説します。それがJavaScriptの基本だからです。

(参考) 現在のJavaScriptは、ウェブページの操作だけでなく、いろいろな用途に使えるプログラム言語になっています。しかし、今でも、ブラウザ上で活躍しています。

I. 私たちの舞台：WWW（ワールド・ワイド・ウェブ）

まず、javaScriptの活躍の舞台、WWW（ワールド・ワイド・ウェブ）とは何かについて、説明しましょう。

WWW（ワールド・ワイド・ウェブ） は、世界中のコンピュータが「クモの巣（Web）」のようにつながって、情報を共有きょうゆうする仕組しくみのことです。

これを、「図書館（としょかん）」 に例たとえて、やさしく説明しますね。

1. 3つの大切な「道具」

WWWを動かすために、3つの主役しゅやくがいます。

Webブラウザ（お客さん） ChromeやSafariなど、私たちがサイトを見るためのソフトです。「本を読みたい人」です。
Webサーバ（図書館のスタッフ） 世界中のどこかにある、24時間動いているコンピュータです。「本を管理している人」です。
HTML（本の内容） ウェブサイトに書いてある文章や写真のデータです。これが「本」そのものです。

2. ウェブサイトが表示ひょうじされるまでの「4つのステップ」

あなたがブラウザでURLを入力にゅうりょくしてから、画面がめんが出るまでの流れを見てみましょう。

リクエスト（注文）： あなたが「このページを見たい！」とURLをクリックします。これは図書館のスタッフに「あの本を貸してください」と頼むのと同じです。
住所の確認（DNS）： インターネットの世界では、google.comのような名前ではなく、数字の住所（IPアドレス例たとえば、“142.251.223.46” みたいな）で場所を探します。
レスポンス（返事）： サーバがあなたのリクエストを受けて、HTMLなどのデータをあなたのブラウザに送り返します。「はい、どうぞ！」と本を渡してくれるイメージです。
レンダリング（組くみ立たて）： ブラウザが、届いたHTMLデータを読み取って、きれいなデザインに組くみ立たてて表示ひょうじします。

3. WWWで使われる「魔法まほうの言葉」

ウェブの世界には、共通のルール（プロトコル）があります。

HTTP / HTTPS： 情報をやり取りするときの「言葉のルール」です。
URL： ウェブサイトの「住所」です。世界に一つしかありません。

まとめテーブル

ITの言葉	図書館での例たとえ	役割
クライアント	本を読みたい人	ブラウザでリクエストを送る
サーバ	図書館のスタッフ	データを保管ほかんして、送おくり返かえす
HTML	本のページ	文字や写真のデータ
URL	本の整理番号	サイトがどこにあるか教える

いかがでしょうか？「注文して、送ってもらって、組くみ立たてる」。このシンプルな流れがWWWの正体しょうたいです。

「WWWは、世界中の情報をだれでも、どこでも見られるようにしたすごい発明なんです。

II. ウェブページを作る「3つの力」：HTML・CSS・JavaScriptの役割

ウェブページは、3つの技術がチームワークを発揮してできています。これを「家づくり」に例たとえてみましょう。

技術名	役割（やくわり）	家づくりに例たとえると？
HTML	骨組ほねぐみ・構造	柱、壁、床（ゆか）
CSS	見みた目め・デザイン	ペンキの色、インテリア、壁に貼る紙
JavaScript	動うごき・機能（きのう）	電気（でんき）、機械装置（きかいそうち）

JavaScriptの役割：電気を通すこと

HTMLとCSSだけでは、家は完成しても「電気が通っていない」状態です。HTMLとCSSだけのウェブページは、ただ情報を表示ひょうじするだけの、動うごきのない「紙のポスター」のようなものです。

JavaScriptという電気が通ることで、スイッチを押せばライトがつき、ドアの前に立てば自動ドアが開き、ボタンを押せばエレベーターが動くようになります。ウェブページはユーザーと「対話たいわ（たいわ）」ができる便利な道具に変わるのです。

III. イベントとは

1. 「きっかけ」を待っているコンピューター

普段ふだん、ウェブページはただじっとしているだけに見えますが、実はあなたの操作を 「今か今かと待っている」 状態です。

例たとえば、あなたがこんな動うごきをしたとき、それがすべて「イベント」になります。

ボタンを カチッ（クリック） としたとき。
キーボードで 文字を入力にゅうりょく したとき。
画面がめんを 上下に動かした（スクロール） とき。

このように、「ユーザーが何かをした！」 という出来事のことを、JavaScriptでは「イベント」と呼びます。

2. 「もし〜したら、〜する」という約束

イベントの考え方は、皆さんの日常（にちじょう）にある 「センサー」 と同じです。

自動ドア： 「人が前に来たら（イベント）、ドアを開ける」
目覚まし時計： 「朝の7時になったら（イベント）、音を鳴らす」
ウェブサイト： 「ボタンが押されたら（イベント）、メッセージを出す」

JavaScriptを学ぶと、この 「もし〜が起きたら、この仕事をやってね！」 というマニュアルを書けるようになります。

3. 留学生への導入どうにゅうメッセージ

「今はまだ、難むずかしい魔法まほうの言葉を覚える必要はありません。画面がめんの中で起きる 『クリック』や『入力にゅうりょく』などの変化の一つひとつに、名前（イベント）がついているんだな 、ということだけ覚えておいてください。皆さんが『何か』をしたときに、サイトが『反応はんのう』するのは、このイベントのおかげなんですよ！」

まとめ

言葉	イメージ
イベント	「何かが起きた！」という合図
きっかけ	ユーザーがマウスやキーボードを動かすこと
反応はんのう	画面がめんの色が変わったり、窓が開いたりすること

「ウェブページを生きているように動かすための『スイッチ』」。それがイベントです。

IV. オブジェクトとは

皆さんがこれから学ぶのは、ウェブページを動かす方法 です。ウェブページを動かすためには、ウェブページを表示ひょうじしているブラウザに「これこれこういうことをしなさい」と命令する ことが必要です。

1. オブジェクトとはどんなもの？

HTMLやCSSという設計図に従って、ブラウザはそれをウェブページとして作り上げてくれます。JavaScriptは出来上がったウェブページの部品を 「オブジェクト」 としてとらえ、それに対して『これこれこういうことをしなさい』と命令します。

さまざまな人が集まって会社ができているのと同じように、ウェブページももさまざまなオブジェクトから構成されています。そして、「会社に何かをしてもらう」というのは、実際には「その会社の人に何かをしてもらう」ことです。同じように、「ウェブページを動かす」というのは「ウェブページのオブジェクトに何かをしてもらう」 ということです。

働くオブジェクト

2. あいまいさのない命令：「誰が」「何をする」

JavaScripはマニュアルですから、「みんなで協力して、こういうことをやりなさい」とぼんやりした命令をするのではなく、「Aさんはこれをして」「Bさんはあれをして」と一人ひとりの作業を正確に伝えなければなりません。 「誰が」「何をする」のかを、だれが読んでもわかるように書く ことが大事です。

この「Aさん」「Bさん」がJavaScriptでは 「オブジェクト」 にあたります。

「オブジェクト」という言葉は、皆さんには聞きなれないものかもしれませんが、とりあえず、次のようなイメージを頭に思い描いてください。