フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

コアJavaScript

(Javascript)Video要素をJavascriptで制御する

Html5のVideo要素はHTMLMediaElementオブジェクトとして取得できます。以下、Javascript側で操作するためのTips集です。

(Javascript)Canvasで直線の角度を取得する

Canvas上に、2点をつなげた直線を描画する際、その角度を取得するためのTipsです。 x座標はMath.cos(ラジアン)×距離y座標はMath.sin(ラジアン)×距離 で取得できます。

(Javascript)Canvasの基本 オブジェクトを回転させる

Canvasで描画したオブジェクトを回転させるには、rotateメソッドを使用しますが、少しクセがあるので、できるだけわかりやすく理解できるように残しておきます。

Canvas上で、ベジェ曲線に沿ってオブジェクトを動かすための機能を作ってみた

BezierCurveObjectという名前のオブジェクトを作成しました。3次ベジェ曲線を描画するために必要な引数をつかってインスタンス化します。結果のみ言いますと、実際に何かを動かすのではなく、動かすために必要な座標や角度を取得することができるオブジェク…

(Jacascript)文字のフォーマットを行う関数

JavascriptにはCのprintfや、C#のString.format関数などのように、%dや%s等のプレースホルダを使用して文字の置き換えを行う機能を持つ関数が用意されていないようで、とりあえず自作で用意してみました。今後も使えそうなので一応、Tipsとして残しておきま…

(Javascript)オブジェクトの複製

Javascriptの代入(=)は独特の癖があって、リテラルは値のコピーを行い行うように振る舞い、オブジェクトは参照値のコピーを行います。なので代入を使ってコピーした場合、コピー先の内容を変えると、コピー元に反映されてしまいます。

(Javascript)Canvasで角度と距離から座標を出す。

座標0,0(左上)を基準にして、特定の角度に向かって、特定の距離を進んだ際の座標を求める方法です。

(Javascript)簡単にクロージャを実装する

サイ本などで紹介されているクロージャは、関数内部に変数を定義して、メソッドを使用して変数にアクセスする方法を行っておりますが、変数を定義せずに、メソッドから引数に直接アクセスすれば、簡単にクロージャを実装することができます。

(Javascript)正規表現を使う際に知っておきたいこと

Javascriptの正規表現は通常の正規表現と、RegExpコンストラクタを使用した正規表現があります。どちらも最終的にはRegExpオブジェクトが生成されますが、両者の使い方が微妙に違い、その辺をきちんと把握していないと思った通りに機能しない場合などあるの…

(Javascript)オブジェクトのキー一覧を取得する Object.keys

Object.keysはObjectオブジェクトのビルトイン関数なのですが、忘れるので一応メモとして残しておきます。

(Javascript)web strage

Webページに関する情報をクライアント側で保持しておきたいにはweb storageを使用します。特別新しい技術ではありませんが、一応基本的な使い方をメモとして残しておきます。

(Javascript)キーボードで押したキーを取得する

リアルタイムで押されたキーを取得する場合は、onkeydownかonkeyupのイベントを利用します。自動で入ってくる引数にkeyCodeというプロパティがあり、そこでキー番号(ASCIIコード10進数)を見ることができます。 以下のサンプルは、押されたキーの番号がコン…

(Javascript)Object.createの使いどころ

new演算子と混同されがちなObject.createなので、基本的な役割と使いどころをメモしておきます。

(Javascript)thisの違いについての覚書

Javascriptのthisは実行コンテキストによって定義が変わります。例外があるかもしれませんが、基本的な定義は以下のとおりなので、メモを残しておきます。

(Javascript) RegExpのexecメソッド

Javascriptの正規表現パターンは、varに代入した際にRegExpオブジェクトに変換されます。 テキストを検索するパターンではString.matchが代表的ですが、RegExp.execというメソッドでも検索を行うことが出来ます。String.matchとは微妙に動作が違い、用途によ…

