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


キャッチコピー


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


当初は


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



読み方


  • Ma_gician 「マジシャン」


どういうもの?


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



どこで見られるの?


  • ソースコードと正式名称は未公開です。

    (2019/06/15時点)


マイルストーン


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



デモ


  • 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 などでは、ここでライブコーディングします



実際の HTML

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

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

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

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



結論


  • Ma_gician でコンポーネントを作ると、コード量が減る

  • コード量が減れば、バグの可能性も減る

  • バグが減れば、作業時間も減る

  • 作業時間が減れば、残業時間も減る

Q.E.D.



Ma_gician を作った人


  • 名前: Stew Eucen

  • 国籍: 日本


SNS