読者です 読者をやめる 読者になる 読者になる

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

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

Tips

(CSS)画像を立体的に回転させる

カードがくるくると回転するようにアニメーションさせるCSSです。奥行きを持った変形を行うtransformプロパティを、animationと組み合わせることで簡単に実装できますが、あまり使うことがなさそうなのでメモとして残しておきます。

(CSS)フォントファイルを変換してくれるサイト

Webフォントを全てのブラウザに対応させるためには3~4種類の形式のファイルを用意する必要がありますが、fontsquirrel.com の WEBFONT GENERATORというWebサービスを使用すると、1つのWebフォントファイルから eot、woff、woff2、ttf、svg の5種類のフォント…

(Javascript)Style要素を動的に扱う

htmlのheadタグ内に記述したstyleをJavascriptで操作するためのTipsです。

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

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

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

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

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

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

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

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

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

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

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

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

(Javascript)Canvas内の2つの座標の距離を求める

canvasで何かを描画する際に、2つの座標の距離が必要になる場合があります。2点の距離を求めるサンプルをメモしておきます。

(Javascript)Canvasの基本 canvasのコピー

画像のトリミングと同じ方法でcanvasのコピーを行うことができます。drawImageメソッドのソースとして、canvasオブジェクトを渡してあげれば、コピーの対象として扱えるようになります。

(Node.js)Node.jsでjsonファイルを読み込む

とある書籍で、サイトのコンフィグをjsonで用意して管理するという方法を紹介していたので、その方法をメモとして残しておきます。

(Node.js)Express 4 のスケルトンコード作成(windows)

Express3から4にバージョンアップされた際に、細かい部分が結構変更されていたようです。ググってもなかなか情報が見つからず、自己解決したので一連の流れを残しておきます。

(Node.js)MongoDBを使用するための基本

Node.jsでMongoDBを使用するために必要な基本事項を残しておきます。

(Node.js)モジュール呼び出し時のパスについて

Node.jsで自作モジュールを呼び出す場合は、パスが必要だったりする場合とそうでない場合がありますが、その違いについてメモしておきます。

(Node.js)EventEmitterでイベントを登録する。

JavascriptではaddEventListenerでイベントの登録を行いますが、Node.jsではEventEmitterオブジェクトを使用してイベントの管理を行います。 基本は、onで登録、emitで発生です。

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

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

(Javascript)エラー詳細を表示するスクリプト

Javascriptはエラー発生時でも静かに終了するので、エラーに気が付かないことがまれにあります。 window.onerrorに関数を登録しておくとエラー発生時に登録した関数を自動で実行してくれるので、head内に以下の様な関数を入れておくとエラーが発生した際に詳…

(DOM)Document.Allの代わり

Document.Allは非推奨の機能です。といえども、これに変わる機能がDOMには用意されていないようで、ネットを探してもこれといった解決方法を見つけることが出来ませんでしたが、以下の記述で簡単に全エレメントを取得できることがわかったので、共有します。

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

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

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

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

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

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

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

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

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

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

Javascriptでのクラス作成

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

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

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

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

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

(JavaScript)for文のちょっと便利機能メモ

Javascriptのfor文には、評価式に2つの変数を使用することができるようです。使いどころは少なそうですが、覚えておくといつか役に立ちそうな気がします。

Javascriptのグローバル変数

変数を宣言する場合にはvarキーワードを使用しますが、これを省略してキーワード無しで変数を宣言すると、グローバル変数として扱われます。

JavascriptにIsNullOrEmptyは必要ない

タイトルのとおりです。C#などでおなじみのIsNullOrEmptyはJavascriptでは必要ないようです。