(Javascript)ミックスインでthisを使う

Javascriptでは、関数内に他の関数を読み込んで使用することをミックスインといいますが、ミックスイン用の関数内でthisを使うことで呼び出し元の情報を取得することが出来ます。

(Javascript)他の関数のメソッドをコピーする

関数やコンストラクタを定義する時に、他の関数からメソッドをコピーすることが出来ます。 但し、コピー元のメソッドは関数定義後に追加する形で記述しなければなりません。おそらく、関数内部に記述してしまうと、関数が呼び出されるまで実態がない状態にな…

(Javascript)継承したオブジェクトでメソッドのオーバーライドを行う

オブジェクトを継承した場合、継承先でメソッドのオーバーライドが必要になることがあります。継承先で同じ名前のメソッドを定義することは可能ですが、その場合はただの上書きになってしまうので、継承元の処理を呼び出すことは出来ません。 継承元の機能を…

(Javascript)callとapplyの違い

関数内で他の関数を呼び出すことが出来ることでお馴染みのcallとapplyメソッドですが、両者の違いを一応まとめておきます。

(Javascript)コンストラクタ名を取得する

Logや画面に表示するために、コンストラクタ用関数の内部でコンストラクタ名を使いたくなる時がまれに、ありますので、メモのために残しておきます。

(Javascript)protorypeを使った継承

クラスという概念がないJavascriptで、prototypeは継承的な役割を再現することが出来ます。 コンストラクタのprototypeに継承したいコンストラクタのprototypeを代入することで、他コンストラクタのメンバを継承することが出来るようになります。 参考サイト…

(Javascript)prototypeプロパティ

すべての関数は、prototypeというプロパティを内部に保持しています。 prototypeは参照値を保持するためのプロパティで、ここに定義した変数やメソッドは、インスタンスが共通で参照する値となります。

(Javascript)オブジェクトにprivate変数を持たせる

Javascriptにはアクセス修飾子がありませんが、クロージャを使用することで外部からはアクセス出来ないprivate変数を持たせることが出来ます。

(Javascript)クロージャとは

広義でのクロージャはコードとスコープがセットになったものだそうです。 Javascriptの場合は、メソッドが自身の外にある変数を参照している関係をクロージャと言います。この場合のメソッドとは、関数の中に組み込まれる内部関数の事を指します。 通常の関…

Javascriptでのクラス作成

Javascriptはオブジェクト指向ですが、プロトタイプベースと呼ばれる言語で、クラスの概念はありません。ただし、プロパティやメソッドを持つオブジェクトを生成することが出来るため、クラスインスタンスと同じようなものを作成することは可能です。また、J…

Javascriptでのメソッド

Javascriptでは関数とメソッドは別物として明確に定義されています。 簡単に言うと、直接呼び出せるものが関数(alert()など)で、オブジェクトを介して呼び出すものがメソッド(ToString()など)ということです。

(JavaScript)関数にプロパティを持たせる

関数にプロパティを設定することで、関数の処理が終わった後も、関数内部に値を保持させることが出来ます。

(Javascript)関数を値として持たせる(カッコ無し関数)

関数を呼び出す際、alert() のようにカッコを付けて呼び出すが、カッコなしで呼び出すことでその関数を参照させることができるようになります。

Javascript Argumentsオブジェクト(可変長引数)

Argumentsオブジェクトというのは、俗にいうargsです。 Javascriptの場合、関数で受け取る引数は厳密にチェックされません。関数を呼び出し時に送られた引数は、定義した引数より多くても少なくても、引き受けて処理が行われます。送られてきた引数は一律Arg…

(JavaScript)関数の引数をnull許容にする

Javascript自体は、引数が必要な関数を引数なしで呼び出してもエラーになることはありません。ただ、内部の処理で必ず必要な引数の場合は、デフォルト値を用意したいです。そんな場合は以下の方法がシンプルで便利です。