6時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

JavaScript

2022年2月1日 JavaScript (JS Primer) 非同期処理はメインスレッドで実行される

非同期処理はメインスレッドで実行される メインスレッドは、ブラウザがユーザーのイベントや描画を処理するところです。表示の更新といったUIに関する処理も行っています。 非同期処理は名前から考えるとメインスレッド以外で実行されるように見えますが、 …

2022年1月31日 JavaScript (JS Primer) 非同期処理:コールバック

多くのプログラミング言語にはコードの評価の仕方として、同期処理(sync)と非同期処理(async)という大きな分類があります。 非同期処理はJavaScriptにおけるとても重要な概念です。 まずは非同期処理での例外処理、非同期処理の違いから学んでいきたいと…

2022年1月29日 JavaScript (JS Primer) エラーとデバッグ

JavaScript開発においてデバッグ中に発生したエラーを理解することは非常に重要です。 エラーが持つ情報を活用することで、ソースコードのどこでどのような例外が投げられたのかを知ることができます。 エラーはすべてErrorオブジェクトを拡張したオブジェク…

2022年1月28日 JavaScript (JS Primer)エラーオブジェクト

エラーオブジェクト throw文ではエラーオブジェクトを例外として投げることができます。 ここでは、throw文で例外として投げられるエラーオブジェクトについて見ていきます。 渡された数値が0以上ではない場合に例外を投げる関数です。 tryの中で発生させ、c…

2022年1月27日 JavaScript (JS Primer)例外処理

try...catch構文 例外が発生しうるブロックをマークし、例外が発生したときの処理を記述するための構文です。 try...catch構文のtryブロック内で例外が発生すると、tryブロック内のそれ以降の処理は実行されず、catch節に処理が移行します。 catch節は、try…

2022年1月25日 JavaScript (JS Primer)ビルトインオブジェクトの継承

ビルトインオブジェクトの継承 今回は「ビルトインオブジェクトのコンストラクタも継承出来る」ということについて学んでいきます。 ビルトインオブジェクトにはArray、String、Object、Number、Error、Dateなどのコンストラクタがあります。 class構文では…

2022年1月24日 JavaScript (JS Primer)静的メソッドの継承

【復習-1】 インスタンスオブジェクト new演算子などを用いてクラスをインスタンス化したものです。 // プロパティを持たない空のオブジェクトを作成 // = `Object`からインスタンスオブジェクトを作成 const obj = new Object(); console.log(obj); // => {…

2022年1月22日 JavaScript (JS Primer) プロトタイプ継承

