O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Ma gician <wide version> @meguro.es 2019/10/10

348 visualizações

Publicada em

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

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Ma gician <wide version> @meguro.es 2019/10/10

  1. 1. Ma_gician 世界中のフロントエンダーの残業時間を減らす、 新しい JavaScript フロントエンドフレームワーク
  2. 2. Ma_gician 世界中のフロントエンダーの残業時間を減らす、 新しい JavaScript フロントエンドフレームワーク <拡大版>
  3. 3. 読み方 Ma_gician 「マジシャン」
  4. 4. どういうもの? 新しいアーキテクチャで作られた JavaScipt フロントエンド フレームワーク
  5. 5. 特徴は? 極端に少ないコード量で動作可能。
  6. 6. どこで見られるの? ソースコードと正式名称は未公開です。 (2019/10/10時点)
  7. 7. マイルストーン 令和元年内にオープンソース化
  8. 8. キャッチコピー 世界中のフロントエンダーの残業時間を減らす
  9. 9. キャッチコピー(当初は) 世界中のフロントエンダーを jQuery の記法から解放する
  10. 10. コードが減る様子を見てみましょう
  11. 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. 12. Vue.js の実装を Ma_gician で書き替え 1. new Vue が書かれている <script> を削除 2. ライブラリの読み込みを vue から ma_gician に変更 3. <div id="component"> の > の直前に :: を追加 * Lightning Talk では、ここでライブコーディングします
  13. 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. 14. Ma_gician のコン ポーネント <script src="assets/js/ma_gician"></script> <div id="component" ::> <input v-model="message"> <p>Message = {{ message }}</p> </div>
  15. 15. 結論 * Ma_gician でコンポーネントを作ると、コード量が減る * コード量が減れば、バグの可能性も減る * バグが減れば、作業時間も減る * 作業時間が減れば、残業時間も減る Q.E.D.
  16. 16. 拡大版なのでもう少し
  17. 17. アジェンダ風に ● 状態管理 ● Scoped <style> 時間があれば ● Nested computed
  18. 18. 状態管理
  19. 19. Ma_gician の状態管理 ● タグに :: を追加するとコンポーネントになります。 ● コンポーネントは自分の子要素をスコープとした状態管理をします。
  20. 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. 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. 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. 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. 24. Scoped <style>
  25. 25. Vue.js の <style v-scoped> 1. Style を当てたい要素に id を付与 2. id に適用する style を定義
  26. 26. Vue.js の <style v-scoped> 1. Style を当てたい要素に id を付与 2. id に適用する style を定義 ● 問題点 ブラウザの Web Inspector で Style の対応が確認できない。
  27. 27. Ma_gician の <style x-scoped> 1. Scoped が適用される要素はそのまま。 2. 代わりに <style> を裏側で魔改造する。
  28. 28. Ma_gician の <style x-scoped> 1. Scoped が適用される要素はそのまま。 2. 代わりに <style> を裏側で魔改造する。 ● 利点 ブラウザ標準の Web Inspector で自分が書いたコードが確認できる。
  29. 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. 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. 31. Nested computed
  32. 32. Vue.js の computed 1. コンポーネント に computed 定義を登録する。
  33. 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. 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. 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. 36. 自己紹介 ● Ma_gician を作った人 名前:Stew Eucen(悉生 游漩) 読み方: しちゅう ゆうせん 国籍:日本 ● SNS Twitter: @StewEucen Facebook: stew.eucen
  37. 37. OSS 活動に向けて スポンサー募集中です!
  38. 38. 他のデモを見たい方は、 懇親会でお声がけください!
  39. 39. ご静聴ありがとうございました!

×