Surface で Flutter のソースコードを読むと最高だった話
と自分にいつも言い聞かせてます
はじめに
Flutterのソースコード読んでいますか？
Flutterのソースコードは各クラス、メソッド等に逐一丁寧なコメントが付いており、Flutterというフレームワーク・UIツールキットへの理解を深めてくれます。
このところ、カフェに寄った際など暇さえあれば外で Flutter のソースコードを読めるよう、いろいろと環境を試行錯誤してきました。
そして個人的にベストと思える環境を構築できるデバイスが Surface （あるいは Windows タブレット）でした。これはその顛末の記録です。
※ 注: マイクロソフトからお金をもらってるわけではありません😂
Surface 以外のデバイスの問題点
スマホ
外出時に必ず持ち歩くものといえばスマホ。スマフォでいつでもどこでもFlutterのソースコードが読めたら素敵...と思っていた時期が僕にもありました。
画面が小さい...
最初は Flutterリポジトリ を GitHub 公式アプリで閲覧したり、Googleのオープンソースプロジェクトのソースコードを検索・閲覧できるサイト をブラウザで開いてスマホでソースコードを読んでいました。
しかし画面が小さい...
https://cs.opensource.google/flutter
上記サイトはモバイルに最適化されていないのが逆によく、ピンチイン・ピンチアウトで画面を拡大縮小できるのでまだ読みやすいですが、それでも目が疲れます。
どこまで読んだか分からなくなる
しかも他のウェブサイトを開いたり、アプリを開いたりしてスマホのメモリがいっぱいになるとスクロールした箇所がリセットされてしまいます。
ここまで読み進めたというしおり代わりにできるようなものがないため、その度に該当箇所までスクロールしなくてはなりません。この時点でコードリーディングが嫌になってきます（涙）。
コードリーディングに集中できない
人間は弱いです。すぐネットにアクセスできることがわかっていると、ついツイッターやYouTubeのアプリを開いてしまいます。
またスマホからの通知のせいでコードリーディングをしているときの集中が途切れます。DO NOT DISTURB モードにして通知をオフにすればいい話ですが、面倒です。
VSCode.dev も試したみたけど
VS Code の PWA 版である VSCode.dev も試しました。「どこまで読んだか」をローカルデータとして？残してくれているっぽく、しおり問題は解決します。
でも大きな問題が一つ。。
それは VS Code 自体がコードを読むためのツールではなくコードを書くためのツールなので、スクロールする度にエディタ部分にフォーカスされてしまい、上記のようにキーボードがぴょこぴょこ出てきます。
控えめに言ってうざい（笑）。ただでさえ画面が小さいのに 😢
MacBook / ノートパソコン
もう携帯端末でのコードリーディングはあきらめて、いさぎよく開発用のMacをそのまま持ち歩こうと考えた時期もありました。
やっぱり持ち運びづらい
でも、やっぱりスマホに比べると重い（MacBook Air でも 1.29kg）し、かさばるので持ち運びが億劫になりがちでした。
画面が遠い
うまく言えないのですが、何か違和感があります。
画面と目の間に必ずキーボードの分だけ距離があるので、なんというか、直接読んでる感じがしません。
と、遠い...
普段はこれで開発しているので問題ないはずなのですが、いざコードリーディングに使ってみると集中できない。。カフェなどで使うと画面以外に外の世界の風景も入り込む余地があるからでしょうか？
何かを読むというのは 書くよりも集中力がいる 作業だと認識させられました。やはり直接画面を触って、コードリーディングに没頭したい！
Chrome OS タブレット / iPad
ということで検討してみたのが Chrome OS（Chromebookなど）を搭載したタブレット端末や iPad。Chrome OS の場合は Linux アプリも使用できるので VS Code が入れられる！Flutter SDKが入れられる！画面に顔を近づけてコードリーディングに没頭できる！と思いましたが...
キーボード問題
スマホのときと同じく、スクロールのたびにソフトウェアキーボードがぴょこぴょこ出てきてしまいます。これは iPad を使用しても同じでした。
Chrome OS や iPadOS で ソフトウェアキーボードをマニュアルで切り替えられるようにする方法はないのでしょうか、、？（ご存じの方がいたら教えてください）
Surface のよい点
という経緯で Surface をタブレットとして使ってみたところ、上記問題がすべて解決しました。おまけに Flutter 2.10 で正式対応した Windows デスクトップアプリのデバッグができる！
Mac メインで Flutter 開発している場合は、Surface は最高のサブ機ではないか...
私が購入したのは Surface Go 3（Windows 11）の8GBメモリ版です。Surface の中では一番下っ端扱いのエントリーモデルだと思うのですが、私には十分でした。
軽くて持ち運びやすい
これまで Surface を使ったことなかったのですが、意外と軽いのですね。
Surface Go 3 の場合は、物理キーボードのタイプカバーなしで約542g、タイプカバーありでも約787gです。
ソフトウェアキーボードのON/OFFが手動で切り替えできる
前述のキーボードぴょこぴょこ問題が解決します。
[スタート] > [設定] > [デバイス] > [入力] > [タッチ キーボード]
の設定画面で、[キーボードが接続されていない場合に、タッチ キーボードを表示する] をオフにすることで、テキスト編集時に自動でソフトウェアキーボードが出なくなります。
ソフトウェアキーボードを出したい場面ではタスクバー右下のキーボードアイコンをタップすることで手動で切り替えができます。
VS Code や Flutter SDK がそのまま入れられる
何の問題もなくインストールできます。Surface Go 3 の場合はマイクロソフトストア以外からの野良アプリをインストールするために Sモード というのを解除する必要はありますが、一度解除してしまえばその後は通常のWindowsとして使用できます。
やはり Flutter のコードリーディングには軽くてオフラインに強いアプリ版 VS Code が一番です。
縦にできるのでコードが読みやすい
多くのタブレットやスマホと同じく縦表示にも対応しているので、コードが先まで見通せてとても読みやすいです。
自立する
カバーなしでも本体が自立するため、手が疲れたらテーブルに置いてコードリーディングを続けることができます。
このスタンドは180度近くまで展開できるので、机に本を置いて読むようにコードリーディングすることも可能です。
集中できる（Wi-Fi版の場合）
Surface Go 3 には LTE モデルもありますが、私はあえて外でオフライン利用するために Wi-Fi版を購入しました。
前述の通り、ネットにアクセスせずに利用した方が集中力を持続させる意味ではコードリーディングが捗ります。
また Kindle for Windows を入れて本をDLしておけば技術書の読書も集中できます。
定義元へのジャンプができる
VS Code アプリを使っているので、クラスの定義元に簡単にジャンプすることができます。
タブレットモードの場合はジャンプしたいクラス名の箇所を長押ししてコンテキストメニューを出し、「Go to Definition」を選ぶだけです。
どこまで読んだかを記憶してくれる
当然、VS Code なのでコードを読み進めてアプリを終了すれば、次に起動したときに最後に読んだ行まで自動的に飛んでくれます。Kindle で本を読むような感覚でコードリーディングすることができます。
コードのアウトラインが確認できる
Flutter SDK を入れているので、VS Code の左ペインのアイコンメニューから、開いているファイルのアウトラインを確認することができます。コードの構造を理解しながら読み進める手助けになります。
Windows デスクトップアプリのデバッグ・コンパイルができる
もはやコードリーディングと関係がなくなってきていますが...
Windowsデスクトップアプリのデバッグ
ただし Surface Go の場合は 4GBモデルはメモリ的にもSSDの容量的にも開発に使用するのは厳しいと思います。
モニタ出力、USB-C 給電
MacBookと同じくモニタ出力可能でUSB給電可能なUSB-Cポートが付いています。USB-C に対応したモニタがあれば MacBook と同じように使えて開発が捗ります。
また VS Code の同期機能を利用していれば Mac と同じ設定で VS Code を利用できるのがいいですね。
どこから読んだらいいのか分からない問題
私は自分の好きなウィジェット、仕組みが気になったウィジェットの定義にジャンプ（キーワードを右クリックして Go to Definition、もしくはキーワードにカーソル合わせてF12）して、ソースコードを「見る」ようにしてから、Flutter のもっと深いところを知りたくなり、「読む」ことを始めました。
でも Flutter は巨大なフレームワークなので、どこから読んでいいのやら最初は検討もつきませんでした。
最近は全体の構造が何となく見えてきて、まずは以下のファイルから読み進めるといいという結論になりました。
lib > src > widgets > framework.dart
このファイルには Flutter の基本が詰まっている気がします。
どうやって読んだらいいのか分からない問題
いきなり全部理解することは不可能だと悟り、一行一行理解するというよりは、そのクラスの狙い（存在意義）、フレームワーク全体における立ち位置、各メソッドやプロパティの役割を読み取ることを重視しています。
【参考】
おわり
Flutterへの理解が深まり、技術英語の勉強にもなる、Mac で開発している場合は Windowsアプリのデバッグも可能になる。
Surface での Flutter コードリーディングは一石三鳥ではないでしょうか？！😜
Discussion