JavaScriptプログラミングの基礎【現役エンジニアがわかりやすく解説】

PROGRAM

JavaScriptプログラミングの基礎を知りたい方に。

この記事を読まれている方は、

  • JavaScriptのプログラミングがどんなものか知りたい
  • JavaScript言語の簡単な書き方が知りたい
  • JavaScriptが使われる場面を知りたい

おそらくこのように考えている方が多いと思います。

この記事を書いている私は、
プログラミング未経験から転職を果たした現役のWeb系エンジニアです。
エンジニア歴は3年ですが、本業とは別にフリーランスの副業で月10万円ほど、多いときで20万円ほどの収入があります。

この記事では、現役のエンジニアが、JavaScriptプログラミングの基礎を解説しています。

スポンサードサーチ

プログラミング言語のJavaScriptの特徴

プログラミング言語のJavaScriptの特徴

JavaScriptはプログラミング言語のひとつで、動的型付けのスクリプト言語で、オブジェクト指向型の言語です。

動的型付けとは、簡単に言うと、データを文字列型や数値型、論理型などに分ける必要がないということです。

スクリプト言語とは、プログラム実行前にコンパイルという、書いたプログラム文を中間言語に変換する作業の必要がない言語のことで、書いた後はすぐにプログラムを実行することができる言語のことです。

一方、スクリプト言語と対をなすコンパイル言語とは、プログラムの実行前に、開発者の方でコンパイラーを使って構文チェックなどをしたうえで中間言語に変換しないと動作しない言語のことです。

一般に、スクリプト言語は、処理速度がコンパイル言語に比べて遅くなります。速度が求められる処理では、コンパイル言語が使用されることが多いです。

オブジェクト指向型言語とは、オブジェクトという概念を持つ言語のことで、簡単に言うと、データ構造として、配列や構造体に加えて、オブジェクト(クラス)があるということです。
オブジェクトのおかげで、ソースコードのメンテナンスがしやすかったり、機能の流用ができます。

JavaScriptの良さとしては、動的型付けのスクリプト言語のため、比較的簡単にプログラムを組み、実行することが挙げられます。
通常、JavaScriptはブラウザ上で動作することで有名ですが、サーバー側で動かすnode.jsというものもありますので、領域はフロントエンドに限りません。

JavaScriptはブラウザで動かすことのできるプログラミング言語として、独占的な地位を確立しています。かつては、ブラウザのプログラミング言語として、IEで動作するVBScriptという言語が存在していましたが、現在ではほとんど使われなくなりました。
そのため、ブラウザのプログラミング言語はJavaScript1強となっています。

そんなJavaScriptには強力かつとても便利なライブラリであるjQueryが存在します。日本のウェブサイトでは使われていないサイトを見つけることが難しいぐらい、jQueryが使われています。ブラウザ上で必要な大体の動きはこのjQueryで実現することができるからです。
その他にもReactやAngularなど、JavaScriptにはさまざまなライブラリやフレームワークが存在しているので、かなり使いやすい言語となっています。

JavaScriptの用途

JavaScriptの用途

JavaScriptは、主にブラウザで動作する、フロントエンドのプログラミング言語として使われます。
逆に言うと、ブラウザで動くプログラムを組むためには、JavaScriptが必要になります。
そのため、Web系の開発をされる方は避けては通れない言語になります。
また、ブラウザ上での動きを表現できることから、デザイナーの方にも多く使われています。

学習のしやすさに関しては、動的型付けのスクリプト言語ということもあり、PHPに近いものがあります。最初はPHPから学んで、その後にJavaScriptを学習することが一番オススメです。

もし興味が持てないのであれば、jQueryを使ってホームページに動きを付けてみることで、おそらくJavaScriptにも興味が沸いてくると思いますよ。

JavaScriptの書き方

JavaScriptの書き方

ここでは簡単に書き方を少しだけ紹介します。実際に始める気になったら、ぜひ参考書などの教材を参考にして、試してみて下さい。

Hello World!を画面に出力する

