Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

345 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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. ご静聴ありがとうございました!

×