ep.43 『フロントエンドエンジニアからみた Flutter』 - LINE のフロントエンドエンジニアの GW | UIT INSIDE

2020/05/25 に公開2369 views

このエピソードについて

LINE のフロントエンドエンジニアの GW の活動を5日連続で紹介する企画 vol.1。初回は @potato4d と @spring_raining が、 @xingoxu の GW 企画「Flutter でのカレンダーアプリ作成」について話を聞きました。

まとめはこちら: GWを利用した自由研究発表会を開催しました - LINE ENGINEERING

ゲスト

https://github.com/xingoxu
フロントエンド開発センター UIT フロントエンドエンジニア
自由研究でやったこと
- Flutter によるカレンダーアプリ開発
  - https://github.com/xingoxu/my_first_flutter_app

テーマ選定の理由

アプリ基盤の選定理由
- API サーバーから見れば、Web もアプリも同じクライアントである
- その中で、 Web クライアントだけに意識が凝り固まることは良くないので、アプリ側の視点を得るために挑戦してみた
Flutter の選定理由
- Ionic などのアプローチと比較して後発の技術である
- 違う文法や作法を体験して、Webかアプリかだけでなく、思想や言語単位でも視野を広げたい

インプレッション

シンタックスは React に近く、書き心地は悪くない
- Dart および Flutter 特有のウィジェットを使うのが、 HTML tag と違って追加の学習が必要となる
開発環境のサポートは良い
- VSCode プラグインなど、エディタ環境は整っている
- ドキュメントもDart言語に内蔵されており、ブラウザで調べなくてもさくさく書けます
Dart に JavaScript とのパラダイムの違いはある
- List(Array) / Object について、 Object Oriented の言語の概念が先行しているため、Class が中心となっており煩雑な部分はある
iOS / Android では基本的に同じコードで動作可能
- OS フレンドリーな UI を求めると書き分けが大量になるというよくある自体は起こりづらい

課題感

Flutter の UI コンポーネントについての資料が少ない
- 実装はされていても、使いたいものがどれかを探すのが大変
Material Design を遵守するコード以外が記述しづらい
- 整った UI を作りやすい一方で、自由度が低い

これからと業務

Flutter の知識が業務で活きることは多くなさそう
- だが一方で、普段のフロントエンドの知識が Flutter へと転用できたり、逆に Web の知識の広さを体験できた

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

Guest 00:00
こんにちは

Guest 00:00
こんにちは

Guest 00:01
今週もですねえ、UIT INSIDEやっていきたいと思います。え、まず、初めにこのポッドキャストについて紹介させていただきます。ditインサイドはえ、ユーザーインターフェースとテクノロジーを愛する開発者のためのコントキャストです。

Guest 00:21
フロントの内容をきゃチャップしていくことを目的としております。

Guest 00:25
今週はですねえ。ラインのフロントエンドンジアのゴールデンウィークという企画をえ、行いたいと思っております。こちらはですね

Guest 00:33
少しで前回のUIT INSIDEライブでえ、言及しましたけれども、ラインのフロントエンドエンジニアは。今回のゴールデンウィーク

Guest 00:41
5月。4月末から5月頭にえかけてあったゴールデンウィークの中でですね。各自好きなテーマを持ち寄って、えと、自由研究をするっていうようなえ企画を行っておりました。

Guest 00:52
そこでですねま、フロントエンドに関係するものえ、関係しないものろあるんですけど、各メンバーがですね。色々え自由研究というか、

Guest 01:01
で、色んなキャッチアップとか。え、インプットアウトプットをやっていたので、ま、ちょっとそこについて。今週はですね。毎日投稿っていう形で

Guest 01:09
紹介していきたいなと思っております。え、初回である今回はですね、

Guest 01:13
同じくえUITのえ、開発メンバーである。えと、しゅうさんをゲストにお呼びしてえ、フロンテンベインチアから見たフラッターという話をしていきたいなと思っております。

Guest 01:24
えしゅうさん、よろしくお願いいたします、

Guest 01:26
よろしくお願いします。

