留学生りゅうがくせいのためのJavaScript学習がくしゅう：必須ひっす用語ようご完全かんぜんガイド

1. はじめに：Web開発かいはつの基礎きそを成すなす3つの技術ぎじゅつ

Web開発うぇぶかいはつを学まなぶみなさん、こんにちは。プロのエンジニアを目指めざすうえで、用語ようごの正確せいかくな理解りかいは「設計図せっけいず」を読よみ解とくための最初さいしょの武器ぶきになります。

Webサイトの構造こうぞうは、よく「家いえ」に例たとえられます。HTMLは家いえの「柱はしら」や「壁かべ」といった骨組ほねぐみ、CSSは「ペンキ」や「インテリア」などの装飾そうしょく、そしてJavaScriptはボタンを押おすとライトがつく「電気設備でんきせつび」の役割やくわりを果はたします。

基本きほん用語ようごまとめ

用語ようご	よみがな	意味いみ
HTML	エイチティーエムエル	Webページうぇぶぺーじの骨組ほねぐみや構造こうぞうを作つくるための言語げんご。
CSS	シーエスエス	Webページうぇぶぺーじの見みた目めをきれいに整ととのえるための言語げんご。
JavaScript	ジャバスクリプト	Webページうぇぶぺーじに動うごきや機能きのうを追加ついかするための言語げんご。
メタ情報	メタじょうほう	ブラウザに情報じょうほうを伝つたえる、画面がめんには表示ひょうじされない設定情報せっていじょうほう。

戦略的せんりゃくてきインパクト：土台どだいとしてのHTML

HTMLはすべての「土台どだい」です。たとえばメタ情報じょうほうで「文字もじコード」の設定せっていを間違まちがえると、日本語が「文字化もじばけ」を起こして読めなくなります。土台どだいが壊こわれていると、そのうえでJavaScriptという「電気でんき」を流そうとしても、電線でんせんが繋つながらずに正しく動きません。最初さいしょの設定ミスは後の実装すべてに悪い影響を与えることを忘れないでください。

次つぎへ：土台どだいとなる構造こうぞうを理解りかいしたところで、次つぎは具体的ぐたいてきなページ内ないの「部品ぶひん」を定義ていぎする用語ようごについて解説かいせつします。

2. HTML要素ようそとWebページの構造化こうぞうか

HTMLタグは単なる記号ではありません。情報の「意味いみ」や「役割やくわり」を決定する、Webページの設計図せっけいずそのものです。留学生のみなさんにとって、この構造こうぞうを正確せいかくに把握はあくすることは、誰にでも使いやすいアクセシビリティの高いサイトを作るために不可欠です。

構造こうぞうに関するかんする用語ようごまとめ

用語ようご	よみがな	意味いみ
タグ	たぐ	情報じょうほうの意味いみを示しめすための印しるし（例れい：`<h1>`や`<p>`）。
見出し	みだし	ページの題名だいめいや内容ないようの区切くぎりに使つかう、構造こうぞうを示しめす文字もじ。
属性	ぞくせい	タグに付加ふかする詳細しょうさいな設定せってい（例れい：リンク先さきを示しめすhref）。
特殊記号	とくしゅきごう	< や > など、言語げんごの命令めいれいとして特別とくべつな意味いみを持もつ文字もじ。
実体参照	じったいさんしょう	特殊とくしゅな記号きごうを画面がめんに「文字もじ」として表示ひょうじするための書かき方かた。
入れ子構造	いれここうぞう	タグの内側うちがわに、さらに別べつのタグを入いれる階層的かいそうてきな形かたち。

So What?：「id」と「class」がJavaScriptに与えるあたえる影響えいきょう

JavaScriptで要素ようそを操作そうさする際さい、CSSセレクタの知識ちしきを応用おうようして要素ようそを「探し出すさがしだす」必要ひつようがあります。

