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

読み方

• Ma_gician 「マジシャン」

どういうもの？

• 新しいアーキテクチャで作られた JavaScipt フロントエンド フレームワーク

---

特徴は？

• 極端に少ないコード量で動作可能。

---

どこで見られるの？

• ソースコードと正式名称は未公開です。
  （2019/09/25時点）

マイルストーン

• 令和元年内にオープンソース化

---

キャッチコピー

• 世界中のフロントエンダーの残業時間を減らす

当初は

• 世界中のフロントエンダーを jQuery の記法から解放する

---

デモ

• Vue.js で書かれたリアクティブなコードを見てみましょう。

---

Vue.jsのリアクティブなコード

<script src="assets/js/vue-2.5.21"></script>

<div id="component">
  <input v-model="message">
  <p>Message = {{ message }}</p>
</div>

<script>
  new Vue({
    el: '#component',
    data: { message: '' }
  })
</script>

---

Ma_gician で書き替え

1. new Vue が書かれている <script> を削除
2. ライブラリの読み込みを vue-2.5.21 から ma_gician に変更
3. <div id="component"> の > の直前に :: を追加

これだけ。

• Lightning Talk などでは、ここでライブコーディングします

---

Vue.jsのリアクティブなコード

<script src="assets/js/vue-2.5.21"></script>

<div id="component">
  <input v-model="message">
  <p>Message = {{ message }}</p>
</div>

<script>
  new Vue({
    el: '#component',
    data: { message: '' }
  })
</script>

---

Ma_gicianのリアクティブなコード

<script src="assets/js/ma_gician"></script>

<div id="component" ::>
  <input v-model="message">
  <p>Message = {{ message }}</p>
</div>

---

結論

• Ma_gician で記述すると、コード量が減る
• コード量が減れば、バグの可能性も減る
• バグが減れば、作業時間も減る
• 作業時間が減れば、残業時間も減る

Q.E.D.

---

Ma_gician を作った人

• 名前: Stew Eucen
• 国籍: 日本

SNS

• Twitter: @StewEucen
• Facebook: Stew Eucen