株式会社オプトさんで開催された LT会「俺得フロントエンド (2) 2019/10/24」で発表した内容です。

1. Ma_gician
世界中のフロントエンダーの残業時間を減らす、
新しい JavaScript フロントエンドフレームワーク
＜詳細版＞

2. 読み方
Ma_gician 「マジシャン」

3. どういうもの？
新しいアーキテクチャで作られた
JavaScipt フロントエンド フレームワーク

4. 特徴は？
極端に少ないコード量で動作可能。

5. どこで見られるの？
ソースコードと正式名称は未公開です。
（2019/10/10時点）

6. マイルストーン
令和元年内にオープンソース化

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

8. 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>

9. Vue.js の実装を Ma_gician で書き替え
1. new Vue が書かれている <script> を削除
2. ライブラリの読み込みを vue から ma_gician に変更
3. <div id="component"> の > の直前に :: を追加
* Lightning Talk では、ここでライブコーディングします

10. 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>

11. Ma_gician の
リアクティブ
<script src="assets/js/ma_gician"></script>
<div ::>
<input v-model="message">
<p>Message = {{ message }}</p>
</div>

12. 結論
* Ma_gician で実装すると、コード量が減る
* コード量が減れば、バグの可能性も減る
* バグが減れば、作業時間も減る
* 作業時間が減れば、残業時間も減る
Q.E.D.

13. 更に機能紹介

14. アジェンダ
1. 状態管理
2. Nested Computed
3. HTML Imports

15. 状態管理

16. Ma_gician の状態管理
● タグに :: を要素追加するとコントローラ化されます。
● コントローラは自分の子要素をスコープとした状態管理をします。

17. 普通の HTML
<main>
<section>
<div>A1 = {{ aaa }}</div>
<div>B1 = {{ bbb }}</div>
</section>
<section>
<div>A2 = {{ aaa }}</div>
<div>B2 = {{ bbb }}</div>
</section>
</main>

18. Ma_gician の
コントローラ
<main>
<section x-state="{ aaa: 1, bbb: 2 }" ::>
<div>A1 = {{ aaa }}</div>
<div>B1 = {{ bbb }}</div>
</section>
<section x-state="{ aaa: 11, bbb: 22 }" ::>
<div>A2 = {{ aaa }}</div>
<div>B2 = {{ bbb }}</div>
</section>
</main>

19. Ma_gician の
コントローラの
ネスト
<main x-state="{
aaa: 111
}" ::>
<section>
<div>A1 = {{ aaa }}</div>
</section>
<section x-state="{ aaa: 1000 }" ::>
<div>A2 = {{ aaa }}</div>
</section>
</main>
子コントローラは
カプセル化される。

20. Ma_gician の
コントローラの
ネスト
<main x-state="{
aaa: 111,
xxx: { aaa: 1000 }
}" ::>
<section>
<div>A1 = {{ aaa }}</div>
</section>
<section x-namespace="xxx" ::>
<div>A2 = {{ aaa }}</div>
</section>
</main>
親子コントローラは
状態を名前空間で
連結できる。

21. Nested Computed

22. Vue.js の computed
● Vue インスタンスに computed 定義を登録する。
● Vue インスタンス以外では computed を定義できない。

23. Ma_gician の computed
● コントローラ要素に computed を一括定義できる。
● 子要素にも computed を定義できる。
● 子要素の computed は、その要素の子要素だけに適用される。

24. Vue.js の
computed
<div id="controller">
<p>{{ a }} + {{ b }} = {{ add }}</p>
<p>{{ a }} - {{ b }} = {{ sub }}</p>
</div>
<script>
new Vue({
el: '#controller,
data: { a: 1, b: 2 },
computed: {
add: function () { return this.a + this.b },
sub: function () { return this.a - this.b }
}
})
</script>
Vue インスタンスで
computed を一括定義

25. Ma_gician の
computed
<div x-state="{ a: 1, b: 2 }"
x-computed="{
get add () { return this.a + this.b },
get sub () { return this.a - this.b }
}"
::>
<p>{{ a }} + {{ b }} = {{ add }}</p>
<p>{{ a }} - {{ b }} = {{ sub }}</p>
</div>
:: を付与した要素に
computed を一括定義

26. Ma_gician の
Nested computed
<div x-state="{ a: 1, b: 2 }" ::>
<div x-computed="{
get add () { return this.a + this.b }
}">
<div x-computed="{
get sub () { return this.a - this.b }
}">
<p>{{ a }} + {{ b }} = {{ add }}</p>
<p>{{ a }} - {{ b }} = {{ sub }}</p>
</div>
</div>
</div>
子要素にも computed を
定義できる

27. HTML Imports
(Single File Component)

28. ワイヤーフレーム
<main>
<section>
<h1>
ここにタイトル
</h1>
<div>
ここにユーザ情報
</div>
</section>
</main>

29. HTML Imports の
適用後
<main>
<section _>
<h1 x-import=”title.html”>
ここにタイトル
</h1>
<div x-import=”user-info.html”>
ここにユーザ情報
</div>
</section>
</main>

30. Ma_gician の HTML Imports
（・ω・）＜ライブコーディング見ないとわからんでござる

31. 自己紹介
● Ma_gician を作った人
名前：Stew Eucen（悉生 游漩）
読み方: しちゅう ゆうせん
国籍：日本
● SNS
Twitter: @StewEucen
Facebook: stew.eucen

32. OSS 活動に向けて
スポンサー募集中です！

33. 他のデモを見たい方は、
懇親会でお声がけください！

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