Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@koffee0522

Kotlin~MPP~ 【フロントエンド React編】

More than 1 year has passed since last update.

Kotlin~MPP~ 【フロントエンド React編】

概要

公式のチュートリアルをしてみたのでそのまとめです
Create React Kotlin App
公式チュートリアル

準備

以下をダウンロード
npm Download/Install
yarn Download/Install
IntelliJ IDEA Download/Install

プロジェクト作成

$ yarn create react-kotlin-app <プロジェクト名>

最初のページ作成

main関数はKotlinプログラムのエントリポイントです。
main関数内にrender関数を記述します。

Main.kt
fun main() {
    // ここはお決まり
    render(document.getElementById("root")) {
        // <h1>Hello</h1>タグはReact.ktでは以下のようになります。
        h1 {
            // ※文字列を表示したい場合は先頭に『+』を記述する必要があります。
            +"Hello"
        }
    }
}

componentの作成

クラスコンポーネント

MyClassComponent.kt
interface State : RState {
    var name: String
}

inteface Props : RProps {
    var text: String
}

class MyClassComponent(props: Props) : RComponent<Props, State>(props) {
    override fun MyClassComponent.init() {
        // stateの初期化
        text = "MyClassComponent"
    }

    override fun RBuilder.render() {
        div {
            h1 {
                +"${props.text} ${state.name}"
            }
        }
    }
}

fun RBuiler.myClassComponent: ReactElement {
    return child(MyClassComponent::class) {}
}

ファンクションコンポーネント

myFunctionComponent.kt
fun RBuilder.myFunctionComponent(text: String): ReactElement {
    return h1 {
        +"${text} myFunctionComponent"
    }
}

呼び出しかた

Main.kt
fun main() {
    render(document.getElementById("root")) {
        myClassComponent {
            text = "Hello"
        }
        myFunctionComponent("Hello")
    }
}

Styleの適用

cssファイルを使用する場合

Main.kt
// main関数でrequire
fun main() {
    // src以下のcssを読み込む
    requireAll(require.context("src", true, js("/\\.css$/")))

    render(document.getElementById("root")) {
        h1("title") {
            +"Hello"
        }
    }
}
main.css
.title {
    color: #000;
    fontSize: 32px;
}

styled-componentを使用する場合

パッケージをインストール

$ yarn add @jetbrains/kotlin-css @jetbrains/kotlin-css-js @jetbrains/kotlin-styled inline-style-prefixer styled-components@4
Main.kt
// main関数でrequire
fun main() {
    render(document.getElementById("root")) {
        // styled + タグ名で「css{}」が使用できる
        styledH1 {
            css {
                color = Color("#fff")
                fontSize = 32.px
            }
            +"Hello"
        }
    }
}

npmパッケージの使用

kotlinでjsのモジュールを呼び出すには一手間必要です。
サンプル:react-playerを呼び出す。

jsの場合

import ReactPlayer from 'react-player'
// ...
<ReactPlayer
  url={url}
/>

kotlinの場合

モジュールの設定

@file:JsModule("react-player")

import react.*
// jsの「export default」のこと
@JsName("default")
external val ReactPlayer: RClass<ReactPlayerProps>

external interface ReactPlayerProps : RProps {
    var url: String
}

呼び出し

// ...
ReactPlayer { attrs.url = url }

REST APIの使用

ブラウザのfetchを使用した場合

fun fetchData() {
    window.fetch("https://url").then {
        it.json().then {
            return it
        }
    }
}

coroutinesを使用(async/await)

suspend fun fetchData() =
    window.fetch("https://url")
                    .await()
                    .json()
                    .await()

感想

npmのモジュールを使用する際に一手間かかるのとHooksが使用できない(ライブラリーがあるかも?)点が少し不便だと感じました。

ただkotlinで書くので、コルーチンや型の安全性、便利なkotlin組み込み関数などが使用でき、IDE(IntelliJ IDEA)の補完やインポートが便利なため悪くないと思います。

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
koffee0522
関西風エンジニア すぅきぃ〜❤️ ネイティブ・フロント・サーバーレス Kotlin/TypeScript/Go/Firebase/DivOps/Serverless
arsagapartners
最高品質を最速で。 業務未経験でも最速最高の成長を!

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?