Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Ionic(Angular)初心者のテスト奮闘記
Search
kkeeth
August 05, 2017
Programming
0
1.3k
Ionic(Angular)初心者のテスト奮闘記
テストの必要性、IonicとAngularのテスト環境の比較、Nativeのテストなどを話します。
kkeeth
August 05, 2017
Tweet
Share
More Decks by kkeeth
See All by kkeeth
Programming to play with p5.js
clown0082
0
19
とある EM の初めての育休からの学び
clown0082
1
3.7k
The history of Javascript frameworks: changes in front-end design philosophy
clown0082
2
170
Visually experience the beauty of mathematics with p5.js
clown0082
1
3k
Rediscover the joy of coding with Creative Coding
clown0082
0
1.6k
全員が意思決定する会社で開発者体験や生産性を見る大変さについて
clown0082
0
620
JavaScript × Mathematics go to Digital Art
clown0082
1
390
In-house study group at YUMEMI
clown0082
0
210
Playing Ionic Logo by p5.js
clown0082
0
280
Other Decks in Programming
See All in Programming
VS Code Update for GitHub Copilot
74th
2
650
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
520
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
930
生成AI時代のコンポーネントライブラリの作り方
touyou
1
230
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
180
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
580
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
730
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
170
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
What's in a price? How to price your products and services
michaelherold
246
12k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
960
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
310
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
For a Future-Friendly Web
brad_frost
179
9.8k
Being A Developer After 40
akosma
90
590k
Transcript
IonicʢAngularʣॳ৺ऀ ͷςετฃಆه by @kuwahara_ngv4 2017/08/06 ʲHTML5ͰΞϓϦΛ࡞ΔʳIonic 2+ ϛʔτΞοϓ౦ژ
ࣗݾհ
Basic information ɹlet my_info = { ɹɹɹtwitter: ‘@kuwahara_ngv4’, ɹɹɹGitHub: ’k-kuwahara’,
ɹɹɹQiita: ’clown0082’, ɹɹɹWorkplace: ‘Ϩϓϥϗʔϯגࣜձࣾ’ ɹ}
Skill Sets • PHP • JavaScript • Ruby
Agenda • ςετͷඞཁੑ • Ionic Appͷςετ 1. Angularͷςετڥ 2. Ionic
TeamͷϢχοτςεταϯϓϧ 3. Nativeػೳͷςετ • ·ͱΊ
Topics not told today • E2Eςετʹ͍ͭͯ • Ionicʹ͓͚ΔςετͷTips • AoTʹ͍ͭͯ
ςετͷඞཁੑ
γεςϜΞϓϦέʔγϣϯ ͚ͩͰͳ͘
ࣗಈൢചػ CLI ΞϓϦέʔγϣϯ ՈͷυΞ Զઐ༻twitter ΫϥΠΞϯτ
ඞͣςετʢಈ࡞ݕূʣ ͞Ε͍ͯΔ
ҿΈങ͑Δʁ ίϚϯυ࣮ߦͰ͖Δʁ ։͘ or ด͡Δʁ πΠʔτͰ͖Δʁ λΠϜϥΠϯදࣔ͞ΕΔʁ
ҿΈങ͑Δʁ ίϚϯυ࣮ߦͰ͖Δʁ ։͘ or ด͡Δʁ πΠʔτͰ͖Δʁ λΠϜϥΠϯදࣔ͞ΕΔʁ ಈ࡞͠ͳ͚ΕΘΕͳ͍
ͲΜͳϓϩμΫτͰ ςετʢಈ࡞ݕূʣඞཁ
Q.Ͱʮςετίʔυʯ ඞཁͳͷ͔ʁ ※Ҏ߱ɺςετίʔυ => ςετ
A. ઈରʹඞཁͱݶΒͳ͍ ͨͩɺ༨༟͕͋ΔͳΒ ॻ͍ͨ΄͏͕ྑ͍
Necessity of test code • ਓ͕Βͳͯ͘ྑ͍ςετΛࣗಈԽͰ͖Δ • ༷ͷ֬ೝ࿙ΕɺόάΛݟ͚ͭΔ͜ͱ͕͋Δ • ίʔυͷ࣭ΛߴΊΔ͜ͱʹܨ͕Δ
Ionic Appͷςετ
$ ionic start hoge (tabs)
package.jsonͷҰ෦ൈਮ
ςετ༻ͷͷ͕Կ Πϯετʔϧ͞Εͳ͍ʜͩͱʁ
ͭ·ΓɺςετڥࣗͰ ༻ҙ͢Δ͔͠ͳ͍ͷ͔
ͱݴ͑ɺ͜͏͍͏ؔͩ͠ʜ
·ͣangular-cliͰ༻ҙ͞ΕΔ ςετڥΛݟͯΈΔ
1. Angularͷςετڥ
package.jsonͷҰ෦ൈਮ
package.jsonͷҰ෦ൈਮ
Tools • ςετϑϨʔϜϫʔΫ㱺ɹ • E2EςετϑϨʔϜϫʔΫ㱺ɹ • ςετϥϯφʔɹ㱺ɹ • ରϒϥβɹ㱺ɹ ※
ରϒϥβՃՄೳ
؆୯ʹղઆ͠·͢
• ςετϑϨʔϜϫʔΫ㱺ɹ • E2EςετϑϨʔϜϫʔΫ㱺ɹ • ςετϥϯφʔɹ㱺ɹ • ରϒϥβɹ㱺ɹ ※ ରϒϥβՃՄೳ
Tools
• ςετϑϨʔϜϫʔΫ㱺ɹ • E2EςετϑϨʔϜϫʔΫ㱺ɹ • ςετϥϯφʔɹ㱺ɹ • ରϒϥβɹ㱺ɹ ※ ରϒϥβՃՄೳ
Tools
Tools • ςετϑϨʔϜϫʔΫ㱺ɹ • E2EςετϑϨʔϜϫʔΫ㱺ɹ • ςετϥϯφʔɹ㱺ɹ • ରϒϥβɹ㱺ɹ ※
ରϒϥβՃՄೳ
How to write test, or policy • جຊcomponentຖʹςετΛॻ͘ • ςετίʔυͷϑΝΠϧ໊ʮ*.spec.tsʯ
• Service ClassserviceຖʹςετΛॻ͘ • UIʢσβΠϯʣʹ͍ͭͯςετॻ͔ͳ͍
Test File Name Example ֤ίϯϙʔωϯτຖ ʹ.spec.tsϑΝΠϧΛ࡞Δɻ
Component Class Test Example ಄ͰඞཁͳϞδϡʔ ϧΛಡΈࠐΈɺς ετίʔυͷલʹ DIͨ͠ΓίϯύΠϧ ͢Δ
Service Class Example ServiceΫϥεͳΔ͘ γϯϓϧʹɻ Angularʹґଘ͠ͳ͍ ͱɺී௨ͷΦϒδΣΫτ ͱͯ͠ςετ͕ॻ͚Δɻ
Service Class Test Example ςετ͜Μͳײ͡ɻ
৭ʑπʔϧͷΛ͕ͨ͠
͜ͷࢠΛར༻͢Δ͚ͩͰ ςετΓ͏Δ
Feature of TypeScript • ܕ͕͋Δ • ObjectͷதΛఆٛͰ͖Δ ɹˠɹίϯύΠϧ࣌ʹΤϥʔΛݴͬͯ͘ΕΔ͔Β
2. Ionic Teamͷ Ϣχοτςεταϯϓϧ
Ionic Team͕Githubʹ ςετ༻ͷαϯϓϧϦϙδτϦ Λެ։͍ͯ͠Δɻ
None
ىಈͯ͠ΈΔͱ͜Μͳײ͡ɻ
ionic-unit-testing-example
ionic-unit-testing-example
ςετڥʁ
package.jsonͷҰ෦ൈਮ
͍͍ͩͨAngularͱಉ͡
Comparison of Angular and Ionic app/ ᵓ … ᵓ package.json
ᵓ e2e/ ᵓ karma.conf.js ᵋ src/ ɹᵋ app/ app/ ᵓ … ᵓ package.json ᵓ e2e/ ᵓ test-config ɹᵋ karma.conf.js ଞ ᵋ src/ ɹᵋ app/ Angular Ionic
Comparison of Angular and Ionic Angular
Comparison of Angular and Ionic Ionic
Comparison of Angular and Ionic Ionic Ionic ಠࣗͷϞδϡʔϧɺίϯϙʔωϯτΛ ಡΈࠐΉඞཁ͕͋Δ
3. Nativeػೳͷςετ
None
ࠓIonic Nativeͱͯ͠ ػೳ͕࣮͞Ε͍ͯΔ❗
Usage native module # install $ ionic cordova plugin add
cordova-plugin-camera $ npm i —save @ionic-native/camera
͔͠͠ɺNativeͷػೳ ࣮ػͰςετͤ͟ΔΛಘͳ͍ʜ
Example: Camera Plugin ϒϥβͰNativeͷػೳ͕ͳ͍ͨΊɺͲ͏ͯ͠ ࣮ػͰͷ֬ೝ͕ඞཁʜ ʁ
ղܾࡦ͋Δํ͝ڭࣔئ͍·͢❗
sample application
IonicͰ؆୯ͳΞϓϦΛ ̍ͭ࡞Γ·ͨ͠ɻ
Pick Lunch Menu https://k-kuwahara.github.io/pick- lunch-menu/
Pick Lunch Menu
Summary
Summary • ςετॻ͚ΔͳΒॻ͍ͨ΄͏͕ྑ͍ • ࠔͬͨΒAngularͷςετΛਅࣅ͢Δ ɹ˞ڊਓͷݞʹͬͨ΄͏ָ͕ • ωΠςΟϒػೳIonic NativeΛ͓͏
Reference URL • ʮionic-unit-testing-exampleʯ ɹɹhttps://github.com/ionic-team/ionic-unit-testing-example • ʮionicͷςετڥΛௐͨʯ ɹɹhttp://qiita.com/bnosuke/items/7f14c169429c9196f7fb • ʮIonic
+ Typescript + Protractor Ͱe2eςετΛ͢Δʯ ɹɹhttp://qiita.com/takeo-asai/items/ee7c15e5c5cfc9cf3124 • ʮTesting Angular Appʯ ɹɹhttps://speakerdeck.com/quramy/ng-japan-testing-angular-app
Ҏ্ɺ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠❗