現役エンジニアが個人的にベストな開発環境、フレームワークなどについて書く【2020年末】

# はじめに

COVID-19の影響でITエンジニアの方もリモートワークをされている方も多いかと思います。日常で利用するツールやデバイス、開発環境やフレームワークについてまとめます。分類の分け方があまり良くないので、わかりにくいかもしれませんが、少しでも参考になればと思います。
また、今回それぞれの内容について詳細な解説をしてませんので、もし興味がある方がいらっしゃいましたら、コメント頂ければできる限り回答させて頂きます。

※原則macOS環境を想定しています。また、macOS Big Sur、M1搭載Macでは検証していませんので、動作保証は出来出来かねますのでご了承ください。

# 開発環境系

## 共通

### Homebrew

公式リンク：[Homebrew](https://brew.sh/index_ja.html)
料金：無料

Macで開発する場合、まずHomebrewを入れるべし、というくらい有名。以下で説明するツールのいくつかについてはHomebrew経由で入れるので、必ず入れましょう。

### iTerm2

公式リンク：[iTerm2](https://iterm2.com/)
料金：無料

Macデフォルトのターミナルでも基本的なことはできるが、カスタマイズ性が少し弱い。iTerm2の場合は以下のようなメリットがあるので、とりあえずインストールすることをお勧めします。

* ステータスバーをカスタマイズして、CPU使用率などを表示できる
* 背景に画像を設定できる←ココ重要
* 背景透過設定ができる

### XCode Command Line Tools

公式リンク：??
料金：無料

コンパイラ等が含まれるため、Pythonのインストール時などに必要になります(恐らくですが)ので、とりあえずインストールしましょう。インストール方法は2種類存在します。

方法1：
下記コマンドを実行する

```shell
$ xcode-select --install
```

方法2：
Apple Developerからダウンロードする。その場合は、Apple Developerアカウント(無料で取得可能)が必要です。

### Visual Studio Code(VSCode)

公式リンク：[Visual Studio Code](https://code.visualstudio.com/)
料金：無料

開発用のエディタです。拡張機能が豊富で非常に使いやすいので、とりあえずインストールしましょう。動作も比較的軽いです。

おススメの拡張機能を載せます。

* [Apache Velocity](https://marketplace.visualstudio.com/items?itemName=luqimin.velocity)
    * .vtlファイル(AppSyncで利用)のシンタックスハイライトを有効にするために利用
* [Apollo GraphQL](https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo)
    * .gqlファイル(GraphQL)のシンタックスハイライトを有効にするために利用
* [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
    * HTMLの閉じタグを自動で挿入
* [Auto Complete Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-complete-tag)
    * Auto Close TagとAuto Rename Tagの両方の機能が入る
* [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
    * HTMLの対応するタグが自動で修正される
* [AWS Toolkit](https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.aws-toolkit-vscode)
    * AWSと接続することでAWSリソースを操作することができる
    * [AWS Toolkit for Visual Studio Code](https://docs.aws.amazon.com/toolkit-for-vscode/latest/userguide/welcome.html)
* [Better TOML](https://marketplace.visualstudio.com/items?itemName=bungcip.better-toml)
    * .toml(Poetryの設定ファイル)ファイルのシンタックスハイライトを有効にするために利用
* [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)
    * 中括弧の対応を分かりやすくする(JSなどで利用)
* [C/C++](https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools)
    * VSCodeでC++のコードを書くために利用
* [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
    * コード内のタイポ防止用
* [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
    * フロントエンド開発時に、コードをbreakpointで止めてデバッグすることができる
* [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)
    * DockerをVSCodeから操作できる
* [Draw.io Integration](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)
    * .drawioファイルをVSCodeで編集できる
* [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
    * editorconfigファイルでワークスペースの設定を上書きする
* [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)
    * エラー表示を見やすくする
* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
    * VSCodeでESLintを使えるようにする
* [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
    * Gitのファイル単位の履歴を見やすくする
    * 特定のファイルについて、過去のコミットとの差分を確認する
* [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
    * 行単位でのgit blameの結果を確認できる
* [Headwind](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind)
    * Tailwind CSSのタグの順番をソートする
* [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
    * インデント表示を見やすくする
* [Jupyter](https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter)
    * VSCodeでJupyter notebookを使うため
    * 最新バージョンでは無くてもいいかもしれません
* [Kite AI Code AutoComplete](https://marketplace.visualstudio.com/items?itemName=kiteco.kite)
    * kiteをVSCodeで利用するため
* [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
    * 多人数でリアルタイムにコードを共有するため
* [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
    * VSCodeでMarkdownファイルを編集するため
* [npm](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script)
    * package.jsonの依存関係チェック
    * ホバーしたらモジュールの最新バージョンが分かる(この拡張機能の機能なのか微妙、、、)
* [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)
    * node_modules内のモジュールを補完してくれる
* [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
    * ファイルパスを自動補完してくれる
* [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
    * コードのフォーマッター
* [Project Manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)
    * ワークスペース単位で登録することで、すぐに開くことができる
* [Pylance](https://marketplace.visualstudio.com/items?itemName=ms-python.vscode-pylance)
    * Python用の言語サーバー(コードを静的解析しシンタックスハイライトなどを提供)
* [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python)
    * VSCodeでPythonを書くために利用
* [Python Docstring Generator](https://marketplace.visualstudio.com/items?itemName=njpwerner.autodocstring)
    * Pythonのdocstringテンプレートを作成する
* [Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)
    * [Remote - SSH](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh)、[Remote - Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)、[Remote - WSL](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl)が入る
* [Swagger Viewer](https://marketplace.visualstudio.com/items?itemName=Arjun.swagger-viewer)
    * Swaggerファイルのプレビューを表示する
* [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
    * Tailwind CSSのクラスを補完して表示する
* [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)
    * TODOコメントを強調表示する
* [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)
    * TODOコメントを一覧表示する
* [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
    * Vue.js開発用
* [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)
    * コード補完を強化する
* [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)
    * アイコンを分かりやすくする
* [Vue Peek](https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek)
    * Vue.jsのコンポーネントの定義元に飛べるようにする
* [Vue VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets)
    * Vue.jsの開発高速化のため
* [YAML](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml)
    * VSCodeで.ymlファイルを扱うため

### SourceTree

公式リンク：[SourceTree](https://www.sourcetreeapp.com/)
料金：無料(アカウント登録必要)

GitのGUIクライアントです。CLIで利用することもできますが、個人的にはdiffはGUIで見たい派なので、SourceTreeはおススメです。CLIの場合は[tig](https://jonas.github.io/tig/)などが有名ですし、tigは結構使いやすいのでお好みで。


### Node.js

公式リンク：[Node.js](https://nodejs.org/ja/)
料金：無料

フロントエンド開発のベースとなる環境(言語？)です。フロントエンド開発をする場合は、とりあえずインストールしましょう。
インストールする場合、直接インストールするのではなく、バージョン管理ツールを経由してインストールすることをお勧めします。
バージョン管理ツールは以下が有名だと思います。

* [nvm](https://github.com/nvm-sh/nvm)
* [nodenv](https://github.com/nodenv/nodenv)


### Python

公式リンク：[Python](https://www.python.org/)
料金：無料

プログラミング言語の中の一つです。AWS Lambdaでの開発や簡単なツール作成、機械学習等で利用します。Pythonについても直接インストールするのではなく、パッケージマネージャ経由でインストールすることをお勧めします。パッケージマネージャは個人的には[pyenv](pyenv)がおすすめす。

Pythonでの開発で利用頻度の高いツールを紹介します(あくまで個人的にですが)。

* [Poetry](https://python-poetry.org/docs/)
    * Pythonにおけるパッケージ管理ツール
* [Pylance](https://marketplace.visualstudio.com/items?itemName=ms-python.vscode-pylance)([Pyright](https://github.com/microsoft/pyright))
    * Pythonの言語解析ツール、型チェックツール
* [black](https://github.com/psf/black)
    * コードフォーマッタ
* [pytest](https://docs.pytest.org/en/stable/index.html)
    * テストツール
* [Boto3](https://boto3.amazonaws.com/v1/documentation/api/latest/index.html#)
    * AWS SDK for Python
* [Requests](https://requests-docs-ja.readthedocs.io/en/latest/)
    * HTTPライブラリ
* [opencv-python](https://github.com/skvark/opencv-python)
    * 画像処理用ライブラリ
    * OpenCVをpipでインストールできるようにしたもの
    * OpenCV公式がだしているわけではない(たぶん)
* [Pillow](https://pillow.readthedocs.io/en/stable/)
    * 画像処理ライブラリ
    * opencv-pythonよりもサイズが小さいので、Pillowの方が個人的にはいいと思っている
* [NumPy](https://numpy.org/)
    * 数値計算用ライブラリ
* [pandas](https://pandas.pydata.org/)
    * データ分析ライブラリ
* [Jupyter](https://jupyter.org/)
    * Jupyter Notebookはコードをインタラクティブに実行することができる
* [Matplotlib](https://matplotlib.org/)
    * データ可視化ライブラリ
* [seaborn](https://seaborn.pydata.org/)
    * データ可視化ライブラリ
* [TensorFlow](https://www.tensorflow.org/)
    * 機械学習ライブラリ
* [scikit-learn](https://scikit-learn.org/stable/)
    * 機械学習ライブラリ


### Docker Desktop

公式リンク：[Install Docker Desktop on Mac](https://docs.docker.com/docker-for-mac/install/)
料金：無料

Dockerコンテナを動かすための基盤です。テストをコンテナで動かす、[DynamoDB Local](https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/DynamoDBLocal.DownloadingAndRunning.html)を起動するなどで利用することも多いかと思います。


### Parallels Desktop

公式リンク：[Parallels Desktop](https://www.parallels.com/jp/products/desktop/)
料金：約1万円/年

Dockerはコンテナ型仮想化を実現する技術ですが、Parallels Desktopはハイパーバイザ型仮想化を実現します。簡単に言うと、Macの中でWindowsを立ち上げることができます。MacとWindowsを併用する必要がある人には、値段は高いですがお勧めできるツールです。

個人的に気に入っている機能

* 比較的動作が軽い
* OSのインストールが簡単
    * メジャーなOSは仮想マシンの作成がめちゃ簡単
* リソースの再利用ができる
    * HDD領域が動的に変更されるようになっているので、必要な領域しか利用しない
    * ワンクリックで領域の再利用が可能
* ホストOSとのディレクトリ共有の設定が簡単
* ホストOSとのコピー、ペーストの設定が簡単
* Coherenceモードが便利
* [Parallels Toolbox](https://www.parallels.com/jp/products/toolbox/)のクリーンドライブが便利


### Wireshark

公式リンク：[Wireshark](https://www.wireshark.org/)
料金：無料

パケットキャプチャツールです。ネットワーク専門ではありませんが、デバイスのデータ通信の様子をpcapファイルとしてダンプして、そのファイルをMacで見るときなどに利用します。


### kite

公式リンク：[kite](https://www.kite.com/)
料金：無料

コード補完ツールです。VSCodeと連携して使います。
メリットは下記ページが分かりやすいので参照ください。

* [Why Use Kite With Your Code Editor](https://www.kite.com/)
* [Benefit from deep learning while you code](https://www.kite.com/integrations/vs-code/)


### Arduino IDE

公式リンク：[Arduino IDE](https://www.arduino.cc/en/software)
料金：無料

マイコンへのプログラムを流し込むために使います。ビルド、シリアルデバッグ、データ送信までを一貫して行えるのでとても使いやすいです。


## フロントエンド

### HTML,CSS,JavaScript(JS)

フロントエンド技術の基本の基の部分です。

* [HTMLの基本](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics)
* [CSSの基本](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/CSS_basics)
* [JavaScriptの基本](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics)

### TypeScript(TS)

公式リンク：[TypeScript](https://www.typescriptlang.org/)

いわゆるaltJSのくくりですが、最近はTypeScript一強だと思います。ほとんどのフロントエンドのプロジェクトが生のJSではなくTSでコードを書いているはず。学習難易度は比較的高めですが、個人的にはとてもお勧めできる言語です。


### Vue.js

公式リンク：[Vue.js](https://jp.vuejs.org/index.html)

ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。フロントエンドのデータをリアクティブに表示する部分が自動的に反映されるので、以前の様にjQueryを使ってデータの書き換えを明示的に行うことが不要になります。


### Nuxt.js

公式リンク：[Nuxt.js](https://ja.nuxtjs.org/)

Vue.jsのラッパー？としてのフレームワークです(日本語が無茶苦茶、、、)。Vue.js単体で利用するよりも便利な機能がたくさんあります。

個人的に気に入ってる機能を紹介します。

* Create Nuxt Appが便利
    * UI Framework(Vuetifyなど)を自動で設定してくれる
* メタタグとSEOの設定が可能
* Prefech機能がある
* 静的サイトジェネレートができる
    * full static exportがNuxt 2.13から利用可能、nuxt exportがNuxt 2.14から利用可能
    * Jamstack構成がやりやすい
* モジュールの追加が簡単
    * PostCSSとか
* [nuxt/content](https://content.nuxtjs.org/ja/)が便利
    * 開発モードでのビックリするほど高速なホットリロード
    * Markdownの中でVueコンポーネントを利用できます
    * 全文検索
    * 静的サイト生成(SSG)のサポート `nuxt generate`
    * 強力なクエリビルダーAPI (MongoDBライク)
    * PrismJSを利用した、Markdown内コードブロックのシンタックスハイライト
    * 目次の自動生成
    * Markdown, CSV, YAML, JSON(5)、XMLを適切に処理します
    * hooksによる拡張

### React

公式リンク：[React](https://ja.reactjs.org/)

詳しくは知りません、、、

### API呼び出し

* RESTful API
    * HTTPメソッド(GETなど)を使ってデータのやり取りを実施
    * 現在も主流で利用されている
* [GraphQL](https://graphql.org/)
    * HTTPメソッドを利用してデータのやりとりを実施するが、必要な情報だけを取得したり、型で取得できるデータを絞ったりできる
    * RESTの場合、複数のエンドポイントに対してデータを要求する必要がある場合でも、GraphQLの場合は同じエンドポイントに対して1回の呼び出しで済む場合がある
    * BFF(Backends For Frontends)の役割としても利用される
    * AWS AppSyncと連携してSubscription処理を実現することが可能

### UIフレームワーク

* [Vuetify](https://vuetifyjs.com/en/)
    * リッチなUIコンポーネントがたくさんある
    * Vuetify自体の学習が必要
* [Tailwind CSS](https://tailwindcss.com/)
    * ユーティティファーストなライブラリ
    * 自由度が高く使いやすい
    * 原則CSSプロパティと一対一対応しているので、CSSの知識があればそこまで学習コストは高くない
    * [VueTailwind](https://www.vue-tailwind.com/)などを使えば、コンポーネントを自作しなくてもいい
* [chakra-ui/vue](https://github.com/chakra-ui/chakra-ui-vue)
    * Vuetifyよりもコンポーネントを意識した設計になっているライブラリ
    * 個人的にはVuetifyは結構ブラックボックス的なイメージがある

### リンター、フォーマッター

* [ESlint](https://eslint.org/)
    * リンター
    * JS、TSともに対応
* [Prettier](https://prettier.io/)
    * フォーマッター
    * 結構いろいろな言語をフォーマットできる

### テストツール

* [Jest](https://jestjs.io/ja/)
    * テストツール
    * 正直ほかのツールを使ったことがないけれど、このツールであまり不満を感じたことがない(というよりも使いこなせていない)

### ホスティング環境

* [AWS Amplify Console](https://aws.amazon.com/jp/amplify/console/)
    * AWS内で完結するので、AWS CodeCommitとは相性が良い
    * フックの設定や、ビルドスクリプトのカスタマイズなど基本的な機能はある
* [Netlify](https://www.netlify.com/)
    * Githubと連携することで自動でデプロイできる
* [Vercel(旧Zeit Now)](https://vercel.com/)
    * 名前が変わってからそこまでちゃんと使ったことがないけど、nowの時代はゼロコンフィグレーションということで、設定なしでnowコマンドをたたくだけでデプロイできる優れものでした
* [Surge](https://surge.sh/)
    * surgeコマンドでデプロイして、エンドポイントの払い出しまで可能
    * Webのダッシュボードなどはないが、シンプルで個人利用とかであれば十分利用できる

### Stoplight 

公式リンク：[Stoplight](https://stoplight.io/)
料金：無料

OpenAPI用のエディター。自前でYAMLファイルを書く必要がないので、OpenAPIを書くハードルは比較的下がると思う。UIもきれいなので普通に使えます。

### Insomnia Core

公式リンク：[Insomnia Core](https://insomnia.rest/)
料金：無料

いわゆるAPIクライアントです。RESTとGraphQLの両方に対応しています。


## バックエンド

### Amazon Web Services(AWS)

公式リンク：[Amazon Web Services](https://aws.amazon.com/jp/)
料金：従量課金

便利なサービスがたくさんあります。他のクラウドサービスをしっかり使ったことがないのですが、基本的には不自由しません。

#### AWS Command Line Interface(AWS CLI)

公式リンク：[AWS Command Line Interface](https://docs.aws.amazon.com/cli/latest/reference/index.html)
料金：無料

コマンドラインからAWS環境を触ることができるサービス。AWSはWEBマネジメントコンソールから設定が変更できない項目などがあるので、その場合はAWS CLIを使います。


### AWS Cloud Development Kit (AWS CDK)

公式リンク：[AWS Cloud Development Kit](https://aws.amazon.com/jp/cdk/)
料金：無料

いわゆるInfrastructure as Codeを実現するためのツール。実際にはAWS CloudFormationのテンプレートを生成するためのツールだが、TypeScriptなどのプログラミング言語を利用してテンプレートの作成が可能。他には[Terraform](https://www.terraform.io/)や[serverless framework](https://www.serverless.com/)などがあるが、AWS CDKはAWS公式がだしているツール。


### AWS Vault

公式リンク：[AWS Vault](https://github.com/99designs/aws-vault)
料金：無料

AWS CLI等のツールを利用する場合、認証情報をAWSから払い出して利用する必要があります。ただ、その認証情報が漏洩するととんでもないことになるので、IAMの権限にMFAログイン済みでないと操作できない様な権限を付与します。AWS Vaultを使うと、コマンドラインでのMFAログイン操作が簡単に出来ます。


## アプリ開発

### Android Studio

公式リンク：[Android Studio](https://developer.android.com/studio?hl=ja)
料金：無料

Androidアプリ開発するのであれば、まずは入れましょう。


### XCode

公式リンク：[XCode](https://developer.apple.com/jp/xcode/)
料金：無料

Apple端末のアプリを開発するのであれば、まずは入れましょう。

### Android File Transfer

公式リンク：[Android File Transfer](https://www.android.com/filetransfer/)
料金：無料

実機アプリでデバッグする際に、画面のスクリーンショットなどをPCと共有する際に、重宝します。簡単にAndroid内のファイルを参照したり、Android側にファイルを送ったりできます。


### Apple Configurator 2

公式リンク：[Apple Configurator 2](https://support.apple.com/ja-jp/guide/apple-configurator-2/welcome/mac)
料金：無料

iOSアプリの開発はXcodeでできますが、作成済みのipaファイルのインストールはXCodeではできません。Apple Configurator 2を使うとipaファイルからアプリのインストール、iOSデバイスの画面ミラーリングなどができます。


# 日常アプリ系

### Googleアカウント

公式リンク：[Google Account](https://www.google.com/intl/ja/account/about/)
料金：無料

Google Documentやスプレッドシート、スライドはとても便利です。


### Google Chrome

公式リンク：[Google Chrome](https://www.google.com/intl/ja_jp/chrome/)
料金：無料

Webブラウザです。普段利用と開発での利用の両方で使います。
おススメの拡張機能を以下に紹介します。

* [Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja)
    * Vue.jsのデバッグには必須のツールです
* [Raindrop.io](https://chrome.google.com/webstore/detail/raindropio/ldgfbffkinooeloadekpmfoklnobpien?hl=ja)
    * Raindrop.ioと連携するためのツール
    * ブックマークの登録を簡単に出来る
* [Zoom Scheduler](https://chrome.google.com/webstore/detail/zoom-scheduler/kgjfgplpablkjnlkjmjdecgdpfankdle?hl=ja&gclid=CjwKCAjw7IbaBRBqEiwA6AyZgjGVojxLR2JEgcJQc8YvLb9ttuWZ7RGKRaXUO-I14rGy1ZIa2J8uvhoC5qQQAvD_BwE)
    * Googleカレンダーで予定を入れる際に、一緒にZoomミーティングを作成してくれる

### Firefox

公式リンク：[Firefox](https://www.mozilla.org/ja/firefox/new/)
料金：無料

Webブラウザです。フロントエンド開発では複数のブラウザでの動作確認をするために入れてます。Linuxの場合は、普段のブラウザがFirefoxの人も多いかもしれません。

### Raindrop.io

公式リンク：[Raindrop.io](https://raindrop.io/)
料金：無料

ブックマーク管理アプリです。
Chromeの拡張機能と連携すると便利で使いやすいです。ブラウザとは独立しているので、複数のブラウザやアカウントを横断してブックマークを管理できるのでおススメです。

### Microsoft 365

公式リンク：[Microsoft 365](https://www.microsoft.com/ja-jp/microsoft-365/explore-microsoft-365-for-home)
料金：12,984/年

WordやExcelは仕事では必須かもしれません。個人利用ではあまり必要はなくなってきている気もしますが、、、

### 1Password

公式リンク：[1Password](https://1password.com/jp/)
料金：約$3/月

パスワード管理ツール。特に不自由に思ったことはないです。


### Slack

公式リンク：[Slack](https://slack.com/intl/ja-jp/)
料金：無料

チャットツールです。普通に便利です。

### Zoom

公式リンク：[Zoom](https://zoom.us/)
料金：無料

ビデオ会議ツールです。バーチャル背景機能、ブレークアウトセッション機能など便利な機能がたくさんあるので、便利です。

### Discord

公式リンク：[Discord](https://discord.com/)
料金：無料

チャットツールです。Steamのゲームなどをしながら、配信やボイスチャットをすることができます。個人的には動作が軽いので、ずっとつなぎっぱなしでもPCの負荷が上がりにくいので、テレワークでもたくさん利用されているようです。


### Fantastical

公式リンク：[Fantastical](https://flexibits.com/jp/fantastical)
料金：408円/月

Fantastical2の時は買い切りだったのですが、最近サブスクになったようです。カレンダーアプリとしてはUIがきれいでとても使いやすいです。


### BetterTouchTool

公式リンク：[BetterTouchTool](https://folivora.ai/)
料金：$8.5/2年ライセンス

キーのカスタマイズ用です。すべてのアプリでemacsキーバインドを使えるように設定していたりなど、細かなカスタマイズができます。

### Yoink

公式リンク：[Yoink](https://apps.apple.com/jp/app/yoink-%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0-%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%82%92%E5%BF%AB%E9%81%A9%E3%81%AA%E3%82%82%E3%81%AE%E3%81%AB/id457622435?mt=12)
料金：980円

ドラッグアンドドロップの一時保存ができるアプリです。スクリーンショットなどを貼り付ける際に、一時保存できるので便利です。

### Alfred 

公式リンク：[Alfred](https://www.alfredapp.com/)
料金：無料(Powerpackは有料)

いわゆるランチャーアプリです。アプリを簡単に起動できる、コピーペーストの履歴などを呼び出したり、ブラウザの検索、ブックマークを開いたりできます。

### Snagit

公式リンク：[Snagit](https://www.techsmith.co.jp/screen-capture.html)
料金：5,722円

キャプチャソフトですが動画も撮れますし画像加工もできます。ブラウザのスクロールキャプチャもできます。有料ですが、キャプチャアプリとしては一番使いやすいと思ってます。

# 日常デバイス系

### ディスプレイ

ノートPCの場合は、ディスプレイは2台あると便利です。ディスプレイも好みだと思いますが、参考までに私が所有しているディスプレイを載せます。

[PTFWLD-24W / PTFBLD-24W](https://www.princeton.co.jp/product/ptfbld24w.html)

### キーボード

複数のディスプレイをつなげている場合、PCのキーボードだと姿勢がまっすぐ向かないので、外部キーボードを使う方がいいと思います。
私はAppleのキーボード使ってます。

[Magic Keyboard - 日本語（JIS）](https://www.apple.com/jp/shop/product/MLA22J/A/magic-keyboard-%E6%97%A5%E6%9C%AC%E8%AA%9Ejis?fnode=48c45fd250f99bcf67a24ee15339742b0bf5938de0273ebc70d7868f7f622b5a8e32e2262e425df5f1dcb29fe9a1ded96f89896263a95e01f1ff50e546f1e37f5dd1459989a7b8cd37a105ff2e8be662f279129af13870d8b4a3306adeb09f5f9e0d939d6cd39ac408decea80c3270ab&fs=f%3Dkeyboard%26fh%3D40a2%252B4603)

### マウス

個人的にはマウス派なのでマウス使ってます。私が使ってるのは以下のマウスです。

[静音EX-G ワイヤレスBlueLEDマウス](https://www.elecom.co.jp/products/M-XGM10DBSBK.html)

### PCスタンド

開発しているとDocker起動時やアプリのビルド時に結構PCのファンが回るので、PCスタンドはあるといいのかなと思います。ちなみに、私が持っているのは下記です。

[ノートパソコンスタンド](https://www.amazon.co.jp/gp/product/B07RJX5QRN/ref=ppx_yo_dt_b_asin_title_o01_s00?ie=UTF8&psc=1)

### 空気清浄機、加湿器

部屋で仕事することが増えたので、空気清浄機と加湿器はあるといいのかなと。

### 龍角散のど飴

長時間話すとのどが痛くなるので、定期的に龍角散のど飴を摂取しないと、、、、

[龍角散ののどすっきり飴](https://www.ryukakusan.co.jp/productdetail/detail/8/13)

### ウエットティッシュ

個人的には毎日マウスとキーボードの手入れを実施するのですが、以下の商品はめちゃおススメです。

[エリエール 除菌できるアルコールタオル 本体](https://www.elleair.jp/product/detail/wet_disinfectant)

### 通話デバイス

長時間の会議などでイヤホンの電源が切れた経験はありませんか？Anker PowerConfをPCと有線でつなげれば、電源が切れる心配もないし、電波を気にする必要もないし、音声つなぎっぱなしでも対応できるのでおススメです。

[Anker PowerConf](https://www.ankerjapan.com/item/A3301.html)

### ウェブカメラ

Webカメラは何でもいい気がするのですが、以下のカメラは画質がいいのでおススメです。

[C920N HD PRO ウェブカメラ](https://www.logicool.co.jp/ja-jp/product/hd-pro-webcam-c920n)

# 最後に

結構長くなってしまった。他にもデバイスやツールはありますが、今回はこの辺で。リモートワークでもできる限りのパフォーマンスを出していきたい今日この頃です。