JavaScriptについて、どなたでも判るように、基本的な事柄をなるべく簡単に説明しますね。
Javaと名前が似ていますが、異なるプログラミング言語ですよね。
初めて見たり聞いたりする用語も出てくるかもしれませんが、あまり気にせずに最後まで読んで頂ければ、JavaScriptが判る（判ったような感じになる）と思いますよ。
JavaScriptとは
JavaScriptとは、数多くあるプログラム言語の1つです。
ネット検索に使うIEやChromeなどのブラウザ表示中のページに「動き、変化を与える」時に使います。
英語や仏語など、世界には日本語の他にも地域によりいろいろ言語があるように、プログラム言語も、用途やどこで動作するかにより、JavaScriptやHTML、PHPなど様々な言語があります。
JavaScriptは、例えばWebページでマウスをクリックすると、メッセージを表示する時などに使います。
HTMLとPHP
HTMLやPHPもJavaScriptと同様、ブラウザで動作するプログラム言語です。
HTMLは、ブラウザの「文章、図の表示」、PHPは、マウスのクリックに応じてネット側から「結果、応答を返す」処理などを担当しています。
このように、ブラウザ表示中は、様々な言語が役割を分担し、一体となって動作します。
JavaScriptについてもう少し詳しく説明します。
JavaScript有効確認
Webページでクリックボタンがあるのに、クリックしても動作しない時は、ブラウザのJavaScriptが有効になっていない可能性があります。
主要ブラウザは、全てデフォルトでJavaScriptは有効です。
JavaScript有効/無効を調べ、無効なら有効に戻す方法を教えてくれるサイトがコチラです。
下図のようにアクセスブラウザのJavaScript調査結果が示され、無効なら有効化方法が示されます。
簡単なJavaScriptプログラムと動作確認コンソール
ここからは実際のJavaScriptプログラムを使って、ブラウザで動作確認します。
使うのは、JavaScript言語の配列、if、thisです。
始める前に、ブラウザJavaScriptの有効化を確認してください。
下記プログラム（<!DOCTYPE html>から</htm>のあいだ全部）をメモ帳などにコピーし、ファイル名、“test.html” でデスクトップ上に保存してください。
※メモ帳でもファイル名の前後に「”」を付けて保存すると、識別子 .htmlで保存ができます。
※<script>から</script>で囲まれた範囲がJavaScript言語です。
それ以外は、ブラウザを使うための決まり文句です。
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<script src=”https://code.jquery.com/jquery-3.0.0.min.js”></script>
<script>
$(function() { // ボタンクリック動作を記述
$(“button”).click(function() {
$(“.big”).css(“font-size”, “50px”);
});
});
</script>
</head>
<body>
<button>button</button>
<p class=”big”>big</p>
<script>
var value = [10, 20, 30]; // value[0]=10,value[1]=20,value[2]=30
if (value[0] == 10) { // [0]→[1]にするとコンソール出力が変化
var text = “value = 10”;
}
else {
var text = “value != 10”;
}
console.log(this.text); // F12コンソールへの出力
</script>
</body>
</html>
保存したtest.htmlをクリックしてください。
自動的にブラウザが開き、Webページにボタンが表示され、これをクリックすると文字bigが大きくなります。
この状態でF12をクリックし、表示されたコンソールタブを選択すると「value = 10」と表示されます。
F12で表示したのがJavaScriptコンソールで、作成したプログラムが思った通りに動作しているかなどの確認に使います。
コンソールに表示したのは、配列の中身です。
配列の中身が10なら「value = 10」、それ以外なら「value != 10」と変わります。
この中身の判断に使うのがifです。
※JavaScript言語は、英語を基に作られているので、英文の意味に近いです。
最後に簡単にthisの説明をしますね。
JavaScriptは、オブジェクト指向言語です。
オブジェクト指向を説明するのは結構大変ですが、ここでは型紙（かたがみ）と、これを使って作る服を想像してください。
型紙を使って服を作ると、型紙の大きさや形状などが、服へそのまま反映されるので、同じような服を何着も簡単に作れます。
この作り方をプログラミングへ応用したものが、オブジェクト指向言語です。
型紙に服の素材や色などの情報も指定済みの場合、正確に情報反映させた服は、手間がかかり高価に、素材や色は無視した服は、安価に作れるでしょう。
プログラミングでも同じように、情報の利用範囲が重要なのです。
この利用範囲を明示的に表現するために、英文のthisを使います。
JavaScriptのthisは、変数の利用範囲を限定するために使います。
まとめ
JavaScriptの配列、if、thisを使って、Webページへ「動きや変化」を与え、コンソールへ出力する例を示しました。
ブラウザは、JavaScript以外にも、HTMLやPHPなど様々な言語が役割を分担し動作しています。
従って、ブラウザの動作には、JavaScriptが有効であることが必要です。
主要ブラウザのJavaScript有効確認と有効化方法を示したサイトを紹介しました。
プログラミングを勉強してみませんか？
「自分でホームページを作ってみたい！」
「WEBの仕事で独立したい！」
どんどんIT化が進む中で、確かに便利になっていますが、自分自身がそれら便利なツールを作れる側になれるかと考えると「難しそうだな・・・。」と感じていませんか？
でも、大丈夫です！
実はホームページやアプリケーションは「プログラム」によってできています。
そのプログラムを自分で書けるようになれば、自分のWEBサイトを作れるのはもちろん、便利なアプリやIoTに通じる製品まで操れるようになってしまうのです！
そこで、まずは基本からの勉強が大切。
いきなり、応用編から始めようと独学で学ぶ人も多いのですが、正直基本を学んでいないと、大きな壁にぶつかり挫折してしまうことがほとんどです。
そこで、おすすめなのが「TechAcademy」というプログラミングスクールです。
親切丁寧にマンツーマンで質問することもでき、なにしろネットを通じて自宅や会社にいても授業を受けられるところが素敵です！
さぁ、あなたも今日からプログラマーだ！！！
