無能がFlutterを独学し始める話【2/5:Flutter SDKへPathを通す】

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

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

前回はFlutter SDKをDL・解凍し、解凍した「flutter」フォルダを移動しました。
今回は移動した「flutter」フォルダにPathを通す作業をしていきたいと思います。


以下に無能が一般的な例を示してはおりますが、ご自身の環境に読み替えて頂いて全く問題ありません。
理解できるのが一番であること、そしてテレワークなど多様性を持った働き方に合わせて、理解を深めて頂ければと思います。

※今回は「flutter」内の「bin」フォルダにPathを通す作業になりますので、もうご存じであれば、「OS実行ドライブ:\任意フォルダ\flutter\bin」にPathを通して、この記事を飛ばして頂いても問題ありません

「Pathを通す」とは、そもそも何なのか?

Pathを通す、言い換えると「その目的のファイルまたはフォルダが、何処にあるのかをWindowsのシステムに対して明示する」と言うことになります。
端的に言えば「このファイルまたはフォルダは、ここに在ります!」と明確に宣言することです。

…え?それだけ?と思われた方、これは「命令すること」に於いては、結構重要な項目なんです。

一番簡単に言ってしまうと、母親と子供のキッチンでのやり取りでしょうか。
※指示する側は、母親でも父親でも祖父祖母でも親戚や友人でも何でも構いません

キッチンで夕食の準備をしている親子だと仮定します。
「マヨネーズ取ってくれる?」と母親。

母親より子供へ指示が発せられる

この母親の指示で取って貰うものは何でも構いません。今回は母親と調味料にしましたが、お願いするのは家族でも友達でも、目的は調味料でも化粧品でも玩具でも何でも。

場所が分からないので「マヨネーズ?何処?」と子供が質問します。
ここで明確に、母親は「冷蔵庫の、ドアポケットの右側にあるよ」と場所を伝えます。

場所を明確に指定する

「あ、これだね」と、子供はマヨネーズを取り出し、母親にマヨネーズを渡します。

指定された場所から、指定の動作を実行する

こんな感じです。

これをWindowsに例えると
ユーザーから「■■という実行可能ファイル(.exe)があるから実行して」
とWindowsは命令を受けたけど
「■■って何処?」と、そもそも場所が明示されていない
または、命令が「○○に■■という実行可能ファイル(.exe)があるから実行して」
「○○という場所に、■■ってファイル(またはフォルダ)はありませんでしたよ?」と、指定された場所に行ったけど、目的のファイルまたはフォルダが見つかりませんでした。
という上記の様な実行結果(この場合はエラー)と共に返事されます。

どういった状況かと言えば、
「■■は[C:\○○\○○]という場所にあるよ」
と予め場所を教えておき、
「■■という実行可能ファイル(.exe)は[C:○○\○○\■■.exe]にあるから実行して」
と、場所と在り処を具体的に明確にした上で、実行して欲しい命令を伝えてあげることで、Windowsは命令を処理することが出来るようになります
この「ファイルまたはフォルダの場所を示す」ことが「Pathを通す」と言われる作業になります。

…何となく、イメージは掴めて頂けましたか?

親子のやり取りは、親子が同時に同じ場所(ここでは台所)に居て、同じ台所にある冷蔵庫の中の、マヨネーズという物体を取り出しました。

やっていること・言っていることが意味不明…となってしまうかも知れませんが、結構重要な作業だと思うので、なるべく無能が理解したことをお伝え出来るようにしておりますの
で、もう少しお付き合いください。

では次に、「Pathを通す」とどのような結果になるのか見ていきたいと思います。

実際にPathが通っている例を見てみる

では実際に、どのように設定するとどのような挙動になるのか、Windowsの機能を用いて例を見てみたいと思います。

Windowsアクセサリにあるメモ帳で、どのような挙動になるのかを見てみましょう。

普段、Windowsのメモ帳を「Windowsアクセサリ」フォルダにある「メモ帳」のショートカットから開くと仮定して話を進めます。

先ずメモ帳が何処にあるのか所在を確認してみたいと思います。
Windowsキーを押下し、スタートメニュー内からWindowsアクセサリフォルダを展開し、中にあるメモ帳を右クリックします。

メモ帳を右クリック

