TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Download as PPTX, PDF12 likes40,371 views
HTML5 Conference 2016で発表したスライドです。 TechFeed (https://techfeed.io) での開発経験を元に、Angular2, Webpack, Ionic2, Cordovaについて、それらの技術を採用した経緯と、実際に使ってみて感じたメリット?デメリットなどを解説しています。
![コンポーネントのコード例
import {Component} from '@angular/core';
@Component({
selector: 'my-alert-button',
template: `
<button (click)="click()">Click me!</button>
`,
styles: [`
button { width: 100%; }
`]
})
export class AlertButtonComponent {
click(): void {
window.alert('Hello');
}
}
Angular2のコンポーネ
ントを読み込み
ES7のデコレータを使
用 コンポーネントのタグ
名を指定
コンポーネントのテン
プレート
コンポーネントのイベ
ントを捕捉
コンポーネントのスタ
イル](https://image.slidesharecdn.com/techfeed-160905014334/85/TechFeed-Angular2-Webpack-Ionic2-Cordova-18-320.jpg)
![Angular2のDependency Injection
? DI=依存性注入
– 依存関係にあるクラスのインスタンス生成と注入をフレーム
ワークに任せる
? テスト容易性、メンテナンス性に優れたコードを素早く書け
るようになる
import {Injectable} from
'@angular/core';
@Injectable()
export class MyService {
loadData(): string[] {
return ['a', 'b', 'c'];
}
}
@Component({
providers: [MyService]
})
export class AppComponent {
constructor(
myService: MyService) {
}
}](https://image.slidesharecdn.com/techfeed-160905014334/85/TechFeed-Angular2-Webpack-Ionic2-Cordova-19-320.jpg)
![Ionic2のコード例
? Ionic2独自のコンポーネントを使用してテンプレートを記述
していく
<form [formGroup]="form" (ngSubmit)="changeUsername()">
<ion-label stacked>ユーザーID</ion-label>
<ion-input type="username" required
autocapitalize="none"></ion-input>
<button type="submit" full [disabled]="!isValid">
変更する</button>
</form>](https://image.slidesharecdn.com/techfeed-160905014334/85/TechFeed-Angular2-Webpack-Ionic2-Cordova-25-320.jpg)
More Related Content
What's hot (20)
Viewers also liked (12)
![[ICLR2017読み会 @ DeNA] ICLR2017紹介](https://cdn.slidesharecdn.com/ss_thumbnails/iclr2017denaiclr2017-170616173153-thumbnail.jpg?width=560&fit=bounds)
Similar to TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門 (20)
More from Shumpei Shiraishi (20)
Recently uploaded (8)
![ElasticsearchでSPLADEする [Search Engineering Tech Talk 2025 Winter]](https://cdn.slidesharecdn.com/ss_thumbnails/searchtech-250228102455-ddc5ce09-thumbnail.jpg?width=560&fit=bounds)
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
- 1. TechFeedのつくりかた Angular2 / Webpack / Ionic2 / Cordova 実践入門 2016/09/03 株式会社オープンウェブ?テクノロジー TechFeed統括 白石 俊平
- 3. 本日のアジェンダ ? 自己紹介 ? TechFeedとは ? 要素技术の概要／採用の経纬 – Cordova – Angular2 – Ionic2 – Webpack ? それぞれの技術のメリット／デメリット
- 4. 自己紹介 ? html5jファウンダー ? HTML5 Experts.jp編集長 ? 株式会社オープンウェブ?テクノロジー CEO – TechFeedというサービスをやっています
- 5. TechFeed ? エンジニア向けキュレーションサービス – 世界中から、エンジニア向けの情報収集＆ランキング ? エンジニアがウォッチしなくてはならない情報は多様＆ディープ – 人力でやるべきではない→サービスつくった ぜひ使ってみてください。 http://techfeed.io
- 8. Cordova
- 9. モバイルOS (iOS/Android…) Cordovaとは？ ? モバイルアプリをHTML/CSS/JavaScriptで開発できる ようにしてくれるプラットフォーム ? 各種モバイルOSが備えるWebViewの上で動作する ? プラグインを使用することで、ネイティブの機能も呼 び出せる WebView Webアプリ プラグイン Cordovaアプリケーション
- 10. なぜCordovaだったか？ ? Webフロントエンドに関する知識を活用 したかった – エンジニアが全員Web技術者 ? モバイルアプリのコードベースを統一し たかった ? できればWebとモバイルアプリのコード も統一したかった – PWAppsも見据えつつ
- 11. TechFeedでのCordova利用 ? TechFeedでは、以下のプラグインを利用 （一部） – プッシュ通知 – ディープリンク（ユニバーサルリンク） – アプリ内ブラウザ（InAppBrowser） – SafariViewController/ChromeCustomTabs ? SafariやChromeをアプリと統合できる – Crosswalk – …
- 12. プッシュ通知 ? phonegap-plugin-pushというプラグインを使用 ? プッシュ通知に関わる処理を、OSに関わらず同じコー ドで書ける // プッシュAPIの初期化 const push = Push.init({ android: {icon: 'icon'}, ios: {alert: true} }); push.on('registration', data => { // デバイストークン取得時の処理 this.registerDevice(data.registrationId) }); push.on('notification', data => { // プッシュ通知がタップされた際の処理 ... });
- 13. ディープリンク （ユニバーサルリンク） ? cordova-universal-links-pluginを使用 ? 特定のURLに反応して、モバイルアプリが立 ち上がるようにできる。 – TechFeedの場合、メールのリンクをタップした らアプリが起動する // プラグインから発生するイベントを監視 universalLinks.subscribe(null, (event) => { const {url} = event; // URLから、アプリの特定のビューを開く処理 … });
- 14. Crosswalk ? https://crosswalk-project.org/ ? (主にAndroid)デバイスやOSの差異に関わらず、最先端の WebViewを提供してくれるプラグイン – Chromiumの独自ビルドを内包することで実現 ? Androidデバイスのフラグメンテーションとおさらばできる！ – これはかなり嬉しい 最先端のWebViewに 差し替えてしまう
- 15. Angular2
- 16. Angular2とは？ ? Angular.jsの後継フレームワーク ? 1系と互換性はないが、移行は可能 ? 1系との最も大きな違いはコンポーネント 指向であること
- 17. Angular2の特徴 ? TypeScriptを推奨 ? コンポーネント指向 ? 包括的なアプリケーションアーキテク チャ – モジュール – Dependency Injection
- 18. コンポーネントのコード例 import {Component} from '@angular/core'; @Component({ selector: 'my-alert-button', template: ` <button (click)="click()">Click me!</button> `, styles: [` button { width: 100%; } `] }) export class AlertButtonComponent { click(): void { window.alert('Hello'); } } Angular2のコンポーネ ントを読み込み ES7のデコレータを使 用 コンポーネントのタグ 名を指定 コンポーネントのテン プレート コンポーネントのイベ ントを捕捉 コンポーネントのスタ イル
- 19. Angular2のDependency Injection ? DI=依存性注入 – 依存関係にあるクラスのインスタンス生成と注入をフレーム ワークに任せる ? テスト容易性、メンテナンス性に優れたコードを素早く書け るようになる import {Injectable} from '@angular/core'; @Injectable() export class MyService { loadData(): string[] { return ['a', 'b', 'c']; } } @Component({ providers: [MyService] }) export class AppComponent { constructor( myService: MyService) { } }
- 20. なぜAngular2を選んだか？ ? コンポーネント指向を採用したかった – 最初に作ったWeb版で、共通化したい部分が多数あることに気 付いたため ? TypeScript – 型なしで大規模アプリを書くことに少し疲れを感じていた。。 – 今の時代どうせビルドが必要なので、コンパイルしてほしい 一覧の項目はいたる ところで再利用する
- 21. なぜReactではなくAngular2を選ん だか？ ? 当時、Reactにはモバイルアプリ用UIフレームワーク のデファクトが存在しなかった – 今ならOnsen UIが使える ? 「フレームワーク」が欲しかった。 – 割と強めの規律でチームのコーディングスタイルを統一し たかった – アーキテクチャを模索している時間が惜しい ? React+Reduxが難しかった。。 – かなりのパラダイムシフト+学習コストが必要に感じた。 – 一方Angular2は、Angular1を知っていると、アーキテク チャの理解は割とすんなり。 ? DI / ディレクティブ / パイプ…
- 22. Ionic2
- 23. Ionic2とは ? Angular2上に構築されたUIフレームワー ク ? iOS/Android/Windows Phone Mobileに対 応し、スタイルの自動的な切り替えにも 対応 ? 最初から数多くのUIコンポーネントを備 える – UIの開発効率はかなり高い
- 25. Ionic2のコード例 ? Ionic2独自のコンポーネントを使用してテンプレートを記述 していく <form [formGroup]="form" (ngSubmit)="changeUsername()"> <ion-label stacked>ユーザーID</ion-label> <ion-input type="username" required autocapitalize="none"></ion-input> <button type="submit" full [disabled]="!isValid"> 変更する</button> </form>
- 26. なぜIonic2を選んだか？ ? Angular2に対応したUIフレームワークは、 当時唯一の選択肢だった。 – 今ならOnsen UIもある ? 「モバイルアプリ」を作りたかった。 – モバイルアプリのUXを自動的に実現してくれ る – 以前のWeb版はBootstrapなどを使用していた
- 27. Webpack
- 29. モジュールバンドラー ? モジュールバンドラーで、import/exportを JSコードに変換 import {Component} from '@angular2/core' ↓ (TypeScriptコンパイラ) var Component = require('@angular2/core').Component; ↓ (モジュールバンドラーがrequireをブラウザ上で使えるよう変 換) var component_1 = __webpack_require__(1);
- 30. Webpackの設定 ? Webpackの設定は、webpack.config.jsに記述 する。 ? 基本的な考え方は、 – ローダーがファイルを読み込み – JSコード内のrequireから依存関係を解釈し、 – 最終的なファイル出力 ts ts js js js ts-loader ts-loader ts-loaderts main.js
- 31. Webpackは超多機能 ? ローダーも、プラグインも、死ぬ ほどある – ローダーの一覧 – プラグインの一覧 List of loaders
- 32. なぜWebpackを選んだか ? 実績豊富 ? 機能豊富 ? AngularのチュートリアルではSystem.jsが 使われているので、悩ましくはあった – JSPMと組み合わせなくてはならなそうなの が面倒に感じた
- 33. 公開！TechFeedの開発環境 ? Angular2 ? Ionic ? gulp ? Webpack ? (Cordova)
- 34. 開発フロー上のポイント ? 基本的にはブラウザで開発 ? 実機上の開発版アプリも、コードを修正 すると自動的にリブートする BrowserSync ブラウザはもちろん、 アプリもリロードできる （CordovaがリモートWeb アプリも読み込めるのを利用）動画あります: http://goo.gl/ub6AxU
- 35. ソースコード上のポイント ? コンポーネントはすべて、 以下のファイルの組み合わ せからなる – HTML – SCSS – TypeScript ? Webpackがこれらをまとめ 上げてくれる – HTML/CSSのコードもJSに 一体化 – SCSS→CSS変換も自動的に
- 36. それぞれの技术を振り返る
- 37. 颁辞谤诲辞惫补を振り返る
- 38. 颁辞谤诲辞惫补を振り返る ? メリット – コードベースが統一できる ? 頑張ればモバイルとWebアプリも統一可能 ? 「Progressive Web Apps + モバイルアプリ」が可 能 – Webに関するスキルがフル活用できる – Webブラウザでモバイルアプリを開発できる – Crosswalkのおかげで、Androidのバージョン 差異が問題にならない
- 39. 颁辞谤诲辞惫补を振り返る ? デメリット – やはり、ネイティブに比べると動作が遅い – 一人のエンジニアが全OS面倒見なくてはなら なくなる ? ネイティブの機能を使う場合、いろいろしんどい – Crosswalkでかい（20M超） – iOSのWebViewがしょぼい（WKWebViewで あっても） ? 遅い、バグる ? IE6を彷彿とさせる…
- 40. 础苍驳耻濒补谤2を振り返る
- 41. 础苍驳耻濒补谤2を振り返る ? メリット – Angular1の反省がよく活かされている ? 全体的に整理されていて美しい ? パフォーマンス – アーキテクチャ上迷うことがあまりない ? Dependency Injectionは便利 ? CSSのカプセル化も最初から利用可能 – 静的型付け言語をベースとした、縛り強めな フレームワークなので、コードがぐちゃぐ ちゃになりにくい
- 42. 础苍驳耻濒补谤2を振り返る ? デメリット – 学習コストが高い ? TypeScript ? RxJS ? 当然Angular2そのものも – 静的型付け言語が嫌いな人にはつらい – バージョンアップがつらい（今だけだけど）
- 43. 罢测辫别厂肠谤颈辫迟を振り返る
- 44. TypeScriptのメリット ? 最新の言語仕様を思う存分使える ? 静的型付け言語である – コンパイラによるコードの静的解析 – コードがより文書的 – ツールによるコーディング補助 ? 入力補完 ? リファクタリング
- 45. TypeScriptのデメリット ? ツールチェインがまだ未成熟 – WebStormといえどもまだまだ ? JavaScriptコードとの統合はやはりつらい – 基本的には型定義ファイル（d.ts）必要 – JSとTSの間には浅くない溝がある – なので、プロジェクトの一部をTSで…というのは厳 しい ? 静的型付け言語である – 記述が冗長になりがち – JSほど気楽に書き下させない – ビルドが速くない（これはBabelでも同じだが…）
- 46. 滨辞苍颈肠2を振り返る
- 47. Ionic2のメリット ? 開発効率上がる ? ネイティブアプリに近いUXを得られる ? ionic-nativeは地味に嬉しい – CordovaのプラグインをTypeScriptでラップし てくれている – これがなかったら、全部anyでやるか、d.tsを 書かねばならないところ
- 48. Ionic2のデメリット ? 遅い – 正式リリース前だからだと信じたい ? サーバサイドレンダリングは諦めざるを 得ない ? カスタマイズが面倒 – これはUIフレームワーク全般に言える話 ? バージョンアップがしんどい（正式リ リース前だからだと信じたい）
- 49. 奥别产辫补肠办を振り返る
- 50. Webpackのメリット ? import/exportが使えるようになる – <script>地獄からの開放 ? 機能?プラグインが豊富 – 欲しいと思ったものはたいがい、ある。 ? コミュニティ?実績が豊富 – ググればだいたい出てくる
- 51. Webpackのデメリット ? 機能が豊富すぎて、何でもやらせたく なってしまう – 実際にはGulpとかに任せたほうが楽なことも 多い ? 謎の難しさがあり、学習コストが高い – 出来上がったwebpack.config.jsは単純でも、 そこにたどり着くまでがしんどい。。
- 52. TechFeedでのビルド環境 ? 結局、適材適所の組み合わせ – npm scripts…ビルドコマンドの定義 – Gulp…ビルドフロー全体をコントロール – Webpack…モジュールバンドル（だけ） ? 「○○だけでOK、もう△△は古い」という言説は 疑ってかかれ npm scripts Gulp Webpack
- 54. コンポーネント指向開発 のメリット ? 適度にコード分割されるので、コードの 見通しが良い ? 外部コンポーネントの活用で開発効率 アップ ? コンポーネントの再利用性も高まる
- 55. コンポーネント指向開発 のデメリット ? 開発を始めるまでの準備が結構かかる – フレームワークなどのセットアップ – コンポーネント設計 ? かなり未来感あるので、勉強が大変
- 56. 準備せよ。 向学心を燃やせ。