【初心者向け】JavaGoldが解説するJavaScriptの構文について

コンセプト

Javaの経験がある方がJavaScriptを初めて学ぶ際、
JavaとJavaScriptの構文の差分のみ学習することで、
分厚い教科書を一切読まず・短い時間で、
必要最低限をマスターしてもらおう！というコンセプトです

JavaScriptとは

JavaScriptはスクリプト言語であり、基本的にWebページの機械的な処理や動的なコンテンツ値の変更などを担当する。
※具体的にどんなことができるかはネットで調べてみると良い

Javaと異なり、実行処理は各Webブラウザが構文の解析・実行(インタープリタ方式)を行う点を押さえておけばOK

構文(差分のみ)

具体的な差分のみ紹介する。
以下の構文を徹底すると、Javaと大差ないプログラミングが可能になる。
しかし、実際の現場では各プロジェクト方針などあるため、そこは臨機応変に対応してね！

strictモード（厳格モード）

JavaScriptはファイルの一部に構文エラーが発生したとしても(コンパイルエラー)、
それをある程度、優しさで包み込んでくれる
※内部的に、動作する記載に直してくれる

その優しさをはねのける鋼の精神をお持ちなら、魔法の呪文をファイルの頭に記載する。

magic.js

"use strict";

型について

型はJava同様、プリミティブ型・オブジェクト型に大別することができるが、
記載上それを分けた変数宣言を行うことはできない。
※参照値渡しなどの処理上の振る舞いは一緒だと思ってもらって良い

kataSample.java

satic final String name = "三橋";
int age = 14;
List<String> belongings = new ArrayList<>();

kataSample.js

const name = "三橋";
let age = 14;
// 配列については後述する
let belongings = ["おにぎり","癇癪玉","バット"];

⭐︎ポイント

• 変数の宣言は全て"let"で行う(※1)
• アクセス修飾子は存在しない(※2)
• 定数は"const"を使用する

※1.変数宣言の選択肢として"var"の使用などがある(教科書などによく記載されている)
"var"にはブロックスコープの概念がなく、同一スコープ内の同一名変数宣言を許容(値の上書きがされる)という、Javaでイメージできないような振る舞いを行うため、極力"let"を使用する

※2.グローバル変数やローカル変数などの概念は存在するため、気になる人は調べてみると良い("let"で統一すれば意識する必要なし)

変数の比較

比較は素直に以下のように行う。
NGパターンを使用すると、内部的に型の変換が行われるため、
文字列と数値の比較も場合によってはtrueの判定になる。

compare.js

console.log("1" === "1");
console.log("1" === 1);
console.log(1 >== 0 && "伊藤" === "三橋");

// NGパターン
console.log("1" == 1);

true
false
false
true

※オブジェクト型の場合、従来通りequals()メソッドを使用

※コメントより補足(@sdkeiさんより)

JavaScript の == は Java の equals メソッドをかなり融通が利くように実装したようなもの。
JavaScript の === は Java の == と同じ。

拡張for文

for文はいつもの感じで書いてもらえれば良いが、
配列(List)の拡張for文は以下の記載をする。

forSample.js

let sampleList = ["美味しいバナナ","腐ったみかん"]
for(let item of sampleList){
   console.log(item);
}

※Mapは"for in"句を使用する(あんま使わないか)

MapとList

Javaで言うところのHashMapやArrayListに代わるものは以下

mapSample.js

// Mapの生成
let map = new Map();

// 要素の追加
// ※注意：putじゃなくset!
map.set("key1", "apple");

// 要素の取得(いつも通り)
map.get("key1");

listSample.js

// Listの生成(実質ただの配列)
let list = new Array();

// 要素の追加
// ※注意：addじゃなくpush!
list.push("apple");

// 要素の取得(配列のアクセス方法)
list[0];

関数

function関数を使用する

kansuSample.js

function sampleFanc(name){
   console.log(name);
}

sampleFanc("今井");

nullとundefined

JavaScriptの世界ではundefinedという概念がある。
Javaでは生成されていない(メモリー上に存在しない)変数をnullとして扱うが、
JavaScriptではそれがundefinedとして扱われると思えば良い。
※つまりnullは意図的に変数に設定しない限り、出現しない

注意点としては、nullとundefinedは別物扱いになるため、
"==="の比較を行った場合、falseの判定がされる。

##エラーの見つけ方について
上記で紹介した内容は本当に必要最低限に絞っているため、色々やるとエラーが発生する(無責任)
そのため、どんなエラーが発生しているか原因を特定するメソッドを持つことが重要

1.ログを出す
2.エラーを補足する

specificErr.js

try{
   let name = "バグってそうな値";
   //不安ならログに出す
   console.log(e);

}catch(e){
   //try・catch可能
   console.log(e.massage);
}

また、各Webブラウザ標準の開発者向けの機能を使用することで、より精度の上がった特定ができる。

まとめ

上記内容でJavaScriptの構文の基礎は固まったと言って良いでしょう。
あとは、JavaScript固有のライブラリやイベント処理、フレームワークの方法などを学んでもらえば、やりたいことは実現できるはずです。