コーディング初心者向け！JavaScriptの文法紹介

皆さん、こんにちは。
EMCカンパニー所属の廣瀬です。
今回の記事ではJavaScript（以下JS）でよく使われる基本的知識についてお伝えします。
JSはWeb開発において必須の存在です。
現在では、ほぼ全てのWebサイトでJSが使用されています。
JSを理解することでフロントエンドの構造について詳しくなれますので、是非目を通してみてください。

1.JSの基本的知識

今回は基本知識として「変数/定数」、「関数/引数」についてご紹介します。

・変数/定数

変数と定数は値を定義する際に使用します。
従来からの var に加えて、ECMAScript 2015 (ES6) 以降では let と const を使用することができるようになりました。
使い方は以下の通りです。

      
      var 変数名;
      let 変数名;
      const 定数名=初期値;
      
    

変数と定数の違いは値に変更があるかないかです。
変数とは、例えば年齢のようなものです。
人によって年齢は違いますし、毎年年齢は変わります。
それに対し、定数は消費税のようなものです。
消費税は買う人によって変わることはありませんし、法改正がない限りずっと同じ数値です。

つまり、結論として固定された数が定数、人によって変わってくる数が変数ということになります。
変数を宣言する際に使用するのが「let」、定数を宣言する際に使用するのが「const」です。

varは ECMAScript 2015 (ES6) 以前までは、変数でも定数でも使われていましたが、letとconstが現れてから使われなくなっていきました。
逆に昔のブラウザで使う場合にはvarを使う必要があります。

また、複数の定数をまとめて宣言することもできます。
その場合はカンマで区切って変数名を記述してください。

      
      const 変数名1 = 初期値1, 変数名2 = 初期値2;
      
    

例えば次のように記述することができます。

      
      const maxWidth = 720, minWidth = 320;
      
    

これは次のように記述した場合と同じです。

      
      const maxWidth = 720;
      const minWidth = 320;
      
    

・関数/引数

関数とは、「いくつかの処理をまとめたもの」です。
単調な処理を1つにまとめて、どこからでも使えるように効率化するという目的でよく使われています。
今回はfunction文とアロー関数式をご紹介します。

・function文
function文の例は以下の通りです。

      
      let 変数名 = function(引数1, 引数2, ...){
      実行される処理;
      ...
      
      return 戻り値;
      };
      
    

「function()」と書き、その後ろの中括弧「{ }」の中にまとめたい処理を書くことで関数を用意することができます。
また、このように関数を用意することを「関数を定義する」と呼びます。
関数を定義しただけでは、その中の処理は実行されません。
関数を定義した際に使用した定数名を用いて、「定数名()」と書くことで関数の中の処理を実行できます。このことを「関数を呼び出す」と言います。

      
      let introduce= function(引数1, 引数2, ...){
      実行される処理;
      ...
      
      return 戻り値;
      };
      
      introduce();
      
    

・アロー関数式

      
      let 変数名 = (引数1, 引数2, ...)   => {
      実行される処理;
      ...
      
      return 戻り値;
      };
      
    

「function()」の部分を「() =>」としても、これまでと同じように関数を定義することができます。アロー関数では、これまでの「function()」の部分を「() =>」と書くこと以外、定義方法は変わりません。また、呼び出し方もこれまで学習してきた関数と変わりません。

・引数
引数（ひきすう）とは関数に与える追加情報のようなものです。
関数を呼び出すときに一緒に値を渡すことで、関数の中でその値を利用することができます。

2.実際にコードを見てみる

例題を3問ご用意しましたので、解いてみてください。

問1

      
      let name1 = 'イチゴ';
      let name2 = 'バナナ';
      
      let name1 = name2;
      
    

＜選択肢＞
1.name1はイチゴ。name2はバナナ
2.name1はエラー。name2はバナナ
3.name1はバナナ。name2はバナナ

問2

      
      let name1 = 'イチゴ';
      const name2 = 'バナナ';
      
      name1 = 'メロン';
      console.log(name1);
      
      name2 = 'スイカ';
      console.log(name2);
      
    

＜選択肢＞
1.name1はメロン。name2はエラー
2.name1はイチゴ。name2はスイカ
3.name1はメロン。name2はバナナ

問3

      
      let name1 = 'イチゴ';
      
      function sample() {
      var name2 = 'バナナ';
      
      name1 = 'メロン';
      }
      
      sample();
      
      console.log(name1);
      
    

＜選択肢＞
1.name1の出力はイチゴ。name2の出力はバナナ。
2.name1の出力はメロン。name2の出力はバナナ。
3.name1の出力はメロン。name2の出力はエラー。

＜答え＞

問1 : name1はエラー。name2はバナナ
letで定義された変数は再代入はできるが、再定義はできない。

問2 : name1はメロン。name2はエラー
constで定義された変数は再定義＆再代入ができない

問3 : name1の出力はメロン。name2の出力はエラー。
関数内であればvarで定義された変数にもスコープが適用される。

3.おすすめの勉強方法

最後にJSの勉強でおすすめなサイトを3つご紹介します。

・MDN（Mozilla Developer Network）
https://developer.mozilla.org/ja/

MDNは開発者向けのインターネット百科事典であり、プログラミングのwikipediaのようなサイトです。
扱う言語はHTML5、JavaScript、CSS、ウェブAPI、Django、Node.js、WebExtensionsおよびMathMLと多岐にわたります。
原文は英語であり、翻訳されたものを読む場合は翻訳文特有の不自然な表現があるため読みにくいときもありますが、
タグや関数の意味など部分的な調べ物をする際に有用です。

・Progate
https://prog-8.com/courses

Progateは、初心者向けのプログラミング学習サイトです。
100 以上の国で提供されており、ユーザー数は 280万人以上を誇ります。

学べる言語はHTML&CSS、JavaScript、jQuery、Ruby、Ruby on Rails5、PHP、Java、Python、Command Line、Git、SQL、Sass、Go、React、Node.jsの
計15言語あります。
メンバーズでも入社の際にTrack Trainingというサイトでの自己学習を推奨されているのですが、Track Trainingよりもさらに初心者向けのサイトであるため、
プログラミング未経験の方はProgateから勉強を始めることをおすすめします。

・paizaラーニング
https://paiza.jp/works

paiza（パイザ）ラーニング は、動画を使ったオンラインのプログラミング入門学習コンテンツです。
学べる言語は、C言語、C#、HTML、Java、JavaScript、SQL、PHP、Python3、Ruby、シェルコマンド、CASL-II、Perl、Scala、C++、Kotlin、Go、Swiftの
計17言語あります。
paizaラーニングの特徴は、paizaのエンジニアに質問をして、アドバイスをもらうことが可能なところです。
分からない問題をそのままにしてしまうなど、やる気を失ってしまうこともありません。

最後に

ここまで読んでいただきありがとうございました！
自分自身もHTML/CSSに比べ、JavaScriptの勉強では苦戦した経験があるため、少しでもみなさんのお役に立てれば幸いです。