2020年 WEB開発に便利なアプリ・サービス【macOS】

# 前書き
現在、WEBシステム開発現場で働いています。
以前[こちらの記事](https://qiita.com/unique_innovation/items/474eda545177114660a7)で使用しているソフトウェアを投稿させて頂きましたが、何年か経ち環境やトレンドなどが変わったので、他のエンジニアの方の参考になればと思い投稿させて頂きます。
公式の記述と私のオススメポイントや使用方法を記載しているので、参考になれば嬉しいです。

# アプリケーション編

## エディタ
### [Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)

> ほぼすべての言語に対応し、任意の OS で動作する強力なコード エディター、Visual Studio Code を使用して、Azure で編集、デバッグ、デプロイを行います。

私のメインエディタ
プラグインによるカスタマイズ、Dockerコンテナやssh先の各環境へのアクセス、Gitとの連携が非常に直感的でオススメです。

## ファイル転送
### [Transmit 5](https://panic.com/jp/transmit/index.html)
> macOS用ファイル転送アプリのスタンダードの未来。それが Transmit 5 です。パワフルなUIによりアップロードにダウンロード、ファイル管理がこれまで以上のサーバで、より簡単に。かつてないほど優れています。

ファイル転送ツールでは抜群に使いやすく、MacのFinderのように接続先のファイルを操作できます。

### [ForkLift](https://apps.apple.com/jp/app/forklift-file-manager-and-ftp-sftp-webdav-amazon-s3-client/id412448059?mt=12)
> ForkLiftは、堅牢でエレガントなFinderの代わりに、FTP + SFTP + WebDAV + Amazon s3クライアントで、美しく使いやすく、親しみやすいインターフェイスに驚くほどのパワーをもたらすというAppleの方法論を完全に取り入れています。バッチリネーム、アプリの削除、アーカイブの作成と管理、強力なフォルダ同期、大容量ファイルの分割と結合の機能など、すべてがあなたの指先にあります。

こちらもTransmitと同様、直感的に操作できるファイル転送ツールです。
無料な為、個人用ではこちらを導入してもいいかと思います。

## データベース管理
### [Sequel Pro](https://www.sequelpro.com/)
> Sequel Proは、MySQLデータベースを操作するための高速で使いやすいMacデータベース管理アプリケーションです。

mysql操作クライアント
SSH経由でMYSQLに接続できる点が非常に便利
直接接続できないDBサーバにもWEBサーバ経由で接続できたりします。

### [Sequel Ace](https://github.com/Sequel-Ace/Sequel-Ace)
> Sequel Aceは、長年使用しているmacOSツールSequel Proの "続編 "です。Sequel Aceは、MySQLやMariaDBデータベースを扱うための高速で使いやすいMac用データベース管理アプリケーションです。

Sequel Proの後継アプリケーション
mysqlバージョン8に接続する際は、こちらを使用しています。

## Docker
### [Docker](https://www.docker.com/)
> Docker（ドッカー）は、コンテナ仮想化を用いてアプリケーションを開発・配置・実行するためのオープンソースソフトウェアあるいはオープンプラットフォームである。

いわずもがなDocker
WEB開発用のLAMP環境、DB環境、python環境など様々な環境を簡単に構築できます。

## 差分比較
### [DiffMerge](https://sourcegear.com/diffmerge/)
> DiffMerge は、Windows、OS X、Linux 上でファイルを視覚的に比較・マージするためのアプリケーションです。

プロジェクトのファイル差分はGitなどで行えますが、バージョン管理していないテキストファイルなどの差分を取得する際に便利です。

## ターミナルアプリ
### [iTerm2](https://www.iterm2.com/)
> iTerm2 は Terminal の後継であり、iTerm の後継です。iTerm2は、macOS 10.12以降のMacで動作します。 iTerm2は、あなたがいつも望んでいたとは知らなかった機能を備えたターミナルを現代にもたらします。

純正ターミナルに比べ拡張性が高い為、使用しています。
主にショートカットによる画面分割や一括入力などです。
余談ですが、デフォルトシェルは[fish](https://github.com/fish-shell/fish-shell)を使用しています。
CUIでGitのブランチ名を可視化できたりしてオススメです。

## APIテスト
### [Postman](https://www.postman.com/)
> API構築の各ステップを簡素化し、コラボレーションを合理化することで、より優れたAPIを高速に作成できます。

主にAPIのテストに使用。
レスポンスを自動で整形してくれます。
アプリケーション内でフォルダ分けが出来たり、環境変数を設定できる為、重宝してます。

## 仮想化
### [VirtualBox](https://www.virtualbox.org/)
> VirtualBox は、エンタープライズおよび家庭用の強力な x86 および AMD64/Intel64 仮想化製品です。VirtualBox は、エンタープライズ向けの非常に豊富な機能を備えた高性能な製品であるだけでなく、GNU General Public License (GPL) バージョン 2 の条件でオープンソースソフトウェアとして自由に利用できる唯一のプロフェッショナルソリューションでもあります。紹介は「VirtualBox について」を参照してください。

単体では、Windows環境でのデバッグ作業などに使用。
BootCampほど軽快に動作を求めていない際に、簡易的にOSを検証したい際に最適。

### [Vagrant](https://www.vagrantup.com/)
> Vagrantは、軽量で再現性の高い、ポータブルな開発環境の構築と設定を可能にします。

私のPC内では、DockerとVagrantをケースバイケースで使い分けています。
商用環境がレンタルサーバなどバージョンがあまり変動しない場合はVagrant
VPSやクラウドなど、バージョンの更新が必要だったり、カスタマイズを行う必要がある場合はDockerという感じです。

## バージョン管理
### [Sourcetree](https://www.sourcetreeapp.com/)
> Sourcetree は Git リポジトリとのやりとりをシンプルにし、コーディングに集中できるようにします。Sourcetree のシンプルな Git GUI を使って、リポジトリを視覚化して管理できます。

基本的にGitの操作はCUIで行っていますが、ローカルのリポジトリの履歴を手っ取り早く参照したい際に使用します。

## ブラウジング
### [Google Chrome](https://www.google.com/intl/ja_jp/chrome/)
> Google の最先端技術を搭載し、さらにシンプル、安全、高速になった Chrome をご活用ください。

WEBシステム開発時のメインブラウザです。
プラグインが豊富また、デベロッパーツールが使いやすく、動作が軽快な為、愛用しています。
懸念点としては、メモリ消費量が高いことです。

### [Firefox](https://www.mozilla.org/ja/firefox/new/)
> 無料で使えるブラウザー Mozilla Firefox をダウンロード。Firefox は非営利で、世界中の人々の貢献に支えられています。Windows、macOS、Linux、Android、iOS 用の Firefox を今すぐ入手しましょう。

あまり使用しませんが、ローカルサーバー・Chromeの同時起動などでメモリ消費量が苦しい際のブラウジングに使用しています。
Chromeと同様プラグインが豊富で、開発マシンによってはFirefoxの方がオススメかもしれません。

### [Biscuit](https://eatbiscuit.com/ja)
> Biscuit(ビスケット)は複数のアプリをまとめて管理できる
軽快なブラウザです。

ブラウザアプリケーション管理用で導入しています。
以前はStartionを使用していましたが、動作とカスタマイズ性でこちらに乗り換えました。
頻繁に使用するURLを登録しておくと、開き直す手間が減り効率化が期待できます。
私はAWSマネジメントコンソール、GitHub、Timetree、レンタルサーバコントロールパネルなどを常に常駐させています。

## ファイル転送
### [Android File Transfer](https://www.android.com/filetransfer/)
> お使いのMacコンピュータとAndroidデバイス間でファイルを参照して転送することができます。

AndroidとのUSB接続時に端末内部にファイルを転送する際に使用しています。
シンプルな点がオススメです。

## オフィス
### [LibreOffice](https://ja.libreoffice.org/)
> LibreOfficeはパワフルなオフィススイートです – クリーンなインターフェースと豊富な機能を揃えたツールは、あなたの創造性を解き放ち生産性を高めます
LibreOfficeには、これらを実現するパワフルなアプリケーションが自由なオープンソースオフィススイートとして収められています

自分で作業する際は、共同編集の可能性を加味してGoogleサービスを使用していますが、簡単なオフィス系のファイル編集時に使用しています。

## メモ
### [Boostnote](https://boostnote.io/)
> Boost Noteは、直感的でスタイリッシュなマークダウンエディタです。完全にオープンソースで、100万人の開発者に利用されています。

自分用のドキュメント管理やQiitaの下書きに使用。
フォルダ毎に分けれる、クラウドストレージを使用すれば別マシンと同期できる点が非常に便利です。

### [CotEditor](https://coteditor.com/)
> 軽快で洗練された、そして高機能なテキストエディタ

簡易メモ帳として使用。
動作が非常に軽快な点と、Macデフォルトのメモ帳があまり好きではない理由で採用しています。

### [Microsoft To Do](https://todo.microsoft.com/tasks/ja-jp/)
> Microsoft To Do. To Do を使えば、仕事から遊びまで集中できます。 

プロジェクト管理はRedmine
開発作業はGitHubのissue
上記に当てはまらないような軽い業務などを記載して忘れない様にしています。

## 機能拡張
### [Alfred 3](https://www.alfredapp.com/)
> Alfredは、ホットキー、キーワード、テキスト展開などで効率を高めるmacOS用の受賞歴のあるアプリです。Macやウェブを検索したり、Macをコントロールするためのカスタムアクションでより生産的になります。

Dockに配置できるアプリケーションは限られる為。
「option + space」でアプリケーションを呼び出す際に使用。
マウス操作よりもかなり早く起動が行えます。

### [DeepL](https://www.deepl.com/ja/translator)
> AIの力を言語に. DeepL（ディープエル）では、 テキストをより深く理解し翻訳できる人工知能を開発しています。 DeepL翻訳. 世界最高レベルの機械翻訳をお試しください。

「command + c*2」で選択されてある文章を翻訳
ブラウジングの際は、ブラウザの翻訳機能を使用しますが、単純にファイル内の記述などを素早く翻訳できる点が魅力です。

### [Karabiner-Elements](https://karabiner-elements.pqrs.org/)
> Karabiner-Elements。macOS用のパワフルで安定したキーボードカスタマイザー。

私がUSキーボードで作業している為導入。
またサイドボタンが存在するマウスへのショートカット設定などに使用。

### [Magnet](https://apps.apple.com/jp/app/magnet-%E3%83%9E%E3%82%B0%E3%83%8D%E3%83%83%E3%83%88/id441258766?mt=12)
> 1つのアプリから別のアプリへ移動し、横に並べたりマルチタスクでデータを比べたりするとき、全てのウインドウの位置を調節する必要があります。Magnetはこの処理を極めてシンプルに行います。

Windows標準搭載の「ウィンドウをマウスでドラッグすると綺麗な枠におさまる」機能をMacに追加してくれるアプリ

### [Yam Display](https://www.yamdisplay.com/)
> Yam Displayは、USB経由でiPadやiPhoneをMac用の外部ディスプレイに変身させます。

iPadをサブディスプレイに使用する為に使用。
新しいiPadをお持ちの方はSidecarを使用できると思いますが、私のiPadが2世代目な為、使用できず導入を決定。

## デザイン
### [GIMP](https://www.gimp.org/)
> GIMPは、GNU/Linux、OS X、Windows、その他のオペレーティングシステムで利用可能なクロスプラットフォームの画像編集ソフトです。GIMPはフリーソフトウェアで、ソースコードを変更して配布することができます。

簡単な画像の編集に使用。

## コミュニケーション

### [Slack](https://slack.com/intl/ja-jp/)
> Slack は、チームとコミュニケーションを図るための新しい手段です。メールよりも速く、整理され、安全な方法で実現できます。

リモートワーク環境下での社内情報の共有に使用。
SlackAPIを利用したBOTの開発にも活用中。

### [Skype](https://www.skype.com/ja/)
> ビデオ会議を 1 クリックで開催します! サインアップは不要です。 ダウンロードも不要です。

決まった相手とのオンライン通話に使用。
Zoomが流行っていますが、不特定多数とビデオ通話が必須でなければSkypeの方が使いやすい印象です。

### [Zoom](https://zoom.us/jp-jp/meetings.html)
> Zoomは、モバイル、デスクトップ、ルームシステムでのビデオ会議、音声会議、チャット、ウェビナーのための簡単で信頼性の高いクラウドプラットフォームを提供する、現代のエンタープライズビデオコミュニケーションのリーダーです。

リモートワーク環境下での会議に使用。
アカウントが無くてもブラウザから通話が行えるので、面接対応や協力会社との通話に便利。

# オンラインサービス編

## Googleサービス
### [Google スプレッドシート](https://www.google.com/intl/ja_jp/sheets/about/)
> Google スプレッドシートを利用すれば、どこにいてもスプレッドシートの作成、編集、共同作業を無料で行うことができます。

設計書の共同編集などが行える。

### [Google スライド](https://www.google.com/intl/ja_jp/slides/about/)
> Google スライドを利用すれば、どこにいてもスライドの作成、編集、共同作業を無料で行うことができます。

社内プレゼンに使用。
アーキテクチャやインフラ設計などを図で挿入し、共有するのに便利。

## ドメイン

### [Freenom](https://www.freenom.com/ja/index.html?lang=ja)
> Freenomは、世界初そして唯一の無料ドメインプロバイダです。 私たちの使命は、人々をオンラインに導き国々のデジタル経済の開発を支援することです。

テスト段階でのドメイン取得に使用。
期限が存在する為、注意が必要。

## オンライン開発環境

### [CodePen](https://codepen.io/)
> CodePenは、フロントエンドのデザイナーや開発者のためのソーシャル開発環境です。ウェブサイトを構築してデプロイしたり、自分の作品を自慢したり、テストケースを構築して学習やデバッグをしたり、インスピレーションを得たりすることができます。

簡単なフロントエンド開発やデモに使用。

## ダミーデータ生成
### [mockaroo](https://www.mockaroo.com/)
> アプリをテストするためのモックデータが必要ですか？Mockarooでは、CSV、JSON、SQL、Excel形式で最大1,000行のリアルなテストデータを生成することができます。

Laravelなどのフレームワークを使用している場合は、Fakerやseederを使用しますが、使用できない環境でのダミーデータ生成に使用。

## JSON整形
### [JSON Editor Online](http://jsoneditoronline.org/#right=local.vejame)
> JSON Editor Onlineは、JSONドキュメントの表示、編集、フォーマット、変換、差分を行うためのWebベースのツールです。

整形されていないJSONを見やすくする為に使用。

## フローチャート作成
### [draw.io](https://app.diagrams.net/)
> diagrams.netは、フローチャート、プロセス図、組織図、UML、ER、ネットワーク図を作成するための無料のオンライン・ダイアグラム・ソフトウェアです。

視覚的にフローチャートを作成できる。