Guest 01:29
じゃ、それではですね、早速しゅうさん軽く自己紹介お願いしてもよろしいでしょうか。

2. xu さん自己紹介 01:30

Guest 01:44
ま、主にリフとあのリフト、あのbst系の方はやってます。あと、

Guest 01:53
スティッカーショップと、あの、あのLINEキャリアキャリアの方はちょっと助けに手出したりしてます。ほうほ

Guest 02:02
あじゃ、結構色々とプロダクトに携わってるっていう感じ。

Guest 02:06
そうですね、入社から、なんか、色々なプロジェクトを回してました。

Guest 02:13
しゅうさん今日は

Guest 02:14
はいよろしくお願いします。はい、

3. Flutter でカレンダーを作るまで 02:18

Guest 02:18
ではですねと、まず、今回のしさの自由研究、どんなことをやりました。っていうところを、簡単に説明してもらってもよろしいでしょうか。

Guest 02:25
はい、今回はあのフルタであの自慢のキャレンダーを作ってみました。

Guest 02:35
ど、なんかどのようなものというと、あの、まあgoogleカレンダーみたいに、

Guest 02:43
あの開いてみたら。なんかそういうあの、googleカレンダーがなんか月が一覧が見える、見え見える画面があるんじゃないですか。そこの

Guest 02:53
そこのu愛をちょっと真似して、1つを実装して、で、

Guest 02:59
あのタスクリストももう1つの画面として作ってみまして。で、あの自分がタスクを追加して、あの

Guest 03:09
設定した時間でなんか通知が来るようにあのしました。

Guest 03:16
あ、じゃあ、トゥードーリストとカレンダーが一緒になったみたいな感じですかね。うん、うん、うん、うん、うん、うん、なるほどなるほど、

Guest 03:22
結構今回はマンスリービーと、まあ、そのいわゆるリストビーが両方あるようなカレー。

Guest 03:28
うん、そうなんですね、

Guest 03:30
なるほど、ウェブでレイティブアプリ作る方法って、結構色々あると思うんですけど、なんでフラット選んだとかってあったりするんですかね。

Guest 03:38
理由としては、あのまろ他の

Guest 03:42
技術もあるんですけど、フォトは新しいなので、ちょっとやなんか触ったりして、

Guest 03:49
別の技術と比べてなんかいいあのもいいかなと思ってます。

Guest 03:56
はい、じゃあ結構なんか新しいモダンな仕組みがどうかっていうところを

Guest 04:00
そうそうそうそう体験してみたいなって、

Guest 04:03
今回あれですか。フラッターって、最近ウェブのエクスポートもあると思いますけど、普通にエネイティブアプリとして作ったって感じですかね。

Guest 04:10
今回、その目的としては、くらカレンダーを作るために。なので、あの、ちょっとアプリの方はあのや、先にやってみて、

Guest 04:20
そのあとなんかウェブ。でも、なんかエクスプランドできるのであれば、ちょっとあそこもちょっとやってみたいなって、まだまだできてないんですけど。

Guest 04:29
じゃ、まずはアプリファーストでやりながらま、ウェブのエクスポートもできたら面白いかなと思って。そうですね、ですね、などいます。

Guest 04:38
そうですね、確かにまあ結構フラッターはまあ、前から一応存在はしていたとはいえ、そんなにあのしっかりと使われるような技術として出たっていうのは

Guest 04:48
は全然最近だと思いますし、逆にアユニックとかであれば、そもそもコルドバの文脈とかを引き継いできたし、技術なんで、結構昔から

Guest 04:56
あったかなと思いますので、結構新しい挑戦としては、面白いテーマな気がしますね。

Guest 05:04
なんか、今回結構ま。今回のゴールデンウィークの企画って、フロントエンドに関するものの、発展系をやってる人も結構多かったかなと思う

Guest 05:13
思って、まあ、あとはまま全く関係ない。そのuiとかでじゃない領域をやってる人も結構多かったかな、という印象なんですけど、

Guest 05:21
今回フロントエンドっていうま、結構普段もの職務もやっぱりspa作るとか。ま、いわゆる。そのjsの世界でのクライアントっていうところが多いと思うんですけど、なんか今回

