JavaScript
TypeScriptの環境作成メモ Typescript用の環境を作っていくメモ． エディタは，IDE代わりにもなるVSCodeを使っていく． 環境 Windows10 VSCode 1.32.3 TypeScriptの環境作成メモ 環境 TypeScript初心者向け資料 インストール バージョンの確認 設定ファイルt…
JSのユニットテストフレームワークJasmine 3系メモ CodeprepさんでJavaScriptのコードレベルBDD向けのユニットテストフレームワークJasmineの紹介があったので，v3系の使い方メモ． （基本的にはv2系と変わらない） 環境 Windows10 JSのユニットテストフレー…
JSの分割ファイル読み込み（require vs import）メモ 2019年3月時点でのNode.js・ブラウザ環境での分割ファイル読み込み（require, import/export）についてのメモ． 結論： 開発側ではESM(import)を利用してコードを書いて管理． ただし，全ブラウザでESMは…
language-babelを使ってAtomでBabel AtomでES6,ES7からES5に自動トランスパイル（transpile）する環境を作る． 参考記事： medium.com 環境 Windows10 Atom 1.34.0 npm 6.4.1 前提 Atomエディタ，Node.jsはインストールされている前提で進める． language-ba…
Babel7 を試す BabelでES6,ES7からES5に自動トランスパイル（transpile）する環境を作る． 実際にはタスクランナーやwebpackと組み合わせて使うことが多いが， 今回はちょっとしたES6コードをトランスパイルして確認することを想定してBabelのみを動かす環境…
JSで横スクロールeventを検知するメモ デフォのscrollやtouchmove eventでは縦スクロール・横スクロールの区別ができない． なので，Custom Eventを使って横スクロールのみのeventを作成してそれを検知する処理についてのメモ． 動作確認した環境 Chrome JS…
jQueryでイベントハンドラの前後に処理を追加する 例えば，ボタンを押したときのクリックイベントハンドラがある場合に， その前後に処理を追加するような場合のメモ． 具体的には，ボタンAをクリック -> ボタンAの処理実行のところを ダミーボタンBのクリッ…
jQueryのevent検出 on, bind, delegate, liveメモ jQuery 1.X系を触っていた時に違いがよくわからなったのでメモ． なお， - bind: 3.0でdeprecate（非推奨） - live:1.7でdeprecate, 1.9 でremove - delegate: 3.0でdeprecate となっているので，基本的にon…
link要素でpreloadを使って非同期にファイルを読み込む link要素でpreloadを使って非同期にファイルを読み込むメモ． link要素でpreloadを使って非同期にファイルを読み込む preloadとは 現在の対応状況 resource hint 使用例 読み込み後，即時実行(Async Lo…
はてなブログの記事の最終更新日を取得 はてなブログの記事では， 最終更新日がデフォでは表示されないので，取得して表示しようというメモ． 最終更新日を追加 はてなブログの記事の最終更新日を取得 記事のhtmlの中には最終更新日が書かれていない 最終更…
JavaScriptで動的にschema.orgのJSON-LDを埋め込む JavavScirptでschema.orgのJSON-LDを生成して，Google Botに読んでもらおうというメモ． JavaScriptで動的にschema.orgのJSON-LDを埋め込む なぜJavaScirptを使うのか そもそもGoogleはJavaScript実行後の…
GoogleBot上で動作するJavaScriptメモ ※2017年10月時点での実行結果． 2014年ごろから，GoogleはJavascript実行後の結果も見ているらしい． www.suzukikenichi.com ということで，GoogleBot上で動作するJavascriptの関数・演算子のメモ． GoogleBot上で動作…
GoogleBooksで読める、読んでおくと良さそうなJavaScript 書籍メモ JavaScriptを勉強するにあたって、 読んでおくといいかもしれない本メモ。 GoogleBooks でプレビューできるもの優先でリストしておきます。 順番はテキトーです。 GoogleBooksで読める、読…
HTML5 WebStorage まとめ WebStorage(sessionStorage、localStorage) についてまとめておきます。 HTML5 WebStorage まとめ 試したブラウザ環境 WebStorage とは ストレージの最大容量 対応ブラウザ WebStorage が対応しているかの判定コード WebStorage の…
「2日でできる JavaScriptTraining」をやってみた（イディオムと感想） mixi の「2日でできる JavaScriptTraining」をやってみたのでメモ。 今回は、ラストのイディオム編です。 github.com 「2日でできる JavaScriptTraining」をやってみた（イディオムと感…
「2日でできる JavaScriptTraining」をやってみた（モジュールの利用(bower)） mixi の「2日でできる JavaScriptTraining」をやってみたのでメモ。 今回は、モジュール(bower)の使い方についてまとめておきます。 github.com 「2日でできる JavaScriptTraini…
「2日でできる JavaScriptTraining」をやってみた（非同期通信） mixi の「2日でできる JavaScriptTraining」をやってみたのでメモ。 今回は、非同期通信系をまとめておきます。 github.com 「2日でできる JavaScriptTraining」をやってみた（非同期通信） …
「2日でできる JavaScriptTraining」をやってみた（DOM操作） mixi の「2日でできる JavaScriptTraining」をやってみたのでメモ。 今回は、DOM操作のみまとめておきます。 github.com 「2日でできる JavaScriptTraining」をやってみた（DOM操作） 環境構築 1…
JavaScript DOMのクリック時とキー入力時のイベントと発火順序 クリック時とキーボード入力時のの発火するイベントと発火順序をまとめておきます。 JavaScript DOMのクリック時とキー入力時のイベントと発火順序 ブラウザ環境 マウスクリック時のイベント ク…
EaselJS のSpriteSheet, Sprite を使ってスプライトアニメーション [CreateJS] png, jpg, svg などでスプライトシートを作っておけば、 SpriteSheetクラスとSpriteクラスでスプライトアニメーション を生成できる。 EaselJS のSpriteSheet, Sprite を使って…
![はてなブックマーク - EaselJS のSpriteSheet, Sprite を使ってスプライトアニメーション [CreateJS]](https://b.hatena.ne.jp/entry/image/https://cartman0.hatenablog.com/entry/2015/10/30/193540)
EaselJS のプロパティやMatrix2D を使ってオブジェクトの変形 [CreateJS] EaselJS 0.8.0 から仕様が変わっているようなのでメモ。 以下の記事が日本語で参考になります。 FN0811001 - 変換行列を数学的に捉える - Flash : テクニカルノート FN1308001 | Ease…
![はてなブックマーク - EaselJS のプロパティやMatrix2D を使ってオブジェクトの変形 [CreateJS]](https://b.hatena.ne.jp/entry/image/https://cartman0.hatenablog.com/entry/2015/10/29/210304)
EaselJS の基準点(regX, regY) とtranslate をみてみる [CreateJS] Display Object の基準点(regX, regY) を変えている場合、 とMatrix2D.translate がその分ズレるようなのでメモ。 EaselJS の基準点(regX, regY) とtranslate をみてみる [CreateJS] Create…
![はてなブックマーク - EaselJS の基準点(regX, regY) とtranslate をみてみる [CreateJS]](https://b.hatena.ne.jp/entry/image/https://cartman0.hatenablog.com/entry/2015/10/29/034104)
CreateJS でSVG画像を扱う CreateJS でSVG を扱うときのメモ。 CreateJS でSVG画像を扱う CreateJSのバージョン CreateJSでSVGを描画 PreloadJSでSVGの読み込み 読み込み成功時のコールバック Bitmapインスタンスにして描画 Bimapインスタンスの生成 URI か…
SVGのpreserveAspectRaitoとCanvasのdrawImage SVGの preserveAspectRatio と ブラウザによってCanvas のdrawImage の仕様が違ったのでメモ。 SVGのpreserveAspectRaitoとCanvasのdrawImage ブラウザ環境 SVG のpreserveAspectRatio preserveAspectRatioプロ…
CreateJS で読み込んだ画像をアニメーションさせる CreateJS で読み込んだ画像をアニメーションさせてみたのでメモ、 以下の記事を再現できるか試してみました。 gihyo.jp CreateJS で読み込んだ画像をアニメーションさせる サンプル メモ 画像を読み込む 画…
Canvas のライブラリCreateJS を試してみる Canvas を使いやすくするライブラリCreateJS を試してみたのでメモ。 公式サイト： www.createjs.com Canvas のライブラリCreateJS を試してみる CreateJS とは EaselJS チュートリアル PreloadJS チュートリアル …
oEmbed API の値を取ってくるjQuery プラグインを作ったよ はてなブログを書くときに、URL をコピペすると、 URL のみのリンク タイトル付きリンク 埋め込みリンク が生成されると思います。 この機能が結構便利で、 はてなブログ以外でも使いたいと思ったの…
#(ハッシュ)で、Ajax でロードするページを切り替える リンクの #(ハッシュ)で、Ajax でロードするページを切り替えられることがわかったのでメモ。 やりたいこととしては、ページ内アンカーリンクのAjax版です。 #(ハッシュ)で、Ajax でロードするページを…
Canvas でフラクタル（コッホ曲線、フラクタルツリー）を描く Canvas で、フラクタルであるコッホ曲線、フラクタルツリーを描いたのでメモ。 Canvas でフラクタル（コッホ曲線、フラクタルツリー）を描く コッホ曲線 サンプル コード フラクタルツリー サン…
Canvas で自由落下運動、水平投射運動、斜方投射運動アニメーション Canvas で、 自由落下運動、水平投射運動、斜方投射運動アニメーションを作ったのでメモ。 Canvas で自由落下運動、水平投射運動、斜方投射運動アニメーション サンプル 共通の関数 自由落…
