リズムのじかんスマートフォン用の表示で見るリズムのじかんjavascript、typescriptなど中心に書きます。この広告は、90日以上更新していないブログに表示しています。javascriptMithril.jsを使って、がっつりSPA(シングルページアプリケーション)を作ったので紹介します。Mithril使いやすいので広まって欲しいです。作ったものコード譜をweb上で作成して共有できるサービスを作りました。http://chordkitchen.netサービス紹介動画です。コンパイル時にケアレスミスを検出する感じに使いました。タスクランナーgulpwebpack(後述)クライアントサイド使用しているライブラリMithril.jsunderscore.jsMithril.jsについて公式サイトhttps://lhorie.github.io/mithril/今度オライリーから本が出るみたいです!タイムリーですね。海外で評判の良いライブラリです。APIが少ないので学習が容易です。ソースコードは1500行くらいなので、困ったときにソースを追っても苦になりません。SPAの構造このアプリケーションはSPAです。ヘッダー・フッターの枠は静的HTMLですが、メイン部分はMithrilで動的に生成しています。ページ遷移してもページの再読み込みはありません。ヘッダーのメニュー部分は、メイン部分とは独立した仮想DOMです。MithrilのRouterでメイン部分と連携するので、ページの再読み込みはありません。ページを再読み込みするようにしています。)Viewの実装Viewの実装はReact.jsのjsxをフォークしたmsxを使っています。msxはjsxのシンタックスが使えて、コンパイルするとMithrilのviewオブジェクト(仮想DOMオブジェクト)を出力します。以下はメニュー部分のViewの実装(抜粋)です。jsx(msx)で書くとすっきりしていいですね。menu.jsxちなみにjQueryは使っていません。仮想DOMを扱うMithril.jsと生DOMを扱うjQueryは相性が悪いためです。生DOMの操作も一部ありますが、jQueryを使うには冗長なので、生のjavascriptで実装しています。jsxでできないことjsxでは名前空間のimportが必要なタグ・属性は使えないようです。/>は、jsxではコンパイルできません。attrs:{"xlink:href":"#bar"}}という書き方ができ、どんなタグ・属性でも出力できます。svg部分は後者の書き方で実装しました。ちなみに前者がMithrilの標準的な書き方で、後者はMithril内部のプリプロセス後の形式です。プリプロセスが不要な分、後者のほうが実行が早いです。msxコンパイル後の形式も後者になります。webpackさまさまtypescriptやmsxのコンパイルはwebpackを使っています。差分コンパイルしてくれるので、無駄な時間がかかりません。当たり前のように1ファイルに結合してくれます。inline-source-mapも便利です。.js.mapみないなファイルを作らなくてもsource-map機能が使えます。chromeなら、ブラウザ上でtypescriptやjsxソースのデバッグができます。Mithril.jsによるSPAの実装MithrilでSPAを実装すると、コードが全体的に関数型っぽくなります。※関数型プログラミングに詳しくないので、深く突っ込まないでください。Mithrilの代表的なAPIにm.propがあります。出力:'hoge'このAPIで生成したオブジェクトは、画面からの入力を受け取り、かつ、画面への出力を担います。'hoge'でいいじゃんと思いがちですが、これをやると失敗します。(何度も失敗しました。束縛された値が画面に出力され、画面に値が反映されないという自体に陥ります。←説明にあまり自信がない。詳しい方お願いします。値を変換する関数をいくつもつなげるように(組み合わせるように)実装する必要があります。関数型プログラミングっぽい雰囲気が出てきましたね。(特に今回は譜面の描画部分)、(諸々考慮した上で)計算結果を変数にキャッシュするカリー化メモ化などのテクニックを使うといいみたいです。詳しk(ryあとコードをすっきりさせるには関数合成がよいみたいです。あm(ryこのあたりのことは、「JavaScriptで学ぶ関数型プログラミング」に参考になることがたくさん書かれていました。API)とSEO対策SPAなので、明示的にpushstateするなどしないと、ブラウザに履歴が残りません。試行錯誤した結果以下のように落ち着きました。SPAのメリデリ上にいっぱい書いたので細かいことは省略しますが、メリット何より動きが快適!!さくさく!!クライアントサイドに業務ロジックが集約する開発後半の機能追加・修正が局所的で開発スピード◎サーバサイドの役割が簡潔デメリットノウハウが十分に公開されていない開発初期の方式を決める部分で試行錯誤(時間かかる)クライアント環境依存の問題とりあえず古いブラウザは諦めたトラブルシューティングクライアント側でエラーが発生した場合どうやって追跡するかサーバーサイド構成nginxnodeexpressmongoosemongodbnginxは静的コンテンツの配信用、nodeはステートレスでRESTFULなAPIサーバです。さくらVPSで動いています。まとめ週末プログラマとして作って、1年ちょっとかかりました。終盤はMithrilにがっつり乗っかったことで、開発スピードが上がりました。d3.jsで作っていたのですが、SPA向きではなかった気がします。これからSPAを作りたい人には、学習が容易なMithril.jsおすすめします。underscore.jsにpluckという関数があります。この関数は...2015-02-21【javascript】フレームワークを使わずにMVCjavascriptで、フレームワークを使わずにMVCしているサンプルが...2014-12-21クラスをインタフェースとして使う。mongooseのモデルに適用してみる。コード譜共有サイト「ChordKitchen」ES6で関数をカリー化する関数を書く【javascript】フレームワークを使わずにMVCクラスをインタフェースとして使う。mongooseのモデルに適用してみる。(2)月別アーカイブ参加グループプログラミングはてなブログをはじめよう!chordsさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。