8
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【初心者向け】Flutterを最速で入門する3つの方法

Last updated at Posted at 2020-07-13

Flutterとは

__Flutter__はGoogleが開発している__クロスプラットフォームのUI構築用フレームワーク__です。
現状多く使われているのは__AndroidとiOS__ですが、将来的にはWebやDesktopアプリの制作も可能になるとのことです。
(現在WebはBetaテスト、DesktopはAlphaテスト中です)

公式ページに使っている企業が掲載されています
https://flutter.dev/showcase

言語は__Dart言語__が使われており、こちらもGoogle開発の言語です。
__JavaScriptに似た文法__ですが、JavaScriptよりも型関連の機能が充実しており、
__IDEを使うととても書きやすい__言語です。

またFlutterの記法はWebフロントエンドでよく使われる__宣言的記法__であり、
Webフロントエンド(特にReact)を経験したことのある人は、すぐに書けるようになります。

しかし、新しいフレームワークのため、どこから手をつけていいかわからない方も多いと思われます。
そんな方のために、自分が実際に取り組んだ方法をご紹介したいと思います。

1. 全体の流れを把握する

残念な話ですが、Flutterに関して公式の日本語ドキュメントは存在せず、
情報は英語がメインになります。

特に、最初に流れを把握するのが英語だときついという方は書籍を買うのがおすすめです。
自分にはこの本が良さそうでした。
基礎から学ぶ Flutter

ただ、全体の流れに関してはどの本もあまり変わらないので、
自分がいいと思った書籍を買うといいと思います。

英語でも大丈夫、無料がいいという方は、Flutterの公式チュートリアルがおすすめです。
https://flutter.dev/docs/get-started/install

2. 公式ドキュメントを参照する

全体の流れを把握できたら、実際に自分でアプリを作成すると思いますが
このWidgetはどんな風に使うんだっけとなることが多いです。
このときは、素直に公式のドキュメントで検索すると早いです
https://flutter.dev/docs

ListViewの動きやレイアウト、アニメーション関連はYoutubeの公式動画を見るとわかりやすいです。
https://www.youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG

また、少し理解するのが難しくなるもしれませんが、IDEでWidgetのソースコードとコメントを読むと
どんな風に動くかが確実にわかるので、できる人であればおすすめです。

__Visual Stuido Code__と__Android Studio__は、調べたいクラスをcontrol + clickでソースコードを見ることができます。(Macだとcmd + click

3. サンプルアプリを参考にする

実際にWidgetの動作を確認したい場合は、FlutterのWidgetのサンプルが大量に載ってあるアプリがストアにいくつもあるので、それを参考にするといいです。

自分は__Flutter Catalog__をよく使います。(アプリストアのURLはリンク先にあります)
Firebaseの実装もあって参考になります。
Flutter Catalog - Github

Flutter公式からも同様なアプリが出ています(こちらのストアはAndroidのみ)
Flutter Gallery - Github

まとめ

まとめてみると、英語力が必要そうに見えますが
Googleのページ翻訳でも結構なんとかなる範囲です。

この記事を機にFlutterに触れてみる人が少しでも増えたら幸いです。

8
8
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?