こんにちは。Flutterエンジニアになって、2年ぐらいが経ちました。始めた頃は、本当にエンジニアになれるのかな？？と思いながら勉強していました。今でも本当にFlutterエンジニアとしてちゃんとできているのかと不安になりますが、毎日勉強しています。
Flutterを書いていく中で、どうしてもネイティブの実装をしなければいけないと感じることが多くなり、ネイティブ（iOS/Android）のコードを見たりしていました。
たまたま時間があったため２日間、Jetpack Composeを勉強してみることにしました。
Jetpack Composeを勉強してみたいと思った理由として
-
Androidエンジニアの同期に聞いてみたところ、「Swiftを少しでもやっていたら、基本的な文法が似ている」とおすすめされた。
-
Jetpack ComposeはFlutterの書き方に似ていることをうっすらと知っていた。
-
名前がカッコよかった。
などの理由で始めてみました。
やってみたこと
１、Android Composeのチュートリアルを進めてみる。
このページでは、
- Android Composeのチュートリアルで書かれている単語の理解（コンポーズなど）
- 簡単なUIの作り方（Text）
- サンプルアプリに書いてあるコードの理解(@Composableの意味など)
をしていました。
その中でも特に力を入れたことは、
- 書いてあるコードはFlutterで言うと何のコードになるのか
を考えながら調べていました。その理由としては、理解が早いと思ったからです。
例えば、
Jetpack Compose
@Composable
fun Greeting(name: String) {
Column {
Text(text = "Hello!")
Text(text = "Android!")
}
}
Flutter
Column(
children: const [
Text('Hello!'),
Text('Flutter!'),
],
),
個人的な意見として多少「ん？？？」となる部分がありましたが、書き方としてはほぼ同じだなと感じました。どちらもみるだけで理解できるとても簡単な書き方ですね。
２、Widgetについて慣れてみる。
特にこの２つのGifはとても理解するのに助かりました。
Column
Row
Flutterで使っているMainAxisAlignmentやCrossAxisAlignmentの書き方がとても似ていることがわかりました。
３、Todoアプリを模写してみる
これは正直なところ、完全には理解できないくらい難しい難易度でした。Widgetの理解がまだまだだったのに加えて、データベースの操作など、わからないことばかりでした。とりあえず動かせるぐらいになりました。
上の実装のままだとエラーになることがありましたので少し手を加えたものを載せておきます。
app/src/main/java/com/example/android_todo_appのファイルにあります。
ここでは、
- dabase
- model
- ui/theme
- utils
- viewmodel
- MainActivity.kt
に分けてみました。（間違っていたりしたら教えていただけると幸いです。）
僕なりにFlutterっぽいフォルダー構造にしてみました。
感想
とりあえず、２日間やってみての感想としては、
- WidgetがFluterっぽくてオモシロイ。
- importが多すぎ
- ファイルの切り分けがとても楽
- 書き方に癖があるものの、全く理解できないわけではない
- 関数で UI を描画できるのが鬼すごい
ゴールデンウィークでお休みなので初めてみてもいいのではないかと思いました。
ポエムだけだと、いい情報を共有できていないので、後日に技術的な記事を投稿いたします。