JavaScriptというプログラミング言語をご存知でしょうか？
世界で最も使われているプログラミング言語であるJavaScriptは、極めて様々なことを実現できます。
エンジニアとして学習を始めた方、あるいはこれから始めようという方へ向けて、今回はJavaScriptの概要と書き方を実際のコードと共に解説します。
入門者向けに解説！JavaScriptとは
JavaScriptは現在、世界で最も使われているプログラミング言語です。
現在ではありとあらゆるWEBコンテンツに使用されており、エンジニアとして活躍するためにはどういった業界のITエンジニアであれ、まず間違いなく習得する必要のある言語となっております。
このJavaScriptですが、いったいどのようなことを得意として、どのようなことを苦手とする言語なのでしょう。
JavaScriptに出来ること
プログラミング言語は大きく分類して【サーバーで動作する言語】と【フロントで動作する言語】の2つに分けることが出来ます。
この2つですが、前者は文字通り【サーバー上で】動作するもの、そして後者はフロント、つまり【ユーザが操作するブラウザ上】で動作する言語のことです。
JavaScriptはこの2分類のうち、【フロントで動作する言語】に相当します。 ですので、【出来ること】としてはブラウザ上で表示されたコンテンツに対して動きを加えたりすることが挙げられます。
JavaScriptに出来ないこと
前述の通り、JavaScriptは基本的に【フロント（ブラウザ）上で動作する言語】です。
ですので、サーバー上で動作する言語が実装可能な【ログイン機能】や【会員登録機能】、【ファイルのアップロード、ダウンロード機能】などといった処理は出来ないと言えます。
ただしこれは、あくまで【基本的には】の話です。
現在、JavaScriptという言語は本来の【フロントで動作する言語】という枠を超えて進化しています。
そのため【応用次第でなんでもできる言語】であるとも言えるでしょう。
入門者がまず覚えるべきJavaScriptの基本構文を解説
世界で最も使われている言語【JavaScript】ですが、ではこのJavaScriptはどのように記述することで動くプログラミング言語なのでしょうか。
以下で、実際の構文と共にJavaScriptの基本構文を書いてみましょう。
画面に文字を出力してみよう ( document.write() )
最初に、JavaScriptで画面上に【Hello World】と出力してみましょう。まず、【helloworld.html】という名前で空のファイルを作成してください。
次に、作成したhelloworld.htmlをテキストエディタで開き、以下のコードを書き写してください。
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
</head>
<body>
<script> document.write("Hello World"); </script>
</body>
</html>
以上のコードのうち、【<script> ... </script>】で挟まれた箇所がJavaScriptのプログラムです。
それ以外の場所はHTMLというWEBコンテンツの最も基本となるマークアップ言語の記述です。
この【HTML】についての解説はJavaScriptの内容から離れますので今回は割愛します。
さて、書き写してもらったHTMLファイルですが、これをダブルクリックでブラウザに表示してみましょう。
どうでしょうか？【Hello World】と画面に表示されたはずです。
<script>タグ内に記述した【document.write(“...”)】ですが、これは【画面に括弧内の文字を出力しろ】という命令文です。
このJavaScriptの命令を受け、ブラウザが実際に画面に指定された文字列を表示するという仕組みです。
変数を使ってみよう ( var )
次は、変数というプログラミング全般に共通する概念について学んでいきましょう。変数とは、端的に言うならば【値を格納する箱】です。
これについては言葉で説明するより、実際のプログラムを見せた方が良いでしょう。
先ほど作成したHTMLファイルの<script> … </script>タグで挟まれた場所を次のように書き換えてください。
<script>
var num = 3
document.write(num)
</script>
書いたら先ほど同様、このHTMLファイルをブラウザに表示させてみましょう。
【3】と表示されたはずです。どういうことでしょう？
document.write() は括弧内の文字列を画面に表示する、というプログラムでしたね。今回はその括弧内に【num】を入れました。
この【num】はその前の行で【var num = 3】となにか記述されています。
これは、【変数num に 3 を代入する】という命令文です。var が【次に来る文字が変数であること】を意味するのです。
そして、= が【左辺に右辺を代入する】ことを意味します。
つまり、document.write() の括弧内に存在する num という【変数】には、実際には【3 という数字】が格納されているのです。
ですから document.write(num) は document.write(“3”) と同義であり、結果的にブラウザに 3 が表示されるのです。
結果をコンソールに出力してみよう ( console.log() )
JavaScriptを含め、プログラムは書くことで身についていくものです。
どんどん色々なプログラムを書いていきましょう。
次は、【結果をコンソールに出力するプログラム】を書きます。
コンソールとは、各ブラウザに用意された【開発者ツール内のコンソール】を示します。
この開発者ツールの開き方は、Google ChromeやFirefoxであれば【F12】を押下することで開きます。
さて、この開発者ツール内のコンソールですが、ここに結果を表示するためには以下のプログラムをこれまで同様HTMLファイルの<script>タグ内に書きます。
<script> console.log(“Hello World”) </script>
書き写したらこれをブラウザで開き、開発者ツールを出現させてください。
出現した開発者ツールのコンソール内に【Hello World】と出力されているはずです。
【console.log( .... )】は【括弧内の文字列をコンソールに出力する】というプログラムなのです。
if文で条件分岐させてみよう ( if...else… )
次に、if文というものを紹介します。
if文とは、その名の通り【もし～だったらこうしろ】と条件に応じてプログラムに命令するための記述です。
以下のように書きます。
<script>
if (3 < 5) {
console.log(“Hello World”)
}
</script>
こう書くことで、もし 3 が 5 より小さければ【Hello World】がコンソールに出力される、というプログラムになります。
また、次のように書くことで【もし 3 が 5 より小さくなければ】という【当てはまらなかった場合】の処理の分岐をさせることも可能です。
<script>
if ( 3 < 5 ) {
console.log(“Hello World”)
} else {
console.log(“Good night”)
}
</script>
ループ処理を書いてみよう ( for…)
最後に、ループ処理を書いてみましょう。
ループ処理には二つ書き方があります。まず、1つは【for文】と呼ばれる記法です。
<script>
for (var i = 0; i < 10; i++) {
console.log(i)
}
</script>
途中で【変数】という概念について紹介しましたね。
今回、最初の行の括弧内で登場している【var i = 0】は紹介したものと同様です。
【変数 i に０を代入する】というプログラムです。
それがfor文の中に入ってなにやら記述されていますが、これは次のような意味を持ちます。
【 for (初期値; 条件; １ループ終了ごとの値の変化) { 処理 } 】
より日本語の文章に近い形で表現するとしたら【初期値0の変数 i が 10 になるまでの間、処理をループし、ループごとに変数 i に値１を追加する】と言い換えることが出来るでしょう。
この初期値や条件として今回使用されている変数 i ですが、今回はこの変数 i がその後の処理として【console.log( i ) 】されていますよね。
ですのでこのループは【 変数 i が条件（i < 10）を満たす間、変数 i の中身の値をコンソールに出力し続ける】という処理となっています。
実際に書き写したらブラウザを立ち上げてください。
開発者ツールには見事に、0 番から 9 番が表示されたことかと思います。
まとめ
以上の通り、今回はJavaScriptのプログラミングを基本構文から入門者向けにいくつ解決していきました。
世界で最も使われているフロントサイドの言語、JavaScriptを使いこなせるようになり、ITエンジニアとしての一歩を踏み出していきましょう。
TECH PLAYでは、エンジニアの方向けに勉強会・イベント情報を提供しています。
ご興味のある方はぜひご参加ください。
