kotlin/js + react.jsでは、基本的にkotlinで書くことになる。
また、npm（yarn）を使う方法と、Gradleを使う方法とある。
コンポーネントの定義はRComponentを継承することにより行う
また、「RBuilder.コンポーネントの呼び出し名()」も定義する必要がある。 こちらはPropsを使う時にいじる必要が出てくるところである。
定義したコンポーネントは、コンポーネントの呼び出し名()とすれば使用することが出来る。
文字の表示は、それぞれのコンポーネントのrenderに入れることで反映させることが出来る。
kotlin/js独特の文法として、HTMLタグの中に文字などを入れる場合は先頭に+を入れる必要がある。
例
h1{+"Hello world"}
変数、関数などもHTMLタグの中に代入することも可能である。 その際にはkotlinの文法である"${}"を使うと良い。
この中は普通にkotlinの文法が使えるので、変数も関数も問題なく入れることが出来る。
なお、そもそも文字列を入れない場合は、ダブルコーテーションで囲まずにそのまま書いてもよい。
例
例えば、引数に整数を渡せば、それの二乗を返り値に持つ関数,square()があるとする。
これの引数にnumを渡して利用する場合には次のように書けばよい
h1{+"${square(num)}"}
特定の表示を繰り返し表示したければHTMLタグとなるところをそのままfor文やwhile文で囲めばよい。
また、その流れでif文でもできると思われるが、もしかしたら避けたほうがいい記述かもしれない。
ReactでもおなじみのStateとは、特定のコンポーネントが、そこで必要な値を 保持するために使うものである。
例えば入力された値であったり、サーバーから受け取った値などである。
kotlin/jsでこれをコンポーネントに適用するためには以下のステップを踏む必要がある
- Stateに保存する値を定義するためのインターフェイスを、RStateを継承して定義する
- 使用したいコンポーネントで、RComponentを継承するときに、<RProps, State>の Stateを、1.のインターフェイス名に変更する
- コンポーネント内で、State.init()をオーバーライドして、Stateの値を初期化する
また、state内の値を呼び出す際には、「state.呼び出したい変数名」 という形で書くことが必要である
あるコンポーネントで得られた値を、特定のコンポーネントに 引数のように渡したいという時にPropsを使う。
Propsで受け取った値はStateに保存することが多いように感じる
kotlin/jsでこれをコンポーネントに適用するためには以下のステップを踏む必要がある
- Propsで受け取りたい値を定義するためのインターフェイスを、RPropsを継承して定義する
- 1.で、Propsというインターフェイスを定義したとすると、使用したいコンポーネントで
RComponentを継承するときに、
class コンポーネント名(props: Props)<Props, State>(props)
の ように変更する RBuilder.コンポーネントの呼び出し名(1.で定義した変数を満たす分の引数) = child(コンポーネント名::class){Propsの部分の初期化 (attrs.hogehoge = hogehogeのように)}
といった感じにRBuilderの拡張関数を変更する
また、Stateの初期化の際にPropsの値を利用したい場合は、 Props型のものを引数に持たせることが必要である。
Propsに値を渡す際はコンポーネントを呼び出すときに、hoge(value)といった具合に 引数として記述する必要がある。
kotlin/jsでは、cssファイルもkotlinで書くことが可能である。
従ってcssも型安全で書けるという意味では有効である。
しかし本来cssとktファイルに分けてゐたものを一つにするため、コードはより丁寧に 書く必要がある。
また、こちらはyarnやnpm等で導入する必要がある。具体的には以下のコマンドを打てばよい
yarn add @jetbrains/kotlin-css @jetbrains/kotlin-css-js @jetbrains/kotlin-styled inline-style-prefixer styled-components@4
これによって書くことが出来るようになる。
実際にkotlinで書くには、本来使っていたHTMLタグ（h1等）にstyledをつける （styledH1）必要がある。
その後、そのタグの中でcssのくくりを書き、その中で記述していく必要がある
記述例
styledH1{css{backgroundColor = Color.red}}
もちろんここに変数を入れることも可能である。
ちなみに単にcssファイルで書くことも可能である。
上の書き方であれば、特定のHTMLタグにしかスタイルシートにしか適用できない。
そこで、複数のHTMLタグに適用できるものとして、StyleSheetクラスが存在する。
これをobject型のものに継承させて記述することで、cssのセットのようなものを作ることが出来る。
具体的には、「val 変数名 by css{}」と記述して、中にはchildren(HTMLタグ){}等と書いて適用させる。
またこれを利用する際には、単に使用したいHTMLタグのcssのところに 「+継承したobjectの名前.変数名」としてやるとよい。
全体のテーマを合わせる為に、ページ全体に共通のcssを適用させたい場合があるとする。
その際にはmain関数の中に特定の記述をすることが必要である。
具体的には、StyledComponents.infectGlobal(CSSBuilder().apply{}.toString())を 記述する必要がある。
これをmain関数の中に入れたうえで、apply{}の中にkotlinベースのcssを書くことで適用できる。
通常のHTMLタグであれば「div(classes="hoge"){}」のようにして クラス名やid名を割り振ることが出来る。
しかし、styledのついたHTMLタグの場合は、そのタグの中のcss{}の中に記述する必要がある。
記述の仕方は、「classes = mutableListOf("hoge", "foo", "bar")」といった感じである。
これによってbootstrap等のcssのフレームワークの導入も簡単にできる。
HTMLタグの一つであるInputタグを用意して、そこに入力した値を使いたいことがある。
その際にはinputタグの中にattrsタグを用意する必要がある。
このタグの中にonChangeFunctionを用意することで、値変更時の動作を書くことが出来る。
Inputの場合、入力された値はit.targetに格納される。
この値はリアルタイムで変更する。
URLごとに処理を変えたいという場面は当然存在する。
その際にはRouterを導入することが必要となってくる。
Routerを導入する際には「yarn add @jetbrains/kotlin-react-router-dom」を実行する。
また、私の環境ではオリジナルの方の導入も必要であった。これは必須だろうと思われる。
つまり、「yarn add react-router-dom」もセットで実行する必要がある。
Routerは、コンポーネントの１つとして記述する
Reactでは従来のクラス型、最近流行りの関数型の二つを使うことが出来る。
これらはもちろんkotlin/js + react.jsでも使用可能である。
ここでは、とりあえず両方扱えるようにしておく。
これまではクラス型で書いてきたので、次は関数型で記述していく。
関数型はHooksが使えるので、これを利用しつつ組んでいく形になる。
https://github.com/JetBrains/kotlin-wrappers/blob/master/kotlin-react/README.mdここを読めば大概のことが書いている。要参照。