フロントエンド開発の初期に考えておきたいこと

Frontrend Advent Calendar 2014 - Qiita 18日目の記事です。 フレームワークや使用技術など は方々で語られているので、それ以外の話をします! JavaScript Advent Calendar 2014 VirtualDOM Advent Calendar 2014 Vue.js Advent Calendar 2014 Backbone.js…

最新のrspec-railsでコントローラのヘルパーメソッドをスタブする

パーフェクトRuby on Rails読んでてハマったところ。 RSpecでビューのテスト書くとき、こんな風にコントローラのヘルパーメソッドをスタブしているのだけど、 context '未ログインユーザがアクセスしたとき' do before do allow(view).to receive(:logged_in…

Promiseで逐次実行する時のテスト

var Promise = require('es6-promise').Promise; var tasks = { first: function(value) { return new Promise(function(resolve, reject) { if (value < 2) { resolve(value + 1); } else { reject(new Error('failed at first')); } }); }, second: functi…

Ampersand.js所感

ちょっと前に紹介されてたAmpersand.jsを使ってみたので、ざっくりとした紹介。 Ampersand.jsはView, Model, Routerなど複数のモジュールに分割されていて、個別に読み込んで使うことができる。 $ npm i --save ampersand-model で var AmpModel = require('…

SPA(Single Page Application)制作時のチェックリスト

メモリリークは起きていないか 初期化時に無駄な通信はないか ページ移動時に保持するデータと破棄するデータの分別ができているか 読まれたくないロジックを置いてないか 直接叩かれて困るAPIやルーティングはないか バリデーションの項目はサーバー側と揃…

semverとnpm

semverとは? semver(Semantic Versioning)は依存関係のもつれを解決するべく制定されたバージョニングの標準仕様です。 Semantic Versioning 2.0.0 npmに登録されているモジュールのバージョンもsemverに沿った形式で設定されています。 The semantic versi…

フロントエンドのビルドツール、Grunt以外の選択肢

フロントエンドのビルドツールというとGruntが デファクトスタンダードになっている感ありますが、 それ以外の選択肢って何があるかなという話です。 Gulp Gulpはストリーミング式のビルドツールです。 設定はgulpfileに記述します。 gulp = require 'gulp' …

2013年読んで良かった本

たのしいRuby 第4版 Rubyを始めたので、まずは定番と言われているものを。 章立てで非常に解りやすく、入門書としても最適だと思います。 Ruby2.0にも対応しています。 たのしいRuby 第4版作者: 高橋征義,後藤裕蔵,まつもとゆきひろ出版社/メーカー: ソフト…

Marionette.jsについてあれこれ

Marionette.jsはBackbone.jsのラッパー的なライブラリです。 Backbone.jsの問題点 Backbone.jsは割と自由度が高いフレームワークなのですが、 それ故に中規模以上のプロジェクトで使おうとすると 設計が難しい(ベストプラクティスがわからずオレオレ実装に…

後から書くフロントエンドのテスト

今業務でやってるプロジェクト、ジョインした時点では 普通のソーシャルゲーム 規模はそこそこ大きい MVCフレームワークなどは使ってない テスト0 運用中 フロントはこんな感じでした。 これはヤバいと思い開発の合間合間にテストを書いていったのですが、 …

最近の○○.jsをざっくりまとめてみた

一口に○○.jsと言っても、単純にクライアント側で読み込むライブラリではないものが増えてきています。 有名なものをいくつかまとめてみました。 Node.js JavaScriptの実行環境です。実行にはGoogleのV8エンジンが使われています。 主にサーバーサイドの実装…

Vagrant + chef + Berkshelfでフロントエンドの環境構築を自動化

最近のフロントエンド GitやNode.jsやSassやaltJSのコンパイラなど、使うものが増えて 環境構築の手順も複雑になってきています。 そこでVagrantとchef、それからcookbookの依存関係を管理するBerkshelfを使って 環境構築の手順を自動化かつ共有できるように…

NodeListのイテレーション比較

document.querySelectorAllなどで取得するNodeListはArrayのインスタンスではないため forEachやmapといったメソッドを持っていません。そのためループで展開したいときは普通にfor文使うとか、 Array.prototype.forEachをcallで呼び出すとか ライブラリの関…

はてなID変えたくなったので変えて、 ブログも作り直しました。 前の記事の中からまだマシなやつだけ持ってきました。

CanvasをRetinaディスプレイに対応させる

imgタグやCSSのbackgroundに設定した画像の場合、2倍サイズの画像を用意してやればいいのですが、 Canvasは例えば2倍サイズの画像をdrawImage()で縮めて貼付けてもRetinaディスプレイ上ではボケボケです。 canvas.widthとcanvas.style.widthは別物 canvas.wi…

coffeescriptで昔ハマった事

こういう事をすると class Hoge.Image constructor: -> this.preload() preload: -> image = new Image() #... こうなって無限再帰になります。頭悪いです。 Hoge.Image = (function() { function Image() { this.preload(); } Image.prototype.preload = fu…

シングルトンにするやつ

CoffeeScriptっぽい実装のクラスを、シングルトンパターンにする