Submit Search
Upload
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
•
1 like
•
912 views
Eucen Stew
Follow
株式会社オプトさんで開催された LT会「俺得フロントエンド (2) 2019/10/24」で発表した内容です。
Read less
Read more
Software
Report
Share
Report
Share
1 of 34
Download now
Download to read offline
Recommended
Ma gician <Vue にはできないこと (1)> WeJS 37th
Ma gician <Vue にはできないこと (1)> WeJS 37th
Eucen Stew
翻訳から始めるVue.js 入門
翻訳から始めるVue.js 入門
Makoto Chiba
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
Satoshi Anai
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?
IRI MO
AngularJSの高速化
AngularJSの高速化
Kon Yuichi
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
sgvizler
sgvizler
Fumihiro Kato
Recommended
Ma gician <Vue にはできないこと (1)> WeJS 37th
Ma gician <Vue にはできないこと (1)> WeJS 37th
Eucen Stew
翻訳から始めるVue.js 入門
翻訳から始めるVue.js 入門
Makoto Chiba
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
Satoshi Anai
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?
IRI MO
AngularJSの高速化
AngularJSの高速化
Kon Yuichi
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
sgvizler
sgvizler
Fumihiro Kato
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
spring_raining
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
Chart.jsで簡単にグラフを描画する
Chart.jsで簡単にグラフを描画する
iPride Co., Ltd.
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料
leverages_event
3分でわかるangular js
3分でわかるangular js
Shin Adachi
ASP.NET MVCとEntity Frameworkで作ってみた
ASP.NET MVCとEntity Frameworkで作ってみた
Kentaro Inomata
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
Ma gician <wide version> @meguro.es 2019/10/10
Ma gician <wide version> @meguro.es 2019/10/10
Eucen Stew
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
はじめてのVue.js
はじめてのVue.js
kamiyam .
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
小川 昌吾
Gws 20141024 gradle_intro
Gws 20141024 gradle_intro
Nobuhiro Sue
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
20140329 modern logging and data analysis pattern on .NET
20140329 modern logging and data analysis pattern on .NET
Takayoshi Tanaka
スマホにおけるWebGL入門
スマホにおけるWebGL入門
Yohta Kanke
Async Enhancement
Async Enhancement
kamiyam .
React.jsでサービスを作ってみた話
React.jsでサービスを作ってみた話
GIG inc.
One night Vue.js
One night Vue.js
Masahiro Kyuden
WebXR TechTokyo #3 in Cluster発表資料
WebXR TechTokyo #3 in Cluster発表資料
WheetTweet
Lighting componentワークブック(経費精算アプリ)
Lighting componentワークブック(経費精算アプリ)
Akihiro Iwaya
TypeScriptで書くLambdaをCDKでいい感じに管理する.pptx
TypeScriptで書くLambdaをCDKでいい感じに管理する.pptx
ssuser8b389c
More Related Content
What's hot
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
spring_raining
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
Chart.jsで簡単にグラフを描画する
Chart.jsで簡単にグラフを描画する
iPride Co., Ltd.
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料
leverages_event
3分でわかるangular js
3分でわかるangular js
Shin Adachi
ASP.NET MVCとEntity Frameworkで作ってみた
ASP.NET MVCとEntity Frameworkで作ってみた
Kentaro Inomata
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
Ma gician <wide version> @meguro.es 2019/10/10
Ma gician <wide version> @meguro.es 2019/10/10
Eucen Stew
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
はじめてのVue.js
はじめてのVue.js
kamiyam .
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
小川 昌吾
Gws 20141024 gradle_intro
Gws 20141024 gradle_intro
Nobuhiro Sue
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
20140329 modern logging and data analysis pattern on .NET
20140329 modern logging and data analysis pattern on .NET
Takayoshi Tanaka
スマホにおけるWebGL入門
スマホにおけるWebGL入門
Yohta Kanke
Async Enhancement
Async Enhancement
kamiyam .
React.jsでサービスを作ってみた話
React.jsでサービスを作ってみた話
GIG inc.
One night Vue.js
One night Vue.js
Masahiro Kyuden
WebXR TechTokyo #3 in Cluster発表資料
WebXR TechTokyo #3 in Cluster発表資料
WheetTweet
What's hot
(20)
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Chart.jsで簡単にグラフを描画する
Chart.jsで簡単にグラフを描画する
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料
3分でわかるangular js
3分でわかるangular js
ASP.NET MVCとEntity Frameworkで作ってみた
ASP.NET MVCとEntity Frameworkで作ってみた
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Ma gician <wide version> @meguro.es 2019/10/10
Ma gician <wide version> @meguro.es 2019/10/10
React を導入したフロントエンド開発
React を導入したフロントエンド開発
はじめてのVue.js
はじめてのVue.js
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
Gws 20141024 gradle_intro
Gws 20141024 gradle_intro
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
20140329 modern logging and data analysis pattern on .NET
20140329 modern logging and data analysis pattern on .NET
スマホにおけるWebGL入門
スマホにおけるWebGL入門
Async Enhancement
Async Enhancement
React.jsでサービスを作ってみた話
React.jsでサービスを作ってみた話
One night Vue.js
One night Vue.js
WebXR TechTokyo #3 in Cluster発表資料
WebXR TechTokyo #3 in Cluster発表資料
Similar to Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
Lighting componentワークブック(経費精算アプリ)
Lighting componentワークブック(経費精算アプリ)
Akihiro Iwaya
TypeScriptで書くLambdaをCDKでいい感じに管理する.pptx
TypeScriptで書くLambdaをCDKでいい感じに管理する.pptx
ssuser8b389c
20200304 vuejs
20200304 vuejs
yamamotomsc
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Shotaro Suzuki
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
Vue.js で XSS
Vue.js で XSS
tobaru_yuta
Metaprogramming Universe in C# - 実例に見るILからRoslynまでの活用例
Metaprogramming Universe in C# - 実例に見るILからRoslynまでの活用例
Yoshifumi Kawai
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
codeal
Vue.js 基礎 + Vue CLI の使い方
Vue.js 基礎 + Vue CLI の使い方
Kei Yagi
PowerShellを使用したWindows Serverの管理
PowerShellを使用したWindows Serverの管理
junichi anno
Vue入門
Vue入門
Takeo Noda
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
Next2Dで始めるゲーム開発 - Game Development Starting with Next2D
Next2Dで始めるゲーム開発 - Game Development Starting with Next2D
Toshiyuki Ienaga
Spring3.1概要 データアクセスとトランザクション処理
Spring3.1概要 データアクセスとトランザクション処理
土岐 孝平
New Features in C# 10/11
New Features in C# 10/11
Akira Inoue
WordPress widget api
WordPress widget api
Takami Kazuya
LabVIEW NXG Web Module Training Slide
LabVIEW NXG Web Module Training Slide
Yusuke Tochigi
初めてのvue.js(2.x系)
初めてのvue.js(2.x系)
健人 井関
EWD 3トレーニングコース#31 ewd-xpressでWebおよびRESTサービスを作る
EWD 3トレーニングコース#31 ewd-xpressでWebおよびRESTサービスを作る
Kiyoshi Sawada
Similar to Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
(20)
Lighting componentワークブック(経費精算アプリ)
Lighting componentワークブック(経費精算アプリ)
TypeScriptで書くLambdaをCDKでいい感じに管理する.pptx
TypeScriptで書くLambdaをCDKでいい感じに管理する.pptx
20200304 vuejs
20200304 vuejs
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Vue.js で XSS
Vue.js で XSS
Metaprogramming Universe in C# - 実例に見るILからRoslynまでの活用例
Metaprogramming Universe in C# - 実例に見るILからRoslynまでの活用例
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
Vue.js 基礎 + Vue CLI の使い方
Vue.js 基礎 + Vue CLI の使い方
PowerShellを使用したWindows Serverの管理
PowerShellを使用したWindows Serverの管理
Vue入門
Vue入門
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Next2Dで始めるゲーム開発 - Game Development Starting with Next2D
Next2Dで始めるゲーム開発 - Game Development Starting with Next2D
Spring3.1概要 データアクセスとトランザクション処理
Spring3.1概要 データアクセスとトランザクション処理
New Features in C# 10/11
New Features in C# 10/11
WordPress widget api
WordPress widget api
LabVIEW NXG Web Module Training Slide
LabVIEW NXG Web Module Training Slide
初めてのvue.js(2.x系)
初めてのvue.js(2.x系)
EWD 3トレーニングコース#31 ewd-xpressでWebおよびRESTサービスを作る
EWD 3トレーニングコース#31 ewd-xpressでWebおよびRESTサービスを作る
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
1.
Ma_gician 世界中のフロントエンダーの残業時間を減らす、 新しい JavaScript フロントエンドフレームワーク <詳細版>
2.
読み方 Ma_gician 「マジシャン」
3.
どういうもの? 新しいアーキテクチャで作られた JavaScipt フロントエンド フレームワーク
4.
特徴は? 極端に少ないコード量で動作可能。
5.
どこで見られるの? ソースコードと正式名称は未公開です。 (2019/10/10時点)
6.
マイルストーン 令和元年内にオープンソース化
7.
コードが減る様子を見てみましょう
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.
Vue.js の実装を Ma_gician
で書き替え 1. new Vue が書かれている <script> を削除 2. ライブラリの読み込みを vue から ma_gician に変更 3. <div id="component"> の > の直前に :: を追加 * Lightning Talk では、ここでライブコーディングします
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.
Ma_gician の リアクティブ <script src="assets/js/ma_gician"></script> <div
::> <input v-model="message"> <p>Message = {{ message }}</p> </div>
12.
結論 * Ma_gician で実装すると、コード量が減る *
コード量が減れば、バグの可能性も減る * バグが減れば、作業時間も減る * 作業時間が減れば、残業時間も減る Q.E.D.
13.
更に機能紹介
14.
アジェンダ 1. 状態管理 2. Nested
Computed 3. HTML Imports
15.
状態管理
16.
Ma_gician の状態管理 ● タグに
:: を要素追加するとコントローラ化されます。 ● コントローラは自分の子要素をスコープとした状態管理をします。
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.
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.
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.
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.
Nested Computed
22.
Vue.js の computed ●
Vue インスタンスに computed 定義を登録する。 ● Vue インスタンス以外では computed を定義できない。
23.
Ma_gician の computed ●
コントローラ要素に computed を一括定義できる。 ● 子要素にも computed を定義できる。 ● 子要素の computed は、その要素の子要素だけに適用される。
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.
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.
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.
HTML Imports (Single File
Component)
28.
ワイヤーフレーム <main> <section> <h1> ここにタイトル </h1> <div> ここにユーザ情報 </div> </section> </main>
29.
HTML Imports の 適用後 <main> <section
_> <h1 x-import=”title.html”> ここにタイトル </h1> <div x-import=”user-info.html”> ここにユーザ情報 </div> </section> </main>
30.
Ma_gician の HTML
Imports (・ω・)<ライブコーディング見ないとわからんでござる
31.
自己紹介 ● Ma_gician を作った人 名前:Stew
Eucen(悉生 游漩) 読み方: しちゅう ゆうせん 国籍:日本 ● SNS Twitter: @StewEucen Facebook: stew.eucen
32.
OSS 活動に向けて スポンサー募集中です!
33.
他のデモを見たい方は、 懇親会でお声がけください!
34.
ご静聴ありがとうございました!
Download now