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` + `←→`　単語単位でカーソル移動

個人的によく使うVS Code のキーボードショートカット

なんてことない小ネタですが、Docker上のLaravelでホットリロードしたいなーって人のための設定です。  

### 開発サーバーのみの場合

#### docker-compose.yml
~~~yml
version: "3"
services:
  app:
    build: ./docker/app
    ports:
      - "8000:8000"
      - "3000:3000" # HMR用
    volumes:
      - ./:/var/www/html
    command: "php artisan serve --host 0.0.0.0"
~~~

#### webpack.mix.js

~~~js
mix.browserSync({
  proxy: "0.0.0.0:8000",
  open: false // ブラウザの自動起動
});
~~~

`docker-compose.yml`は、すいません、だいぶ端折りました。  
実際には`./docker/app`に composer 等がインストールされるような php イメージの Dockerfile があります。  
あとDBとかも本当はありますが、関係ないので省いてます。 

### webサーバーをかます場合

#### docker-compose.yml
~~~yml
version: "3"
services:
  app:
    build: ./docker/app
    ports:
      - "3000:3000"
    volumes:
      - ./:/var/www/html
  web:
    image: nginx
    ports:
      - "80:80"
    volumes:
      - ./:/var/www/html
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
~~~

#### webpack.mix.js

~~~js
mix.browserSync({
  proxy: "http://web:80",
  open: false
});
~~~

### 共通操作

上記設定を記述したら、app コンテナの中で`npm run watch`を実行し、`http://localhost:3000`にアクセスすると完了です。  

.js や .vue ファイルのみならず、blade.php を変更してもホットリロードしてくれます。便利ですね。

Docker + Laravel (+ Vue) でホットリロード(HMR)したいときの設定

自分は約1年間、自宅でフルリモートワークを続けています。たまにお客さんとのミーティングだったり、エンジニア間での集まりもありますが、基本的に家から出ません。

昨今ではコロナウィルスの影響もあって、大部分の人がリモートワークをするようになったと思いますが、これを機に今後もリモートワークを続けることになった人へ少しでも体験談を伝えれたらと思います。

どっちかというと書くことなくなってきたのでテキトーに書いとくか、といった意味合いが強いです。

### 運動不足になる

家から出ないので当然です。多少買い物に出かける、とかそんなレベルじゃ到底間に合いません。
それに伴って太るかもしれません。お昼ごはんが外食だった人が自炊するようになったのなら太らないかも。

後述しますが、やる気がでないときや空いた時間で軽めの運動すると、リフレッシュにもなるし、健康的だし、仕事の効率もよくなるしでいい事づくしです。

自分は上半身をアブローラー、下半身をスクワット、 HIIT としてバーピージャンプをよくやっています。
嘘です。 HIIT は辛すぎてあんまり続いてません。でもコロナ終わったら再開したい。

### 仕事のやる気が出ない

家にいるので当然です。自分の場合朝8時に起きたとしたら、16時ぐらいまでやる気が起きません。

対策としてはダラダラしづらい服装に着替える、というのがあるそうです。自分は採用していません。

自分は就業時間が決まっていないので、より短時間で成果を上げられるように、やる気が出たときに最大効率で仕事をできるよう研究しています。
例えば、完全に自分の特徴で申し訳ないですが、考え事をするときは PC の前にいるより、寝っ転がって考えたほうが成果が出る、というのが受験勉強していたときから分かっているので、よく布団に入っています。

上にも書きましたが、運動して心拍数が上がるとやる気が出るそうです。実際プラシーボかもしれないけどやる気出てます。

特に午前中に心拍数を上げると、その日一日はとても効率の良い日になっているのを実感できます。

### 支出が減る

特にお昼ごはん代が大きいんですかね。なんだかんだ晩ごはんも外食とかコンビニスーパー飯になったりするのがめちゃめちゃ減ったと思います。
というのも自由な時間ができてスーパーに買い出しに行く時間ができるし、料理の時間も十分に設けられるし、なんなら事前にスーパーのチラシを眺めて買うものを吟味する時間も増えます。
(自分はトクバイというスーパーのチラシアプリみたいなんを使っています。)

