無能がFlutterを独学し始める話【1/5：Flutter SDKのインストール】

本記事をご覧いただき、誠に有難うございます。

投稿主の無能と申します。

Flutterを独学で勉強した場合、どこまで出来るのかチャレンジしようと思います。
目標としてはPlay Storeにてアプリをリリースすることです。
ではいってみましょう。

前提

無能はプログラミング初学者です。
いいとこJS（Java Script）でif文が書ける程度の、クソ雑魚初学者となっています。
ですので、生温かく見守って下さいませ。

以下、PCのスペックです。
※開始時の2021/12月時点
本体：Windows Laptop 2
OS：Windows 10 Pro(21H1)：Surface Laptop 2
CPU：core i7-8650U@1.9GHz
RAM：8GB

開発について

Mac未所持なため、必然的にAndroidのみの開発になります。
因みにiOSの開発は、今の所考えてはおりません。
開発について考えられるようになった際に、改めて検討したいと思っています。
まあ、クロスプラットフォームのフレームワークなのでネイティブ回りをいじらない限りはFlutterでいける、と考えています。

Flutterのインストールについて

色々な記事や文献が上がっておりますが、基本的にはFlutter公式のインストール手順を踏むことをお薦めします。
理由は公式のドキュメントに沿って手順を踏むのが、一番確実だからです。

但し、自身が使うPCは公式ドキュメントと一緒であることは稀で、様々な問題が出てくると思います。
もし公式ドキュメントを隅々まで読んでも解決できないことや、迷ったり、そもそも公式ドキュメントに記載がない等の例外が出た際に、公式以外の外部サイトを参照する、位が丁度いいです。

また、公式ドキュメントは忠実に実行することが非常に大事です。
理由は簡単で、それが一番「成功までの最短距離であること」が明白だからです。

例えば、手順を追わずに「これは大丈夫」とか「ここはちょっと分からないから飛ばしてみよう」などと、自己判断で公式ドキュメントから外れた手順になってしまうと、今自分が何処に居て何をしているのか判断がつかなくなり、「今何してたっけ…？」などと自己判断をした時点まで遡ってやり直す、と言うことすら難しくなってしまいます。

こういう自己判断から発生する「分からない」が多過ぎることで、世の初学者のモチベーションを一気に下げて挫折に追い込むのではないかと思います。

公式ドキュメントの書いている意味が理解できない、イメージが出来ないなどの壁にぶつかることが多いとは思いますが、なるべく自分で調べてみようと思います。その手掛かりとなるのはFlutterのインストール手順を動画にしたものであったり、はたまた分からない単語を検索して手掛かりを得て、その手掛かりを元に更に検索をかけ、また新たな手掛かりを得る作業を繰り返す…などと言った地道な作業かも知れません。

あくまでも、上述の通りで公式ドキュメントだけでは解決出来ない際に外部サイトを利用する、という前提の上でチャレンジしてみようと考えています。

一言で申し上げますと、上記の作業は所謂「見聞を広める」という所でしょうか。
「ゴールに辿り着くことが目的」なのであって、ゴールに辿り着くプロセスが目的なのではないので。
自分で調べて自身で理解することが、その事柄を理解するまでのプロセスを含めて一つ一つが自分の力として備わっていき、そのプロセスを繰り返すことで、同様または類似の問題に当たった時に、その備わった経験が遺憾なく発揮されることが理想だな、と思っています。

無能のスタートラインは、トライ&エラーが正しい学習法ではなく、最善手を打てるようになるまでの知識が皆無であるのと同義だ、と考えます。
そのため、ご覧頂いている本記事も、試行錯誤しながら実際に作業した内容になります。
最善手…とはいかないまでも、せめて解決方法を己が手で出せるように見聞を広め、更には記事をご覧の皆様にお伝え出来るよう嚙み砕いた説明として、無能自身が分かる範囲で説明出来ることが目標です。

以上の前提となる心構えを踏まえつつ、早速Flutterをインストールしてみましょう。

Flutter SDKの取得

Flutter SDKのダウンロード

先ずはFlutter本体とも言うべき、Flutter SDKのダウンロード（以下DL）をしましょう。
公式ページからDLします。
DLの手順は「flutter」で検索する（黄色下線）と一番上に表示されますので、そのまま公式サイトにアクセスします。（赤枠リンク部分）
もし表示されない場合は、公式サイトのリンク（https://flutter.dev/）を直接入力してください。

場合によっては最上段ではないこともある

公式サイトの右上にある「Get Started」（黄枠右上）を押下し、新規インストールの手順を表示します。

FLutter公式のTOPページ（2021/ver 2.8.0時点のページ）

※バージョンや時期に因ってデザインが変わります

公式TOPページから「Get Started」を押下した画面

DL前にインストールするOSを選択できるので、使用しているPCのOSを選択します。

本記事ではWindowsになりますが、MacやLinux、ChromeOSでも各OSでインストールまでの手順が案内されています。

Windowsを選択

OSを選択すると、手順が表示されます。

それぞれのOSでも目的は変わらないのですが、手順が異なっているため、OS毎の詳細を丁寧に記載してくれています。

「○○（OS名） Install」と表示されるので、該当OSに相違ないか確認

ページ上部に「Get the Flutter SDK」とあるので、このボタン（赤枠）を押下してDLを開始します。

ボタン押下でDL開始

ChromeでのDL

ここでDL出来るFlutter SDKは、常に現状で安定している最新版が表示されていますので、DL時は最新であると考えて問題ありません。

以前のバージョンのFlutter SDKが必要な場合は、直下のリンク「SDK releases」リンクからDLが可能です。

以前のバージョンでは、最新のバージョンでは非推奨になっている挙動もありますので、検証などの必要性があって使う場合など以外は、常に最新版をDL、インストールします。

zipファイルのサイズは2.8.0の時点では約910MBなので、インターネットの回線速度に依りますがおよそ15～30分程度だと思います。

（無能はWi-Fi環境なので、有線を直接接続しているなどの回線速度が速い環境であれば、5分程度で終わるかも知れません）

DLしたファイルを解凍し、適切な場所に移動する

DLが完了したら、zipファイルを各々の好きな手順で解凍してください。

（一般的には、ファイルを選択し右クリック（コンテキストメニュー）からすべて展開(T)→ウィザードの「展開(E)」を押下）

以下に一般的な解凍方法の手順を記載します。

DLが完了したzipファイルを解凍する

ファイルを選択し右クリック→すべて展開(T)を押下

展開先を指定して解凍を開始

（デフォルトの挙動で、解凍するzipファイルと同じ階層に解凍する）

zipファイルをDLした後の解凍は、PC側の処理なのでネットワークに繋がっていなくても大丈夫です。

ですので「先にDLが必要なファイルを全部DLしたい」という方は、インストール手順が不明にならないのであれば（自身が「今ここまでやった」と明確に分かるのであれば）、次のDL対象に当たるAndroid StudioのDLまで進めても問題ありません。

因みに、PCの処理速度に依っては前後します。

注意点：バッテリーの消耗が著しいので、電源に接続した状態で実行することを強く推奨

このzipファイルの解凍作業ですが、物凄い勢いでリソースを食うため、バッテリーの消費が半端ないです。

実際にどの位かと言うと、90%あったバッテリーが10%まで、ものの10分強の時間程度で消費されました。

これだけで十分にバッテリー消費量が分かると思いますが、併記するならIDEとエミュレータ（androidの仮想デバイス）を動かしたまま本記事を記載中であっても、全くなることのなかったファンが鳴り始めました。

しかも初っ端からファンが最大の風量で…

と言う様に、解凍の作業には多大なリソースが必要で、そのリソースを保とうと、お使いのPCが頑張ってしまう訳です。

ですので、電源接続はほぼ必須と言って過言ではない、と考えます。

もし外出先でまだノートPC使う予定があるという場合など、バッテリーはある程度残しておきたい状況の時は、外出先などで解凍作業は行わず各種ファイルのDLに留めておき、帰宅後に解凍作業を始める、などの対応をするのが、その時の状況に合わせられるので良いかと思います。

解凍の時間自体はものの10~15分程度で済むのですが、いかんせんその時間にエラいリソースを割かれるためにバッテリー消耗が激しいので、電源を持参しているならともかくバッテリーのみのPC運用の際は特にご注意ください。

解凍したフォルダごと、適切な場所へ移動する

※注意：公式にも「Warning」として記載がありますが、「Windowsの管理者権限が必要となる場所は避けてください」とあります。

　これには理由があり、「flutter」フォルダに毎回アクセスする度に、毎度「管理者権限を要求される」という事象が発生し、場合に依ってはそこで処理が中断されてしまうことがあるからです。

「Get the Flutter SDK」の項目にも、わざわざWarning（注意点）として記載がある通り、「flutter」フォルダの移動先には必ず「管理者権限の要らない一般フォルダ」に設定しましょう。

管理者権限が必要なフォルダの一例として、「Program Files」や「Windows」フォルダ、及びその階層下に作成したフォルダが（作成したフォルダを含めて）Windowsシステム周りで権限が必要、または権限が必要ではないが「変更されるとWindows自体に大きな障害が発生する」などの懸念がある場合、あとは独自に作成したフォルダで、明確に管理者及びそれ以下の権限でパスワードが必要なフォルダなどが挙げられます。

上記の注意点を踏まえて、コマンドプロンプト（コンソール）で自由にアクセスが可能であるフォルダが前提となります。

簡単に言い換えると、最下位のユーザー権限でもアクセス可能な権限であることが前提（に近い）のものである、と置き換えて大丈夫です。

※詳細については無能も知識が拙いため説明し切れないので、ユーザーやフォルダに関する権限はご自身で学習をお願いいたします。

因みに、公式ではユーザーのドキュメントフォルダに格納することを例として取り上げています。

公式に記載のflutterフォルダの格納先（インストール先）の注意点

（上段：原文　下段：日本語へ翻訳）

さて、解凍が終わったら、解凍したフォルダの1つ下の階層にある「flutter」フォルダを丸ごと予め用意した場所へ移動します。

※ここで言う「1つ下の階層のフォルダ」とは、解凍後に自動的に表示されるフォルダのことを意味しています。

　実際に解凍が終わると、解凍先を明確に指定しない限りはデフォルトの挙動で「flutter」フォルダが見えている、別ウィンドウのエクスプローラが表示されたと思います。

　上記の動作は、この別ウィンドウのエクスプローラに表示されている「flutter」フォルダを移動する、という意味合いになります。

解凍直後のエクスプローラの例

（回答したzipファイルと同名のフォルダが作成され、その中のフォルダ及びファイルが表示されている）

※解凍直後の例はあくまでも一例であり、

別な解凍ソフトを使用している

デフォルトではない挙動を設定している場合（解凍先のフォルダを事前に設定しているなど）

などは、この限りではありません

今回は、ドキュメントフォルダに「Flutter」というフォルダを作成し、その中に「flutter」フォルダを移動して、付随する作業を行っていきたいと思います。

簡単にフォルダからフォルダへドラッグ&ドロップ（以下D&D）でも良いですし、カット&ペースト・コピー&ペースト（以下カット&ペースト及びコピー＆ペーストを、まとめてコピペ）で移動しても、コマンドプロンプトで移動しても構いません。

今回はコピペで移動するので、手順を以下に記載します。

先ずは、解凍した「flutter」フォルダを選択します。（シングルクリックで左端にチェックマークが付いている状態）

ファイルを選択している状態

（左端のチェックマークが付いており、選択したファイルがハイライトされている）

この状態で、Ctrl+xキーを押下します。

※キー入力の際の「+」の記号は、同時押しまたはどちらかのキーを押したまま、という意味になります。

　今後も同様の意味として捉えてください。

ファイルの切り取り（カット）操作を行った状態

この選択したファイルの切り取り状態になると、選択されたファイルアイコンが半透明になります。この状態で、選択したファイルが切り取り状態になっています。

判りにくいという場合は、一度Escキーを押し選択状態を抜けて、再度Ctrl+xキーでファイルの切り取りを実行してみてください。注意して見ていると、はっきりと半透明の状態に変化していることが判ると思います。

では切り取り状態のファイルを、移動先のフォルダへコピーします。

移動先のフォルダをエクスプローラで開き、そこでCtrl+vを押下します。

今回の移動先はドキュメント直下なので、エクスプローラのアドレスバーには「PC > ドキュメント」と表示されているはずです。

エクスプローラのアドレスバー

※表示項目のカスタマイズがされた場合や、移動先が違う場合は、この限りではありません

すると、切り取り状態だったファイルが切り取られ、Ctrl+v（貼り付け：ペーストの動作のショートカット）を押された移動先へ貼り付けされました。

お疲れさまでした。

閑話休題

-ここから-

ここからは余談になりますので、ご存じであれば飛ばしてください。

やっていることは、マウスによるD&D、右クリックによる切り取り→右クリックによる貼り付けと全く一緒の作業です。ただ単に、キーボードによるファイル操作を実行したのみです。

これがキーボードショートカットで、基本のショートカットはどのOSにも共通しています。

今回は切り取り（カット：Ctrl+x）と貼り付け（ペースト：Ctrl+v）を使用しました。

他にも共通のもの、Windowsのみ・Macのみ・Linuxのみ使えるもの、さらにはアプリケーション固有のものなど、数多く存在しますが、基本的なOS共通のものと、Windows固有のもの、加えてアプリケーション特有のものだけを使っていきます。

キーボードショートカットを覚えておくだけで、時短できる上に大分作業が楽になりますので、なるべくなら使うようにすると良いかと思います。

-ここまで-

まとめ

本記事では、

・Flutter SDKをDLした

・DLしたzipファイルを解凍し、適切な場所へ移動した

という事を行いました。

次回は、移動した「flutter」フォルダにPath（パス）を通していきたいと思います。

Pathって何？という疑問も、簡単にですが説明を踏まえて、実際に作業したいと思います。

ここまでご覧頂き、誠に有難うございます。

ではまた。