Yumemi.apk #5 ～Kotlin夏祭り～ Session 2

https://yumemi.connpass.com/event/219861/

Transcript

1. Jetpack Compose for Web で
   ちょっとしたサイトつくってみた
   2021.09.10 Yumemi.apk #5 ～Kotlin夏祭り～
   

   View Slide

2. おかやまん
   • Android App Developer
   • 株式会社ゆめみ（2019年11月入社）
   • 猫ちゃんを飼いはじめました
   • 副業やってます
   blendthink
   

   View Slide

3. View Slide

4. Jetpack Compose for Web ってなぁに？
   ● Jetpack Compose を基盤にしているリアクティブ Web UI
   ● Web アプリの UI 開発を簡素化・高速化
   ● 将来的に、Web・デスクトップ・Android アプリの間で UI コードの共通化を狙って
   いる
   ● タイプセーフに HTML や CSS が書ける
   ● まだアルファ版
   

   View Slide

5. https://compose-web.ui.pages.jetbrains.team
   

   View Slide

6. チュートリアルやってみる
   先ほどの Web サイトの下部にチュートリアルのリン
   クがあります。
   ツールのバージョン要件とかあるのでお気をつけく
   ださい。
   ● JDK 11 以上
   ● IntelliJ IDEA Community Edition or Ultimate
   Edition 2020.2 以上
   

   View Slide

7. 1. プロジェクト作成
   

   View Slide

8. 2. settings.gradle.kts を更新
   

   View Slide

9. 3. build.gradle.kts を更新
   

   View Slide

10. 3. build.gradle.kts を更新
    

    View Slide

11. 4. 必要なフォルダを追加
    ●
    src/jsMain/kotlin
    ●
    src/jsMain/resources
    

    View Slide

12. 5. resources に index.html を追加
    

    View Slide

13. 6. Main.kt を追加
    

    View Slide

14. 7. プロジェクトを実行！
    ./gradlew jsBrowserRun
    

    View Slide

15. View Slide

16. View Slide

17. 実際に、ポートフォリオ作ってみました
    

    View Slide

18. 実際のコードへ
    

    View Slide

19. ご静聴ありがとうございました
    

    View Slide