Guest 05:31
アプリ環境もやってみようかなって、題材とした理由とかって、なんかあるんですか。

Guest 05:36
なんか特別なんかいきなりあのああはなんかワから離れてなんかあり。世界にはあの

Guest 05:43
でではないんですけど、やっぱちょっとさちょ。あの、なんというか、フラッターのなんか、イントダイントダクションを見たら、

Guest 05:52
あの、結構ワブと似てるんの感じで。なんかアプリがさくさくかける

Guest 05:57
は1番。アトラアトラ、アトラクティブであ、ちょっとなんかやってみて、面白面白くてそういうことです。

Guest 06:07
なんか、あのまちょっと新しいものに挑戦しつつも、ウェブの感覚でアプリかけると面白そうかなみたいな

Guest 06:15
ところで、今回そうですね。なるほど、

Guest 06:20
ちょっと実際のあのアプリケーションの話に移っていきたいかなと思うんですけど、

4. ファーストインプレッション 06:21

Guest 06:26
今回、カレンダーアプリ作ったっていうところだと思うんですけど、カレンダーアプリ自体のジストの話もあれば、まあ、多分フラッターって言語が。

Guest 06:33
ダートだと思うんで、ダーとかどうだったっていうところとと、まあ、そもそもフラッターというそのかま、仕組み自体の話とかも

Guest 06:40
あると思うんですけど、実際触ってみてま。インプレッションと言いますか。まあ、触ってみて感じたこととかってあったら、はいはい、

Guest 06:46
色々話してほしいなと思うんですけど、うん、実際どうでした。使ってみて、

Guest 06:51
cocochaとしては、結構良いんですよ。あの、まずは、フラッターのあのレイアウトとしては、あの

Guest 07:01
フラックスのレイアウトです。なので、なんか結構cssとか触ったり、人にとっては結構近いと思います。

Guest 07:11
で、あのじじあの

Guest 07:15
なんかえて、なんかhtmlではないんで、ええ、htmlタグとは違ってるんですけど。でも、信託としては略とと近くて、

Guest 07:25
あの

Guest 07:27
ちょそんなに学習せ、学習のコストはそんなに高くないで、

Guest 07:32
あの、開発環境のサポートは結構とてもよいよくて、ウエコードとか、あの、

Guest 07:42
あ、ididajawのidaとか、androids、タストデーとか、

Guest 07:48
あのえ、エコードも全部サポートされされててて、なんか好きなエリカが

Guest 07:57
使えて作ることはできます

Guest 08:02
ま、vsコードですよねみんな多分bsコードと思いますワンタンドのみんなはで、あのbsコードとしてはま、書く時は、

Guest 08:13
datというプランを、あのエクステンションをインストールしたら、そのフルフルタとダットのエクステンションをインストールしたら、

Guest 08:23
ドキュメントは全部内蔵されてて、

Guest 08:26
で打った時は、あのインテリジェント。その自動予測は来るんじゃないですか。で、クリックしたら、全部ドキュメントも全部出て出てきました。

Guest 08:37
ある程度頭の中に入ってる場合は、もうわざわざ調べに行かなくても、

Guest 08:42
その点はまあタイプスクリックタイプ、スクリップみたいなものじゃない。

Guest 08:46
うん、うん、うん、なるほどなるほど、確かにタイプスクリプトも片手ファイルさえあれば、まあなんとなく当たりをつけていけば、

Guest 08:55
はい、あとはちょっと。あの、まあ悪い点というか、ジャバスクリプトとやっぱ違うんですよね。dtという言語はで、datという言語は、あの

Guest 09:07
性と動的両方結合してる言語です。はいで、そのjavavスクリプトは完全にど動的で。あのロンタイムで

Guest 09:18
あの動いてるんですけど、で、後はその先に片手があってて、で、

Guest 09:24
カンパイル1回はカンパイルするんですけど、で、ダイナミック

Guest 09:30
の方も合ってて、あの動的で動いてる時にあのか、なんかか型を転換する

Guest 09:42
してるんですけど、で、あの、なんだか

