コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

獣の夜のバックボーン

Backbone.js
バボーンやる

はい、おはようございます。本日も太陽がまぶしいいい天気ですね（深夜0時投稿）。ところでみなさんはご存知でしたか本日が獣の夜だったってことを……[要出典]。獣の夜ということですので……、本日はバボーンをやっていこうと思います。





はい、じゃあおふざけ終わり。ちゃんとやります。


Backbone.jsをさわる

最近おもむろにドットインストールとかさわっているので本日は Backbones.js やります。

Backbone.js は RESTfulJSONインタフェースとModel–view–presenter（英語版） (MVP) アプリケーションデザインパラダイムに基づいたJavaScriptライブラリである。軽量であることで知られ、依存するライブラリはUnderscore.js（英語版）だけである。シングルページアプリケーションやWebアプリケーションの多くのパーツ（例えば複数クライアントとサーバ）の同期を保つために設計されている。Backbone は CoffeeScript の作者としても知られる Jeremy Ashkenas によって作られた。

こんなの。MVCっぽいことができる古株のフレームワークです。jQuery、Underscore.jsがほぼ必須なのが特徴だと思ってる。今はAngularとかVueとかReactがあるから今からこれを覚えるメリットはよくわかんないです。ただドットインストールに講座があったのでやってみます。

公式
Backbone.js



んで、そのままやるのは面白くないので今のバージョンとの違いがあれば追っていこうと思います。なければ面白くない記事ができます。
・jQuery 3.3.1
・Underscore.js 1.9.1
・Backbone.js 1.3.3
Backbone自体、今はそれほど活発に更新されていないから面白くない記事になりそうな気がしてならない……。

GitHub
GitHub - jashkenas/backbone: Give your JS App some Backbone with Models, Views, Collections, and Events



それでこんなToDoアプリができました。

特にドットインストールとの差異がなかったので面白くないものができてしまった。完全な丸パクリは嫌だったので妙なアレンジはされてます。

// Viewを作成
    const MyView = Backbone.View.extend({
        tagName: 'h1',
        render: function() {
            this.$el.text('Hello World!!');
            return this;
        }
    });

    const myView = new MyView();
    $('body').append(myView.render().el);

使い方としては上みたいな感じでBackbone.****.extend({})に色々記述して継承させて使っていくって感じっぽいです。個人的にこのスタイル自分で使うときにタイポ多くなるから扱いづらい。


参考
https://dotinstall.com/lessons/basic_backbonejs

[トップへ]