子クラスのインスタンスから親クラスのプロトタイプメソッドを呼び出す例を学習しました。 プロトタイプ継承 Parentクラスではmethodを定義しているため、これを継承しているChildクラスのインスタンスからも呼び出せます。 class Parent { method() { conso…

2022年1月21日 JavaScript (JS Primer) 継承

本日はクラスの継承について勉強しました。 継承 extendsキーワードを使うことで既存のクラスの構造や機能を引き継いだ新しいクラスを定義することが出来ます。 クラスの定義 以下のように定義します。 class 子クラス extends 親クラス { ~子クラスの定義~ …

2022年1月20日 JavaScript (JS Primer) プロパティの参照とプロトタイプチェーン

プロトタイプオブジェクトのプロパティがどのようにインスタンスから参照されるか オブジェクトのプロパティを参照するときに、オブジェクト自身がプロパティを持っていない場合でも、そこで探索が終わるわけではありません。 オブジェクトのPrototype内部プ…

2022年1月18日 JavaScript (JS Primer) プロトタイプチェーン

復習 プロトタイプメソッドはプロトタイプオブジェクトのプロパティとして定義しています。 クラスをインスタンス化したときにプロトタイプオブジェクトのプロパティとしてメソッドが組み込まれます。 class構文で定義したプロトタイプメソッドはプロトタイ…

2022年1月17日 JavaScript (JS Primer) プロトタイプオブジェクト

前提(prototypeオブジェクトについて) 正確には、ほとんどすべてのオブジェクトはObject.prototypeプロパティに定義されたprototypeオブジェクトを継承しています。 prototypeオブジェクトとは、すべてのオブジェクトの作成時に自動的に追加される特殊なオブ…

2022年1月15日 JavaScript (JS Primer) 2種類のインスタンスメソッドの定義

クラスでは、2種類のインスタンスメソッドの定義方法があります。 class構文を使ったインスタンス間で共有されるプロトタイプメソッドの定義と、 インスタンスオブジェクトに対するメソッドの定義です。 これらの2つの方法を同時に使い、1つのクラスに同じ名…

2022年1月14日 JavaScript (JS Primer) 静的メソッド

インスタンスメソッドは、クラスをインスタンス化して利用します。 一方、クラスをインスタンス化せずに利用できる静的メソッド(クラスメソッド)もあります。 静的メソッドの定義方法はメソッド名の前に、staticをつけるだけです。 静的メソッドはクラスメ…

2022年1月13日 JavaScript (JS Primer) Array#lengthをアクセッサプロパティで再現する

復習 getterは"インスタンス.プロパティ名"とする事でプロパティを参照した時に実行されます。getterは値を返すものです。 setterは"インスタンス.プロパティ名 = 値"とする事で値を代入した時に、値が仮引数となって実行されます。 Array#lengthをアクセッ…

2022年1月10日 JavaScript (JS Primer) クラスのアクセッサプロパティの定義

クラスのアクセッサプロパティの定義 クラスに対してメソッドを定義できますが、メソッドはメソッド名()のように呼び出す必要があります。 クラスでは、プロパティの参照(getter)、プロパティへの代入(setter)時に呼び出される特殊なメソッドを定義でき…

2022年1月8日 JavaScript (JS Primer) クラスのプロトタイプメソッドの定義

クラスのインスタンスに対してメソッドを定義する 前回はプロトタイプメソッドにメソッドを定義したケースを学習しましたが、 今回はインスタンスオブジェクトにメソッドを定義した場合についてまとめていきます。 下のコード例ではCounterクラスのコンスト…

2022年1月6日 JavaScript (JS Primer) クラスのプロトタイプメソッドの定義

クラスの動作はメソッドによって定義できます。 class構文ではクラスに対して自由にメソッドを定義できます。 このクラスに定義したメソッドは作成したインスタンスが持つ動作となります。 メソッドでクラスのインスタンスを参照するには、thisを使います。 …

2022年1月4日 JavaScript (JS Primer) クラスのインスタンス化

前提知識 new演算子 開発者はユーザー定義のオブジェクト型やコンストラクタ関数を持つ組み込みオブジェクト型のインスタンスを作成することができます。 (MDNリファレンス) クラスのインスタンス化の流れ classキーワードでclass宣言文を定義 宣言したclass…

2022年1月3日 JavaScript (JS Primer) クラス

クラス クラスの前提・・・動作や状態を定義した構造 クラスからはインスタンスと呼ばれるオブジェクトを作成でき、インスタンスはクラスに定義した動作を継承し、状態は動作によって変化します。 class構文 ES2015でクラスを表現するためのclass構文が導入…

2022年1月1日 JavaScript (JS Primer) メソッドとコールバック関数とArrow Function

コールバック関数はcallback()のようにただの関数として呼び出されます。 つまり、コールバック関数として呼び出すとき、この関数にはベースオブジェクトはありません。 そのためcallback関数のthisはundefinedとなります。 // `callback`関数を受け取り呼び…

2021年12月31日 JavaScript (JS Primer) 関数とthis

Arrow Functionとthis Arrow Functionで定義された関数やメソッドにおけるthisがどの値を参照するかは定義時(静的)に決まります。 一方、Arrow Functionではないfunctionキーワードの関数においては、thisは呼び出し元に依存するため関数の実行時(動的)…

2021年12月30日 JavaScript (JS Primer) 関数とthis

thisが問題となるパターン thisは所属するオブジェクトを直接書く代わりとして利用出来ますが、thisには大きく分けて2つの問題があります。 問題1: thisを含むメソッドを変数に代入した場合 問題2: コールバック関数とthis 本日は、2つ目の問題に触れてい…

2021年12月27日 JavaScript (JS Primer) 関数とthis

thisが問題となるパターン thisは所属するオブジェクトを直接書く代わりとして利用出来ますが、thisには大きく分けて2つの問題があります。 問題1: thisを含むメソッドを変数に代入した場合 問題2: コールバック関数とthis 本日は、1つ目の問題に触れてい…

2021年12月25日 JavaScript (JS Primer) 関数とthis

関数宣言や関数式におけるthis 関数宣言・・・fuction yano () {} 関数式・・・ const yano = function() {} 関数宣言や関数式ではベースオブジェクトがないためthisはundefinedとなります。 関数の中に関数を定義して呼び出す場合も同じです。 strict mode…

2021年12月24日 JavaScript (JS Primer) 関数とthis

基本的にはメソッドの中で利用しますが、thisは読み取り専用のグローバル変数のようなものでどこにでも書けます。 thisの参照先は主に次の条件によって変化します。 実行コンテキストにおけるthis コンストラクタにおけるthis 関数とメソッドにおけるthis Ar…

2021年12月23日 JavaScript (JS Primer) 関数とスコープ

クロージャーについての理解が曖昧だったのでJS primer以外の記事も読んでみました。 function User(){ // private member let name = "Jason"; // public member this.getName = function(){ return name; }; } let user01 = new User(); // 直接プライベー…

2021年12月21日 JavaScript (JS Primer) 関数とスコープ

静的スコープ: ある変数がどの値を参照するかは静的に決まる メモリ管理の仕組み: 参照されなくなったデータはガベージコレクションにより解放されます。 クロージャーとはこの2つの仕組みを利用して、関数内から特定の変数を参照し続けることで関数が状態…

2021年12月18日 JavaScript (JS Primer) 関数とスコープ

クロージャー クロージャーとは「外側のスコープにある変数への参照を保持できる」という関数が持つ性質を指します。 ほぼ全ての関数はクロージャーとも言えます。厳密にいうと、特定の変数を参照することで関数が状態を持っていることをそう呼びます。 ガベ…

2021年12月17日 JavaScript (JS Primer) 関数とスコープ

const, let , var再復習 const 値の再代入も同じ変数名での再定義もできません。 let 値の再代入はできるが、同じ変数名での再定義はできません。 var 値の再代入も、同じ変数名での再定義もできます。 しかし、値が簡単に書き換え可能なので、ほとんど使用…