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

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

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

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

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

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

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

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

8. キャッチコピー
世界中のフロントエンダーの残業時間を減らす

9. キャッチコピー（当初は）
世界中のフロントエンダーを jQuery の記法から解放する

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

11. Vue.js のコンポーネ
ント
<script src="assets/js/vue"></script>
<div id="component">
<input v-model="message">
<p>Message = {{ message }}</p>
</div>
<script>
new Vue({
el: '#component',
data: { message: '' }
})
</script>

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

13. Vue.js のコンポーネ
ント
<script src="assets/js/vue"></script>
<div id="component">
<input v-model="message">
<p>Message = {{ message }}</p>
</div>
<script>
new Vue({
el: '#component',
data: { message: '' }
})
</script>

14. Ma_gician のコン
ポーネント
<script src="assets/js/ma_gician"></script>
<div id="component" ::>
<input v-model="message">
<p>Message = {{ message }}</p>
</div>

15. 結論
* Ma_gician でコンポーネントを作ると、コード量が減る
* コード量が減れば、バグの可能性も減る
* バグが減れば、作業時間も減る
* 作業時間が減れば、残業時間も減る
Q.E.D.

16. 拡大版なのでもう少し

17. アジェンダ風に
● 状態管理
● Scoped <style>
時間があれば
● Nested computed

18. 状態管理

19. Ma_gician の状態管理
● タグに :: を追加するとコンポーネントになります。
● コンポーネントは自分の子要素をスコープとした状態管理をします。

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

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

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

23. 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>
親子コンポーネントの状態
を名前空間で連結できる。

24. Scoped <style>

25. Vue.js の <style v-scoped>
1. Style を当てたい要素に id を付与
2. id に適用する style を定義

26. Vue.js の <style v-scoped>
1. Style を当てたい要素に id を付与
2. id に適用する style を定義
● 問題点
ブラウザの Web Inspector で Style の対応が確認できない。

27. Ma_gician の <style x-scoped>
1. Scoped が適用される要素はそのまま。
2. 代わりに <style> を裏側で魔改造する。

28. Ma_gician の <style x-scoped>
1. Scoped が適用される要素はそのまま。
2. 代わりに <style> を裏側で魔改造する。
● 利点
ブラウザ標準の Web Inspector で自分が書いたコードが確認できる。

29. 普通の <style> <section>
<div>
<style>
.title { background: white; }
</style>
<h3 class="title">タイトル (1)</h3>
</div>
<div>
<style>
.title { background: lightgreen; }
</style>
<h3 class="title">タイトル (2)</h3>
</div>
</section>

30. Ma_gician の
Scoped <style>
<section _>
<div>
<style x-scoped>
.title { background: white; }
</style>
<h3 class="title">タイトル (1)</h3>
</div>
<div>
<style x-scoped>
.title { background: lightgreen; }
</style>
<h3 class="title">タイトル (2)</h3>
</div>
</section>

31. Nested computed

32. Vue.js の computed
1. コンポーネント に computed 定義を登録する。

33. Vue.js の
computed
<div id="component">
<p>{{ a }} + {{ b }} = {{ add }}</p>
<p>{{ a }} - {{ b }} = {{ sub }}</p>
</div>
<script>
new Vue({
el: '#component',
data: { a: 1, b: 2 },
computed: {
add: function () { return this.a + this.b },
sub: function () { return this.a - this.b }
}
})
</script>
component 要素で定義

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

35. Ma_gician の
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 を
定義できる

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

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

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

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