技術ブログになる予定だったのにどうしてこうなってしまったのでしょうか。

2022年は振り返るような出来事が何もなかったので、買ってよかったものだけを共有しときます。

### マジカル・アイ

[![61bb6Vl0LuL._SY344_BO1,204,203,200_.jpg](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/61bb6Vl0LuL._SY344_BO1%2C204%2C203%2C200_.jpg?alt=media&token=bef70052-a57f-4181-b457-f6ffe4111471)](https://www.amazon.co.jp/gp/product/480026927X)

ネタ枠

かと思いきや、個人的には一番買ってよかったものです。

目を酷使しすぎてピントが合わなくなったり痙攣したりしてましたが、ゲーム止めてマジカル・アイしとけば症状が改善されました。

1日18時間ぐらいPCの前にいるので、目はどうしても使っちゃいますから、今後もこういうったアイテムを使ってケアしていきたい。


### Quntis モニターライト
[![61p5OZcZiL._AC_SL1500_.jpg](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/61p%2B5OZcZiL._AC_SL1500_.jpg?alt=media&token=bfffd0f5-5155-4ad0-bbc3-94ac80ea54ba)](https://www.amazon.co.jp/gp/product/B08DKQ3JG1/)

なんか一時期YoutuberがこぞってBenQのモニターライト紹介してませんでした？  
あれなんだったんでしょうね。

で、目が痛かった時期にそれを思い出して、でも別にBenQじゃなくてもええやろって思いまして、まがい物を買ってみました。

安物買いの銭失いとはよく言いますが、この製品に関しては全然問題なかったです。BenQだと高すぎる。

### キングジム 収納スタンド
[![71OXurtMWL._AC_SL1000_.jpg](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/71OXur-tMWL._AC_SL1000_.jpg?alt=media&token=dbce5413-1331-4f03-98ce-5632ce1685aa)](https://www.amazon.co.jp/gp/product/B08T1T4GVQ/)

PCデスクの上に置ける収納道具です。

デスクの上すごく汚くなるタイプの人なので、デスクの上に置ける収納グッズには感謝です。

### 山善 ラック オープンシェルフ

[![61SFzV2VE9L._AC_SL1500_.jpg](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/61SFzV2VE9L._AC_SL1500_.jpg?alt=media&token=ad613275-ec10-4ef2-a03e-fd55b5bbda40)](https://www.amazon.co.jp/gp/product/B00ESBJ4EU/)

これもただの収納道具ですが、山善のこの手のものって組み立てやすくて安くて好きですね。



2022年買ってよかったもの

自分のやった仕事、忘れるんスよね。なぁなぁで仕事してるうちはいいんですが、スキルシートを更新するときに「去年何してたっけ？」ってなりがちなのでまとめていくことにします。

### 2021年12月~2022年1月
新型コロナウイルスワクチン接種申し込みサイトの改修。
3回目接種の申込み部分と、管理画面の改修がメイン。

Rails

### 2月~3月
クラウド人事調査サービスっていうのかな、利用者（主に人事）は社内のメンバーに対してカスタマイズされたアンケートを発行することができる、みたいなサービスのバグ改修。
オフショアに任せた所大炎上したらしく、火消し人として入ったけど全部は消しきれなかった。

Rails

### 3月~6月
建設会社社内チャットアプリのバックエンド＋設計(一人で)。
Laravel firebase
フロントはFlutter

### 5月~7月
バーチャルオフィス追加開発。
小規模会社等が実態としてオフィスが無くとも、登記や荷物受け取り用のオフィスを作ることができるサービス。

Laravel Vue

### 6月
忘れた。なんか社内で振込履歴とかを振込承認とかを管理するツール。

React Amplify

### 6月~10月
バイオテク企業を検索、企業リストを作って共有できるサービス。
要件定義以外の全部を担当している。

Laravel Next.js

### 10月~
ビジネスの現場に活かせる資料や事例集などをダウンロードできるサイトの開発。
企業に資料を提供してもらい、ダウンロード数に応じて料金が発生する仕組み。
要件定義以外の全部を担当している。

Laravel Next.js

趣味のコミュニティ運営の方でも同様の技術スタックで開発していて、もう大体自分が技術選定関われるときは Laravel, Next.js になるなぁという感想が現状ある。

2022年プログラミング活動まとめ（随時更新）

こういうのは年内にやるものだとは思うのですが、思い立ったのが今日なので仕方ないですね。

特に順位付けするつもりはないので、雑多に紹介していきます。

### Panasonic 食器洗い乾燥機

[![np.jpg](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/np.jpg?alt=media&token=c7ec1f41-632c-450a-9e27-a38863502fe2)](https://www.amazon.co.jp/gp/product/B01MYANHMF/)

まぁ食洗機ですね、最強でした。

最強とはいえ、まな板や包丁、鍋フライパンとかは洗えないので相変わらず手洗いです。

更に二人分の食器と調理器具を突っ込むと結構パンパンなので、自ずと食洗機に適したサイズ素材の食器や調理器具を買うようになります。謎の縛りが発生。

将来的にはもっと大きなもの、あるいはビルトインの食洗機にしたい。

洗剤は[通常用](https://www.amazon.co.jp/gp/product/B075V4N7XP/)と[頑固な汚れ用](https://www.amazon.co.jp/gp/product/B07NB3N237/)で使い分けてます。


### ヒオリエ ビッグフェイスタオル

[![bigface.jpg](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/bigface.jpg?alt=media&token=695864ed-6be2-4084-9da8-e1948eceb3eb)](https://www.amazon.co.jp/gp/product/B01MFDDZS1/)

これはですね、私がめちゃめちゃバスタオル嫌いなんですね。

バスタオル嫌いな理由は、干すときに幅をめちゃめちゃとるのと、洗濯槽のかさもめちゃめちゃとるからです。

要するに一般的な成人男性の全身を拭くだけなのにバスタオルのサイズ感はでかすぎないか？ということです。

で、調べたらビッグフェイスタオルなるものがあるらしいのでこれをバスタオル代わりに使っています。

バスタオルを憎んでいる人はどうぞ。

### エバークック フライパン

[![pan.jpg](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/pan.jpg?alt=media&token=d4478067-8c74-4065-ab78-a539f2313615)](https://www.amazon.co.jp/gp/product/B016BCAMQW)

いわゆるテフロン加工のフライパンです。

我が家には別で鉄フライパンがあって、それもまぁおすすめなんですが、わざわざ鉄パン使うほどでもないなーってときは、やはりテフロンで楽したくなります。

今までもテフロンは色々使ってきましたが、その中でも特にエバークックはつるつるすべすべです。

油の量をめちゃめちゃ減らせるようになりましたし、洗うのも一瞬です。

### エヌケーグループ販売 引っぱリンガー

[![hippari.jpg](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/hippari.jpg?alt=media&token=8ed4d6fd-80b2-46b2-9380-c10b5dbcc49d)](https://www.amazon.co.jp/gp/product/B0013UD9D6/)

まぁ、あの、見ての通りです。

容赦なく洗濯物を引っ張れるので楽です。

組み立てに結構時間かかります。（二人で20分ぐらい）

### ロジクール トラックボール 

[![logi.jpg](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/logi.jpg?alt=media&token=9a19fc17-597e-418c-9fc2-99e2944bcba4)](https://www.amazon.co.jp/gp/product/B08L4ZR79Q/)

ロジクールが満を持して発売した親指トラックボールの最新機です。

旧型と比べて球が取り出しやすくなったってことぐらいなので、旧型使用してる人は寿命迎えてからの交換でいいと思います。

で、トラックボールなんですけど、マウスを使ったゲームをしない人なら割とおすすめです。

合う合わないがあるので全員には勧めづらいものでもありますが、

1. 場所を取らない
2. 手首が疲れない
3. マウスパッドとかが必要ない

と良いことだらけです。

デメリットとして

1. 慣れるまで時間がかかる（最悪一生慣れない）
2. こまめに掃除する必要がある

上記2点があるのですが、①に関して、現代人はスマホに慣れてるので親指でカーソル動かすぐらいなんてことないと思ってます。私は1時間もいりませんでした。  
あとカーソルの速度が遅いと慣れないんじゃないかなーと思っております。

②に関しては、むしろ長く使うために、必要に迫られて掃除をさせられるというメリットと捉えています。球とってティッシュで拭くだけですし。

ちなみに[上位機種](https://www.amazon.co.jp/dp/B074Z71C2M/)もあって、そっちも高い評価です。  
私は使ったことがないのと、充電式より乾電池の方が(トラックボールに関しては)好きなので割愛。

### KaRaDaStyle ストレッチポール

[![po.jpg](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/po.jpg?alt=media&token=096a9f40-3f6c-4ab7-92da-2f0064764540)](https://www.amazon.co.jp/gp/product/B07TWPXXD3/)

これもまぁ人におすすめするほどではないかもしれないんですが、重宝してます。

結構すぐ腰痛になるので買いました。私の場合、一定効果があるようです。

更に友達に勧めたところ、「これヤバい、マジで効く」と勧めた人もびっくりするぐらいの反応が返ってきたので、まぁきっと大半の人に効くんだと思います。

ある程度の硬さがあればどのポールでもいいので調べてみてください。

ついでにトレーニング法とか、どういうものに効果があるのかとかもご自分で調べたほうがより分かりやすいと思います。すいませんなんか上手くPRしにくいんですこれ。

### エレクトロラックス コードレス掃除機

[![ele.jpg](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/ele.jpg?alt=media&token=11daa038-1f6b-47eb-a47e-03f8449d088a)](https://www.amazon.co.jp/gp/product/B07RBL618L/)

以前はマキタのコードレス掃除機を使っていて、それも良かったんですが、自立するのが欲しいよねーってなってこちらを購入。

目論見通り自立するのが嬉しいのと、ハンディモードも簡単にできるのが嬉しい。

一方でめちゃ重いのと、操作感に慣れるのがちょっと時間かかりました。

例えば階段がある家庭とか、掃除機を持ち上げる必要がある家庭ではおすすめしません。

### ユニクロ ボアスウェットパーカーとパンツ

[リンク](https://www.uniqlo.com/jp/ja/search?q=%E3%83%9C%E3%82%A2%E3%82%B9%E3%82%A6%E3%82%A7%E3%83%83%E3%83%88)

めちゃめちゃあったかいです。寒い日は室内でも外でも着てます。

人に会う外出だとさすがにこのパンツでは厳しいですが、ちょっとした外出なら楽に防寒できるのでかなり良い。

万人におすすめできます。

2021年買ってよかったもの

2021年二回目の投稿になります。  

ということでこのブログは来年には完全に形骸化しそうです。  

このブログの存在意義として、

①自分が学びを得たときの備忘録として  
②自分が新しい仕事を獲得するときのポートフォリオとして  
③人に伝えたいものがあるとき  

この3点な訳ですが、どれか一つでも満たすものが最近てんで無くてですね・・・。

### 2021年の目標

「ふるさと納税をしたくなるほどに所得を増やす」でした。達成しました。

ふるさと納税については、別途攻略記事を書こうかと思っていますが、筆が重い。

### 仕事面

1月2月は遊び呆けてました。

3月から知り合いに案件を紹介してもらい、後に紹介先の会社から中抜きされて、賃金もアップしました。

業務内容としては、

3~7月 Rails 製 EC サイト開発&運用保守  
8~10月 Next.js 製 BtoB マッチングサイト開発  
11~12月 Rails 製 自治体向けサイト開発  

メインで契約してる会社の業務がこんな感じ。

副業(?)で laravel を使用した社内アプリ、React + Amplify を利用したバイオテクノロジー研究者向けアプリ等など。

で、本当に今年は学ぶものがないなーとか思ってたんですが、Amplify に関しては知識0からスタートして、最終的には割りかし虜になりました。よかったよかった。

Amplify に関してはバージョンアップのタイミングで紹介しようとは思っていますが、筆が重い。

### 仕事以外の面

昨年は NISA をはじめましたが、今年は6月ぐらいから iDeCo をはじめました。

それとは別に普通に課税口座で投資信託をはじめまして、今年は投資の勉強を結構しました。

しかしまぁ勉強すればするほど、インデックス投資に突っ込んで気絶しておくのが一番いいんじゃないかという気になっていて、これ以上の勉強は不要かなとは思っています。

このへんの話や情報共有を気軽にできる友達が欲しいものですが、中々お金の話って気軽にできないですよね。

### 2022年

2022年の目標は「旬の野菜や魚を覚える」です。

2021年振り返り

先日 PC を買い替えました。  
その際に、前 PC からの引っ越し作業を極力簡単にすべく、WSL2 のエクスポートができたらいいなーとか調べてたら、普通にできたのでメモしときます。

### export
まず引っ越し前の PC の WSL2 から Ubuntu をエクスポートします。
PowerShellを実行して
```sh
wsl --export Ubuntu ./myUbuntu.tar
```
Ubuntu の部分は今自分が使っているディストリビューションの名前に適宜変更してください。  
myUbuntu.tar も好きな名前にしてもらって構いません。

出来上がった tar が私の場合20GBほどあったので、7zip で圧縮して Google Drive に上げることによってお引越しをすることにしました。

### import
早速新 PC にインポートしたいところですが、まずは WSL2 の環境作りをしないといけないですが、そこは[以前紹介した](https://masopon.com/posts/windows10-wsl2-docker)ので割愛。

新 PC 上で先程の tar を解凍して、PowerShellを起動した状態を想定して
います。
```sh
mkdir ~/AppData/Local/myUbuntu
wsl --import myUbuntu ~/AppData/Local/myUbuntu ./myUbuntu.tar --version 2
```

これでインポートが完了しました。

### 設定
PowerShell上で
```sh
wsl -l
```

と打てば今回インポートした myUbuntu ディストリビューションがあることが確認できると思います。

普通はこの myUbuntu をデフォルトにしたいはずなので設定してあげます。

```sh
wsl --set-default myUbuntu
```

あとは windows terminal 等で myUbuntu を開いてやれば引越し前の環境でお仕事できるようになるでしょう。

myUbuntu にログインしたときにもし root ユーザーになっていたら、
`/etc/wsl.config`　に以下の記述を追加

```
[user]
default=username
```

あと多分 windows terminal でログインするとログイン後にいるディレクトリがwindows 側のディレクトリになっているので、terminal の設定画面を開いて修正してあげましょう。

![image.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/image.png?alt=media&token=8b1b5fbf-3f74-4dc7-bc6f-81bfe4956211)
いつの間にか GUI で設定できるようになってた。

WSL2の環境をお引越し（インポート、エクスポート）

### 2019年末時点での2020年の目標
まず振り返る前に目標がなんだったか、ですよね。

私の2020年の目標は「とにかくチャレンジする」でした。

私が20代最後の年となったので、失敗を恐れずに何事にも挑戦する、といった主旨です。

性格的にも、腰が重い、といいますか、どうせ失敗しそうなプロジェクト、イベントに首を突っ込まないような立ち回りをしているのですが、

今年は直感で良くないと思った物にも手を出してみました。

やってみた結果としては、0勝2敗1分みたいな感覚なんですが、来年もチャレンジするのをやめずにいこうかなと思えました。

チャレンジは年齢関係なくやってみるもんだ。

### ざっくりとした振り返り

2020年を振り返るとやっぱりコロナって感じですかね。

元々フルリモートだったので個人的にはあまり影響がなかったですが、妻がリモートワークになった影響でちゃんとしたお昼ごはんを用意しなくてはならなくなり、多少太りました。多少ですけどね。

楽しみにしていた演奏会も中止になってしまい、行きつけの居酒屋にも行かなくなり、友達と遊ぶのもなくなりました。

でもまぁそんぐらいです。引きこもりにはちょうど良かったとまで言えるかもしれません。

振り返りはこんなもんで、あとは雑に今年やったことをメモしていきます。

### 積み立てNISAをはじめた
いわゆる投資信託ですね。積み立てNISAは、年間40万円までしか投資できない代わりに、利益が20年間非課税になるのと、国が指定した安全性の高いファンドにしか投資できないって感じでしょうか。

株もFXも投資信託も競馬もギャンブルも一緒くたなイメージだったんですが、長期で経済を見たときに、世界経済は常に右肩上がりに成長しているので、長期的に投資信託をするのはお得（というかしないと損）なんだなと結論づけまして、比較的手を出しやすい積み立てNISAからやってみた、という感じですね。

ちなみに今年積み立てた40万円分は現在で+3万円ほどになっています。定期預金よりはよほどいいかなと思いました。

### フリーランスエージェントに登録した
今年のはじめと終わりにそれぞれ1社ずつ。

はじめに登録した方が本当にひどくて、「あなたにご用意できる案件はありません」とか随分なことを言われるぐらいはまだマシで、こちらの話が全く通じなかった。

特にクラウドサービス系の話が全く通じず、よかれと思って AWS や Firebase の経験を話させてもらったんですが、「インフラエンジニアは今後仕事ありませんよ」ってインフラエンジニアでもないのに言われる始末。

一応エージェントに頼らずともギリギリ食っていける金を稼げているので、別によかったのですが、初めて Google Map で☆1つけましたね。何らかのクチコミを書き込んだのも初めてのことでした。

終わりに登録した方は、ほんとに昨日思い出したように登録したので無評価です。

### フロント系もだいぶ手を出した
プログラミングの話ですけども。

このブログもサーバーレスで構築してみましたし、最近 Next.js で作り変えたりしました。

Flutter にも手を出してみましたが、思ったより簡単に書けそうなことが分かったので、急いで習得しないでいいなという結論になりました。状態管理が整ったらまた手を出してもいいかもしれない。

Next.js を触って衝撃を受けて、JavaScript, TypeScript の技術レベルを上げないとなと思いました。  
サーバーサイドもきっと TypeScript 製フレームワーク一強になるんじゃないかと思ってます。

frourio のバージョンが安定したら、全力ベットしたいな。

### 2021年

来年のざっくりとした目標は「ふるさと納税をしたくなるぐらい所得を増やす」です。

家賃を経費に按分できるせいか、現状所得税がワンコインになってます。

今年の目標に比べると随分生々しくなってしまいましたが、三十路になる年ですからね。

2020年振り返り

ブログをリニューアルしました。リニューアルといっても見た目はほぼ変えていません。  
ちなみに前のブログは[こちら](https://test-blog-a5123.firebaseapp.com/)

以前は Vue.js で作っていたのを、React と Next.js で作り変えました。

このブログを作った当時は、作り変えるなら Gatsby.js かなーと言っていたのですが、今の御時世 Next が物凄い進化を遂げていると聞いたので、Next にしてみました。

なぜ React に寝返ったか、Next の何が良いかをざっと見ていきます。

### Vue.js のいいところ

このブログの記事タイトルを描画しているコンポーネントをコードで比較してみましょう。

React
[![react.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/react.png?alt=media&token=dcb90931-8148-49f5-a05c-26d2590d0932)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/react.png?alt=media&token=dcb90931-8148-49f5-a05c-26d2590d0932)

React の方は、見慣れない Link タグや、className= のような書き方があります。
あと return の中に HTML タグがあるのがちょっと気持ち悪いですね。  
ちなみに CSS フレームワークに、Tailwind を使っています。

Vue
[![vue.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/vue.png?alt=media&token=8f096650-c1cd-42d3-8bf7-20c3075b61c0)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/vue.png?alt=media&token=8f096650-c1cd-42d3-8bf7-20c3075b61c0)

Vue は template タグの中に、HTML を書き、script タグの中に JavaScript の処理を書いていきます。書いてないですが、CSS を書く場合 style タグの中に書きます。  
CSS フレームワークに、Vuetify を使っています。

Vue のいいところは手軽さ、とよく言われています。

実際 React は JSX 記法で書いていくのに対し、Vue は素の HTML と CSS, JavaScript の組み合わせで書いていきますので、とっつきやすい気がします。

2つを比べると確かに Vue の方がシンプル・・・ですかね？

正直なところ大差ない気がしてるんですよね。なんなら React の方がちょっと見やすくないかとまで思います。

このあたりは個人差があるところですし、私もちょっと前まで JSX 気持ち悪い、学ぶなら Vue だなとか言っていたので、あまり React 贔屓をするわけにもいきません。

他に Vue が優れているものと言えば、

- 状態管理(Vuex)が比較的分かりやすい
- vue-cli による環境構築が簡単

あたりになると思いますが、これはそのとおりかな、といった印象です。

### React のいいところ

React のいいところと言えば、なんといっても TypeScript との相性がバッチリなところかなと思います。  
これはとても重要なことです。

そして状態管理の複雑さに関しては、React Hooks の登場で改善されました。

React に関してはそんなところです。続いて Next についてです！

### Next.js のいいところ

Next.js とは Vercel 社が開発した、React のフレームワークです。

React の環境構築、設定の難易度をぐっと下げてくれる他、ファイルパスによる動的ルーティングと、各propsメソッド の記述のし安さ、その他便利要素盛りだくさんです。

更に高機能なものとして、SSG と SSR をページ毎に選べる機能と、(Vercel でホスティングするときに限り) ISR ですかね。

急に3文字の英単語が3つもでてきました。

SSR は今更解説することもないかなと思いますので、他の2つに言及すると、  
SSG は 静的サイトジェネレーターといって、事前にビルドした静的なページをアクセス時に返すシステムです。  
静的なページなので速度面で最強、SEO 的にも最強クラスなので、可能な限り SSG にすべき、とまで言えます。  

デメリットとして、事前にビルドしないといけないので、ページが増えるたび、サイトを更新するたび、すべてのページをビルドしなければいけないです。

一方で ISR は、リクエスト時、もしくは一定時間ごとに対象のページのみをビルドし直します。  
更新後、最初のリクエストのみ更新前のページを返却する、もしくは SSR してビルドしたページを返す、といったことを、ページごとに設定できます。

これはもう凄いことで、全部これでいいじゃんって思うほどにハチャメチャ高機能なシステムです。

一方で認証等リクエスト時にサーバーとの通信が必要なページに関しては、SSR を選択したり、SSG + CSR を選択すればよいと思います。

何にせよページごとに設定できるのが強すぎですね。

### 総評
結局の所、Vue.js のいいところは、Next.js を導入した React と比べてしまうと、優れている要素が特に無い気がします。  
これは Vue に Nuxt を導入したとしてもです。

Vue は基本的に React の後を追っているので、やがて Next と Nuxt が同等の機能を持つかもしれませんが、そうだとしても最終的に、TypeScript の相性問題を解決しない限り、Vue が React を超えることはないと思われます。

以上がこのブログを Next.js でリニューアルした理由、Vue から React に寝返った理由になります。

そんなことを言っておきながら2,3年で情勢がころっと変わってくるのが Web フロントの闇だと思っているので、やっぱりサーバーサイドで生き続けたいと思う所存であります。

しかし、Next.js がこれだけ高機能で、サーバーサイドにも足を突っ込んできている現状、サーバーサイドも Next を軸に動いていくかもしれません。  
例えば Node.js 一強になる。Node のフルスタックフレームワーク(例えば frourio とか)が ファーストチョイスになるとか。

ちなみに lighthouse の結果

[![lighthouse.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/lighthouse.png?alt=media&token=d12dd79e-9841-45ef-b1e1-72b545c76125)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/lighthouse.png?alt=media&token=d12dd79e-9841-45ef-b1e1-72b545c76125)

すげぇ

ブログをリニューアルした

Flutter をゼロから学び始めたいなと思い、学習することになりました。  

理由は、暇だから，サーバーサイドはある程度力ついたなと感じたから，ゆくゆく金になりそうだから、になります。  

しばらく Flutter 勉強記のようになると思います。

今回は環境構築編。

### Flutter とは

Dart という言語のフレームワークです。主にスマホアプリ向け。  

本来ならば、iOS には Swift、Android には Kotlin(Java) といった言語を使ってアプリを作らなければならないのですが、Flutter を使えば、両方の OS 用アプリを作ることができます。  

似たようなものとして React Native が有名どころでしょうか。  

React Native と比較したい場合、「Flutter VS React Native」とググって見ると良いです。  

ググるとなんとなーく Flutter が優秀に見えてきます。  

では環境構築していこうと思いますが、注意点として、Windows ユーザーは iOS 用のビルドをすることができません。  

Mac ユーザーは、iOS と Android 両方に向けたビルドが可能になっています。  

私は Windows ユーザーなので、以降 Windows 想定で書いています。あしからず。  

### インストール

[https://flutter.dev/docs/get-started/install](https://flutter.dev/docs/get-started/install)  

こちらから対象の OS(今回は Windows)を選択して、SDK の zip をダウンロード。  

Cドライブ直下や、`C:\src` のようなディレクトリ上で解凍すると良いようです。  
`C:\Program Files` とかはやめてくれ、と書いてありますので、今回はCドライブ直下に解凍します。  

#### 環境変数設定

いわゆるパスを通します。  

Windows の検索欄に、env といれると設定画面が出てきます。  

[![path.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/path.png?alt=media&token=d7bd2d58-6ead-4d71-82a1-3ed69585d3b8)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/path.png?alt=media&token=d7bd2d58-6ead-4d71-82a1-3ed69585d3b8)  

環境変数をクリック -> ユーザー環境変数の一覧より、Path をクリックし、編集します。  

[![env.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/env.png?alt=media&token=02acd43a-a5e7-4f94-a395-72b3141b0154)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/env.png?alt=media&token=02acd43a-a5e7-4f94-a395-72b3141b0154)  

新規 -> `C:\flutter\bin` を入力して、保存。  

Windows PowerShell を開いて、試しに以下のコマンドを打ってみます。  

```
flutter doctor
```

それっぽい画面が出てきたら成功です。  

[![flutter_doctor.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/flutter_doctor.png?alt=media&token=53694308-2bea-4a43-ad5e-79b8900c2d4f)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/flutter_doctor.png?alt=media&token=53694308-2bea-4a43-ad5e-79b8900c2d4f)  

#### Android Studio インストール

[https://developer.android.com/studio](https://developer.android.com/studio)  
こちらから Android Studio をダウンロード、インストールをします。  
特に設定をカスタムすることもないと思います。  

Android Studio を起動して、歯車アイコンより、Plugin を選択します。  

Flutter と検索窓に入力し、Flutter をインストールします。  

[![plugin.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/plugin.png?alt=media&token=0a28b803-1525-4331-9fe7-e746876a9803)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/plugin.png?alt=media&token=0a28b803-1525-4331-9fe7-e746876a9803)  

Android Studio を再起動します。  

### 試しに作ってみる

プラグインが無事にインストールされていたら、起動画面に、`Start a new Flutter project`というのが追加されていると思います。  

[![new_flutter_project.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/new_flutter_project.png?alt=media&token=2b22462d-d182-4030-93a4-016fc5a9e447)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/new_flutter_project.png?alt=media&token=2b22462d-d182-4030-93a4-016fc5a9e447)  

`Start a new Flutter project`をクリックしてプロジェクトを作成していきます。  
基本的にNext押しとけば良いですが、一箇所、Flutter の Path を選択する項目があるので、ご自身の環境に合わせて変更してください。  

今回は`C:\flutter`ですね。  

[![new_flutter_select_path.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/new_flutter_select_path.png?alt=media&token=0f6d7850-045b-4733-acdf-e08476433e07)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/new_flutter_select_path.png?alt=media&token=0f6d7850-045b-4733-acdf-e08476433e07)  

残りの項目はお好みで、変えても良いし変えなくても良いです。  

Finish を押すとアプリが作成されます。  

試しにエミュレータ(シミュレータ？)を起動してみましょう。  

起動方法は、仮想デバイスを選択して、起動ボタン、です。  

[![boot.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/boot.png?alt=media&token=80807246-69e6-48e7-b86a-3e1e2f616b38)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/boot.png?alt=media&token=80807246-69e6-48e7-b86a-3e1e2f616b38)  

無事起動できたら、今日はここまでにしましょう。お疲れさまでした。

Flutter 環境構築してみた

Windows ターミナルは、Microsoft が公式で作った、唯一まともなターミナルです。

コマンドプロンプトや Power Shell の画面が生理的に受け付けなかった方でも、なんとか耐えられるのではないでしょうか。

ただし、Windows ターミナルはかなり発展途上のターミナルです。

毎月アップデートをしているので、この記事の情報も将来は役に立たなくなっていると思われます。

### インストール

Microsoft ストアにて「terminal」と検索してもらえば一番上に出てくると思います。

そちらをインストール。

### 設定

上部のメニューから設定ボタンをクリックするか、「Ctrl + ,」で設定画面を開いてくれます。

将来的にはちゃんと設定画面が出てくるらしいのですが、現在は json ファイルがエディタで開かれます。ロックな感じ、自分は好きです。


```json
{
  "$schema": "https://aka.ms/terminal-profiles-schema",

  "defaultProfile": "{2c4de342-38b7-51cf-b940-2309a097f518}",

  "copyOnSelect": true,

  "copyFormatting": false,

  "profiles": {
    "defaults": {
      // Put settings here that you want to apply to all profiles.
      "fontFace": "HackGen35Nerd Console",
      "fontSize": 11,
      "colorScheme": "Solarized Dark",
      "cursorShape": "vintage"
    },
    "list": [
      {
        // Make changes here to the powershell.exe profile.
        "guid": "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}",
        "name": "Windows PowerShell",
        "commandline": "powershell.exe",
        "hidden": false
      },
      {
        // Make changes here to the cmd.exe profile.
        "guid": "{0caa0dad-35be-5f56-a8ff-afceeeaa6101}",
        "name": "コマンド プロンプト",
        "commandline": "cmd.exe",
        "hidden": false
      },
      {
        "guid": "{2c4de342-38b7-51cf-b940-2309a097f518}",
        "hidden": false,
        "name": "Ubuntu",
        "source": "Windows.Terminal.Wsl",
        "commandline": "wsl.exe ~ -d Ubuntu"
      },
      {
        "guid": "{b453ae62-4e3d-5e58-b989-0a998ec441b8}",
        "hidden": false,
        "name": "Azure Cloud Shell",
        "source": "Windows.Terminal.Azure"
      }
    ]
  },
  "schemes": [
  ],
  "keybindings": [
    {
      "command": "nextTab",
      "keys": "ctrl+right"
    },
    {
      "command": "prevTab",
      "keys": "ctrl+left"
    }
  ]
}
```

こちらが設定画面を結構端折って書いたものですが、詳しい設定は[公式ページ](https://docs.microsoft.com/ja-jp/windows/terminal/customize-settings/global-settings)に任せて、ざっくり解説します。基本的に任意項目です。

### defaultProfile

デフォルトのターミナルを指定します。自分の場合は Ubuntu をデフォルトにしたいので、Ubuntu の guid が下の方に書かれているのをコピーして、指定しています。

### profiles

#### defaults

どのターミナルでも共通の設定を書きます。

`fontFace` : フォントを指定します。自分は[以前紹介した](https://masopon.com/posts/font-hackgen)白源ですね。

`fontSize` : フォントのサイズを指定します。

`colorScheme` : [公式の配色ページ](https://docs.microsoft.com/ja-jp/windows/terminal/customize-settings/color-schemes)を参考に、ターミナルの配色を指定します。

`cursorShape` : カーソルの形がデフォルト(縦線)だと気に食わないので変えてます。

#### list

あまりいじるところもないのですが、Ubuntu の`commandline` をデフォルトから変えて、起動時にホームディレクトリが表示されるようにしています。

### keybindings

デフォルトでもたくさんキーボードショートカットが設定されていますが、加えてタブ周りを改造しています。

`command`に[公式で用意されている](https://docs.microsoft.com/ja-jp/windows/terminal/customize-settings/actions)アクションを設定して、  
`keys`でショートカットを設定します。  

上記の例だと、Ctrlとスクロールキーでタブの移動ができるわけですね。

### 終わりに

以上でございます。mac 時代に使っていた Iterm2 と比べるとかなり劣りますが、まだまだ発展途上で、そしてなにより Microsoft がまともなターミナルを用意してくれていることは喜ばしいことだと思います。  

普段やってないけど、背景画像をつけることもできる。

![background.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/background.png?alt=media&token=b75c3c56-634b-481b-b379-53b640a60335)

Windowsでもターミナルをおしゃれに使える(かもしれない)Windows Terminal

### WSL2 とは

Windows Subsystem for Linux 2 の略なのですが、めちゃめちゃ端折って言うと、Windows の中に仮想で Linux を入れることができる、みたいなイメージです。

WSL1 との比較等はここでは言及せず、ただインストールの手順だけをメモしたいと思います。

### インストール準備

PowerShell を管理者モードで実行して、下記のコマンドを実行。  
(windowsのスタートボタンを右クリック-> Windows PowerShell(管理者))

```bash
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
```

更に下記のコマンドを実行。

```bash
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
```

一回 PC を再起動します。

### Ubuntu の入手

Microsoft Store アプリを開いて、Ubuntu と検索して、Ubuntu を入手します。

一度、Ubuntuアプリ を起動して、username と password の設定をしておきましょう。

設定できたら Ubuntuアプリ は閉じて OK。

### WSL2 インストール

もう一度 PowerShell を管理者モードで実行して、下記のコマンドを実行。

```bash
wsl --set-default-version 2
```

確認のために、下記コマンドを実行。

```bash
wsl -l -v
```

Ubuntu の VERSION が 1 になってるはずなので、2 にしちゃいます。

もし Ubuntu 以外の Linux をインストールしていたり、バージョンが明記されている Ubuntu (Ubuntu20.04 みたいな) をインストールしていた場合は、下記の Ubuntu の部分を Ubuntu20.04 のように変えてください。

```bash
wsl --set-version Ubuntu 2
```

このとき、エラーのようなメッセージが出てきた場合は、[https://aka.ms/wsl2kernel](https://aka.ms/wsl2kernel) から、最新の WSL2 Linux カーネル更新プログラム パッケージをダウンロードします。

インストールしたら再び上記のコマンド(wsl --set-version Ubuntu 2)を実行。

処理に数分かかりますが、これで完了です。

### Docker のインストール

[https://hub.docker.com/editions/community/docker-ce-desktop-windows](https://hub.docker.com/editions/community/docker-ce-desktop-windows) から、ダウロード、インストールします。

チェック項目は基本的にデフォルトのままで大丈夫です。

チュートリアルは、Docker 使ったことあるならスキップしていいと思います。

### その後
以降、Ubuntu を起動した場合 WSL2 上での起動となるはずです。お疲れさまでした。

そのまま Ubuntu アプリを使ってもかまいませんし、見た目をおしゃれにしたい方は、Windows Terminal 上で動かすのがおすすめです。

Windows Terminal については[別の記事](https://masopon.com/posts/windows-terminal)で紹介しています。