【初心者向け】プログラミングを学ぼう！JavaScript編
こんにちは。引地啓です。
今回はJavaScriptについてまとめようと思います。登場してから25年経つ言語で、ここ数年で需要が高くなっている言語です。
Web制作やアプリケーション開発など幅広く使われています。
JavaScriptを使用している企業も増えているので、就職・転職する方におすすめしたい言語のひとつですので、是非見ていってください。
JavaScriptの環境構築
まずは他の言語と同様に開発環境を構築する必要があります。しかし今回はJavaの時のように細かい作業は必要ありません。
Google Chromeのデベロッパツールで実行しよう
今やスマホにほぼ入っているブラウザのGoogle Chromeのデベロッパツールに搭載されているコンソール機能について学んでいきます。
デベロッパツールとは？
Chromeブラウザに搭載されているデベロッパツールについて見ていきましょう！デベロッパツールは、Web開発者がデバックや最適化を便利に行うために用意されたツールになります。
Chromeブラウザに限らず、FirefoxやEdgeなど様々なブラウザにも同様に搭載されている一般的な開発・実行環境です。
Chromeブラウザの場合であれば「Ctrl」+「Shift」+「I」でデベロッパツールを起動することができます。
このような画面が出てくると思います。
Webのソースコードを閲覧することはもちろんのこと、CSSなどのデザインを調整したりスマホでの表示を確認することも可能です。そして、JavaScriptをそのまま記述して実行できるコンソールという環境も備わっています。
コンソールを使ってみよう
デベロッパツールに搭載されているコンソールタブを以下のように表示します。
「Console」をクリックすると画面が変わります。この画面には「Console.log()」で実行した結果やエラーなどが表示されます。さらに、JavaScriptのコードをそのまま入力して実行させることも可能です。例えば、「alert(’こんにちは’)」と入力してみてください。
そうすると、このようにアラートのダイアログが表示されます。
コンソールは1行ずつの入力になりますが、しっかりとJavaScriptを実行させることができます。簡単なコードを試すには最適な機能ですので、是非使ってみてください。
ブラウザ以外の実行環境
次はWebブラウザを使わないJavaScriptの実行環境を紹介します。
Visual Studio Code
Visual Studio Codeは2015年にMicrosoftからリリースされたエディタです。他のエディタと比べて軽量なエディタながら、高機能であることが特徴です。
JavaScript以外にもJava、PHP、C/C++、C#、Ruby、Pythonなど多くのプログラミング言語に対応しています。
Eclipse
Eclipseは、Java編でも紹介したエディタです。JavaScriptの開発・実行をサポートするためのプラグインが開発されています。
Visual Studio
Visual Studioはmicrosoftが開発しているもので、JavaScriptの開発もサポートされています。
メモ帳を使ってブラウザで開く
HTMLでもそうですが、パソコン内のメモ帳を使ってソースコードを書き、ブラウザ上で実行することもできます。
流れはHTMLと同じで、まずはフォルダを作ってその中にテキストファイルを作成します。
次に、中にHTMLとScriptのソースコードを書きます。
JavaScriptは「<head>」内に「<script></script>」を書いて、その中にコードを書いていきます。
とりあえず、あいさつのボタンを作りました。
ファイルの拡張子を「.html」に変更してから開くとこうなります。
このボタンをクリックすると、alertの”こんにちは”が表示されます。
図形を書いてみよう
最後に、動く図形をWeb上に表示するプログラムを書いてみましょう。
’use strict’
まず、HTMLの<body>の中に「<Script>」を入れます。Scriptの最初には「’use strict’」を入れます。これは「厳格化」といって、エラーをより的確にチェックしてくれるようになります。
document.getElementById()
document.getElementById()は、任意のHTMLタグで指定したIDにマッチするドキュメント要素を取得するメゾットです。（）内にはid名を入力します。上記の場合は分かりやすくbbbと付けて、入力しています。
addEventListener()
addEventListenerは、JavaScriptでさまざまなイベント処理を実行することができるメゾットです。
上記では「（'click', () => {document.getElementById('bbb').style.background = "red";}）」と書いていますが、これは「クリックすると処理を行います」という意味です。
処理が「document.getElementById('bbb').style.background = "red";}」のことで、これは「図形のStyle（スタイル）をred（赤）にします」という処理です。
このスタイルは、<head>の次に<style>と書いて、中身には図形の高さや横幅を決める文を書いています。
「width」は横幅で、「height」は高さで、「background」は図形の色を決めます。
このように、JavaScriptをHTML内に書き込むことによって、動きのあるWebページが作れます。
次回は、JavaScriptのもっと細かい部分を書こうと思います。
最後まで見ていただきありがとうございます。
今後ともよろしくお願いします。
またお会いしましょう。
