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 フロントエンドフレームワーク
Vue にはできない事(1)
読み方
Ma_gician 「マジシャン」
どういうもの?
新しいアーキテクチャで作られた
JavaScipt フロントエンド フレームワーク
特徴は?
極端に少ないコード量で動作可能。
どこで見られるの?
ソースコードと正式名称は未公開です。
(2019/10/25時点)
マイルストーン
令和元年内にオープンソース化
コードが減る様子を見てみましょう
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.
Vue にはできない事(1)
HTML 文字列で <script> を追加
<script> タグを innerHTML や insertAdjacentHTML で追加した場合、
<script></script> の中に書かれたコードは実行されません。
<script> を
innerHTML で追加
const tag = "<script> alert('Hello') </script>"
document.body.innerHTML += tag
// alert は出ません
mount されません
Vue.js の
リアクティブを
innerHTML で追加
const vueReactive = `
<div id="controller">
<input v-model="message">
<p>Messag...
HTML 文字列で追加できると何がいいの?
● localStorage や History API の state に、
マウント状態を再現するコードを一緒に保存しておける。
● Vue の要素を動的に少しずつ変えながら追加したい時に便利。
Ma_gician でばんがってみる
Ma_gician を追加
● Ma_gician を追加すると、innerHTML に <script> を追加した際に
中のコードが実行されて、Vue のリアクティブが動作します。
(ライブコーディングで紹介)
そもそも Ma_gician では
Ma_gician の
リアクティブを
innerHTML で追加
const ma_gicianReactive = `
<div ::>
<input v-model="message">
<p>Message = {{ message }...
Ma_gician が何をしてるのか。
気になる方は、懇親会で
最寄りの Stew Eucen まで
お声がけください!
自己紹介
● Ma_gician を作った人
名前:Stew Eucen(悉生 游漩)
読み方: しちゅう ゆうせん
国籍:日本
● SNS
Twitter: @StewEucen
Facebook: stew.eucen
OSS 活動に向けて
スポンサー募集中です!
他のデモを見たい方は、
懇親会でお声がけください!
ご静聴ありがとうございました!
Upcoming SlideShare
Loading in …5
×

Ma gician <Vue にはできないこと (1)> WeJS 37th

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

  • Be the first to comment

Ma gician <Vue にはできないこと (1)> WeJS 37th

  1. 1. Ma_gician 世界中のフロントエンダーの残業時間を減らす、 新しい JavaScript フロントエンドフレームワーク Vue にはできない事(1)
  2. 2. 読み方 Ma_gician 「マジシャン」
  3. 3. どういうもの? 新しいアーキテクチャで作られた JavaScipt フロントエンド フレームワーク
  4. 4. 特徴は? 極端に少ないコード量で動作可能。
  5. 5. どこで見られるの? ソースコードと正式名称は未公開です。 (2019/10/25時点)
  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. Vue にはできない事(1)
  14. 14. HTML 文字列で <script> を追加 <script> タグを innerHTML や insertAdjacentHTML で追加した場合、 <script></script> の中に書かれたコードは実行されません。
  15. 15. <script> を innerHTML で追加 const tag = "<script> alert('Hello') </script>" document.body.innerHTML += tag // alert は出ません
  16. 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. 17. HTML 文字列で追加できると何がいいの? ● localStorage や History API の state に、 マウント状態を再現するコードを一緒に保存しておける。 ● Vue の要素を動的に少しずつ変えながら追加したい時に便利。
  18. 18. Ma_gician でばんがってみる
  19. 19. Ma_gician を追加 ● Ma_gician を追加すると、innerHTML に <script> を追加した際に 中のコードが実行されて、Vue のリアクティブが動作します。 (ライブコーディングで紹介)
  20. 20. そもそも Ma_gician では
  21. 21. Ma_gician の リアクティブを innerHTML で追加 const ma_gicianReactive = ` <div ::> <input v-model="message"> <p>Message = {{ message }}</p> </div> ` document.body.innerHTML += ma_gicianReactive 普通に動きます。 てか元々 <script> 不要
  22. 22. Ma_gician が何をしてるのか。 気になる方は、懇親会で 最寄りの Stew Eucen まで お声がけください!
  23. 23. 自己紹介 ● Ma_gician を作った人 名前:Stew Eucen(悉生 游漩) 読み方: しちゅう ゆうせん 国籍:日本 ● SNS Twitter: @StewEucen Facebook: stew.eucen
  24. 24. OSS 活動に向けて スポンサー募集中です!
  25. 25. 他のデモを見たい方は、 懇親会でお声がけください!
  26. 26. ご静聴ありがとうございました!

×