Ma_gician

＜Vue にはできないこと色々＞

世界中のフロントエンダーの残業時間を減らす、�新しい JavaScript フロントエンドフレームワーク

​

​

読み方

Ma_gician 「マジシャン」

どういうもの？

新しいアーキテクチャで作られた

JavaScipt フロントエンド フレームワーク

特徴は？

• 極端に少ないコード量で動作可能。�
• 依存モジュールがない。�
• フルスクラッチで書かれている。

どこで見られるの？

• アルファ版と正式名称は、�2020年01月25日（土）に公開予定です。

​

マイルストーン

• 令和元年：オープンソース化の準備�
• 令和二年：オープンソース化�
• 令和五年：GitHub の★数で Vue を超える

コードが減る様子を見てみましょう

Vue.js の実装を Ma_gician で書き替え

1. new Vue が書かれている <script> を削除

2. ライブラリの読み込みを vue から ma_gician に変更

3. <div id="controller"> の > の直前に :: を追加

* Lightning Talk では、ここでライブコーディングします

​

Vue.js の�リアクティブ

<script src="assets/js/vue"></script>

​

<div id="controller">

<input v-model="message">

<p>Message = {{ message }}</p>

</div>

​

<script>

new Vue({

el: '#controller,

data: { message: '' }

})

</script>

​

​

Ma_gician の�リアクティブ

<script src="assets/js/ma_gician"></script>

​

<div ::>

<input v-model="message">

<p>Message = {{ message }}</p>

</div>

<script> を書かない利点

• 要素に宣言的にリアクティブの指定ができるので、id の採番が不要。�
• リアクティブ状態の HTML を文字列で localStorage などに保存可能。

結論

• Ma_gician で実装すると、コード量が減る�
• コード量が減れば、バグの可能性も減る�
• バグが減れば、作業時間も減る�
• 作業時間が減れば、残業時間も減る

Q.E.D.

​

​

更に機能紹介

アジェンダ

• <img> fallback
• Nested Filter
• HTML Imports��
• 無精髭

​

<img> fallback

<img> のロードに失敗した時

• ブラウザ標準のエラー表示になってしまう。�
• エラー時は no-image 画像に差し替えたいという仕様がよくある。

<img>

<section>

<img src=”assets/img/space.jpg”>

​

​

​

<img src=”assets/img/space-xxx.jpg”>

​

​

</section>

space-xxx.jpg は無いので

<img> がエラーになる。

<img> の fallback

<section>

<img src=”assets/img/space.jpg”

x-fallback=”assets/img/no-image.gif”

_>

​

<img src=”assets/img/space-xxx.jpg”

x-fallback=”assets/img/no-image.gif”

_>

</section>

​

<img> に URL を指定し、

アクティベートする。

よくある質問 (1)

• 全部の <img> に x-fallback を書くんですか？

<img> の fallback

<section>

<img src=”assets/img/space.jpg” _>

​

<img src=”assets/img/space-xxx.jpg” _>

</section>

​

<script src=”assets/js/bo_otstrap.js”></script>

​

bo_otstrap.js に書けば

全部の <img> に反映。

よくある質問 (2)

• 全部の <img> に アクティベータを書くんですか？

<img> の fallback

<section _>

<img src=”assets/img/space.jpg” >

​

<img src=”assets/img/space-xxx.jpg”>

</section>

​

<script src=”assets/js/bo_otstrap.js”></script>

​

<img> を囲ってるタグに

_ を付与すれば OK。

�

追加したコードは 1byte だけになりました。

fallback のまとめ

• <img> を横断して処理するのは、�Vue.js よりも jQuery の方が向いている。�
• Ma_gician のアーキテクチャなら�ライブラリ向きの処理でも容易に対応できる。��

つまり

• Vue.js + jQuery = Ma_gician��

Nested Filter

Vue.js の filter

• Vue インスタンスに filter 定義を登録する。�
• Vue インスタンス以外では filter を定義できない。

​

Ma_gician の filter

• コントローラ要素に filter を一括定義できる。�
• 子要素にも filter を定義できる。�
• 子要素の filter は、その要素の子要素だけに適用される。

​

Vue.js の�filter

<div id="controller">

<p>{{ price | addUnit }}</p>

</div>

​

<script>

new Vue({

el: '#controller',

data: { price: 23400 },

filters: {

addUnit: function (price) {

return price + '円'

}

}

})

</script>

​

​

Vue インスタンスで�filter を一括定義

Ma_gician の�filter

<div x-state="{ price: 23400 }"

x-filters="{

addUnit (price) { return price + '円' }

}"

::>

<div>

<p>{{ price | addUnit }}</p>

</div>

</div>

​

​

:: を付与した要素に�filter を一括定義

Ma_gician の�Nested filters

<div x-state="{ price: 23400 }"

x-filters="{

addUnit (price) { return price + '円' }

}"

::>

<div>

<p>{{ price | addUnit }}</p>

</div>

​

<div x-filters="{

addUnit (price) { return '$' + price }

}">

<p>{{ price | addUnit }}</p>

</div>

</div>

​

​

子要素にも filters を�定義できる

Nested Filters の利点

• 部分的に例外的な filter を適用できる。�
• filter のスコープを宣言的に明示できる。

​

HTML Imports�(Single File Component)

ワイヤーフレーム

<main>

<section>

<h1>

ここにタイトル

</h1>

<div>

ここにユーザ情報

</div>

</section>

</main>

HTML Imports の

適用後

<main>

<section _>

<h1 x-import="title.html">

ここにタイトル

</h1>

<div x-import="user-info.html">

ここにユーザ情報

</div>

</section>

</main>

Ma_gician の HTML Imports

• ライブコーディングでご紹介。

自己紹介

• Ma_gician を作った人

​

名前：Stew Eucen（悉生 游漩）� 読み方: しちゅう ゆうせん

​

国籍：日本

​

• SNS

​

Twitter: @StewEucen

​

Facebook: facebook.com/stew.eucen

OSS 活動に向けて

スポンサー募集中です！

Ma_gician が何をしてるのか。

気になる方は、LT 終了後に

最寄りの Stew Eucen まで

お声がけください！

ご静聴ありがとうございました！