分12Ember.jsの特徴さて,Ember.jsのバックグラウンドについて理解が深まったところで,次はEmber.jsの特徴を解説します。設定より規約)の理念を取り入れており,適切な名前付けを行うことでEmber.js本体が各クラス同士を結びつけアプリケーションを組み立ててくれるようになっています。そのため自明なコードを省略することができ,少ないコードで見通しよくアプリケーションを構築することができます。Ember.jsの機能では,Ember.jsの特筆すべき機能を見ていきましょう。templatesEmber.jsではHandlebarsと呼ばれるHTMLに非常に近いテンプレート言語を使って画面を構築します。Handlebarsから生成されたHTMLでは,ユーザからの入力によってデータが変更されるとそのデータを表示している部分すべての表示が自動的に更新されます。この仕組みは双方向バインディングと呼ばれています。RoutingEmber.jsでは画面にパーマリンクを割り当てることができます。パーマリンクを記録しておけば別のブラウザでアプリケーションを開いても同じ状態で表示することができます。別のユーザに特定のメニューを表示する手順を伝える際,"メニュー"->"設定"->"カスタマイズ"のような操作手順を伝えるのではなく,"http://example.com/settings/custom"のようなURLを伝えられる,ということが可能になります。ComponentsHTML構造をまとめてひとまとめにして,独自の要素として扱うことができます。ComponentsはHTML構造だけでなく,イベントや内部実装をカプセル化します。「"1分前"や"3日前"などの相対日付を表示するタグ」や「ストップウォッチを実現するタグ」を作成して,アプリケーションに埋め込むことができます。Componentsとの統合も視野に入れられています。環境準備さて,それではいよいよ実際にEmber.jsを動かしてみましょう。Ember.jsと依存ライブラリをダウンロードします。本稿執筆時点でのEmber.jsの安定版は1.8.1です(※5⁠)⁠。1.8.1ダウンロードしたら,これらをlibsディレクトリの下に置きます。依存バージョンは公式サイトに記載されています。HTMLを用意します。index.htmlという名前で次の内容を保存します。</body></html>index.htmlはlibsと同じディレクトリに配置します。libsアプリケーションを初期化します。app.jsという名前で次の内容を保存します。Ember.Application.create();app.jsはindex.html,libsと同じディレクトリに配置します。libsindex.htmlを編集してbodyタグの次のように書き換えます。src="app.js"></script></body>Templateを用意します。bodyタグの中に,次のコードを追記します。value=name}}.</script>ここまでで,次のようなファイル構成になっているはずです。jquery-2.1.1.min.jsではブラウザでindex.htmlを開いてみましょう。テキストフィールドに入力した文字がリアルタイムで画面上に反映される画面が確認できたでしょうか?nameというプロパティを介して,ユーザからの入力とHTMLへの表示が同期されているのがわかります。templatesです。次の画面が完成イメージです。CLIといったEmber.jsが推奨するビルドツールで環境を構築する方法もあります。詳しくは公式サイトをご参照ください。手軽にEmber.jsを触ってみるというだけでしたらEmber.js用のjsbinを使うという方法もあります。お好みの方法で環境を構築してください。それもそのはず,Ember.jsでは明示的に記述しなくてもいい部分が多いため裏側の仕組みがわかりづらいのです。そこで,ここからはEmber.jsの構成要素を紹介しつつEmber.jsが動作している仕組みを解説します。今まで書いたコードで暗黙的に動いている部分は,明示的に書くこともできます。先ほどのサンプルと同等なアプリケーションを実現しようとすると,次のようなコードになります。'index'});また,テンプレートにもdata-templates-name属性を追加します。value=name}}.</script>いきなりコードが増えましたね。これらの要素を例に挙げつつEmber.jsの構成についてみてみましょう。URLとRouteの対応付けを行います。Viewの紐付けを行います。アプリケーションにパーマリンクを与える場合,その都度Routeを作成します。画面に表示するモデルです。任意のJavaScriptオブジェクトを使うことができます。Modelをデコレートして,ユーザからの入力イベントを処理します。アプリケーションの内部状態を保持する役割もあります。DOMの操作やDOMからのイベントを扱います。ModelをHTMLに反映します。Handlebarsで記述します。さきほどのサンプルの場合,URLの入力からHTMLの表示までは次のような流れで処理されます。viewを結びつけ,templateに描画してHTMLを生成する適切な名前付けによって自明なコードを省略することで,最初に作成したサンプルのようにとてもシンプルに記述することができます。まとめ今回はEmber.jsの歴史と特徴を紹介しました。次回からは簡単なアプリケーションを作成しながらEmber.jsの各機能について詳しく解説します。JavaScript著者プロフィール佐藤竜之介(さとうりゅうのすけ)株式会社えにしテック所属。JavaScriptとRubyが好きなウェブ系プログラマ。オープンソースソフトウェアに強い関心がありEmber.jsにも数多くのパッチを送っている。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。コードの安全性・安定性を高める開発サイクル~テスト管理の効率を上げ,脆弱性診断を自動で行う~本連載では,連載「業務を改善する情報共有の仕掛け」を受けつつ,安全性・安定性を加えた開発サイクルについて考えていきます。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。