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
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
880
5つのアンチパターンから学ぶLT設計
narihara
1
170
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
Is Xcode slowly dying out in 2025?
uetyo
1
270
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
260
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
260
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Optimizing for Happiness
mojombo
379
70k
Producing Creativity
orderedlist
PRO
346
40k
Statistics for Hackers
jakevdp
799
220k
Documentation Writing (for coders)
carmenintech
72
4.9k
Git: the NoSQL Database
bkeepers
PRO
430
65k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
How to Think Like a Performance Engineer
csswizardry
25
1.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
A Modern Web Designer's Workflow
chriscoyier
695
190k
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
Ҏ্ɺ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠❗