【2020年版】フロントエンドのおすすめMac無料ツール

フロントエンドだけではないかもしれないけど、
エンジニアがおすすめするMac無料ツール2020下半期まとめです。
関係ないけど10人くらいサンタが家に来てくれないかな....:santa_tone1::santa_tone2::santa_tone3::santa_tone4::santa_tone5:

# ■ Mac Apps
### 1. [VSCode](https://code.visualstudio.com/)
だいたいのエンジニアがみんな使ってるよね。って思うけど一応記載しときまっす。エディタなんて好みだと思うけどね。
こやつは拡張性高いし必須だと思ってます。
好きなテーマは**Dracula**です。:smiling_imp:

---
### 2. [Draw.io Integration](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)
VSCode拡張。[Drow.io](https://www.draw.io/)単体でも使うけど
Draw.ioをVSCode内で利用できる。エディタ内でグリグリ製図するの楽しいね。

---
### 3. [Biscuit](https://eatbiscuit.com/ja)
アプリ一元管理ツール。
BiscuitにslackとかNotionとかInoreaderを食べさせて便利につかわせていただいております。
Stationよりも使いやすいし動作が軽い。あとロゴがかわいい:cookie:

---
### 4. [Postman](https://www.postman.com/)
API開発・テスト便利ツール。
まぁこれは前からよく使われてるやつ。でも正直うまく使えてる自信はない。

---
### 5. [insomnia](https://insomnia.rest/)
API開発・テスト便利ツール。
REST APIやGraphQL APIのデータをチェックできる。
環境ごとに異なるパラメータを"environment"として定義することで、それをワンクリックで切り替えることができます。
また、色々な言語の仕様にそった対象のHTTPリクエストを実現するためのコードを生成して表示してくれます。詳しくは[こちら](https://www.virment.com/how-to-use-insomnia/)

---
### 6. [Table Plus](https://tableplus.com/)
SQLクライアント。
Sequel Pro（パンケーキ:honey_pot:）からの乗り換えとして最近使ってます。なんかこっちが主流になりつつあるぽい。
PostgreSQL,MySQL,MariaDB,SQLite,Amazon Redshift,Oracle,MongoDB等の主要どころはだいたいサポートしているそうです。
**More coming soon**　てこっそり書いてあるので今後もアップデートどんどんされそう。

[SequelAce](https://apps.apple.com/us/app/sequel-ace/id1518036000?ls=1)も気になるところ。要チェックや！！！詳細は[こちら](https://qiita.com/risto24/items/47b050d67648d92d989a)

---
### 7. [clipy](https://clipy-app.com/)
コピペの履歴を保持。
```⌘ + shift + v```でさくっと呼び出す事ができる。 :bookmark_tabs:
よく使う定型文なんかをスニペット登録しておけばへっぽこ敬語からおさらばだ。

---
### 8. [Just Focus](https://apps.apple.com/jp/app/just-focus/id1142151959?mt=12)
ポモドーロタイマーアプリ。:hourglass_flowing_sand:
時間になったらディスプレイをにゅるん！！って[Unsplash](https://unsplash.com/)のおしゃれなランダム画像でふさいでBreakモードへ突入させます。
ポモドーロの一般的な作業時間は**25分**だけど、タイマー時間をpreferenceから変更できる。画像も変えれるみたいなのでお好みの画像を設定して至福のBreakTimeを...:coffee:
ポモドーロ最近はやってるよね。流行を追いかけてみた。
カップラタイマーとして使ってはいけない。:ramen:　おしゃれ画像が台無しだ。

---
### 9. [kap](https://getkap.co/)
mac上の画面を録画するアプリ。:video_camera:
様々な形式にexportできたり、トリミングできたりと便利なツール。Vercelとも連携できるそうな。連携してどうするのかは知らぬ。とりあえず最近はVercel!!Vercel!!言っとけばいい風潮ある。:mask:
ところでVercelの発音てヴァーセル？ヴァーサル？わたしはヴァーセル派。

---
### 10. [ImageOptim](https://imageoptim.com/mac)
画像の圧縮・最適化ツールです。:camera_with_flash:
Qiita等でアウトプットする際に画像サイズが大きいと制限にかかってアップロード出来ない！なんてときはImageOptimへドラッグ&ドロップする事で手軽にファイルサイズを軽減。


---
### 11. [DeepL](https://www.deepl.com/ja/home)
翻訳ツール。:person_frowning_tone1:
一般的な翻訳ツールよりDeepLのほうが翻訳精度がよくてライブラリの公式ドキュメントとか、エラーの内容とかをこっちに移して読んだりしてる。
本当は英語がきちんと読めるようになればいいんだけどね。。英語学習コスト抑えたい方に...
DeepLを立ち上げている状態で翻訳したいテキストを選択状態にして```⌘ + C（2回）```でささっと起動してくれるとこがせっかちさんには便利な機能。

![Kapture 2020-11-28 at 20.46.11.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478758/73514b31-f34b-34ca-d5df-0f82d5a35ffb.gif)

---
### 12. [Inoreader](https://www.inoreader.com/language/japanese)
RSSリーダー。:eyes:
個人的にFeedlyより使いやすいし見やすいかな。
見た目の表示なんかも色々変えれる。おすすめはカードビュー。
![スクリーンショット 2020-11-28 16.46.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478758/7fac3323-3537-60e8-d78d-8067845ad101.png)

**Nitter**でRSS化すればTwiiterから特定のユーザのRSS取得ができる。Nitterの使い方は[こちら](https://316-jp.com/twitter-rss)を参照してね。
あなたは知らないだろうけど、わたしはあなたのTweet...見てます...:eyes::eyes::eyes::eyes:

フロントエンドは技術の移り変わり、トレンドがバシバシ変わっていくのでリアルタイムな鮮度のいい情報をさくっと取得しときましょう。
この辺出来てないとフロントエンドは生きていかれへんのやで。節子。
アウトプットする時間はなかなか持ててないけどせめてインプットを...と心がけております。はい。

---
### 13. [Runcat](https://kyome.io/runcat/)
CPU使用率とかを可視化してくれるMac常駐アプリ。:cat:
ファンが回りまくってこのMac爆発するんじゃないか！！？って思ったら常駐アイコンが猛ダッシュして視覚的に教えてくれる。
更にここからアクティビティモニタを起動できるので不必要なプロセスを確認してkillすることで爆発を回避。
利用しているマシンが**M1 MacBook Air**であればファンレスなのでファンの音がそもそも発生しない為、気が付かない内に爆発寸前だった！！なんて事がないためにも導入必須。
※私は次リリースのMacBook Proに期待します。
※M1チップ搭載Macで対応するアプリかどうかチェック出来るサイトは:point_right_tone2:[こちら](https://isapplesiliconready.com/jp/)
デザイナーさんとお友達だったら自分だけの特別なランナーもできちゃうかも！！？
わたしは魚男を使ってます。:relaxed:　「たかし」と名付けました。最近走りすぎて痩せてきたかも。
![Kapture 2020-11-28 at 18.53.48.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478758/7ca0ce55-af02-4310-dad8-b90500d85fe4.gif)
![スクリーンショット 2020-11-28 18.34.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478758/b506abf6-1fe5-2dd1-ce30-5860f2dc723e.png)

---
### 14. [Eagle](https://jp.eagle.cool/)
30日間無料だったかな？現在お試し中ですが便利です。:camera_with_flash:
デザイナーやディレクターとのやり取りをする上で、スクショを撮って見え方を伝えたりする事があるんですけど、
すぐデスクトップがゴミまみれになってしまうのでこいつは便利。とりあえずゴミスクショをぽいぽいーってdropして片付けれる。:wastebasket:
あとでEagle開いてゴミ達を一覧で見直せるしよきよきなツール。

---
### 15. [ScreenPointer](https://apps.apple.com/jp/app/screenpointer/id1368204906)
Macのディプレイにポインター（スポットライト）を出すツール。
2020年3月31日までは指示棒とかレーザーポインタとかに変更出来たのですが、
現在は無料版だとスポットライトしか出せません。ですが、画面共有を行う機会が多くなってきた昨今、見てもらいたい箇所を強調する際に役立つツールなのではないかと思いましたので共有させてもらいます。
わたしはcontrolキー長押しをトリガーとして利用しています。
![スクリーンショット 2020-12-01 18.08.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478758/26ed037f-3de7-6293-25a2-47506d7dc7fe.png)



---
# ■ ここから下はChrome拡張（Extension）

### 1. [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?q=QR&hl=ja)
Reactの開発デバッグ。

- コンポーネントの構造を視覚的に把握できる
- コンポーネント間で渡されているPropsの値が確認できる
- Stateの値を確認できる
- 実際に値を変えて動作の確認ができる

---
### 2. [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
Reduxの開発デバッグ。
どのActionでどの状態になり、Action実行後にStoreではどんな値になっているかが把握出来ます。
公式の[DEMOページ](http://zalmoxisus.github.io/examples/todomvc/)を見ていただければ確認出来ます。
DEMOではテキストを追加すれば**ADD_TODO**ってアクションが実行されるし、テキストを編集すれば**EDIT_TODO**ってアクションが実行されているのが分かるかと。
実行前に準備する事としては下記をcreateStoreに渡して上げればOK！！:thumbsup_tone2:

```js

 const store = createStore(
   reducer, /* preloadedState, */
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );
```

middlewareを利用している場合はこう。applyMiddlewareにラップしてあげる。

```js
import { createStore as reduxCreateStore, applyMiddleware, combineReducers, compose } from "redux";
import { todoReducer } from "./reducers/Todo";

// Redux DevTools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
// for Ts
// const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
export default function createStore() {
    const store = reduxCreateStore(
        combineReducers({
            todo: todoReducer,
        }),
        composeEnhancers(applyMiddleware(
            //thunk,
        ))
    );

    return store;
}
```
わたしはアイコンクリックしても出てくるWindowがちっこいので、アイコン右クリックして**open in a panel**を押して別窓で表示しながらテストしています。

---
### 3. [Web Vitals](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma)
CoreWebVitalsの数値をよだれを垂らしてても見れる。
「LCP」「FID」「CLS」早めに対処しておこう。うん。
CoreWebVitalsってなにそれおいしいの？って人は[ここ](https://qiita.com/rainymoment0616/items/d25915f991523c84d972)を見ておこう！！

---
### 4. [Material DevTools Theme Collection](https://chrome.google.com/webstore/detail/material-devtools-theme-c/jmefikbdhgocdjeejjnnepgnfkkbpgjo)
ChromeのDevToolがイケイケになる。
好きなテーマは**Dracula**です。:smiling_imp:

**手順**

- Material DevTools Theme Collectionを有効化する
- ChromeDevToolsを開く
- F1を押す
- Settings > Preferences > Appearance > Theme を Dark に変更する
- Settings > Experiments > Allow custom UI themes を有効にする

![スクリーンショット 2020-11-28 20.10.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478758/eb31158a-60ce-f968-13ff-927f8ae885f1.png)

いや、目が壊れそうｗｗｗ

---
### 5. [Notion Web Clipper](https://chrome.google.com/webstore/detail/notion-web-clipper/knheggckgoiihginacbkhaalnibhilkk)
Webクリッパー。
ぽちっとおしたらWebクリップしてくれる。
保存したい場所を変更したいときは、「Add To」から保存先の変更も可能。
[Notion](https://www.notion.so/desktop)使ってるならまぁ入れてみてくれたまえよ。
**のしょこTシャツ**をひそかに狙ってるけど常にSOLD OUT...
のしょーん(・-・ | N

ちなみに上で紹介している[Biscuit](#3-biscuit)にNotionいれておくと色々と捗る。
Notion、2021年には日本語対応するんだってさー:relaxed:

---
### 6. [daily.dev](https://chrome.google.com/webstore/detail/dailydev-news-for-busy-de/jlmpjdjjbgclbocgajdjefcidcncaied)
技術的なおすすめ記事をChromeのタブトップに出せる。
おしゃれな画像にする〜とかのExtensionはいっぱいあるけど、
エンジニアである以上、常に情報を収集する癖をつけるべし！！！:punch_tone1:
誰もあなたのおしゃれな画像の新規タブなんて興味ありませんし見てませんから！！
アプリ開発者であれば**Android Developers**とか**Apple Developer**とかは追加必須かな。
ただ、フィードに追加したいソースがdaily.dev上に無い場合はRSSを登録することができるんですが、無料会員の場合はdaily.devへのリクエストしかできません:sob:有料会員になれば追加することが可能。JSer.infoをリクエストしておきました。

---
### 7. [Gyazo](https://chrome.google.com/webstore/detail/gyazo/ffdaeeijbbijklfcpahbghahojgfgebo)
ブラウザ上のものをささっとキャプチャ。
あなたのハートもささっとキャプチャ。

---
### 8. [Grammarly for Chrome](https://chrome.google.com/webstore/detail/grammarly-for-chrome/kbfnbcaeplbcioakkpcpgfkobkghlhen)
Chrome上での英語の間違いを指摘してくれる。
どんだけ英語に対してビビってんだよわたし。これを書いてて英語に対して苦手意識がある事を再認識したのであった...

---
# ■ まとめ
作業を効率化するアプリケーションを作る前に、まずは身近な作業効率化ツールを見つめ直してみるって事も大事かもしれませんね。
ツールはやがて古くなって廃れていき、より時代にあった便利な新しいツールがどんどん生み出されてユーザはそのツールに寄り添っていきます。
エンジニアのみなさん、ともに良い便利な世の中にしていきましょう。世の中めんどくさい事ばかりだ！！！
そんな事よりお仕事お仕事！！！