そんなに目新しくもない技術でWebアプリをリニューアルした2015年春

An evaluating tool for writing better CSS

StyleStats

世間はReactの話題で持ちきりのようだけど、Backbone.jsでStyleStatsのWebアプリをリニューアルした。以上で伝えることは終わったが、リニューアルするにあたってつらかったことをつらつらかきとめておく。

そもそもBackbone使うほど複雑なアプリでもないんだけど、勉強がてら使ってみた。てかParse.comを使いたくて、それがBackboneベースのSDKだったからというのもある。

Parse.comはmBaaS(mobile Backend as a Service)の類で、データを簡単にストアしてくれるもの。僕のようなフロント側の人間でバックエンドがからっきしな人も、こうゆうのを使うとWebアプリケーションを簡単に作れるそうだ。StyleStatsで、テスト結果をデータに貯めときたかったので使ってみた。

リニューアル後はテスト結果ひとつひとつにパーマリンクができるようになったので、定期的にテストかけといて、あとから比較（目視）とかできる。まぁデータ自体は溜まっていくので、今後はグラフ生成機能とか提供できるかもしれない（やらないかもしれない。D3.jsか…）。

JavaScriptとか

個人的にJavaScriptはCrome拡張だったりNode.jsでCLIツール作ったするときに書くくらいで、今回はじめてWebアプリケーションとしてのJavaScriptをBackbone.jsで書いた。うん、難しいよね。なんかうまく動かなかったら、それBackboneの問題なのかParse SDKの問題なのか、どっちかわからんと思ってたら、結局、自分のJS基礎力のなさから来る問題だったりして苦労した。

入門Backbone.js
入門Backbone.js
posted at 2015.4.27
James Sugrue,クイープ
翔泳社
売り上げランキング: 27475
Amazon.co.jp で詳細を見る

世間がReact!React!React!って言ってる中、せっせと2012年くらいの記事を貪っていてちょっと辛かった。いや今までサボっていた自分が悪いんだ。置いてけぼり感つらい。資料に関しては、上記の本ですべて事足りると思う。

あと、Browserifyを使ってみた。個人的にどちらかというとNode.jsの文化に親しみを感じているのでモジュール管理としてはこれがいいのではと思ったけど、うまいこと使いこなせている自信はない。Concatでいいんじゃないかと思うこともあるが、require()したかったんや。

でも、最近じゃES6のimportってのもあるのね、どうしよう。まぁいいや。es6ifyやbabelifyというのもある。なんだこれ？まぁいいや。あ、そうそう。BrowserifyでHandlebarsのtemplateをプリコンパイルしたかったらhbsfyっての使うらしいい。ファイファイやかましいわ。とにかく最近のES6,7事情ついていけてない、つらい。

あとGrunt/Gulpで憔悴した話したけど、やっぱなんやかんやでGulp使った。起動させるインターフェイスとしてはnpm run script使っているので許して欲しい（誰）。

CSSとか

UIはMaterial Designをやってみたかったので、ここは王道な感じで、PolymerのPaper Elementを使ってみようと思った。てか、Material Design以前に、Polymer以前に、Web Componentsを分かってないなかったので色々読んだ。

Web Components

Polymer

わー＞＜覚えること多すぎだ。疲れた。Polymerが0.5から0.8で爆速になったとかでAPIも変わったとかで、Paper elementsが0.8対応してないので、ここまできて採用するのやっぱやめた。つらい。

普通にMaterial DesignのCSSフレームワークを使おうと思ったけど、Material UIはReactと一緒に使うのをリコメンドしてるし、なんぞ！と思った。ので、Materialize 使おうと思ったけど、これ120K近くもあるぞ。ということで、自分で、Mateliaze CSSを参考にしつつ、それっぽく作ってみた。単純に見た目だけでも再現してもなーと思って、動きもつけようと思ってCSS Animationとかよくわからんしなー、てかSVGもよくわからん。というか、UI作るの難しくなってきてるよね？JavaScript使うの前提とか。とにかくつらい。

HTMLとか

body
    header
        h1
            a タイトル

Node.jsのプロジェクトなので、惰性的にView EngineでJadeを使ってたけど、このぶら下がり感がつらい。というか、嫌い。

Viewつながりで、サーバー上でもBackbone.jsを動かすRendr採用したら、もっと共有できてシンプルになるのかなーと思ったけど、力尽きた。導入は次回で。

コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
コーディングWebアクセシビリティ
posted at 2015.4.27
伊原力也, 太田良典
ボーンデジタル
Amazon.co.jp で詳細を見る

WAI-ARIAとかあるよね、とりあえずbody role="application"しとくので精一杯だ。また本読もう。ということで、つらかった。というか力尽きた。

まとめとか

まぁ趣味プロジェクトで、とくにしがらみもないので、地道にマイペースでやってくしかない。よそはよそ、うちはうち。

React資料読んでて気づいたのだけど、ReactはViewライブラリでBackbone + Reactって使い方もあるのね。ParseReactってのもあるみたいだし、今度はReactがんばろう。

最後にリニューアルにあたって、数多くの助言を与えてくださった利休1000と寿司銀平さんに多大なる感謝の念を伝えたい。