Guest 09:47
片手が持ってるとやっぱかぱ片手はいいんじゃないですか。うん、あの片手の時にな、やっぱじゃワースクープと違って、

Guest 09:56
あのオブジェクトとかあれのにおいて、ちょっとオブオブジェクトレンテドなので、

Guest 10:04
そことあの、直接なんかjavaseofjectとか全部直接定義できるんですけど、で、datddと

Guest 10:12
オブジェクトを直接定義すると、マップの方になっちゃって。

Guest 10:16
はいはいはいはい

Guest 10:17
で、なんか、そういうオブジェクトの方法とかはできないんですよ。

Guest 10:24
で、自分でなんかクラスを時々書かないとはいけない。ちょっとここのあたりは、ちょうなんかめんどくさくなっちゃったんですね、

Guest 10:33
確かになんかあれっすもんね。フラッターって、そのクラスベースの時代のリアクト感というか、ま、今ってなんかカスベースの

Guest 10:41
技術が多いと思いますけど。まあ、どっちかっていうと、まだダートという言語の中の使用にあった感じのフレームワーク感は

Guest 10:49
あ、あせりもありますしね。全体的に

Guest 10:52
全体的に。多分やっぱ昔のあの、今リアクトだと、なんかファンクションカポネントがうん、うん、うん、よく使われてるんじゃないですか。って、

Guest 11:01
あと、やっぱ昔のなんかカポネントクラスの方がよりちょっと近いと思います。

Guest 11:07
うん、そうっすね、確かに。確かに

Guest 11:10
その辺は普段最近最近のjsって言ったら、なんか怒られるかもしれないですけど、最近のjsとは、なんか書き心地がちょっと違うからっていう感じは確かに

Guest 11:21
しますね。

Guest 11:23
ちなみに、そのちょっと言語使用的なところで、私が興味あるから聞きたいんですけど、結構そのダートって、そのプロミスっぽい概念でフィーチャーってあるじゃないです。

Guest 11:33
あ、そうそうそうそう、ひいちゃん。

Guest 11:34
フィフィーチャーって、なんかプロミスとの書き心地の違いとかってなんかあるんですかね、

Guest 11:39
完全に一緒かと思います。

Guest 11:42
そうそう

Guest 11:43
あ、真クと青いの方法なんかあ、真空もそういうそういう分布もあるんですよ。

Guest 11:49
あ、シンクウェートのその使い方も完全に。なんかjyスクと一緒で、パクリかなって。

Guest 11:56
じゃあ、基本的にはほぼほぼかけごこちとしては、まあ名前が違うだけで一緒って感じですかね。

Guest 12:02
うん、うん、うん、うん、

Guest 12:04
これヒューチャーの場合ってこれ。私ちょっと今あのネットの記事開いてる感じだと、明治的に。あのジェネリックに型を指定してます。けど、ここは推論するって感じじゃなくて、明治的に書く感じなんですか。

Guest 12:15
あの、なんかし事前になんかあの片手木を付与付与してで、うん、そのかい

Guest 12:25
で乾杯をすることもできるんですけど。で、ダイナミック。直接付与する時もすることもでき。るん

Guest 12:32
うん、うん、うん、なるほどなるほど、そう

Guest 12:34
でもダイナミックになっちゃったら、一切全部ダイナミックにななっちゃって、で、まあ、アニメみたい。あ、あのタイプスピッツの兄みたいな、

Guest 12:42
はいはいはいはいはいだって、

Guest 12:44
そこをちょっとねわ。あんま良いこともあるし、悪いこともあるんじゃないですか。って、

Guest 12:49
基本的には明治的にしてやった方がいい。

Guest 12:52
そうそうそうまできる限りは、なんか明治的な方が。

5. クロスプラットフォームと Dart 13:00

Guest 13:00
じゃあ、次ちょっともう1個聞いていきたいんですけど、なんかやってみて、なんかこの辺が難しかったとか、この辺は逆になんか

Guest 13:09
普段の方が書きやすかったとか、なんかあったら聞きたいなと思ってるんですけど、

Guest 13:13
なんか悪いところというか、ちょっとイマイチなところというと、やっぱ若いんじゃないですか。フラッターは、まあ、去年

