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
NPOでのDevinの活用
codeforeveryone
0
840
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
Porting a visionOS App to Android XR
akkeylab
0
470
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.4k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Deep Dive into ~/.claude/projects
hiragram
14
2.6k
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
Team operations that are not burdened by SRE
kazatohiei
1
310
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
The Invisible Side of Design
smashingmag
301
51k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
How STYLIGHT went responsive
nonsquared
100
5.6k
Music & Morning Musume
bryan
46
6.6k
Site-Speed That Sticks
csswizardry
10
690
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
A designer walks into a library…
pauljervisheath
207
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
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
Ҏ্ɺ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠❗