【Flutter】ゼロから始めるFlutter生活#1【環境構築】

アウトプットも兼ねて、永尾 優磨がアプリ開発で
起こったことを書き綴っていきます。

新しい技術を学んでいく過程で起こったことを書いていくので、初めて
Flutterを使う人の参考になると幸いです！！


## はじめに
初めまして！！
優磨です！

少し、記事を書き始めた経緯を説明させてください！！


僕は、普段、[Notion](https://www.notion.so/ja-jp/product)を使っています。
書き心地がすごく良くて、気持ちいいためです。
エンジニアの方だと、使っている方も多いのではないでしょうか？？

最高に使いやすいNotionなのですが、少し不満があります。
それは、アプリを起動して、メモを始めるまでに、1,2秒ほどかかることです。

Notionは、検索もしやすいし、これまでのメモアプリ史上、最高です。
しかし、1,2秒したら、アイデアを忘れてしまう僕にとっては、
少し、不満です。

既に、Notionと連携して、早くメモを取ることができるアプリは、
何個かあります。

しかし、個人的には、
画面全部でメモができ、設定は裏側にあるUI
がいいなと思っています。
そこで、自分好みのUIを持つアプリを作成しようと考えました。


最終的には、Android、iOS、Mac,Windows,Linux
のそれぞれの環境で、即座に起動できるメモアプリとして
使えるようにしていきたいと思います。



## シンプルな環境構築を行います
最終的には、全てのOSに対応した、メモアプリの決定版を作成したいと考えていますが、
最初からそこを目指すと、今までの経験上挫折する可能性が高いです。

そのため、今回は、[Chrome](https://www.google.com/intl/ja_jp/chrome/)と[VSCode](https://azure.microsoft.com/ja-jp/products/visual-studio-code)を使って、`Hello World`と表示する簡単なアプリを作成します。


:::note info
- パソコン環境は M1のMacbook Airです。
- OSは**macOS Sonoma 14.1.1**を用いています。
:::

### 環境構築
#### Flutterの環境構築
まずは、実行環境のFlutterをダウンロードして、
Mac OSでFlutterが使えるようになるところまでをやります。

##### [Flutterの公式サイト](https://docs.flutter.dev/get-started/install)から使用する環境をクリックする（著者の環境はMacなので、Macを選択します）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559163/ead602d6-156f-cf02-d6f1-420094824a25.png)


##### Apple Silicon版なので、右側を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559163/8622b87f-953e-eef8-3ad2-56be267df452.png)

##### ダウンロードしたZipファイルを解凍します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559163/5b1761b8-4ac6-44a0-cdb5-2fcdf280b2ac.png)

##### ターミナルを開いて、以下のコマンドを順番に実行します。
（この作業を「パスを通す」と言います。）
```bash
mkdir ~/dev
mv ~/Downloads/flutter ~/dev/
echo '\nexport PATH=$PATH:$HOME/dev/flutter/bin\n' >> ~/.zshrc
source ~/.zshrc

```
実行すると次のイメージのように、
たくさん文章が出てきますが、
気にしなくて問題ありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559163/c9d51fe8-c51b-6380-e518-8ac0645143b9.png)
また、展開したflutterのフォルダがダウンロードフォルダから
消えていると思います。
```mv ~/Downloads/flutter ~/dev/```
こちらのコードで、ダウンロードフォルダから、
```~dev```
というフォルダに移動したため、ダウンロード
フォルダからいなくなります。

##### Flutterが正常に動作するかの確認
正常にダウンロードされているかを確認するために、
下記のコードをターミナルに打ち込みます。

```
flutter --version
```

最初に、コードを打ち込むと下記のような画面が出てくる。
この画面が出てきたら、Flutterの環境構築は完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559163/cdf7f3a8-357b-ae80-53ea-645278fee269.png)

2回目に
```
flutter --version
```
と入れると、下記のように出力されます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559163/7ba5c133-7cfb-2831-42bb-99f2be6c2c6c.png)


#### Cursorの環境構築
#####  [公式サイト](https://cursor.sh/) からダウンロードして起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559163/ffe12fae-580a-642b-22af-0d6899982777.png)

CursorはVSCode上でAIが使えるようになったIDEです。

Cursorについては、別途[こちらの記事](https://qiita.com/YUMA-NAGAO/items/b4bbeebd10c46e551d7c
)を参照してください。


##### 拡張機能をクリックして、「Flutter」と検索します
検索して一番上に出てくる```Flutter```と書かれているアプリをインストールします。
それで、Cursorの環境構築は終了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559163/209cd3c1-6789-c2af-6568-3e7aac1dece9.png)

#### Chromeのインストール
[公式サイト](https://www.google.com/intl/ja_jp/chrome/) からダウンロードします。

そして、一度クリックしてアプリを起動して完了です。


## 簡単なアプリの起動

1. Cursor上で、ターミナルから新しいターミナルの起動をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559163/332346ec-bd95-02f8-1864-da97eebb707b.png)
2. 出てきたターミナルで、
```flutter create test_app```を実行します
（test_appは他のアプリ名でも大丈夫です。日本語だとエラーが出るので、英語でアプリ名を作成してください）
3. 作成したアプリから、```lib```というファイルの中にある```main.dart```を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559163/84f0769d-1fbc-635e-1b6f-3bae1524c7fe.png)
4. 右下にあるMacOS (darwin)をクリックすると、上にChromeと出てきます。そのChromeを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559163/4cc7c100-2cc8-c78f-ee22-996be986dd31.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559163/7f76548d-9dd8-a450-af0f-8891143d4d45.png)

5.  3行目の```void main()```と書かれている所にある```Run```をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559163/4cf9b8de-d305-20a3-3cd2-d63393c1620b.png)
そうすると、下記のような画面がChromeで出てくるはずです。


- 画面が出てこず、下記のようなエラーが発生した場合は、Xcodeで設定を行うことで、エラーが解消されます。
```
aunching lib/main.dart on macOS in debug mode...
ProcessException: Process exited abnormally:
xcrun: error: unable to find utility "xcodebuild", not a developer tool or in PATH
  Command: /usr/bin/arch -arm64e xcrun xcodebuild -list -project Runner.xcodeproj
```
エラーの解消方法
```xcode-select --install```
コマンドを実行して、コマンドラインツールをインストールします。

そして、PATH 環境変数にXcodeコマンドラインツールのパスが含まれていない場合は、以下のコマンドを実行して追加します。
```
export PATH=$PATH:/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin
```


## 終わりに
お疲れ様でした！！
こちらで、Flutterを使ったアプリの開発ができるようになったと思います！！
それでは、よきFlutterライフを！！