Guest 13:23
ま、ちょっと誕生から結構長いんですけど、でも、去年からいなんか押され、なんかgoogleから押されてて、で

Guest 13:31
ま若い。あの

Guest 13:36
し、あのコミュニティも若いなので、でか、マッケリアデザの

Guest 13:42
カポネントに対してのgoogleが勝手に定義してやってくれて、自分がちょ。なんかちょっとそのタディングとか、あのマージンとかちょっと調整したいですけど。え、どうしてここがなんか調整できないんですか。って

Guest 13:56
ネットで検索したら、あ、ここなんかあの、googleマテリアデザインのカポネントだから、

Guest 14:06
これが調整はできない。

Guest 14:07
ああ、なるほど

Guest 14:08
あ、そうそうそう結構なんかいいよいよな挙動ですねっていう、はい、はいはい、

Guest 14:16
気がするんですよね。あとは、あの、なんかドキュメントとしては、

Guest 14:22
あのはハードルというかいその全部紹介されてないんですよ。APIドキュメントはまあ全部

Guest 14:32
出しているんですけど、でも、apは結構なすごくカポネットが多いんですよね。やってました、そのカポネントすごく多いんですけど、でも、イントロダクションはそのだそその一部だけ紹介されてて、

Guest 14:44
で、以外、そのepドキュメント以外のドキュメントほとんどはないんですよ。で、そのか、ぴょそのカポネント、そのウィジェット。そもそもは知らないんですよ。

Guest 14:55
と、ここがじこ。このようなものを自装したい時は、どのどどのウジットが、どのカポネントが1番1番いいんですか。

Guest 15:05
で、わかんなくて、なんかほとんどgoogleとスタックオーバーフローだけで調べてて。

Guest 15:14
なるほど、実装上存在はするけど、どれがそれなのかがわかりづらいっていう

Guest 15:20
そうそうそうそうそう、そもそも知らないんです。

Guest 15:24
はいはい

Guest 15:25
で、そこの結構まとまった資料があんまなくて困ったって感じですかね。

Guest 15:30
そうですね、やっぱここなんか、フロントエンドのフレームワークがみんな最高かなって思ったんです。

Guest 15:36
うん、なるほど、なるほ。

Guest 15:38
確かにフロテンドフルマ、結構資料もたくさんありますし、まあ、やりたいことから逆引きできる感じはしますもんね。

Guest 15:45
ちょっと僕からその即関連にちょっと質問したいなと思ってたとこがあったんですけど、も、

Guest 15:52
どうしました。結構、そのギャクトネイティブ開発したことあるんですけれども、そういうなんて言うんですかね。ui周りが

Guest 16:01
難しくて、例えばあの一応そのiosとandroid、両方対応みたいな。

Guest 16:07
あ。はい、歌ってるんですけど、はい、結構

Guest 16:10
なんかこう開発してるうちに、なんかあいあいiosでしか動かないとか、androidでしか動かないみたいなとこが出てきたりとかして、結構そこら辺が

Guest 16:21
難しいなと思っていたんですよ。で、フラッターっていうのは、あの、その開発はどちらでされたんですかね。iostは

Guest 16:30
あ、僕やってるそのデバグしてる時は、あの、androidのエミレシミュレータで動いてるんですけど、はいで、

Guest 16:40
なんかまあ、

Guest 16:42
ちょっとネットでま。自分が実際にまあios直接ま開いてやったんですけど、そんなに問題がないんですけど、で、なんか、

Guest 16:52
リアクトネイティブとフラッタのなんかやって比べく記事もあるんですけど、ちょっと見たら、まりょ。

Guest 17:01
ラクトネイティブはやその例えばボタンの場合は、あのisのボタンを使う

Guest 17:09
androidの方は、androidのボタン。なんか、ネイティブのボタンを使うって、ちょっと。そのあの、見た目としては、両方、自分のネイティブ

Guest 17:20
のそのボタンを使うんですから。なんかちょっと違ったりしてるんですけど、あその

Guest 17:29
ぐフラッタの方は、完全にgoogleが自分があの

