TypeScriptに入門したいのでJavaScriptに入門してみる(変数～文字列リテラルまで)

動機

WebUIをある程度作れるようになりたい（個人の趣味レベルだけど）と大昔から思っていたものの、当時はJavaScriptのFWだったりJavaScriptのトランスパイラだったりが沢山出てきていたような印象があり、遠巻きにWebのUIを作るのは怖い！と思っていた。

社会人になってもCでUIも無いようなプログラムを書くことしかなかったのと、その間にクラウドが進化してAWSやGCP, Azureを使えること自体が技術としてみなされるようになってきたこと、golangやRustが出てきてそちらに興味が湧いてきたこともあり、ますますチャレンジする機会を逃していた。 （そもそも型のある言語の方が好きだったりする）

しかしここ2,3年ほどでTypeScriptは型もあって概ね好評だし流行ってきて今後も使われそう、ということで入門したくなった。 ところがTypeScriptをやってる人に聞くとJavaScriptを知らないと難しい、とのことだったのでとりあえずJavaScriptに触ることにした、という長い背景がある。

教材

よく知らないのだが、WebUIに関してはmizchiさんという恐らく有名な？方が 「TypeScript入門以前ガイド」というのを書いて下さっていて、このガイドによるところの私は ES2015 for Beginnersにあたる。 https://mizchi.hatenablog.com/entry/2018/10/03/195854

そこでおすすめされている

https://jsprimer.net/

を使って進めていこうと思う。

第一部：基本文法

プログラミング自体が初めてというわけではないので、気になった部分だけをメモしていく。

変数と宣言

変数の宣言は constまたはletで行う。 const は再代入ができない変数、letは再代入可能な変数の宣言。 varはES2015ではすでに非推奨であり、使うべきではないが、互換性のために残されている。

const
const hoge = "Hello";

const は必ずしも定数"ではない"ことに注意する。 constでオブジェクトを宣言することもできるが、オブジェクト自体は変更可能である。

let
let hoge = "Hello";
let hoge

hoge = "World";
hoge = 1;

letは再代入可能な変数で、初期値を定義せずとも宣言可能。初期値を定義しなかった場合は “undefined” になる。 undefined は null とは異なる。C言語と同じく不定、ということだろう。

varの問題点

letやconstでは同じ名前の変数を再定義することはできないが、varではできてしまう。 またvarには「変数の巻き上げ」と呼ばれる意図しない挙動があるらしい。

変数名のルール

let, const ともに変数名には以下の命名規則がある。

  1. 半角のアルファベット、_（アンダースコア）、$（ダラー）、数字を組み合わせた名前にする
  2. 変数名は数字から開始できない
  3. 予約語と被る名前は利用できない

この辺は他の言語とほぼ同じ。一応マルチバイト文字も変数名に使うことができるらしい。

値の評価と表示

ブラウザのREPL（read-eval-print-loop）と呼ばれる機能（開発者向けコンソール）を使って直接JavaScriptを記述して試すことができるよ、という紹介。

データ型とリテラル

データ型

JavaScriptには変数の型はないが、値の型は存在する。これらの値の型のことをデータ型と呼ぶ。

データ型は大きく分けるとプリミティブ型とオブジェクトの2つに分類される。

プリミティブ型は6つある。

  • 真偽値(Boolean): true/false
  • 数値(Number) : 42や3.14159 など
  • 文字列(String) ： “JavaScript"などの文字列
  • undefined: 値が未定義であることを意味するデータ型
  • null: 値が存在しないことを意味する

オブジェクト（複合型）

  • プリミティブ型以外のデータ: オブジェクト、配列、関数、正規表現、Dateなど
typeof

演算子を使うことで、データ型を調べることができる。

ただし null に関しては typeofで調べるとデータ型が “object” になってしまう。これはバグである。

typeof null
リテラル

ES2015からテンプレートリテラルというものが使えるようになったようだ。

`複数行の
文字列を
入れたい`;

このように改行もそのまま反映される文字列を書くことができる。

テンプレートという名前の通り、テンプレート機能も持っているらしい。

const str = "文字列";
console.log(`これは${str}です`);
// -> "これは文字列です"