一方で電気代は増えます。当然ですが。しかしいって2000円ぐらいじゃないでしょうか。普段から自炊完璧な人は一方的に2000円増えるだけなのかもしれません。

### amazonの荷物受け取れる

別に amazon に限りませんが、めっちゃ受け取れます。最速です。

### 人に会わない

サイコー！！！！！！


1年間リモートワークをした感想

VS Code の拡張機能を紹介していたらキリがないのですが、個人的に特に、他のエディタよりも VS Code が優れていると感じる機能を一つだけご紹介します。

それが VS Code Remote Development なのですが、正直あちこちで優秀な解説サイトがあるので、簡単な説明に留めます。

### やらないこと

- Dockerの説明

***

### Remote Development について

拡張機能の `Remote-SSH`, `Remote-WSL`, `Remote-Containers` の詰め合わせです。

特に `Remote-Containers` が便利なのでこちらにスポットライトを浴びせます。

### Remote-Containers

突然ですが、 Docker って便利ですよね。

なんといってもローカルに言語の実行環境を用意する必要がなく、コンテナをいつでも気軽に破壊、再生ができるのが魅力的だと思います。

しかし、エディタでコーディングする際に役立つ、型解析、フォーマッター、リンター等のツールは、言語がインストールされていないと機能しません。

なのでせっかく Docker を使っているのに、ローカルで対象の言語をインストールしないと良いコーディング環境が用意できませんでした。

`Remote-Containers` は、そんな悩みを解決できます。

VS Code の設定をコンテナ内に隠蔽し、インターフェイスのみローカルで動作させることができるようになります。

それによってコンテナ内の言語の実行環境を利用して型解析、フォーマッター、リンター等の機能を利用することができます。

### 利用方法

VS Code の拡張機能の `Remote Development` をインストールします。

[![vscode_remote_development.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/vscode_remote_development.png?alt=media&token=c9f05b3a-9acc-41d9-b0c4-ee0e632b030d)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/vscode_remote_development.png?alt=media&token=c9f05b3a-9acc-41d9-b0c4-ee0e632b030d)

`docker-compose.yml` や `Dockerfile` が含まれるプロジェクトを VS Code で開くと、左下にオレンジのアイコンがでてきます。

[![remote_icon.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/remote_icon.png?alt=media&token=2163e510-cfa6-464e-ae16-7168fbbe5fbe)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/remote_icon.png?alt=media&token=2163e510-cfa6-464e-ae16-7168fbbe5fbe)  
(自分の場合WSL上で動かしてるので少し表示が違うと思います。ローカル上ならアイコンだけのはず。)

オレンジのやつをクリックするとメニューがでてくるので、 `Add Development Container Configuration Files` をクリックします。

自分で設定を書くか `Dockerfile` を基準とした設定をつくるか `docker-compose.yml` を基準とした設定をつくるか聞かれますが、
今回は `docker-compose.yml`で構築されたプロジェクトを想定して、`From 'docker-compose.yml'` を選択します。

すると、 `.devcontainer/devcontainer.json` と `.devcontainer/docker-compose.yml` が作成されます。

`devcontainer.json` を見ていきましょう。

### devcontainer.json

```json
{
	"name": "name", // なんでも良い
	"dockerComposeFile": [
		"../docker-compose.yml",
		"docker-compose.yml"
	],
	"service": "app", // appコンテナを想定
	"workspaceFolder": "/app", // appコンテナのワークスペース
	"settings": { // appコンテナの中だけで使いたい VS Code の設定
		"terminal.integrated.shell.linux": null
	},
	"extensions": [] // appコンテナの中だけで使いたい VS Code の拡張機能
}
```

元々記述されていたコメントを全部削除したらこのようになると思います。

今回は rails を docker-compose で構築した想定で `devcontainer.json` を書き換えてみます。