id属性ぞくせい：ページ内ないで「たったひとつひとつ」の固有こゆうの住所じゅうしょです。特定とくていの部品ぶひんをピンポイントで動かすうごかすときに使いますつかいます。
class属性ぞくせい：複数ふくすうの要素ようそを「グループ」にするための名前なまえです。複数ふくすうのボタンを一斉いっせいにデザイン変更へんこうするときなどに使いますつかいます。この使い分けつかいわけを誤るあやまると、JavaScriptで「誰だれに命令めいれいを出すだすか」を正しくただしく指定していできず、意図いとしない動きの原因げんいんとなります。

次つぎへ：ページの骨組みほねぐみが完成かんせいしたら、次つぎはプログラムを動かすうごかすための「データ」の扱い方あつかいかたに焦点しょうてんを当てるあてる。

3. JavaScriptの変数へんすうとデータ型かた：情報じょうほうの「入れ物いれもの」

プログラミングにおける「変数へんすう」とは、データを保存ほぞんしておくための名前付きなまえつきの箱はこです。新しいあたらしい言語げんごの単語たんごを整理せいりして覚えるおぼえるように、データを整理せいり・再利用さいりようすることは論理的ろんりてき思考しこうを組み立てるくみたてるうえで非常にひじょうに重要じゅうようです。

変数へんすうと型かたに関するかんする用語ようごまとめ

用語ようご	よみがな	意味いみ
変数	へんすう	数値すうちや文字もじなどのデータを記憶きおくさせておくための「名前付なまえつきの箱はこ」。
代入	だいにゅう	箱はこ（変数へんすう）にデータを入いれること。=を使用しようする。
宣言	せんげん	新あたらしい変数へんすうを使つかうことをシステムに通知つうちすること。
初期化	しょきか	変数へんすうを作つくると同時どうじに、最初さいしょのデータを入いれること。
定数（const）	ていすう	一度いちどデータを入いれたら、中身なかみを変更へんこうできない箱はこ。
文字列型	もじれつがた	テキストデータの種類しゅるい。“などで囲かこんで表現ひょうげんする。
数値型	すうちがた	整数せいすうや小数しょうすうなどの数字すうじデータの種類しゅるい。
論理型	ろんりがた	true（真しん）か false（偽ぎ）のみを扱あつかうデータの種類しゅるい。
未定義型（undefined）	みていぎがた	変数へんすうは存在そんざいするが、中身なかみが何なにも入いっていない状態じょうたい。

プロフェッショナルな知見ちけん：型変換かたへんかんの戦略的せんりゃくてき必要性ひつようせい

Webサイトの入力にゅうりょくフォームから受け取るうけとるデータは、たとえ数字すうじであっても最初さいしょはすべて「文字列もじれつ」として届きますとどきます。このまま計算けいさんしようとするとバグが発生はっせいするため、必ずかならずNumber()やparseInt()を使ってつかって「数値型すうちがた」に変換へんかんしなければなりません。

また、初心者しょしんしゃが最ももっとも間違いやすいのが「全角ぜんかくスペース」の使用しようです。コード内ないに全角ぜんかく文字もじがひとつひとつ混ざるまざるだけで、プログラムは沈黙ちんもくします。必ずかならず半角英数字はんかくえいすうじで記述きじゅつすることを徹底てっていしてください。

次つぎへ：データを保持ほじする方法ほうほうを学んだまなんだ後あとは、それらのデータを加工かこうし、判断はんだんを下すくだすための「道具どうぐ」について学ぶまなぶ。

4. 演算子えんざんしと制御文せいぎょぶん：プログラムの「判断はんだん」と「流れながれ」

「演算子えんざんし」はデータを加工かこうするための「道具どうぐ」、「制御文せいぎょぶん」はプログラムの「脳のう」です。これらを組み合わせるくみあわせることで、システムに高度こうどな「判断力はんだんりょく」が備わりますそなわります。

演算えんざんと制御せいぎょに関するかんする用語ようごまとめ

