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

### 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年プログラミング活動まとめ（随時更新）

先日 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の環境をお引越し（インポート、エクスポート）

ブログをリニューアルしました。リニューアルといっても見た目はほぼ変えていません。  
ちなみに前のブログは[こちら](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)で紹介しています。

Windows10にて、WSL2のインストールとDockerのインストール

Web 業界で仕事していて思うのは、エンドユーザーが触る画面は React や Vue などの JS フレームワーク(ライブラリ)を使ってリッチな画面を作る方が良いが、  

一方で管理画面はそこまでしなくてもいいのでは、と思っています。  

そんな自分の思想にぴったり合うのが Laravel + AdminLTE の組み合わせです。  

サーバーサイドエンジニアは API 開発がメインだと思うので、基本は API に注力してもらって、  

管理画面は Laravel のフルスタックさを利用して手早くつくる、というのはかなり妥当な考えだと思っています。  

ということで紹介。  

### インストール

使うライブラリはこちら

[https://github.com/jeroennoten/Laravel-AdminLTE](https://github.com/jeroennoten/Laravel-AdminLTE)

```
composer require jeroennoten/laravel-adminlte
```

```
php artisan adminlte:install
```

### 利用方法

使いたい blade で以下のサンプルを記述

```php
@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Dashboard</h1>
@stop

@section('content')
    <p>Welcome to this beautiful admin panel.</p>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
@stop

@section('js')
    <script> console.log('Hi!'); </script>
@stop
```

これだけで基本的な画面がつくられます。  

あとは content の中身をよしなに変えたら終わりですね。  

サイドバーの中身等、設定は`config/adminlte.php`で出来ます。  

ちょっといじったサンプル  

[![20200721 03.24.33 localhost ae103cf012e5.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/2020-07-21%2003.24.33%20localhost%20ae103cf012e5.png?alt=media&token=861c0294-0cc6-4b20-b648-eb57d99a2ef0)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/2020-07-21%2003.24.33%20localhost%20ae103cf012e5.png?alt=media&token=861c0294-0cc6-4b20-b648-eb57d99a2ef0)

### まとめ

AdminLTE は元々 JS のライブラリですが、Laravel と組み合わせるのがとても相性良いと思います。  
まぁ Rails とかでもいいんでしょうけど、ざっと調べた感じ設定がめんどくさそうでした。  
単に自分が Rails 好きじゃないだけなんですけども。


Laravel + AdminLTE で管理画面をらくらく作成

個人的によく使う VS Code の拡張機能(HTML & CSS & JavaScript編)です。  

本当は知ってる言語全部を一つの記事にまとめたかったのですが、フレームワークも含めると数が多くなったので、とりあえずフロント言語編とします。  

## HTML & CSS

### Emmet

これは拡張機能ではなく標準搭載されているんですが、覚えとくと何かと便利なので一応書いときます。  

[こちら](https://docs.emmet.io/cheat-sheet/) がチートシートになっていて、要するにショートカットコマンドみたいな感じですかね。  
用語的にはスニペットと言うんでしょうか。  

個人的には `w100` と打って `width: 100px` が生成される、ぐらいしか意識して使ったことないです。  

標準搭載されているせいであまりありがたく感じてないのですが、多分 `div` って打って `<div></div>` が生成されるのも Emmet のおかげですよね。ありがとうございます。  


### Auto Rename Tag

対応する閉じタグも変更してくれます。  

[![auto_rename](https://raw.githubusercontent.com/formulahendry/vscode-auto-rename-tag/master/images/usage.gif)](https://raw.githubusercontent.com/formulahendry/vscode-auto-rename-tag/master/images/usage.gif)

### Auto Close Tag

自動で閉じタグを生成してくれます。が、上記の Emmet で大抵生成してくれるので役に立ってる実感がない。  
けど一応いれときます。  

### Path Intellisense

ファイルパスを保管してくれます。  

[![path_intellisense](https://i.giphy.com/iaHeUiDeTUZuo.gif)](https://i.giphy.com/iaHeUiDeTUZuo.gif)

### HTML CSS Support

HTML, CSS の id, class名を補完してくれます。  

## JavaScript

### ESLint

最強の linter ですね。なんですけどどうやって説明すればよいものか。  

多分フレームワークとかいれるときに勝手に環境に ESLint が入ってくれると思うので、そのときとりあえずこの拡張機能をいれとけばいいと思います。  

### Prettier

[前回](https://masopon.com/posts/vscode-common) も紹介したフォーマッターです。  
HTML, CSS, JavaScript のフォーマッターなのでどれか一つでも触るならいれておきたい。  

### Vetur

Vue.js に限ってしまうのですが、Vue を使うならいれておきたい。いれておきたいというか必須レベルですね。

個人的によく使う VS Code の拡張機能(HTML & CSS & JavaScript編)

個人的によく使う VS Code の拡張機能(共通編)です。  

言語別編もいつか書こうと思ってます。  

### Bracket Pair Colorizer

括弧を色分けして、対応する括弧の視認性を大きく向上させます。  

[![bracket](https://raw.githubusercontent.com/CoenraadS/BracketPair/develop/images/example.png)](https://raw.githubusercontent.com/CoenraadS/BracketPair/develop/images/example.png)  

### Code Spell Checker

一般的な英単語かどうかチェックしてくれます。  
結構タイポ防止に貢献してくれます。  

[![code_spell_checker](https://raw.githubusercontent.com/streetsidesoftware/vscode-spell-checker/master/packages/client/images/example.gif)](https://raw.githubusercontent.com/streetsidesoftware/vscode-spell-checker/master/packages/client/images/example.gif)  

### GitLens

Gitの差分表示を見やすくしてくれます。  

### vscode-icons

ファイル表示にアイコンを表示してくれます。  

### TODO Highlight

TODO: などのコメントを強調表示してくれます。  
チーム開発時はいれておきたい。  

[![todo](https://raw.githubusercontent.com/wayou/vscode-todo-highlight/master/assets/material-night-eighties.png)](https://raw.githubusercontent.com/wayou/vscode-todo-highlight/master/assets/material-night-eighties.png)  

### Settings Sync

github アカウントと連携して、VS Code の設定をバックアップ、同期させることができます。  
これがあるおかげでこの記事はメモとしての役割がない。  

### Docker

Docker を使うならいれておきたい。  

### Rainbow CSV

CSV ファイルをキレイにしてくれます。  

[![rainbow_csv](https://i.imgur.com/PRFKVIN.png)](https://i.imgur.com/PRFKVIN.png)  

### Prettier

HTML や CSS のシンプルなフォーマッターです。  
とりあえずいれておくと楽できるけど、バリバリフロント書く人はもっと良いのを使ってるかもしれない。  

### Background Phi Colors

個人的に超おすすめで、説明し辛い拡張機能です。  
ありとあらゆる面で視認性を向上させています。  

具体的には、インデントの色付け、カレントラインに含まれる単語を強調、スペースの強調表示、とかでしょうか。  

[![phi.jpg](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/phi.jpg?alt=media&token=94c493ca-0435-4f9f-93ad-5922caf3aef4)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/phi.jpg?alt=media&token=94c493ca-0435-4f9f-93ad-5922caf3aef4)  

個人的にカレントラインの強調表示はオフにしています。  

[![setting_phi.jpg](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/setting_phi.jpg?alt=media&token=1c7f3c35-ccd2-4efb-befe-f34bf55f6d4d)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/setting_phi.jpg?alt=media&token=1c7f3c35-ccd2-4efb-befe-f34bf55f6d4d)


個人的によく使うVS Code の拡張機能(共通編)

個人的に VS Code でよく使う or たまに使うけど使う度にググっている、キーボードショートカットをメモします。  

全部知りたい方はググってください。  

Windows で想定してます。  

### 基本

- `Ctrl` + `c`　コピー
- `Ctrl` + `x`　切り取り
- `Ctrl` + `v`　ペースト
- `Ctrl` + `a`　全選択
- `Ctrl` + `s`　ファイル保存
- `Tab`　字下げ
- `Shift + Tab`　字上げ

### よく使う

- `Ctrl` + `z`　編集を一つ前に戻す
- `Ctrl` + `p`　ファイル名検索
[![ctrlp.gif](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/ctrlp.gif?alt=media&token=150e4995-b87f-416e-8b40-874c37377efe)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/ctrlp.gif?alt=media&token=150e4995-b87f-416e-8b40-874c37377efe)

- `Ctrl` + `d`　単語を複数選択する
[![ctrld.gif](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/ctrld.gif?alt=media&token=713d210b-ccbd-4fa3-a5e6-085094a7e615)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/ctrld.gif?alt=media&token=713d210b-ccbd-4fa3-a5e6-085094a7e615)
- `Ctrl` + `d`　中に　`Ctrl` + `k`　複数選択を解除する

- `Ctrl` + `Shift` + `t`　閉じたタブを開く
- `Ctrl` + `f`　タブ内検索
- `Ctrl` + `Shift` + `f`　ディレクトリ/ワークスペース内検索
- `Ctrl` + `Enter`　次の行に空白行を追加
- `Home`　行頭に移動
- `End`　行末に移動

### たまに使う

- `Ctrl` + `y`　やり直す
  - `Ctrl` + `z`　で戻しすぎたのを元に戻すときに使う
- `Ctrl` + `Alt` + `↑↓`　マルチカーソルを追加する (`Alt` + `左クリック`　で自由な位置に追加できる)
[![ctrlaltscrollkey.gif](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/ctrlaltscrollkey.gif?alt=media&token=e46d0476-a9f6-4f81-abc8-1f84538ec860)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/ctrlaltscrollkey.gif?alt=media&token=e46d0476-a9f6-4f81-abc8-1f84538ec860)

- `Ctrl` + `PageUp, PageDown`　タブのフォーカスを移動する
- `Ctrl` + `←→`　単語単位でカーソル移動