Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
16
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

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

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

by StewEucen
1 / 12

読み方

  • 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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
16
Help us understand the problem. What are the problem?