Webアプリ開発備忘録

Webアプリがすごく便利になってきていて、開発環境もかなり充実してきてますね。昔やってたHTML4.0.1とPerlやCのCGIを使ったアプリからは世界が全然変わってます。Dynamic HTMLなんぞもすでに懐かしい世界。

今やライブラリも充実してるので自前で一から色々なコンポーネントを書かずに済む上に、RequireJSとかのモジュラーな開発を助けるライブラリなんかも。
ということで備忘録的に自分でいじってみた良さそうなツールやらをひたすらメモっとく。

何ら有用な情報でもないですので悪しからず。

全体共通

全体共通して使える・有用なのは以下の通り

  • node.js
  • npm
  • nvm
  • coffee-script
  • coffeelint
  • requirejs
  • uglify-js
  • Ruby
  • Rake

node.jsは元々はJavaScriptを使ったC10k問題を意識したWebアプリケーションサーバー環境ですが、いろんな開発ツールがnode.js環境下で動くように作られてるので全体を通して必要な感じ。npmはnode.js 用のパッケージマネージャー。で、node自体のバージョンの依存関係とかが出てくると思われるのでnode.jsを複数バージョン別々にインストールして管理するためのnvm。

coffee-script はJavaScriptにコンパイル出来る上位言語で、Python/Rubyライクなモジュール化/クラスの機能などを提供しつつ、それらをJavaScriptのベスト・プラクティスに自動で旨いこと変換してくれる言語。コード自体もJavaScriptの冗長な記述をスッキリさせてくれて見やすくメンテがしやすくなるのがメリット。coffeelint はcoffeeスクリプト用のlint。

requirejsは複数のJavaScriptファイルの依存関係を解決してくれるライブラリ。他の言語で言うincludeやrequire、source といった物。CommonJS等他にも色々あるけど、requirejsは動的にロードが出来てブラウザのレスポンス劣化を抑えつつ依存関係をうまく解決してくれたり、最終的な製品環境向けに必要なJSファイルを束ねてminifyしてくれたりするすぐれもの。

uglify-jsはminifyのためのツール。requirejsとかぶる部分がありますが、minifyツールとしては性能が良いという話。

Ruby自体はフロントエンドでは動かないけど、ビルドスクリプトにRakeが便利。別にシェルスクリプトだろうがなんだろうがいいっちゃいいんだが・・・コレは慣れた物が一番。

フロントエンド開発

まずはフロントエンド開発に便利そうなもの。

  • jQuery
  • Twitter Bootstrap
  • Sass
  • Compass
  • Chrome Web Inspector
  • CreateJS
  • KineticJS
  • EnchantJS
  • ThreeJS
  • grunt

jQuery は必須な感じ。DOMやらを扱うのには必須な感じ。後は殆どCSS絡み。Bootstrapならちゃちゃっとでっち上げるには便利。CSSは煩雑にすぐなるので大嫌いだけどBootstrap使えば自分でCSS殆ど書かずにそれっぽいサイトは作れる。逆に一から作るならSassとCompassを使えば煩雑になりがちなCSSをスッキリ開発できる感じ。

デバッグはChromeのWeb Inspecterが便利。最後は各ブラウザで確認しないといけないけど。

続きの幾つかはのはCanvasで色々描くためのライブラリ。割と汎用的にひと通り揃ってるのがCreateJS。KineticJSは性能が結構いいかも? EnchantJSは未利用だけど有名。ThreeJSはWebGL用のライブラリ。

gruntはnodeで動くビルドツール。Rakeを全体で上げたけどこちらは常にファイルの更新をWatchして変更のたびに関連するタスクを自動で実行出来る機能があるので、フロントエンド開発ではかなり便利かも。

バックエンド開発

  • Ruby on Rails
  • node.js express
  • redis
  • mongo.db
  • Sqlite
  • MySQL

残り書くのが面倒になったのでそのうち。

この投稿にタグはありません。

Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>