表示されたコンテキストメニューから「その他→ファイルの場所を開く」を選択します。

その他→ファイルの場所を開くを選択

すると、以下の様なフォルダが表示されると思います。
※システムの管理フォルダへアクセスするため、管理者権限が必要になり確認のダイアログが表示される(admin:管理者権限でWindowsにログインしている場合は不要)

表示されたフォルダ内の様子

更にメモ帳のショートカットを右クリックし、コンテキストメニューの「プロパティ(R)」を選択します。

メモ帳を右クリックし「プロパティ(R)」を選択

すると「メモ帳のプロパティ」が表示されます。

メモ帳のプロパティ

表示されたら、ボタン左側の「ファイルの場所を開く(F)」を押下します。

「ファイルの場所を開く(F)」を押下

すると、メモ帳のアプリケーションが格納されているフォルダがエクスプローラーで開きます。

メモ帳が格納されているフォルダのエクスプローラーが表示される

ここでアドレスバーを見てみましょう。
なるほど、メモ帳はこんなところにあったんですね。
因みに「>(記号:大なり)」は平仮名の「の」に読み替えると、分かりやすいと思います。
ここでは
「C:(Cドライブ)LocalDiskWINDOWSsystem32の中にあるnotepad.exeがメモ帳アプリ」
ということが分かるかと思います。

じゃあ、場所が分かったからどうだと?ということをやってましょう。

コマンドプロンプト(コンソール)からメモ帳を起動してみたいと思います。一度ショートカットを使わずに開いてみます。

一番簡単なのは、Windowsキー+Rキーで「ファイル名を指定して実行」ダイアログを出し「cmd」と入力してEnterキーを押下することです。マウスを一切使わないのでキーボードのみの操作で楽です。

Win+Rキーで「ファイル名を指定して実行」ダイアログを呼び出し、半角英字で「cmd」を入力してEnter押下

その他の方法としては
  • Windowsキー押下→Windowsシステムツール→コマンドプロンプトを選択
  • Windowsキー押下→そのまま「cmd」と入力し、PC内の検索を実行→コマンドプロンプトを選択
のどちらでも起動できます。

1:Windowsキー押下→Windowsシステムツール→コマンドプロンプトを選択(マウスのみ操作)

クリックするとコマンドプロンプト(コンソール)を起動させる

2:Windowsキー押下→そのまま「cmd」と入力→コマンドプロンプトを選択(マウス操作+キーボード操作)

Windowsキーを押下

そのまま半角英数小文字で「cmd」と入力した状態
そのままEnterキー押下でコマンドプロンプト(コンソール)が起動する

上記のいずれかの方法で起動したコマンドプロンプト(コンソール)

コマンドプロンプト(コンソール)が起動した

・閑話休題
-ここから-

どの起動方法でも辿り着く結果は同じですが、今後の作業のためにもWindowsのショートカットキーには慣れておくと便利なので、Windowsキー+Rキーで「ファイル名を指定して実行」ダイアログを出し「cmd」と入力してEnterキーを押下する方法をお薦めします。

この「ファイル名を指定して実行」ダイアログを出す方法は、後述のWindowsに登録されたファイルまたはフォルダに迅速にアクセスすることが可能になります。
さらに普段使いの操作にも、このショートカットキーを覚えておくことでメリットが生まれると思われるので、覚えて頂きたいショートカットの一つでもあります。

-ここまで-

それでは、この状態で半角英数小文字で「notepad」と入力し、そのままEnterキーを押下しましょう。拡張子の「.exe」は省略します。
すると、メモ帳が起動します。

半角英数小文字で「notepad」と入力し、そのままEnterキーを押下

メモ帳が起動した

無事にメモ帳が起動しました。
まあ…当たり前ですよね。

なぜこんな作業を順序立ててやっているのか…というのは下記のためとなります。

この作業だけ見ると、普通に「メモ帳を起動した」という結果だけ返ってきますが、ここではメモ帳が起動したそのプロセスを見ていき、何故「Pathを通す」ことが必要なのかを見ていきたいと思います。

上記までの作業の中でメモ帳のプロパティを見て頂いた際に、C:のWindowsフォルダにあるSystem32フォルダに、notepad.exeすなわちメモ帳の実行可能ファイルがありました。
アドレスバーを確認した所になります。
では、コマンドプロンプト(以下コンソール)ではどうだったでしょうか?