用語ようご	よみがな	意味いみ
演算子	えんざんし	計算けいさんや比較ひかくなど、データに対たいして処理しょりを行おこなうための記号きごう。
算術演算子	さんじゅつえんざんし	足たし算ざんや引ひき算ざんなど、数学的すうがくてきな計算けいさんを行おこなう記号きごう。
比較演算子	ひかくえんざんし	2つのデータを比くらべて、その大小だいしょうや一致いっちを判断はんだんする記号きごう。
論理演算子	ろんりえんざんし	「かつ」や「または」など、複数ふくすうの条件じょうけんを組くみ合あわせるための記号きごう。
条件分岐（if文）	じょうけんぶんき	「もし〜なら」という条件じょうけんによって、実行じっこうする処理しょりを分わけること。
ループ（繰り返し）	るーぷ	決きまった回数かいすうや条件じょうけんに達たっするまで、同おなじ処理しょりを自動じどうで繰くり返かえすこと。
無限ループ	むげんるーぷ	終了条件しゅうりょうじょうけんを忘わすれ、プログラムが永久えいきゅうに止とまらなくなる危険きけんな状態じょうたい。

厳格げんかくな（とてもきびしい）比較ひかくの重要性じゅうようせい

JavaScriptには==（等しいひとしい）と===（厳密げんみつに等しいひとしい）がありますが、私わたしのクラスでは必ずかならず===を使ってつかってください。==はデータの「型かた」を無視むししてあいまいに比較ひかくするため、予期よきせぬバグ（お節介せっかいな自動じどう変換へんかん）を招きますまねきます。プロの現場げんばで==を使うつかうことは、論理的ろんりてきなミスと見なされるみなされることもあります。常につねに正確せいかくな比較ひかくを心がけてこころがけてください。

次つぎへ：複雑ふくざつな流れながれを制御せいぎょできるようになったら、次つぎはそれらを再利用さいりよう可能かのうな「セット」にする技術ぎじゅつへと進むすすむ。

5. 関数かんすうとスコープ：処理しょりの「共通化きょうつうか」と「有効範囲ゆうこうはんい」

「関数かんすう」は、一連いちれんの命令めいれいをひとつにまとめた「自動販売機じどうはんばいき」のようなものです。同じおなじコードを何度なんども書くかく無駄むだを省きはぶき、巨大きょだいなプログラムを管理かんり可能かのうなサイズに分割ぶんかつする戦略的せんりゃくてき意義いぎがあります。

関数かんすうと範囲はんいに関するかんする用語ようごまとめ

用語ようご	よみがな	意味いみ
関数	かんすう	一連いちれんの処理しょりをひとつにまとめたもの。名前なまえで呼よび出だして再利用さいりようできる。
引数	ひきすう	関数かんすうという「ミキサー」に投入とうにゅうする、外部がいぶからの材料ざいりょう（データ）。
戻り値（return）	もどりち	関数かんすうが仕事しごとを終おえたあとに、最後さいごに返かえしてくれる処理結果しょりけっか。
定義	ていぎ	関数かんすうの「名前なまえ」と「中身なかみ（処理しょり）」を作つくること。
呼び出し	よびだし	定義ていぎされた関数かんすうを、実際にプログラムの中で実行じっこうさせること。
スコープ	すこーぷ	変数へんすうが有効ゆうこうな範囲はんい。データの衝突しょうとつを防ふせぐための重要じゅうようなルール。
アロー関数	あろーかんすう	=>（矢印やじるし）を使つかって簡潔かんけつに記述きじゅつする、モダンな関数かんすうの書かき方かた。
コールバック関数	こーるばっくかんすう	別の関数かんすうに「あとで実行じっこうしてね」と渡わたしておくための「指示書しじしょ」としての関数かんすう。

プロフェッショナルな知見ちけん：スコープ管理かんりの鉄則てっそく

変数へんすうの有効範囲ゆうこうはんい（スコープ）は「できるだけ狭くせまく保つたもつ」のが鉄則てっそくです。

