Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Ma_gician
世界中のフロントエンダーの残業時間を減らす、
新しい JavaScript フロントエンドフレームワーク
<詳細版>
読み方
Ma_gician 「マジシャン」
どういうもの?
新しいアーキテクチャで作られた
JavaScipt フロントエンド フレームワーク
特徴は?
極端に少ないコード量で動作可能。
どこで見られるの?
ソースコードと正式名称は未公開です。
(2019/10/10時点)
マイルストーン
令和元年内にオープンソース化
コードが減る様子を見てみましょう
Vue.js の
リアクティブ
<script src="assets/js/vue"></script>
<div id="controller">
<input v-model="message">
<p>Message = {{ mess...
Vue.js の実装を Ma_gician で書き替え
1. new Vue が書かれている <script> を削除
2. ライブラリの読み込みを vue から ma_gician に変更
3. <div id="component"> の ...
Vue.js の
リアクティブ
<script src="assets/js/vue"></script>
<div id="controller">
<input v-model="message">
<p>Message = {{ mess...
Ma_gician の
リアクティブ
<script src="assets/js/ma_gician"></script>
<div ::>
<input v-model="message">
<p>Message = {{ message ...
結論
* Ma_gician で実装すると、コード量が減る
* コード量が減れば、バグの可能性も減る
* バグが減れば、作業時間も減る
* 作業時間が減れば、残業時間も減る
Q.E.D.
更に機能紹介
アジェンダ
1. 状態管理
2. Nested Computed
3. HTML Imports
状態管理
Ma_gician の状態管理
● タグに :: を要素追加するとコントローラ化されます。
● コントローラは自分の子要素をスコープとした状態管理をします。
普通の HTML
<main>
<section>
<div>A1 = {{ aaa }}</div>
<div>B1 = {{ bbb }}</div>
</section>
<section>
<div>A2 = {{ aaa }}</di...
Ma_gician の
コントローラ
<main>
<section x-state="{ aaa: 1, bbb: 2 }" ::>
<div>A1 = {{ aaa }}</div>
<div>B1 = {{ bbb }}</div>
</...
Ma_gician の
コントローラの
ネスト
<main x-state="{
aaa: 111
}" ::>
<section>
<div>A1 = {{ aaa }}</div>
</section>
<section x-state="...
Ma_gician の
コントローラの
ネスト
<main x-state="{
aaa: 111,
xxx: { aaa: 1000 }
}" ::>
<section>
<div>A1 = {{ aaa }}</div>
</section...
Nested Computed
Vue.js の computed
● Vue インスタンスに computed 定義を登録する。
● Vue インスタンス以外では computed を定義できない。
Ma_gician の computed
● コントローラ要素に computed を一括定義できる。
● 子要素にも computed を定義できる。
● 子要素の computed は、その要素の子要素だけに適用される。
Vue.js の
computed
<div id="controller">
<p>{{ a }} + {{ b }} = {{ add }}</p>
<p>{{ a }} - {{ b }} = {{ sub }}</p>
</div>
<...
Ma_gician の
computed
<div x-state="{ a: 1, b: 2 }"
x-computed="{
get add () { return this.a + this.b },
get sub () { retur...
Ma_gician の
Nested computed
<div x-state="{ a: 1, b: 2 }" ::>
<div x-computed="{
get add () { return this.a + this.b }
}">...
HTML Imports
(Single File Component)
ワイヤーフレーム
<main>
<section>
<h1>
ここにタイトル
</h1>
<div>
ここにユーザ情報
</div>
</section>
</main>
HTML Imports の
適用後
<main>
<section _>
<h1 x-import=”title.html”>
ここにタイトル
</h1>
<div x-import=”user-info.html”>
ここにユーザ情報
</...
Ma_gician の HTML Imports
(・ω・)<ライブコーディング見ないとわからんでござる
自己紹介
● Ma_gician を作った人
名前:Stew Eucen(悉生 游漩)
読み方: しちゅう ゆうせん
国籍:日本
● SNS
Twitter: @StewEucen
Facebook: stew.eucen
OSS 活動に向けて
スポンサー募集中です!
他のデモを見たい方は、
懇親会でお声がけください!
ご静聴ありがとうございました!
Upcoming SlideShare
Loading in …5
×

Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>

205 views

Published on

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

Published in: Software
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>

  1. 1. Ma_gician 世界中のフロントエンダーの残業時間を減らす、 新しい JavaScript フロントエンドフレームワーク <詳細版>
  2. 2. 読み方 Ma_gician 「マジシャン」
  3. 3. どういうもの? 新しいアーキテクチャで作られた JavaScipt フロントエンド フレームワーク
  4. 4. 特徴は? 極端に少ないコード量で動作可能。
  5. 5. どこで見られるの? ソースコードと正式名称は未公開です。 (2019/10/10時点)
  6. 6. マイルストーン 令和元年内にオープンソース化
  7. 7. コードが減る様子を見てみましょう
  8. 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. 9. Vue.js の実装を Ma_gician で書き替え 1. new Vue が書かれている <script> を削除 2. ライブラリの読み込みを vue から ma_gician に変更 3. <div id="component"> の > の直前に :: を追加 * Lightning Talk では、ここでライブコーディングします
  10. 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. 11. Ma_gician の リアクティブ <script src="assets/js/ma_gician"></script> <div ::> <input v-model="message"> <p>Message = {{ message }}</p> </div>
  12. 12. 結論 * Ma_gician で実装すると、コード量が減る * コード量が減れば、バグの可能性も減る * バグが減れば、作業時間も減る * 作業時間が減れば、残業時間も減る Q.E.D.
  13. 13. 更に機能紹介
  14. 14. アジェンダ 1. 状態管理 2. Nested Computed 3. HTML Imports
  15. 15. 状態管理
  16. 16. Ma_gician の状態管理 ● タグに :: を要素追加するとコントローラ化されます。 ● コントローラは自分の子要素をスコープとした状態管理をします。
  17. 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. 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. 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. 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. 21. Nested Computed
  22. 22. Vue.js の computed ● Vue インスタンスに computed 定義を登録する。 ● Vue インスタンス以外では computed を定義できない。
  23. 23. Ma_gician の computed ● コントローラ要素に computed を一括定義できる。 ● 子要素にも computed を定義できる。 ● 子要素の computed は、その要素の子要素だけに適用される。
  24. 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. 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. 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. 27. HTML Imports (Single File Component)
  28. 28. ワイヤーフレーム <main> <section> <h1> ここにタイトル </h1> <div> ここにユーザ情報 </div> </section> </main>
  29. 29. HTML Imports の 適用後 <main> <section _> <h1 x-import=”title.html”> ここにタイトル </h1> <div x-import=”user-info.html”> ここにユーザ情報 </div> </section> </main>
  30. 30. Ma_gician の HTML Imports (・ω・)<ライブコーディング見ないとわからんでござる
  31. 31. 自己紹介 ● Ma_gician を作った人 名前:Stew Eucen(悉生 游漩) 読み方: しちゅう ゆうせん 国籍:日本 ● SNS Twitter: @StewEucen Facebook: stew.eucen
  32. 32. OSS 活動に向けて スポンサー募集中です!
  33. 33. 他のデモを見たい方は、 懇親会でお声がけください!
  34. 34. ご静聴ありがとうございました!

×