コンソールで表示した現在位置

コンソール上では、C:のUsersフォルダの中の、ログインしているユーザー名のフォルダが表示されています。
ここが今操作できる現在位置となっています。
(この\(エン)マークは、平仮名の「の」に置き換えると良いかと思います)

でも、C:(Cドライブ)のWindowsフォルダにあるSystem32フォルダの中にある実行可能ファイルの「notepad.exe」を操作出来ました。
今、操作できるところとは全然違う場所に居るのに、何故か違う場所を操作出来てしまっています。

基本的に、コンソールでは明確に指定しない限り、今いる現在位置のなかにあるファイル及びフォルダしか操作できません。
この上記画像の現在位置はC:\Users\munouです。
使いたいアプリの「notepad.exe」があるのは、先程調べた通り全く違う場所にあります。

先程コンソールは指定が無い場合は現在位置のファイル・フォルダしか操作出来ないと言いましたが、明確な指示も無く存在する場所が全然違っているのに、どうして違う場所から操作が出来たのか?

それが「Pathを通す」という「その目的のファイルまたはフォルダが、何処にあるのかをWindowsのシステムに対して明示する」という作業であり、予めPathを通してあるからこそ、何処に居ても作業が可能になっている、という事になります。
上記の親子の例も、全く同じです。

人間同士のやりではその場に居るか居ないかでも柔軟に対応は変わりますが、コンピュータでは共通して「予め目的のファイルまたはフォルダの場所を教えてもらっていないため、指定された行動ができない」と、「動かす命令の場所(現在位置)」と「動かすモノ(目的物)」、今回は命令には無いですが加えて「目的の動作」が不明瞭な状態ではエラーになってしまいます。

説明が長くなってしまいましたね。
後少しなので、頑張ってみましょう。

では実際に、移動した「flutter」で見ていきたいと思います。

「flutter」フォルダにPathを通す

一口に「flutter」フォルダと言いましたが、実はPathを通すフォルダは一階層下の「bin」フォルダになります
「bin」とはbinary(バイナリ:binary)の略で、実行可能なファイル群が集まっているフォルダになります。
この「bin」フォルダにPathを通すことになります

先ずは、Pathを通さない状態でコマンドを実行します。
コンソールで半角英数小文字で「flutter」と入力しEnterキーを押下してください。

半角英数小文字で「flutter」と入力後にEnterキーを押下
エラーが表示された

無事に(?)「(現在位置に)そんなモンは無いよ」と言うエラーになりました。
ここでFlutterが動いたら、Windowsシステムならともかく事前に伝わっていないFlutterのbinフォルダの位置が、既に知られていることになります。

教えてもいないのに、家が特定されている
セキュリティとしては大問題

これは、知らない内に合鍵を作られて自由に出入りするストーカーの如く、セキュリティの観点からエラいマズいことになりますね。

ですので、まだ伝えていない情報、すなわちFlutterのbinファイルの場所を教えていないので、エラーが出るのは自然なことです。

では実際に、flutterフォルダ内にある「bin」フォルダまでの道筋を探しましょう。
…と言っても、先程移動したflutterフォルダの中に在るので、迷うこともないかと思います。

fkutter内のbinフォルダ内

ここに、Flutterの実行可能なバッチファイル(.bat)が入っていて、Windowsがこのバッチファイルを読み込むと、flutter本体が動くようになります。
その道程が、エクスプローラーのアドレスバーに記載されています。

では道順をWindowsに示してあげましょう。
アドレスバーをクリックする、またはF6キー押下でアドレスバー全体が選択された状態(全選択)になるので、そのままコピー(Ctrl+C)します。
もしアドレスバーにカーソルがあっても全選択されていない場合は、Ctrl+Aで全選択してからコピーします。

全選択の状態でコピー(Ctrl+C)する
全選択されていない場合はCtrl+Aで全選択になる

コピーしたら、タスクバーに検索ウィンドウを表示させている場合はそのまま半角英字で「env」と入力します。
こちらは公式サイトのインストール手順内「Update your path」にも手順が紹介されています。

