2021-01-01から1年間の記事一覧
コラム:Object.prototypeを継承しないオブジェクト Objectはすべてのオブジェクトの親になるオブジェクトであるという話でしたが、例外もあるそうです。 以下のコードではObject.prototypeを引数に持たずにnullを渡すと、prototypeは継承しないことが分かり…
ビルトインメソッド JavaScriptにおけるオブジェクトに自動的に実装されるメソッドです。 前の章で紹介されていたtoStringメソッドもそのうちのひとつで、すべてのオブジェクトがtoStringを持っています。 Objectはすべての元 Array、String、Functionなどの…
オブジェクトのマージと複製 Object.assignメソッド Object.assignメソッドを使うと、オブジェクトの複製やオブジェクト同士のマージができます。以下に、Object.assignメソッドの基本構文を記載します。 // 第一引数に、マージさせるtargetオブジェクトを書…
toStringメソッド オブジェクトのtoStringメソッドは、オブジェクト自身を文字列化するメソッドです。 Stringコンストラクタ関数は、引数に渡されたオブジェクトのtoStringメソッドを呼び出しています。 const obj = { key: "value" }; console.log(obj.toSt…
プロパティの値がundefinedかどうか確認しプロパティの存在を確認する if文を使うことで、プロパティの値がundefinedかどうか確認できます。プロパティの値があることが前提ならばundefinedかどうかを確認することでプロパティの存在の有無を確認する事にな…
Computed property names Computed property namesとは、オブジェクトリテラル内でのブラケット記法を使ったプロパティ名です。Computed property namesを使うことで、プロパティ名を動的に作成できます。 const key = "age"; const person = { [key]: "25" …
分割代入 前回オブジェクトのプロパティにアクセスする方法を学習しました。 以下はオブジェクトのプロパティを変数として定義し直しています。 const languages = { ja: "日本語", en: "英語" }; const ja = languages.ja; const en = languages.en; consol…
これまでに学習してきたfor文やforEachメソッドで数値の合計を返すsum関数を学習してきましたが、いずれの方法もletで再代入して反復処理を行う必要がありました。 reduceメソッドを使えば一時的な変数を定義せずに反復処理した結果だけを受け取ることが出来…
Object.keysメソッド 前回はfor...inメソッドを使った際に親オブジェクト自身がプロパティを持っている場合に意図しない結果を生んでしまうこと問題があるという点まで学習しました。 Object.keysメソッドを使うことで安全にオブジェクトのプロパティを列挙…
配列のsomeメソッド someメソッドを使うことで、配列の要素をテストします。テストがtrueになる要素が1つでもある場合、someメソッドはtrueを返します。テストはアロー関数で書きます。 const array = [1, 2, 3, 4, 5]; // 要素が2の倍数かテストする。 cons…
配列における反復処理 forEachメソッドを使うことで、配列の全ての要素に対して反復処理を実行できます。引数で渡したコールバック関数を、全ての要素に対して実行します。 let array = ["10月","11月","12月"]; array.forEach((month) => { console.log(mon…
while文とdo-while文の違い while文とdo-while文の大きな違いは、処理の実行タイミングです。while文では条件式を評価した後で処理を実行します。一方、do-while文の場合、処理を実行してから条件式を評価します。 無限ループになる理由 無限ループになる理…
セミコロンの有無について 文の末尾にはセミコロンをつける ブロックで終わる文は例外的にセミコロンをつけなくてよい とありますが、その上で関数式で使われているブロックの後にはセミコロンが必要です。 条件分岐 条件分岐を使うことで、特定の条件を満た…
Arrow Function // functionキーワードで関数を定義 function yanoZ(value) { return value * 2 } console.log(yanoZ(1)); // 無名関数を変数名yanoAに代入 const yanoA = function(value) { return value * 2 }; console.log(yanoA(1)); // => 2 // 上の無…
First-class Function (第一級関数)とは? プログラミング言語が第一級関数 (First-class functions) を持つと言われる場合、その言語の関数がその他の変数と同様に扱われることを表します。例えば、こうした言語では、関数を他の関数への引数として渡したり…
[ES2015] メソッドの短縮記法 今までは、オブジェクトリテラルのプロパティの一つとしてバリューの部分にメソッドを代入していました。しかし、この書き方は省略することが出来ます。以下の例を参考に見ていきましょう。 一般的な記法 const kago = { mikan:…
関数の上書きについて functionキーワードで同じ名前の関数を宣言した場合、 同じ名前の関数を上書きします。このことから、関数は名前で区別していることが分かります。 function fn(x) { return `x: ${x}`; } function fn(x, y) { return `x: ${x}, y: ${y…
開発をするときは、以下を使い分けると良いです。 Milestone Issue Pull Request 大まかな流れは以下のようになります。 Milestoneを作ります。期限を設定できます。 issueを作りたいMilestoneをクリックします。 issueを作ります。 issueにラベルをつけます…
Arrow Function 関数式にはfunctionキーワードを使った方法以外に、Arrow Functionと呼ばれる書き方があります。 名前のとおり矢印のような=>(イコールと大なり記号)を使い、匿名関数を定義する構文です。 Arrow関数では、受け取る値や利用する機能を制限…
関数をオブジェクトとして扱う JavaScriptの関数は、オブジェクトの一種です。オブジェクトとして扱えるので、変数に代入できます。 function fn() { console.log("さむい"); } // 関数`fn`を`myFunc`変数に代入している。 const myFunc = fn; myFunc; // =>…
分割代入とは 分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。 プロパティに直接値を代入して、キーと値のように紐づけ…
関数宣言 関数とは、ある一連の手続き(文の集まり)を1つの処理としてまとめる機能です。 関数を利用することで、同じ処理を毎回書くのではなく、一度定義した関数を呼び出すことで同じ処理を実行できます。 // 関数宣言 function 関数名(仮引数1, 仮引数2)…
明示的な型変換 falsyな値とは JavaScriptでは、どの値がtrueでどの値がfalseになるかは、次のルールによって決まります。 falsyな値はfalseになる falsyでない値はtrueになる falsyな値とは次の7種類の値のことを言います。 false undefined null 0 0n NaN …
前回の記事の続きです。 ビット演算子 ビット演算子では、オペランドである数値を符号付き32ビット整数(0と1からなる32個のビットの集合)として扱います。 たとえば、1という数値は符号付き32ビット整数のビットでは、00000000000000000000000000000001 と…
前回の記事の続きです。 リテラル リテラルとはプログラム上で数値や文字列など、データ型の値を直接記述できるように構文として定義されたものです。 リテラル表現を持つプリミティブ型のデータ型 真偽値 数値 文字列 null オブジェクトの中でよく利用され…
値の評価とは、入力した値を評価してその結果を返すことです 例えば 1 + 1 という式を評価したら 2 という結果を返します bookTitle という変数を評価したら、変数に代入されている値を返します const x = 1;という文を評価することで変数を定義するが、この…
varの問題 同じ変数名で、再定義できてしまう点です。 letやconstでは、同じ名前の変数を再定義しようとすると、次のような構文エラー(SyntaxError)が発生します。 let word = "モスバーガー"; let word = "モスバーガー"; // SyntaxError: Identifier 'wo…
JavaScriptとは JavaScriptはウェブブラウザ上で動くプログラミング言語です。 JavaScriptはECMAScriptの仕様に従って動作しています。 ECMAScriptは毎年アップデートされます。2015年に大きくアップデート(ES2015)してJavaScriptは再度注目されるようにな…
Specが失敗した時の調査手順 Specが失敗した時に、以下の手順でエラーの原因を特定します。 手順3に関しては、モデルが正常に動作しているかを確認したい時に実行します。 失敗場所とエラーメッセージを確認する。 失敗場所とエラーメッセージを手がかりに原…
詳細表示機能Specを追加する 前回の一覧表示機能に続いて、詳細表示機能のテストコードを追記します。 describe 'タスク管理機能', type: :system do let!(:task_a) { FactoryBot.create(:task, name: '最初のタスク'), user: user_a)} ...省略 describe '詳…