JavaScript

続: JavaScript入門 これ の続き。 教材は https://jsprimer.net/ 関数と宣言 関数は function キーワードを使う。 function function_name(arg1, arg2) { // something to do... return return_value; } // 関数の呼び出し const result = function_name(arg1, arg2); 関数名のルールは変数名のルールと同じ 半角のアルファベット、_ （アンダースコア）、$ （ダラー）、数字を組み合わせた名前にする 変数名は数字から開始できない 予約語と被る名前は利用できない returnは必須ではない(値を返す必要がない関数はreturnを書く必要はない) returnの返り値を省略している場合、もしくはreturn 文のそのものを省略した場合は未定義の値である undefined を返す。 関数の引数 定義した関数の仮引数よりも呼び出し時の引数が少ない場合、余った仮引数には undefined という値が代入される。（エラーにならないんですね…） function echo(x) { return x; } console.log(echo(1)); // -> 1 console.log(echo()); // -> undefined また、引数の数が多い時は余分な引数は単純に無視される。 [ES2015] デフォルト引数 Pythonなどと同じくデフォルト引数が使える。 function echo(x = "hoge") { return x; } console. [続きを読む]

続: JavaScript入門 これ の続き。 教材は https://jsprimer.net/ 暗黙的な型変換 等価演算子などで暗黙的に型変換される例が載っているが、必要性は薄く基本的には === を使うようにすべき。 暗黙的な変換は割とひどい仕様が載っている… 明示的な型変換 任意の値 -> 真偽値 Boolean("string"); // -> true 任意の値を真偽値に変換できるが、どの値がtrueに、どの値がfalseになるのかは falsy な値が falseになる falsy でない値は true になる というルールに従う。 falsy な値とは以下の6種類である。 false undefined null 0 NaN ”” （空文字） 数値 -> 文字列 String(1); // -> 1 真偽値に対しては Stringで true または false という文字列になる。同じように null, undefined, シンボルのプリミティブ型の値に対しては変換は見た目通りの文字列を得ることができる。 オブジェクトを文字列にしたい場合は、 JSON.stringify などのより適切な方法を使うべきである。 シンボル -> 文字列 String(Symbol("シンボルの説明")); 文字列 -> 数値 ユーザからの入力を数値にする場合などに使う。 [続きを読む]

続: JavaScript入門 これ の続き。 教材は https://jsprimer.net/ 演算子 + での文字列結合 const value = "hoge" + "moge"; console.log(value); // -> hogemoge 数値計算 JavaScriptでは数値は内部的には IEEE 754方式の浮動小数点数として表現される。よって整数と浮動小数点数の加減乗除も + ,- , * , / , % で実行可能。 [ES2016] ** べき乗演算子 ES2016から使えるべき乗を求める演算子 ** なお、旧来は他の言語と同じく Math.pow といったメソッドを利用していた様子。 console.log(2**4); // -> 16 console.log(Math.pow(2, 4)); // -> 16 単項 + または - 演算子 単項演算子の + はオペランドを数値に変換する(マイナスも同様) つまり文字列の "1" を 数値の 1 に変換してくれる。 let t = +"1"; console. [続きを読む]

続: JavaScript入門 これ の続き。 教材は https://jsprimer.net/ nullリテラル null 値を返すリテラルで、「値がない」ことを表す。 nullを参照した場合コンソール上では null と表示されるだけである。 undefined はリテラルではない undefined はただのグローバル変数で、undefinedという値を持っているだけ。したがって同じ undefined という名前のローカル変数を宣言することができる（もちろん非推奨） function fn(){ var undefined = 100; console.log(undefined) } fn(); true, false, null は変数ではなくリテラルであるため、同じ名前の変数を定義することができない。 オブジェクトリテラル const obj = { key: "value" }; オブジェクトの keyには 文字列またはSymbol を指定し、値にはプリミティブ型からオブジェクトまで何でも入れることができる。 オブジェクトが持つキーのことをプロパティ名と呼ぶ。※ここでは key がプロパティ名。 オブジェクトのキーを参照するにはドット . またはブラケット [] を利用する。 const obj = { "key" : "value" }; console.log(obj.key); console.log(obj["key"]); ドット記法ではプロパティ名が変数名と同じく識別子である必要があるので、数値から始まるような識別子は利用できない。 配列リテラル const emptyArray = []; // 空配列 const array = [1, 2, 3]; 配列の添字は 0 から始まる。他の言語と同じ。 [続きを読む]

動機 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 ともに変数名には以下の命名規則がある。 半角のアルファベット、_（アンダースコア）、$（ダラー）、数字を組み合わせた名前にする 変数名は数字から開始できない 予約語と被る名前は利用できない この辺は他の言語とほぼ同じ。一応マルチバイト文字も変数名に使うことができるらしい。 値の評価と表示 ブラウザのREPL（read-eval-print-loop）と呼ばれる機能（開発者向けコンソール）を使って直接JavaScriptを記述して試すことができるよ、という紹介。 [続きを読む]