(意訳)検索バーに「env」と入力し、自身のアカウントの「環境変数の編集」を選択する
となっています。

検索ウィンドウが非表示の場合は、Windowsキー押下→そのまま半角英字で「env」と入力します。

検索方法はどちらも検索結果に環境変数の編集が候補に挙がると思います。

「env」の検索結果

別の方法として、コントロールパネルを操作する方法を記載しておきます。
Windowsの設定を呼び出し、左上にある「システム」をクリックします。

Windowsの設定の「システム」をクリック

システム内の左側の項目最下段にある「詳細情報」をクリックします。

システム内項目の最下段「詳細情報」をクリック

そして、右側にある「関連項目」リンク内の「システムの詳細設定」をクリックします。

詳細情報内、右側「関連項目」リンクの「システムの詳細設定」をクリック

すると「システムのプロパティ」という小さダイアログが表示されますので、下部の「環境変数(N)」ボタンをクリックします。

「システムのプロパティ」ダイアログ内、下部の「環境変数(N)」ボタンをクリック

上記のどの方法でも、これで「環境変数」ダイアログが表示されました。

先程アドレスバーをコピーした「flutterのbinフォルダのアドレス」は、このダイアログで使います。
環境変数ダイアログが表示される

では、コピーしたPathを新規登録しましょう。
「システム環境変数(S)」内の「Path」項目を選択し、ダブルクリックまたは「編集(I)」ボタンを押下します。
すると、別ウィンドウが表示されます。

Path項目をダブルクリック
または
編集(I)ボタンを押下


「環境変数名の編集」ダイアログが表示される

この編集ダイアログに、新規でPathを追加します。
右上の「新規(N)」ボタンを押下すると、空の項目が表示されますので、そのままペーストします。
ペースト後にそのままEnterキー押下で、FlutterのPathが追加されますので、そのままOKボタンを押下します。

続けて、環境変数ダイアログが残っているので、そちらもOKボタン押下で閉じてください。
環境変数の編集ダイアログに直接アクセスした場合は、これで表示しているウィンドウは閉じたことになります。

もし設定→詳細情報のリンク→システムの詳細→システムのプロパティダイアログ→環境変数の編集ダイアログと表示した場合は、システムのプロパティダイアログもOKボタン押下で閉じてください。
注意点全てウィンドウをOKボタン押下で閉じないと、環境変数の編集が正しく終了されていないことになるので、再度同じ手順を踏んでFlutterのPathを登録する必要があります。
 必ず作業が完了した(ウィンドウを全て閉じた)ことを確認してください。

右上「新規(N)」ボタンを押下すると空の新規項目が表示される

そのままコピーしておいたFlutterのPathをペーストし、Enterキー押下

新たにFlutterのPathが追加されたので、OK押下でウィンドウを閉じる
残っている
・環境変数の編集ダイアログ
・システムのプロパティダイアログ
も同様に、OK押下でウィンドウを閉じる

これで無事にFlutterへのPathが通ったことになります。
では実際に、コンソールでFlutterが起動するか試してみましょう。

コンソールでFlutterを起動する

ではコンソールで、半角英字小文字で「flutter」と入力し、Enterキーを押下してみましょう。
すると、無事にflutterが起動しました。

Flutterが起動した

FlutterのPathが通ったことで、関連するその他アプリも今行った作業と同様に任意フォルダ\Flutter\binへアクセスできるようになりました。

ここまで説明が長くなってしまいましたが、このPathを通す作業というのは、勿論Flutterだけではありません。
様々な関連するアプリがこのPathを通じてアクセス可能となります。
そのため、一つでもPathが通っておらず関連アプリが作業出来ないと開発が中断されてしまうことや、ゲームやその他のアプリに支障が出る恐れがあるため、重要であることをご理解いただきたく、説明が長くなってしまいました。

本記事の作業もお疲れさまでした。


まとめ

本記事では
  • Pathを通すということはどういうことか
  • Pathが通るとどうなるのかの例を見てみる
  • 実際にFlutterのPathを通す
  • コンソールでPathを通したFlutterの起動を確認する
という事を行いました。

次は「flutter doctor」を実行し、必要なファイル群をDLしたいと思います。

本記事もご覧頂き、誠に有難うございます。
ではまた。


コメント