JavaScriptフレームワーク比較！
2017年10月24日にカサレアルにて開催したフリーセミナー用の発表資料です。 以下、告知時の文章です。 ハイブリッドアプリ開発最前線 -使いやすいJavaScriptフレームワークを見極めよう- Monaca、Onsen UIのアシアル株式会社様との共催セミナーです。 定員に達しましたので、本セミナーのお申し込みを締め切りました。 たくさんのお申し込みをいただき、ありがとうございました！ スマートデバイスの普及に伴い、ビジネスにおいて モバイルアプリ開発は避けては通れないようになりました。 しかし、様々なデバイスにあわせて、アプリ開発を行う体力はない・・・ というお客様の声をよく耳にします。 そこで、iOS、Android向けのアプリがワンソースで開発できる HTML5ハイブリッドアプリ開発への注目が高まっております。 今回のセミナーでは前半に、HTML5でモバイルアプリを開発するためのツールであるMonaca、Onsen UIをご紹介します。 後半では、開発をすすめる中で必要となるJavaScriptのフレームワークについてもご紹介させていただきます。 継続してモバイルアプリ開発を実施する方にお勧めです。 Monaca、Onsen UIのご紹介は、開発元であるアシアル様からエバンジェリストの生形様をお呼びしました。 活用頂いている方の生の声を含めて、Monaca、Onsen UIをご紹介いただきます。 JavaScriptフレームワークはカサレアルでJavaScript関連のコースを多数担当している 越智がご紹介します。受講者が実務でつまづきやすいポイントを含めてお伝えさせていただきます。 既にモバイルアプリの開発に取り組まれている、 または今後取り組まれる皆様のご参加を心よりお待ちしております。 スピーカー、講師紹介 アシアル株式会社 Monaca/Onsen UIエバンジェリスト 生形 可奈子 様 モバイルアプリ開発環境「Monaca」のエバンジェリストとして、アプリ開発技術の普及・促進活動につとめる。 Microsoft MVP 2016−2017受賞。 代表的な著書に『スラスラわかるJavaScript』などがある。 株式会社カサレアル ラーニングサービス部 チーフエンジニア 越智 理夫 Webシステムを中心に、プログラマとしてシステム開発に従事。 プロジェクトマネージャだけでなく、品質管理や運用設計も担当実績があり、多様な経験を持つ。 2006年よりトレーナーとなり、新入社員研修や中堅エンジニア向け研修に多数、携わる。 Java/Ruby/JavaScriptなどのコースを担当 タイムスケジュール 13:30-14:00 開場・受付 14:05-14:50 「Monacaによるモバイルアプリ開発ことはじめ」 (アシアル 生形様) Monacaは、全世界で１８万人以上のユーザーに利用されているモバイルアプリ開発環境です。 HTML5やJavaScriptといったWebの標準技術を利用して、 ワンソースでiOSとAndroidの両方に対応したアプリを作ることができます。 本セミナーでは、Monacaとその周辺ツールについて、デモを交えながらご紹介します。 これからモバイルアプリ開発を始めたいと考えているWeb開発者の方におすすめです。 15:05-16:05 「JavaScriptフレームワークを見極めよう！」 (カサレアル 越智) カサレアルでJavaScriptコースを担当している越智が登壇します。 アプリ開発はフレームワークを活用することによりさらにスピードアップします。 今回は3大フレームワークのAngular、React、Vue.jsを中心にそれぞれの違いをご紹介させていただきます。 16:10-16:30 名刺交換会
More Related Content
What's hot
What's hot (20)
Similar to JavaScriptフレームワーク比較！
Similar to JavaScriptフレームワーク比較！ (20)
More from CASAREAL, Inc.
More from CASAREAL, Inc. (20)
Recently uploaded
Recently uploaded (20)
JavaScriptフレームワーク比較！
- 2. ➤ ➤ ➤ ➤ ➤
- 13. ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤
- 17. ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤
- 18. -Angular
- 20. -Vue.js
- 24. ➤ ➤ ➤ ➤ ➤ ➤
- 25. ➤ ➤ ➤ ➤ ➤
- 26. React Angular / Vue.js
- 28. <div v-for="item in items"> {{ item.name }} ¥{{ item.price }} </div> <div v-if="items.length>1">{{items.length}} </div>
- 31. ✖
- 33. jQuery HTML $(".tab:not(:first)").hide(); $("#tab-body a").click(function() { $(".tab").hide(); $(".select_tab").show(); $("#tab-body a").removeClass("selected"); $(this).addClass("select_tab"); }); HTML price:number; pay_num:number; setPrice(value:string){ this.price = value; this.month_pay = calcMonthPay(this.price, this.pay_num); }
- 35. var express = require( 'express' ), http = require( 'http' ), https = require( 'https' ) fs = require( 'fs' ), app = express(); app.use(express.static('public')); // var options = { key: fs.readFileSync( 'cert/server_key.pem' ), cert: fs.readFileSync( 'cert/server_crt.pem' ) }; // https var server = https.createServer( options, app ).listen( 3443, function(){ console.log( "server stating on " + 3443 + " ..." ); }); // app.get( '/', function( req, res ){ res.write( 'JS DEV ENV START' ); res.end(); }); node.js Web
- 36. ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤
- 41. script.ts import Item from ‘./item'; var elem = document.getElementById('output'); var aBook = new Item(' TypeScript',1980); aBook.say(elem); item.ts class Item { constructor(private name:string, private price:number){} public say(elem:HTMLElement) : void { elem.innerHTML = ` :${this.name} :${this.price} `; } } export default Item;