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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

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シッター

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 11 Svelteについて技術移行を通して、Svelteを書いて感じたこと（個人的見解） ● キャッチアップが比較的容易 ○ ドキュメント、チュートリアルが豊富 ○ リアクティブな記述が簡単（少し癖はある） ○ 状態管理も公式が提供しており、わかりやすく使いやすい ● フロントのコードがかなり簡潔に書ける ○ マークアップとスクリプトの接続がわかりやすい ○ コードの記述量が少ない ● 今のところ大きなデメリットを感じていない ○ 少なくともAngularよりは書きやすいのではないか

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 13 ● Capacitor ○ Web標準の技術で書いたコードをネイティブアプリとして動かすランタイム ○ Plugin APIで便利なネイティブの機能を利用できる ○ プッシュ通知やカメラアクセスなど豊富なネイティブ機能を呼び出せる ● Ionic ○ ネイティブアプリ開発に適した UIを提供するフレームワーク ○ 画面遷移もネイティブアプリに近い形で実現できる ● Svelte ○ アプリケーション開発に利用 ○ ルーティングはIonicに任せるのでSvelteKitは使わない Capacitor + Ionic + Svelteでアプリを作ってみる主に開発に用いる技術

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 19 ● SvelteKitも特に問題なく動くことを確認 ○ SvelteKitのプロジェクトにCapacitorをインストールすれば良い ○ 単にWebアプリケーションを移植するだけならこれでも十分 ● 今回はIonicのルーティングシステムを使いたい ○ URLベースだけではなく、タブやスタックベースの画面遷移 ○ ヘッダーやボトムタブ、ポップアップなど様々なナビゲーションに対応 ○ よりネイティブアプリっぽい動きが簡単に実現できる Capacitor + Ionic + Svelteでアプリを作ってみる応用編

Slide 20

Slide 20 text

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 20 ● Ionicのルーティングコンポーネントの例 ○ ion-router ○ ion-tabs ○ ion-nav ● 上記のコンポーネントに、コンポーネントを Custom Elementsとして渡す必要がある ○ を使う ■ コンパイルオプションに customElement: trueを指定 ■ 公式ドキュメントを見るといくつか制約がありそう ○ customElement.define()を使う ■ 今のところこっちが良さそう？ Capacitor + Ionic + Svelteでアプリを作ってみるポイント

Slide 21

Slide 21 text

Slide 22

Slide 22 text

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で作りたい