ネイティブアプリもSvelteで作りたい/NextbeatTechBar-20221215-1

2022年12月15日に開催された「Nextbeat Tech Bar：広がるSvelteの輪！忘年LT会」にて発表した資料です。

https://nextbeat.connpass.com/event/267096/

Transcript

1. Copyright © nextbeat All Rights Reserved nextbeat Tech Bar ネイティブアプリもSvelteで作りたい Copyright © nextbeat All Rights Reserved 株式会社ネクストビート　川井淳矢 12.15 THU 19:00　
2. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 2 今日のテーマ ネイティブアプリもSvelteで 作りたい
3. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 3 川井淳矢 / Kawai Junya 株式会社ネクストビート（2018/9 ~ now） • Technology Division Platform チーム 所属 • Web / モバイルアプリ開発のテックリードを担当 • 2022年4月からSvelte, SvelteKitを書き始めました 自己紹介 @_jk_nb プロフィール KIDSNA STYLE KIDSNAシッター
4. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 4 伏線回収 ネクストビートの基幹事業　保育士バンク！
5. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 5 伏線回収 よく見ると
6. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 6 伏線回収 よく見ると
7. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 7 伏線回収 よく見ると Svelteで書かれている
8. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 8 伏線回収 よく見ると 正確には... Scala + PlayFrameworkから Svelte(SvelteKit)に移行中
9. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 9 伏線回収 ネクストビートの技術スタック
10. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 10 伏線回収 よく見ると 4月から技術移行開始。 10個のフェーズにわけて ようやく残り２フェーズ
11. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 11 Svelteについて 技術移行を通して、Svelteを書いて感じたこと（個人的見解） • キャッチアップが比較的容易 ◦ ドキュメント、チュートリアルが豊富 ◦ リアクティブな記述が簡単（少し癖はある） ◦ 状態管理も公式が提供しており、わかりやすく使いやすい • フロントのコードがかなり簡潔に書ける ◦ マークアップとスクリプトの接続がわかりやすい ◦ コードの記述量が少ない • 今のところ大きなデメリットを感じていない ◦ 少なくともAngularよりは書きやすいのではないか
12. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 12 ネイティブアプリ ネイティブアプリもSvelteで作りたい
13. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 13 • Capacitor ◦ Web標準の技術で書いたコードをネイティブアプリとして動かすランタイム ◦ Plugin APIで便利なネイティブの機能を利用できる ◦ プッシュ通知やカメラアクセスなど豊富なネイティブ機能を呼び出せる • Ionic ◦ ネイティブアプリ開発に適した UIを提供するフレームワーク ◦ 画面遷移もネイティブアプリに近い形で実現できる • Svelte ◦ アプリケーション開発に利用 ◦ ルーティングはIonicに任せるのでSvelteKitは使わない Capacitor + Ionic + Svelteでアプリを作ってみる 主に開発に用いる技術
14. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 14 Capacitor + Ionic + Svelteでアプリを作ってみる Capacitorの動作検証
15. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 15 Capacitor + Ionic + Svelteでアプリを作ってみる
16. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 16 • CapacitorのブラウザAPIをインストールして試してみる Capacitor + Ionic + Svelteでアプリを作ってみる Pluginの動作検証
17. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 17 Capacitor + Ionic + Svelteでアプリを作ってみる Pluginの動作検証
18. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 18 Capacitor + Ionic + Svelteでアプリを作ってみる
19. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 19 • SvelteKitも特に問題なく動くことを確認 ◦ SvelteKitのプロジェクトにCapacitorをインストールすれば良い ◦ 単にWebアプリケーションを移植するだけならこれでも十分 • 今回はIonicのルーティングシステムを使いたい ◦ URLベースだけではなく、タブやスタックベースの画面遷移 ◦ ヘッダーやボトムタブ、ポップアップなど様々なナビゲーションに対応 ◦ よりネイティブアプリっぽい動きが簡単に実現できる Capacitor + Ionic + Svelteでアプリを作ってみる 応用編
20. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 20 • Ionicのルーティングコンポーネントの例 ◦ ion-router ◦ ion-tabs ◦ ion-nav • 上記のコンポーネントに、コンポーネントを Custom Elementsとして渡す必要がある ◦ <svelte:options tag=”element-name”>を使う ▪ コンパイルオプションに customElement: trueを指定 ▪ 公式ドキュメントを見るといくつか制約がありそう ◦ customElement.define()を使う ▪ 今のところこっちが良さそう？ Capacitor + Ionic + Svelteでアプリを作ってみる ポイント
21. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 21 Capacitor + Ionic + Svelteでアプリを作ってみる
22. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 22 • 結論としては作れそう • 課題感 ◦ できれば、IonicのSvelteKitの公式サポートパッケージが欲しいが issueによるとリソースが足りないのでまだ対応予定はないとのこと ◦ Ionicとの組み合わせ例が少ない（ほぼない）ので、ある程度調査・検証が必要 ▪ https://github.com/Tommertom/svelte-ionic-app ▪ このリポジトリが多分 1番有名 • ただし、Ionicのルーティングシステムは使っていないので 一部の動きはネイティブっぽくない部分もある • 今後も頑張って調査・技術移行を進めます。 引き続き、ブログやTechBarで共有できればと思います！ まとめ ネイティブアプリもSvelteで作りたい