グローバル変数へんすう：「公園こうえんの時計とけい」のようにどこからでも見えますみえますが、誰だれでも書き換えられるかきかえられるため危険きけんです。
ローカル変数へんすう：「自分じぶんの部屋へやの電気でんき」のように特定とくていの関数かんすう内ないだけで有効ゆうこうです。varの使用しようは避けさけ、constやletによる適切てきせつなスコープ管理かんりを行うおこなうことが、安全あんぜんなコードへの第一歩だいいっぽとなります。

次つぎへ：プログラムの内部構造ないぶこうぞうを整理せいりする方法ほうほうを学んだまなんだので、JavaScriptが操作そうさする対象たいしょうである「ブラウザの世界せかい」を見てみましょう。

6. ブラウザオブジェクトとDOM：Webページとの対話たいわ

JavaScriptがWebページを操作そうさする際さい、ブラウザ全体ぜんたいを管理かんりする「Window」を「社長しゃちょう」、その中なかにあるページの内容ないよう「Document」を「現場監督げんばかんとく」として捉えるとらえると体系的たいけいてきに理解りかいできます。

ブラウザぶらうざとDOMに関するかんする用語ようごまとめ

用語ようご	よみがな	意味いみ
オブジェクト	おぶじぇくと	関連かんれんする「データ」と「動作どうさ」をひとつにまとめた便利な道具箱どうぐばこ。
プロパティ	ぷろぱてぃ	オブジェクトおぶじぇくとの「特徴とくちょう」や「状態じょうたい」を表あらわすデータの断片だんぺん。
メソッド	めそっど	オブジェクトおぶじぇくとが持もっている「自分自身じぶんじしんを動うごかすための機能きのう」。
BOM	びーおーえむ	ブラウザそのものの機能きのう（アラートやURLの移動いどうなど）を操作そうさする仕組み。
DOM	どむ	HTMLをプログラムから操作そうさし、中身なかみを書かき換かえるための仕組み。
DOMツリー	どむつりー	HTMLの階層構造かいそうこうぞうを「木き」のような親子関係おやこかんけいとして表現ひょうげんしたもの。
ノード	のーど	DOMツリーの中なかにあるタグやテキストのひとつひとつの「節ふし」。
要素の取得	ようそのしゅとく	getElementById などを使つかい、木きの中から標的ひょうてきとなるパーツを特定とくていすること。

プロの視点してん：constとオブジェクトの意外いがいな関係かんけい

ここでひとつひとつ、皆さんみなさんが混乱こんらんしやすいところを教えましょうおしえましょう。constで宣言せんげんした「箱はこ」そのものは別べつの箱はこに取り替えるとりかえる（再代入さいだいにゅうする）ことはできません。しかし、中身なかみがオブジェクトであれば、箱はこの蓋ふたを開けてあけて「中なかのデータ（プロパティ）」を書き換えるかきかえることは可能かのうです。この「名札なふだは固定こていされているが、中身なかみは変えられるかえられる」という性質せいしつは、大規模だいきぼな開発かいはつで非常にひじょうによく使われますつかわれます。

次つぎへ：操作対象そうさたいしょうが見つかったらみつかったら、次つぎはユーザーの動きうごきに反応はんのうするための「仕掛けしかけ」について理解りかいを深めるふかめる。

7. イベントいべんとと非同期処理ひどうきしょり：ユーザー操作そうさへの反応はんのう

Webページ上じょうで起こるおこる「クリック」や「入力にゅうりょく」などの出来事できごとはすべて「事件じけん（イベント）」です。これに対してたいして「予約よやく（リスナー）」をしておくことで、ユーザー体験たいけん（UX）を劇的げきてきに向上こうじょうさせることができます。

イベントいべんとと対話たいわに関するかんする用語ようごまとめ

用語ようご	よみがな	意味いみ
イベント	いべんと	クリックや画面がめんの読よみ込こみなど、発生はっせいした「出来事できごと」そのもの。
イベントリスナー	いべんとりすなー	特定のイベントが起おきるのを「耳みみをすませて待まつ」ための監視予約かんしよやく。
イベントオブジェクト	いべんとおぶじぇくと	「いつ・どこで・誰が」その事件じけんを起おこしたかの詳細しょうさいが詰つまった報告書報告書。
タイマー	たいまー	「○秒後びょうごに実行じっこう」など、プログラムの動うごく「時間じかん」を操あやつるための道具どうぐ。
クッキー（Cookie）	くっきー	ユーザーがページを離はなれても情報じょうほうを維持いじするための、ブラウザの「覚おぼえ書がき」。

addEventListener の戦略的せんりゃくてき優位性ゆういせい

かつての古いふるい手法しゅほう（onclick属性ぞくせいなど）は、ひとつひとつの要素ようそにひとつひとつの役割やくわりしか持たせられませんもたせられませんでした。しかし現代げんだいのaddEventListenerは、ひとつひとつのボタンに「色いろを変えるかえる」「データを送るおくる」といった「複数ふくすうの予約よやく」を重ねるかさねることができます。この柔軟じゅうなんな設計せっけいこそが、複雑ふくざつなWebアプリを支えていますささえています。

次つぎへ：最後さいごに、これまで学んだまなんだ概念がいねんをより高度こうどに扱うあつかうための応用おうよう用語ようごを確認かくにんする。

8. 応用おうよう概念がいねん：データの高度こうどな加工かこうと正規表現せいきひょうげん

データを思おもった通とおりに操るあやつるためには、複数ふくすうの情報じょうほうを並べるならべる「配列はいれつ」や、情報じょうほうのパターンぱたーんを瞬時しゅんじに見つけるみつける「正規表現せいきひょうげん」の習得しゅうとくが不可欠ふかけつです。

応用おうよう用語ようごまとめ

用語ようご	よみがな	意味いみ
配列	はいれつ	複数のデータを順番じゅんばんに並ならべて一括管理いっかつかんりするための「リスト」。
インデックス	いんでっくす	配列はいれつのデータの位置いちを示しめす番号ばんごう。プロの世界では必ず「0」から始はじまる。
連想配列	れんそうはいれつ	番号ばんごうではなく「名前なまえ」でデータを管理かんりするオブジェクトの形態けいたい。
正規表現（RegExp）	せいきひょうげん	特定とくていの文字もじではなく「文字もじの並ならびのルール」を指定していする高度こうどな検索法けんさくほう。
インスタンス	いんすたんす	設計図せっけいずから生成せいせいされた、実際じっさいにメモリの上うえに存在そんざいする「実物じつぶつ」。

総括そうかつ：正規表現せいきひょうげんという「ガードマン」

入力にゅうりょくチェック（バリデーション）において、正規表現せいきひょうげんは強力きょうりょくな「ガードマン」として機能きのうします。特にとくに留学生りゅうがくせいの皆さんみなさんが開発かいはつする多言語対応たげんごたいおうアプリでは、全角ぜんかく・半角はんかくの混在こんざいやメールアドレスの形式けいしきチェックなど、人間にんげんでは見落としがちみおとしがちなミスを瞬時しゅんじに排除はいじょします。これがシステムの信頼性しんらいせいを守るまもる最後さいごの砦とりでとなるのです。

結びむすびの言葉ことば

本ほんガイドで紹介しょうかいした用語ようごは、世界中せかいじゅうのエンジニアが会話かいわで使うつかう「共通言語きょうつうげんご」です。ひとつひとつひとつひとつの言葉ことばを自分じぶんの血肉けつにくとすることで、初めてはじめてプロの入り口いりぐちに立つたつことができます。学びまなびの途中とちゅうでエラーに遭遇そうぐうしても恐れないでおそれないでください。それはあなたが成長せいちょうしている証拠しょうこです。皆さんみなさんのエンジニアとしての輝かしいかがやかしい未来みらいを、心からこころから応援おうえんしています！

Keyboard shortcuts

留学生のためのJavaScript学習ガイド