```json
{
	"name": "rails",
	"dockerComposeFile": [
		"../docker-compose.yml",
		"docker-compose.yml"
	],
	"service": "app",
	"workspaceFolder": "/usr/src/app",
	"settings": {
		"ruby.useLanguageServer": true,
		"ruby.intellisense": "rubyLocate",
		"rufo.useBundler": false,
		"rufo.exe": "/usr/local/bundle/bin/rufo",
		"solargraph.useBundler": false,
		"solargraph.commandPath": "/usr/local/bundle/bin/solargraph",
		"solargraph.definitions": true,
		"solargraph.diagnostics": true
	},
	"extensions": [
		"aki77.rails-db-schema",
		"aki77.rails-routes",
		"castwide.solargraph",
		"eamodio.gitlens",
		"jnbt.vscode-rufo",
		"kaiwood.endwise",
		"rebornix.ruby",
		"wingrunr21.vscode-ruby"
	],
	"postCreateCommand": "gem install rufo solargraph" // コンテナ作成後に実行される
}
```

少し "settings" を冗長に書いているのですが、概ねこんなところでしょうか。

"postCreateCommand" によって、フォーマッターの `rufo` と、型解析の `solargraph` をインストールしています。

本来ならローカルで Ruby をインストールしないと動作しないこの2つの拡張機能を、コンテナの中にインストールすることによって動作させることができるわけですね。

また、元々の `Dockerfile` や `docker-compose.yml` でインストールさせず、 VS Code の機能によってインストールさせることで、他のエディタを使っていたり、拡張機能が必要ない他の開発者の環境に余分なものをインストールさせずにすみます。平和。

次に `.devcontainer/docker-compose.yml` を見てみましょう。

### .devcontainer/docker-compose.yml

```yml
version: '3'
services:
  app:
    volumes:
      - ~/.gitconfig:/root/.gitconfig
```

こちらは単純に、開発用に追加でボリュームマウントしたいものを書くだけで良いかと思われます。

他にありがちなのはシェルの設定とかをマウントさせるとかでしょうか。

### コンテナ作成

準備ができたら、再びオレンジのアイコンをクリックして、`Open Folder in Container` を選択します。

すると初回は結構時間が掛かった後、無事に作成され、ローカルと変わらぬコーディングができるようになってると思います。

以後 `devcontainer` の設定を変えたりしたら Rebuild してください。

ためしに `rufo` が動くか確認。

[![rufo.gif](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/rufo.gif?alt=media&token=61ad758c-5e42-44ad-8e38-794bffbffc24)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/rufo.gif?alt=media&token=61ad758c-5e42-44ad-8e38-794bffbffc24)  
できた。

### まとめ

今やほとんどの人が Docker で開発環境を構築していると思います。

今回の `Remote Development` は Docker の開発環境をよりサポートしてくれる優れものだと思います。

最近の Microsoft は WSL2 しかり VS Code しかり、便利なものをバリバリ作ってくれて良いですね。

あとは IE も破壊してくれれば最高なのですが。


VS Code + Docker で開発するなら、VS Code Remote Development

プログラマにとって、エディタやターミナルのフォントはこだわりポイントではないでしょうか。  

最近 mac から windows に移行して、ターミナルを起動したらフォントがジャミジャミしていてとても嫌な思いをしたので、  推しのフォント「白源」をインストールがてら紹介します。

### 白源とは

