kotlinを触った後にFlutterを触ってみて感じた感想

#初めに
　この記事では、Kotlinを触った僕がFlutterを使ってみた感想を紹介します。
なぜ、僕がこの記事を書こうと思ったかというと、初めにKotlinを触ったあとにFlutterに入門してそのアプリ開発の手軽さに驚いたからです。KotlinもFlutterもとても良い言語・フレームワークですが、KotlinとFlutterを比較し僕の経験・知っている範囲で僕個人の意見を紹介させていただきます。
　なお、記事の投稿に関しては初心者なので誤字脱字などあるかと思いますが、温かく見守ってください。＼(＾ー＾)／


![flutter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1409495/99539c2b-4334-195d-6810-d0e8bf43293d.png)
![icons8-kotlin-480.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1409495/6664c166-7655-b4a5-b1cd-122126bc7526.png)

##アプリレイアウトのやり易さ
単純なレイアウト　→　Kotlin
複雑なレイアウト　→　Flutter
　こんな感じ。
###・Kotlinのレイアウト
　Kotlinはxmlファイルにレイアウトを書いていきます。[Android studio](https://developer.android.com/studio?hl=ja)にはデザイン機能が付いており、xmlファイルをデザインモードで開ことで簡単にGUIからアプリデザインをすることができます。この機能では、簡単なデザインならほとんど完璧に作ることができます。
![AndroidStudioDesign.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1409495/32bd17ae-c316-b9ff-b0c3-fe1248dc6030.png)
こんな画面。

赤い箱の中にいろんなWidgetがあり、それを白い画面の中にドラッグ＆ドロップしていくと簡単にデザインが作れます。xmlに切り替えるには青い箱の中のCodeを押します。
![as2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1409495/4f902628-0a85-68e0-9317-51f9907bcb94.png)

　xmlを直接編集してもデザインを作ることができますが、初心者には少し難しい気がします。決まったWidgetのタグがあり、それを正しく配置していくことでデザインします。

　ではどこに問題があるかというと、レイアウトのやり方をググル時です。ほとんどのサイトではxmlのコードを解説しており、デザインモードからのデザインができないことがあります。
　さらに、xmlタグの名前と赤い箱の中にあるWidgetの名前が対応していない時があります。（赤い箱の中には一見異なるWidgetでも実は同じxmlタグで、プロパティーだけ変えてあるものも多くあります。）
　さらにさらに、Widgetのリストの中に表示されていないものもあり、デザインモードがあっても結局あてにならず、コードから編集することもよくあります。

　一つだけのページのアプリであれば簡単にデザインすることができるため、簡単なアプリではKotlinがいいと思います。ただし、僕がサイドバー（横からニュッと出てくるバー）を作るときは、少し苦労しました。

###・Flutterのレイアウト
Flutterのレイアウトは直接コード内に書き込みます。

```dart:main.dart(レイアウトが書いてあるところのみ抜粋)

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              'Qiita',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }
}
```

　書いてみると[React](https://ja.reactjs.org/)に似てるなと感じました。

　ここで、コードで書くならKotlinのxmlと同じじゃないかと気づいた人もいるかもしれません。ですがKotlinのxmlよりも分かりやすく簡潔に書くことができます。イメージでいうと[React](https://ja.reactjs.org/)のように処理とレイアウトを一緒に書いている感じですね。ただ、Widgetのスタイルも一緒に書き込むので、コードの改行が多くなり初めて見たときは少しコードが長いように感じるかもしれません。（中身は簡潔です。）
　なので、難しいレイアウトを書くときはFlutterが書きやすいと感じました。


##環境構築
　環境構築は完全にKotlinです。
理由→Android Studioをインストールするだけだから　以上
###一応　Flutterの環境構築
・Flutter SDKのダウンロード（Android studioのインストール前にやったほうが楽かな？）
・zipファイルの展開（Cドライブの直下とか）＆パスの登録＆再起動（パス登録を反映するため）
・Android Studioのインストール

環境構築では、KboyさんのYouTubeチャンネルに動画が上がっていますのでこれを参照してください。
僕も見ました

####Windows
<iframe width="560" height="315" src="https://www.youtube.com/embed/6J-KK1Ft9NY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

####Mac
<iframe width="560" height="315" src="https://www.youtube.com/embed/kpvVENfDCRc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

##学習のしやすさ
　これに関しては人によると思います。
**Kotlin** は[Android 公式チュートリアル](https://developer.android.com/courses?hl=ja)があります。
コードラボの中は、いくつかの英語の動画が埋め込まれていてお姉さんたちが優しく解説してくれます。文章での解説は日本語で、Kotlinの基礎文法からAndroidアプリの開発まで順番に解説してくれます。
　しかし、KotlinがGoogleのAndroidアプリ開発推奨言語に指定されたのは2019年で最近のことなのでYouTubeで勉強するには日本語の情報が少し少なすぎるかもしれません。また、Androidのバージョンによっての違いも大きいため、Google先生で検索してやっと見つけた情報もAndroid Studioにコピペしてみたらエラー吐いてあてにならないこともよくあります。

　これに対し **Flutter** はKboyさんやFlutter道場さんなどのYouTubeチャンネルでたくさんの解説動画が上がっているため学習しやすいと思います。チュートリアルは英語だったかな？こちらも新しいフレームワークであるため日本語の情報は少ないと思います。ただしYouTubeに関してはたくさんの情報が上がっているため学習には困らないと思います。
　ただしFlutterが採用しているDartという言語のエラーを解決するには情報が少ないと感じました。エラーでググルと[スタックオーバーフロー](https://ja.stackoverflow.com/)で英語の情報が沢山出てきます。
Google先生で適当に翻訳すればいいと思います。

##言語・開発の安全性
　これはKotlinのほうが少し上回ると思います。
理由は、Androidアプリに関してはGoogle先生が推すKotlinが本家なので安心感はあります。
　また、Flutterは自前のレンダリング（画面描画システム）らしいので、ちょこちょこと不具合を耳にします。（最近は改善されてきています。）
　言語の基本的な安全性に関しては、Flutterの急速な進化によって同じくらいになりました。
・null安全
・推奨されてない部分を修正するコマンドの追加など

``` console
$ dart fix
```
もともとDartにはnull安全がついてなかったんですね～
null安全によってアプリのクラッシュ率がググっと下がります。こりゃ良いですね。

##クロスプラットフォーム開発
　100%　Flutter

そりゃそうだ。
それ用にGoogleが本気で開発してるんだからやっぱりそうだ。
KotlinにもKotlin Nativeがあるそうです（僕は知りません）。ですが、iPhoneになるとAPIが違うのでまるっきりコードも書き換えになるそうな．．．

**Flutter**　強し
##ネイティブ機能を利用した開発について
　Flutterを使用してネイティブAPIを使うのはとても簡単ですが中身をよく理解するためにはKotlinやswiftなどの学習が必要だと思います。
　例えば、Androidで位置情報にアクセスするのにはパーミッションを取得する必要があります。
**AndroidManifest.xml** という設定ファイルのようなものに権限の取得について書き込まなければなりません。↓

```xml:AndroidManifest.xml
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.INTERNET" />
```
　もちろんそれはFlutterから行う時も例外ではありません。もともとネイティブ開発の経験がある人であれば分かるかもしれませんが、Flutterから入門した人がなんだかわからないファイルにあれこれ書き込むのも怖いと思います。
　ネイティブ機能についてしっかりと理解しておけばFlutterからの開発でもやることがだいたい予想がつきスムーズに開発できると思います。
　ちなみに、この前[KboyさんのGithub](https://github.com/kboy-silvergym)を見てみましたが、しっかりとネイティブのコードも乗っけてありました。YouTubeで **Flutterを爆推し** しているKboyさんでもしっかりネイティブ経験しています。ネイティブを少し学習してからFlutterを学習する流れでも悪くないかもしれないですね。
　Flutterから入門しようとしているそこのあなた！　ネイティブの学習も悪くないですよ💛

## 人気
　これもやはりFlutter
YouTubeを見ていても日本語の動画は断然Flutterです。
　やはりクロスプラットフォームが強いと思います。やはりアプリ開発で独立したい人にとってFlutterは学習コストを低く抑えてAndroid・iPhoneの両方を開発できるのというとても魅力的なものだと思います。さらに、Google以外の大企業でも続々とFlutterを採用する事例が出ているため今後さらに伸びることが予測されます。
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">🚙 The future of <a href="https://twitter.com/Toyota?ref_src=twsrc%5Etfw">@Toyota</a>&#39;s infotainment systems will be powered by Flutter.<a href="https://twitter.com/ToyotaConnected?ref_src=twsrc%5Etfw">@ToyotaConnected</a> is building Flutter right into the heart of their vehicles. Catch <a href="https://twitter.com/danielthall?ref_src=twsrc%5Etfw">@danielthall</a> at <a href="https://twitter.com/hashtag/FlutterEngage?src=hash&amp;ref_src=twsrc%5Etfw">#FlutterEngage</a> as he talks more about their plans with us!<br><br>On now 👉 <a href="https://t.co/T9025C5NCV">https://t.co/T9025C5NCV</a> <a href="https://t.co/pSn299QF9P">pic.twitter.com/pSn299QF9P</a></p>&mdash; Flutter (@FlutterDev) <a href="https://twitter.com/FlutterDev/status/1367174378387988480?ref_src=twsrc%5Etfw">March 3, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

##これから
　僕的にはKotlinの安定感も捨てられません。これからもKotlinの開発は続けていこうと思いますが、Flutterの便利さもなかなかなので迷うところではあります。
　これからもKotlin・Flutterの両方の発展を願っています。さらにネット上の情報が増えて、スムーズに開発することができるようになればいいなと思っております！！