まずはお決まりのHello World!という文字列を画面に出力する方法から。

console.log("Hello World!");

これで出力することができます。
C言語やJavaなどとは異なり、main関数を書かなければ動かないということはなく、いきなりそのまま命令文を書くことができます。クラスもなしで動くので、オブジェクト指向は強制されていません。

コンパイル言語とは異なり、スクリプト言語であるJavaScriptはコードを書いて保存すれば、すぐにでもプログラムを実行することができます。

変数宣言と分岐処理

次は少し踏み込んで、変数宣言と分岐処理をしてみます。

var age = 19;
if (age < 20) {
    console.log("未成年");
} else {
    console.log("成人");
} 

上記の例では、まずageという数値型の変数を作り、その中に19という数値を入れています。
次にageが20未満であれば”未成年”という文字列を、それ以外であれば”成人”という文字列を出力するような分岐処理をしています。

配列と繰返処理

続いて、配列の使い方と繰返処理について、解説します。

ここでは配列を作って、以下のようにデータを出力することにしましょう。

佐藤,田中,小林

これを出力するコードは以下です。

var students = ["佐藤","田中","小林"];
var output = "";
for(var i = 0; i < students.length; i++) {
    output += students[i];
    if (i < students.length-1) { output += ","; }
}
console.log(output);

上記の例では、まず配列studentsに「佐藤」「田中」「小林」の3つの文字列を格納しています。
その後、カウンタ変数iを0に初期セットし、配列studentsの要素の数に到達するまでループでiを1ずつ増やしてまわしていきます。その際に、console.log関数を使い、配列studentsのi番目の要素の値を出力し、最後の要素以外、その後に「,(カンマ)」を出力しています。

構造体の取り扱い

最後に構造体の取り扱い方法について解説します。

ここではエクセルのようなデータを作って、以下のようにデータを出力することにしましょう。

名前:佐藤,性別:男性
名前:田中,性別:女性
名前:小林,性別:女性

これを出力するコードは以下です。

var first_row = {"A":"佐藤","B":"男性"};
var second_row = {"A":"田中","B":"女性"};
var third_row = {"A":"小林","B":"女性"};
var excel_data = [first_row, second_row, third_row];

for(var i = 0; i < excel_data.length; i++) {
    var output = "";
    output += "名前:"+excel_data[i]['A'];
    output += ",";
    output += "性別:"+excel_data[i]['B'];
console.log(output);
}

上記の例では、まずfirst_row, second_row, third_rowという3つの連想配列を作り、それぞれのAというキー(列)に名前を、Bのキーに性別の値を入れていきます。
そして、それら全てをexcel_dataという配列に入れます。
その後、カウンタ変数iを0に初期セットし、配列excel_dataの要素の数に到達するまでループでiを1ずつ増やしてまわしていきます。その際に、console.log関数を使い、配列excel_dataのi番目の要素の中のA列とB列の値を出力しています。

まとめ:JavaScriptはフロントエンドで1強の言語

まとめ:JavaScriptはフロントエンドで1強の言語

JavaScriptの良さを簡単にまとめると、以下のとおりです。

  • コードが書きやすい ← 書き方がシンプル
  • すぐに実行できる ← スクリプト言語
  • 独占している ← ブラウザ側で1強のプログラミング言語

つまり、初心者に優しい言語であるとともに、フロントエンドでは必須の言語でもあります。しかし、JavaScriptを覚えれば、フロントエンドの領域では確実に活躍することができるでしょう。

JavaScriptの将来性についてですが、現在フロントエンドのプログラミング言語で1人勝ちの状況なので、もし消えたらWeb業界が騒然とします(笑)
VBScriptを破って覇権を握った経緯があるので、おそらく今後もかなり安定して使っていける言語なのではないかと思います。

JavaScriptは独学が可能な言語ですが、ライブラリやフレームワークも学ぼうとすると勉強量が多くなります。もし独学でできなさそうな方は、プログラミングスクールも手段の一つに入れると良いと思います。