Vue ではできないけど Ma_gician ならできるシリーズのひとつ目です。

1. Ma_gician
世界中のフロントエンダーの残業時間を減らす、
新しい JavaScript フロントエンドフレームワーク
Vue にはできない事（１）

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

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

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

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

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. Vue にはできない事（１）

14. HTML 文字列で <script> を追加
<script> タグを innerHTML や insertAdjacentHTML で追加した場合、
<script></script> の中に書かれたコードは実行されません。

15. <script> を
innerHTML で追加
const tag = "<script> alert('Hello') </script>"
document.body.innerHTML += tag
// alert は出ません

16. mount されません
Vue.js の
リアクティブを
innerHTML で追加
const vueReactive = `
<div id="controller">
<input v-model="message">
<p>Message = {{ message }}</p>
</div>
<script>
new Vue({
el: '#controller',
data: { message: '' }
})
</script>
`
document.body.innerHTML += vueReactive

17. HTML 文字列で追加できると何がいいの？
● localStorage や History API の state に、
マウント状態を再現するコードを一緒に保存しておける。
● Vue の要素を動的に少しずつ変えながら追加したい時に便利。

18. Ma_gician でばんがってみる

19. Ma_gician を追加
● Ma_gician を追加すると、innerHTML に <script> を追加した際に
中のコードが実行されて、Vue のリアクティブが動作します。
（ライブコーディングで紹介）

20. そもそも Ma_gician では

21. Ma_gician の
リアクティブを
innerHTML で追加
const ma_gicianReactive = `
<div ::>
<input v-model="message">
<p>Message = {{ message }}</p>
</div>
`
document.body.innerHTML += ma_gicianReactive
普通に動きます。
てか元々 <script> 不要

22. Ma_gician が何をしてるのか。
気になる方は、懇親会で
最寄りの Stew Eucen まで
お声がけください！

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

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

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

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