JavaScriptフレームワークへの興味が芽生えた

昨日、タリーズでコーヒーで飲みながらMacBook Airでネットサーフィンしていたところ、とても興味深い記事に出会いました。id:paiza さんのJavaScriptのフレームワークの書き比べの記事です。

フレームワークに関する知識が殆どなく、これまでほぼフルスクラッチでJavaScriptを書いてきたため、正直辛い面も多々ありました。この記事を参考にさせて頂いて本格的に勉強していきたいと思います。個人的にBackbone.JSとvue.jsが気になったのでこの辺りから始めてみようかなと考えています。

この記事で取り上げられていた比較用の例についてですが、シンプルな例にもかかわらず使用するフレームワークが違うだけで、書き方やボリュームに激しく違いが生まれてしまうことにビックリしました。

この例題をいま勉強中の、Web Components関連技術を簡単に利用可能にするJavaScriptフレームワーク(?)「Polymer」ではどのようになるのかと思い即座に書いてみました。

◆ Polymer 0.5

HTML:

<template is="auto-binding">
    First Name: <input value="{{firstName}}"><br>
    Last Name: <input value="{{lastName}}"><br>
    Full Name: <span>{{firstName}} {{lastName}}</span><br>
</template>

JavaScript: 不要

HTML冒頭でpolymer.htmlをimportしたり、各ブラウザ向けのpolyfillsとしてwebcomponents.jsを読み込んだりする必要はありますが、結構シンプルに書くことができるようです。、、JavaScriptを全く書かずに動いてしまうというのも身体がなまってしまいますね。

JavaScriptを書くこと自体はとても楽しいので、フレームワークの考え方をしっかりと勉強して、コードの設計やメンテナンスを楽にしていければと思います。