紹介するといっても、[こちら](https://qiita.com/tawara_/items/374f3ca0a386fab8b305) に作者様の解説がたっぷりあるので、それを見るのがおすすめです。  

自分の環境の VS Code のデフォルトと白源の画像を見比べてみましょう。  

#### デフォルトのフォント

[![vscode_default.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/vscode_default.png?alt=media&token=58c76223-98c1-495b-9085-3c4251b79a7b)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/vscode_default.png?alt=media&token=58c76223-98c1-495b-9085-3c4251b79a7b)

#### 白源

[![vscode_hackgen35.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/vscode_hackgen35.png?alt=media&token=9d26c94a-65ea-492c-bca1-49a817c385b6)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/vscode_hackgen35.png?alt=media&token=9d26c94a-65ea-492c-bca1-49a817c385b6)  

どうでしょうか。勿論個人の好みによるでしょうが、結構見やすくなってるのではないでしょうか。

### インストール

[こちら](https://github.com/yuru7/HackGen/releases) より HackGen または HackGenNerd の zip ファイルをDL展開する。  

全部インストールしてしまっても良いのですが、自分は HackGen35 と HackGen35Console の Regular と Bold をそれぞれインストールしました。

### 導入

あとは好きなエディタなりターミナルに導入しておしまい。お疲れさまでした。

### いかがでしたか？

いかがでしたか？フォントは、人によっては全く気にならないかもしれない細かい部分ですが、作業効率に関わるレベルで影響値の大きいものだと思っています。  

白源が気に入らなかった人も、他のフォントを探す旅に出るのは、無駄なことではないと思います。  
是非旅立ちましょう。

エディタやターミナルにおすすめのフォント「白源」

会社員の頃からシェルはzshを使ってましたが、その頃の上司がfishを勧めていたのをふと思い出し、移行してみました。  

結果的にfish最高ってなったので設定のメモがてら紹介します。

### fishとは
POSIX非互換のシェルです。  

POSIXってなんやねんって人は迷いなくfishを入れましょう。  

えーPOSIX非互換かーって人は躊躇してから入れましょう。

### なにができるの？
- デフォルトの設定で強力な補完が可能
- 見やすいシンタックスハイライト
- 入力履歴から優先して補完候補の表示
  
[![a.gif](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/a.gif?alt=media&token=3251ab0a-215b-4f27-b8da-1ec5dad10df0)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/a.gif?alt=media&token=3251ab0a-215b-4f27-b8da-1ec5dad10df0)  
dockerの補完もデフォルトでばっちり  

### 導入
#### macの場合

```bash
brew install fish
```

#### ubuntuの場合

```bash
sudo apt-add-repository ppa:fish-shell/release-3
sudo apt-get update
sudo apt-get install fish
```

#### ログインシェルをfishに
まだログインシェルにしたくないよって人は飛ばしてください。

```bash
chsh -s /usr/bin/fish
```

一度ターミナルを再起動します。

### プラグインマネージャー導入

fisherがおすすめらしいです。  

```bash
curl https://git.io/fisher --create-dirs -sLo ~/.config/fish/functions/fisher.fish
```

### テーマ導入

こちら: [https://github.com/oh-my-fish/oh-my-fish/blob/master/docs/Themes.md](https://github.com/oh-my-fish/oh-my-fish/blob/master/docs/Themes.md)  
を参考に好きなテーマをいれましょう。  

一番人気は oh-my-fish/theme-bobthefish のようです。  

自分は oh-my-fish/theme-clearance を入れました。

```bash
fisher install oh-my-fish/theme-clearance
```

### 他にも便利なプラグインがあるよ
以上で基本的には導入終了です。お疲れさまでした。  

デフォルトでも素晴らしいシェルですが、一応いくつか便利なプラグインがあるので、代表的なもの一つだけ紹介しておきます。  


### fzf
fishじゃなくても使えますが、大変便利な検索プラグインです。  

Ctrl + r で曖昧な入力履歴検索ができます。  

[![b.gif](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/b.gif?alt=media&token=606c905a-9def-4b53-9feb-d2a50324cd4c)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/b.gif?alt=media&token=606c905a-9def-4b53-9feb-d2a50324cd4c)  

Ctrl + o で曖昧なファイル検索。  

[![c.gif](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/c.gif?alt=media&token=f301112b-11de-471f-b97a-b086afd2acab)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/c.gif?alt=media&token=f301112b-11de-471f-b97a-b086afd2acab)  

めっちゃ便利に見えませんか。見えたら導入しましょう。

#### macの場合

```bash
brew install fzf
```

#### ubuntuの場合

```bash
sudo apt-get install fzf
```

#### fish用のラッパーを導入

```bash
fisher install jethrokuan/fzf
```

#### オプションの記述(任意)
~/.config/fish/config.fish に記述

set -U FZF_LEGACY_KEYBINDINGS 0  
set -U FZF_REVERSE_ISEARCH_OPTS "--reverse --height=100%"  
set -U FZF_FIND_FILE_OPTS "--reverse --height=100%"  

オプションの詳細はこちらまで  
[https://github.com/jethrokuan/fzf](https://github.com/jethrokuan/fzf)  

### あとがき
以上 fish でした。何がいいってデフォルトでもめちゃめちゃ便利なところだと思います。  

zshで同様のことをやろうとすると結構設定かましてプラグインいれないといけません。  

PC買い替えたとき用の備忘録として残しましたが、わりと万人におすすめのシェルです。是非使ってみてください。  

あと前の会社の上司ありがとうございます。

補完が強力なおすすめシェル fish

### なぜ作ったか
- 仕事を増やすためのアピール場として
- 技術的経験の備忘録として

***
自分はフリーランスのエンジニアなのですが、現在特定の一企業に依存している形で活動しています。  
それが少しリスキーといいますか、フリーっぽくないのが嫌で、  
こういう形で技術メモでもアウトプットしとけば、このブログ自体が名刺代わりになり、営業活動なり就職活動なりで役に立つかなと思い、作った次第です。  

ついでに仕事の経験をメモしておくことで、次回以降もスムーズに使い回せるようになるのが良い。  
  
なので、技術メモがメインのブログになるかと思われますが、雑記やお料理レシピ、おすすめ商品(アプリ)みたいなカテゴリーも書けたらいいなと思ってます。  

以下技術的な話  

***

### 自己紹介
主にwebアプリやスマホアプリのバックエンドをコーディングしたり、AWS等にサーバーをたてたりしています。PMもたまにやる。  
Rails/Laravel/Django/Go  
MySQL/Postgresql/Sqlite  
AWS/GCP,Firebase  
CircleCi/GithubActions  
Docker  
ElasticSearch  
Redis/memcached  

### 使用技術と選定理由
リポジトリ: [https://github.com/suzuki28ab/vue-blog](https://github.com/suzuki28ab/vue-blog)

#### フロント: Vue.js
- フロントの勉強をしてみたくて、学習コストの低そうなVueを選んだ

#### バックエンド: 無し(Firebase)
- かねがね興味のあったFirebaseを触ってみた
  - 認証、ホスティング、ストレージ、DBで利用

#### CI/CD: GithubActions
- CircleCiは使っているので、使ったことのないGithubActionsで自動ビルド/デプロイしている  

### 感想と反省
Vue.js良い。vue-cliである程度の構築とある程度の設計思想を与えてくれる。もっとフロント勉強しようと思わせてくれた。  

Firebaseも良いが、ブログを作るのにFirestoreを使うのはやりすぎた。   
触れて良かったとは思うが、今後もブログを続けるのならば、早々にGatsby.jsとかに乗り換えたほうがいい気がする。  
  
とにかくフロントが苦手なので設計もだめだめだし書き方もだめだめだった。  
本来バックエンドがやってるような処理もどっかに書かなきゃいけないので尚更だった。

### こだわりポイント
マークダウンでさらっと書けるところと画像をドラッグ&ドロップでCloud Storageに上げれるようにしたところ。
こうしないと絶対続かないだろうと思います。
このように  
[![7de11d9d743dc075a22b7a214a64c553.gif](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/7de11d9d743dc075a22b7a214a64c553.gif?alt=media&token=21b6a6bf-0e30-4f3a-a609-9d4eaf2d6f3c)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/7de11d9d743dc075a22b7a214a64c553.gif?alt=media&token=21b6a6bf-0e30-4f3a-a609-9d4eaf2d6f3c)

### 今後の創作
とりあえずこのブログもまだまだ未完成なので、完成させたいと思う一方、作り直した方がいいんじゃないかとも思っているので、ほどほどにする予定です。  

今後もVueを使った何かを作るか、Alexaに冷蔵庫の中身を覚えてもらうスキルを作るか、Androidアプリに手を出してみるか、色々やることは多いです。  

ひとまずは知見をひたすらこのブログにメモしていきます。