Guest 17:34
作ったそのレンダリングエンジンで動いてるから、両方のそのぼ

Guest 17:41
ボタンに対してのそのスタイルは完全に保証されます。

Guest 17:46
あ、あれですね、じゃあ、要するにそのもうマトリでデザインっていうことが前提になってるから、逆にそういうなん

Guest 17:54
で、その融和上の差によるこう違いみたいなのは、逆に怒りにくいっていうことなんですね。

Guest 18:00
そうですね、まあでもそれでもあまあ。iosでisのスタイルを使う、iondroidで、androidのスタイルを使うこともできる。

Guest 18:11
あ、できるんですね、そうそうじゃ、そこは割とあれですか。開発者の差かで変ですね。

Guest 18:20
うん、そうですね、

Guest 18:22
それはよさ、そうそう良さそう、

Guest 18:25
ちょっと最後にですね。聞いていきたいなと思うんですけど、実際ですね。今回フラッターでま。ちょっと違う言語で、マルチプラットフォームの開発ってのをやってみたっていうところが

6. 課題とこれから 18:26

Guest 18:37
あるかなと思うんですけど、それを踏まえて、なんか

Guest 18:40
あの、今回のえ、自由研究の内容ってのがなんか多分フロントエンドの開発で役立ちそうだなとか、こういったところはダートから学べそうだなみたいなところってなんかあったりしますかね。まあんまない

Guest 18:51
あんまないっす。あん

Guest 18:52
ままま正直と言うと、ちょっと危ないかもしれないですけど。でも、やっぱいや。

Guest 18:57
あのというと、あのフロントエンドの知識をネイティブの開発でも、生かすことはできました。

Guest 19:07
ああはいはいはいはい、なるほど、なるほど、逆にその今持ってる知識ってのは、そのフラッターの世界でも結構通用したのはそうそうそうそ、

Guest 19:16
そうそうそう、うん、それ通用してで、あ、アプリもそのebだけではなくて、アプリまでも作れるっていう

Guest 19:25
きょ、あの、なんていうか、ワクワクさんうん、うん、うん、うん。そういうあの面白さ

Guest 19:35
で生かせるってとってもいいなと思います。うん、うん、うん、

Guest 19:40
うん、うん、違う言語ではあるけれども。まあ、使える資産は近いみたいなところが結構よさでもあるって感じですか。なるほど、

Guest 19:49
ありがとうございますちなみに、最後に。じゃあもう1個質問ですけど、なんか次休みとかあったらフラッターまた、触ってみたいなと思ったりします。

Guest 19:58
ううん、わかんない

Guest 20:02
いや、とりあえず、これをなんか完全になんか自分が思いまままで、

Guest 20:10
はいはいはいる方あ、作ってみたいと思ってますして、また次は次のまた新しい技術というとか。

Guest 20:20
あの、もしくはまま。また、なんか、新しいアイデアがあれば、新しいアイデアを

Guest 20:28
やってみたいと思います。うん、

Guest 20:30
うん、うん、うん、なるほど、ありがとうございます

7. クロージング 20:36

Guest 20:36
というわけでですね。本日はえー。ラインフロントエンドエンジアのえ、ゴールデンウィーク、フロントエンドエンジアから見たフラッターというえ、テーマでですね。しさとともに

Guest 20:46
フラッターをえ、触ってみた。記録とえ、そのインテッションっていうところについて話していきました。

Guest 20:52
ラインのフロントエンド組織UITではですね。このようなフロントエンドに関するえ、自己計算やえー

Guest 21:01
議論などを日々行っております。え、毎週ですね、金曜日にですね。こういった議論をする勉強会などを行っておりますので、まあ、その様子などを踏まえて、今後もえ外部に発信していければなとえ考えております。

Guest 21:15
またですね、今週はこのあとあと4つ。自由研究について。発信していこうかなって思いますので、そちらもどんどん聞いていっていただければと思います。

Guest 21:24
それではですね、今日のえ、ポートキャスター終わりたいかなと思います。しゅうさん、ありがとうございました、

Guest 21:31
ありがとうございました。