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
そこでおすすめされている
を使って進めていこうと思う。
プログラミング自体が初めてというわけではないので、気になった部分だけをメモしていく。
変数の宣言は constまたはletで行う。 const は再代入ができない変数、letは再代入可能な変数の宣言。 varはES2015ではすでに非推奨であり、使うべきではないが、互換性のために残されている。
const hoge = "Hello";
const は必ずしも定数"ではない"ことに注意する。 constでオブジェクトを宣言することもできるが、オブジェクト自体は変更可能である。
let hoge = "Hello";
let hoge
hoge = "World";
hoge = 1;
letは再代入可能な変数で、初期値を定義せずとも宣言可能。初期値を定義しなかった場合は “undefined” になる。 undefined は null とは異なる。C言語と同じく不定、ということだろう。
letやconstでは同じ名前の変数を再定義することはできないが、varではできてしまう。 またvarには「変数の巻き上げ」と呼ばれる意図しない挙動があるらしい。
let, const ともに変数名には以下の命名規則がある。
この辺は他の言語とほぼ同じ。一応マルチバイト文字も変数名に使うことができるらしい。
ブラウザのREPL(read-eval-print-loop)と呼ばれる機能(開発者向けコンソール)を使って直接JavaScriptを記述して試すことができるよ、という紹介。
JavaScriptには変数の型はないが、値の型は存在する。これらの値の型のことをデータ型と呼ぶ。
データ型は大きく分けるとプリミティブ型とオブジェクトの2つに分類される。
プリミティブ型は6つある。
オブジェクト(複合型)
typeof
演算子を使うことで、データ型を調べることができる。
ただし null に関しては typeofで調べるとデータ型が “object” になってしまう。これはバグである。
typeof null
ES2015からテンプレートリテラルというものが使えるようになったようだ。
`複数行の
文字列を
入れたい`;
このように改行もそのまま反映される文字列を書くことができる。
テンプレートという名前の通り、テンプレート機能も持っているらしい。
const str = "文字列";
console.log(`これは${str}です`);
// -> "これは文字列です"