Open
18

Macでフロントエンド開発する人が入れているもの(拡張、プラグイン、アプリ、設定など...)

タイトル通りです。
自分が入れてるものを記載していきますが、誰でも投稿できるのでオススメの提供もお待ちしてます!

私はApple SiliconのMac miniに設定をします。

個人的な好みが入ってしまっている & ご存知のものも多そうですが、思いついたものを遠慮なく挙げてみます!

開発系

  • Postman:Web APIのテストにときどき使いますね…
  • Table Plus:最近人気が出てきてそうなSQLクライアント。このあたりは好みによって異なると思いますが、見やすくて個人的に気に入っています。MySQLとPostgreSQLの両方に対応。

その他

  • clipy:コピペの履歴を取っておいて + shift + Vで楽に呼び出せて捗ります。
  • Whimsical:ちょっとした図を書くときに便利です。ブラウザ上でも使えるのですが、デスクトップアプリとして入れておくと開きやすくていい感じ。
  • Be Focused:シンプルなタイマーアプリです。時間を区切って集中して作業したいときに、メニューバーからすぐにタイマーをONにできていい感じです。
  • Eagle:有料ツールです。デザイナー向けのやつです…。「このUIいいなー」と思ったときにスクショを撮ってぶっこんでるんですが、後から見返しやすくていい感じ。
  • GIPHY Capture:動画のスクショを撮って、gifやmp4として保存できます。長さやサイズの調整が楽で、TwitterとかGitHubとかに上げたいときによく使います。
  • Raindrop:Webのブックマークサービス。スマホでブクマしてMacのアプリから読んだりしてます。

これはChrome拡張も載せてしまってもいいのかな?のせちゃおう

  • daily.dev:新しいタブを開いたときにニュースが表示される系の拡張機能。開発系の話題の記事がいい感じに集約されていて最近よく見てます。
  • The QR Code Extension:今開いてるページのQRコードを表示できるもの。スマホで開きたいときとか、Zoomで画面共有してるときに「これスマホで開いてみてー」って感じでときどき使えます。
  • High Contrast:ページをモノクロ表示できる拡張。コーディング中のページを「これ白黒だとどんな感じかな?」と確認したいときにたまに使います。

意外となかった…

個人的に好きなやつです!

  • keycastr : キーボードを押下した時に押下したキーを表示してくれます!例えばモブプロ/ペアプロをする時にtmuxやvimなんかの操作は目で見てても追えないし、ショートカットキーとかを使って何か操作すると見てる人分からないのでこれが欲しくなります!
  • refined github : めちゃくちゃいろんな機能あったと思いますが、例えばrenovateなどが出したPRを少し薄く表示してぱっと見でチームの人が書いたPRの方に目が向くようになってたり、OSSのissueなんかでリアクションが多い ≒ そのissueの解決策となったコメントなどに飛べるリンクをつけてくれたりします!なんやかんやこれに慣れたら離れられなくなりました!
  • kap : 画面をレコーディングするためのソフトですが色んな形式にexportできたり、トリミングできたり機能も申し分なくアプリがオシャレなので使ってます!

個人的に好きなMac アプリ

  • Just Focus
    • Macのポモドーロタイマー
    • FocusとBreakのタイマーあるだけでシンプル & Breakタイムになると強制的に作業止められる
  • f.lux
    • 時間帯に合わせて色温度を調整し、目を保護できる
  • HapticKey
    • VSCodeもVim拡張入れてるので、タッチバーのEscのフィードバックくれる
    • Mac miniだといらないかw
  • Hidden Bar
    • Macのメニューバーに表示させるものを制限するバー
  • MindNode
    • 個人的にMacで一番使いやすいマインドマップ作成ツール

フロントエンド関係無かった

エディタ周り

エディタ

VS Code プラグイン

  • Draw.io Integration
    • Draw.ioをVS Code内で再現できる。コードの設計や頭の中を図に起こして整理するときに使う
  • ES Lint
    • VS Code内でプロジェクトのESLint設定によるエラーをサジェストしてくれる
  • Prettier
    • VS Code内でコードの整形をしてくれる
  • Formatting Toggle
    • 一部ファイルでPrettierなどの整形をかけたくないときに一時的にすぐOFFにできる、地味に便利
  • Jest
    • VS Code内でJestの起動ができる。it単位で実行出来るので便利。
  • Markdown Preview Github Styling
    • GitHubの見た目でマークダウンプレビューが見れる
  • Polacode
    • VS Code上でコードの画像を生成できる。登壇資料作るときに必須。
  • Shades of Purple
    • 好きなテーマ。ただそれだけ
  • Visual Studio IntelliCode
    • VS Codeが賢くなる
  • vscode-icons
    • ファイルやディレクトリに適したアイコンがつく

Chrome拡張

M1 macOS Big SurのMacBook Airに乗り換えても使えているものを載せます!

Macアプリ

  • Fork
    • Gitクライアント。SourceTreeに近いUIで軽快。複数プロジェクトをタブで開ける。
  • Insomnia
    • REST APIやGraphQL APIのデータをチェックできる。
  • Transmit 5
    • FTPツール。接続設定を同期できるのでMacの引っ越しも楽。
  • Local
    • WordPressのローカル開発ツール。軽快でDocker非依存な新バージョンが出た。
  • ImageOptim
    • 画像圧縮ツール。設定して画像を投げ込むだけ。
  • SkyFonts
    • Google Fontsのローカル管理アプリ。

アプリ

  • Karabiner-Elements: キーマップを変更できます。私は 2 つのキーボードを使って分割キーボードのようなことをしているので、右手で押した Ctrl キー + 左手で押した k を Ctrl+k として認識させる、といった用途で便利に使っています。
  • Rust のツールチェーン:rustup を使ってインストールします。最近 M1 デバイスにも対応しました。Rust / Wasm の開発をするためもあるのですが、後述するツールをインストールするためにも使っています。
  • bat: Rust 製の cat クローン。シンタックスハイライト機能があったり、長いファイルを表示する際は自動的に pager として振る舞ったり、何かと気が利いています。私は cat と less コマンドのエイリアスに設定してます。
  • ripgrep: Rust 製の grep クローン。高速。標準で grep -R と同様の振る舞いをしますが、高速なので、 node_modules のあるフォルダで grep しても安心です。grep のエイリアスに設定してます。

VS Code 拡張

  • Emacs Friendly Keymap:VS code でも Emacs のキーバインドが使えます。
  • Clang-Format:コードフォーマッタ。
  • Material Icon Theme:アイコンがマテリアルデザインっぽくなります。
  • Debugger for Chrome:Chrome を使ってデバッグができるようになります。
  • CleanShot X
    • スクリーンショットを撮影後すぐにアノテーションを足したりモザイクを追加して、ドラッグドロップで保存したり、Slackに送信したりできる。
  • PixelSnap 2
    • 画面上に表示されてる全要素(アプリケーション問わず)の要素間px数の計測や、特定領域の幅高さの取得など。GUI解析やデザイン調整に便利。

Chrome 拡張

  • Fonts ninja
    サイトで使われているフォントを確認できます。

  • Pocket
    今見てるページを保存して後で見れるサービスです。勉強になる情報が載ってるとかデザインが好きなサイトをタグをつけて保存して使っています。

アプリ (Mac)

  • iTerm2
    ターミナルの代替アプリです。ショートカットを設定して、今いるスクリーンにフルスクリーンでターミナルを表示させたり画面を透過させたりなどいろいろできます。詳しい解説はこちら
  • Swagger Viewer
    • Swagger/Open APIの定義をGUIで表示ししてくれる拡張機能。API定義を見るときに便利。

Mojave好きでMojave使い続けてるので、動かないやつあるかもしれないです

アプリ

  • DeepL
    翻訳したい文章をcommand+c*2するとアプリが自動で起動して翻訳してくれるので、重宝してます。
  • Hyper
    JavaScript製ターミナルアプリ。カスタマイズしやすくて好きです。あとUIが好き。
  • Typora
    WYSIWYGなMarkdownエディタ。書いたそばから変換されていくので、作業しやすいです。シーケンス図、フローチャート、ガントチャートが書けます。記事やアプリの仕様とか考えるとき、あるいはただのメモ書きなどに重宝しています。
  • KeyboardClearnTool
    Mac miniだと関係ないのですが、有効化している間はキーボードを使えなくするアプリです。キーボード掃除のときに起動して有効化させてます。

CLI

  • GitHub CLI
    コマンドラインからGitHubの操作ができるので、とても作業が楽になりました。
  • Bit
    モダンなGit CLIを標榜するCLI。bit saveが便利だなと思いました。
  • enhancd
    ディレクトリの移動に使うcdコマンドをとても便利にするCLIです。一度アクセスすると、どんなに深い階層のところでもディレクトリ名を指定するだけで移動してくれます。
  • ngrok
    localhostを安全に外部からアクセスできるようにするCLIです。特にSlackアプリを作っているときに重宝しました。

Chrome拡張機能

  • Wappalyzer
    Webサイトの解析ツール。どんな技術が使われているかを知ることができます。
  • WhatFont
    Webサイト上のフォントを知ることができるツール。
  • Vimium
    VimコマンドをChrome上で利用可能にする拡張機能。yyでページのURLがコピーできるので、とても重宝しています。

自分が入れているアプリは全てこのファイルにまとめているのですが、特にまだ列挙されてないアプリだけ。

  • Rectangle
    リンク先の紹介動画見るとわかりやすいのですが、window managerです。vscode開きながらchrome開いて・・・とやってると開いてるアプリがどんどん増えます。そのアプリ群を整理したいときに便利。
  • Alfred
    フロントエンドでいうと、color-pickのワークフローと、clipboard history機能と、snippet機能が便利です。
  • sd
    上でripgrepを上げてる人がすでにいたのですが、sdと組み合わせると更に強いです。
rg "AAAA" -l | xargs sd "AAAA" "BBBB"
# 今までのfind grep xargs sed組み合わせの地獄のような全置換より楽だし速い
  • fd
    高速だし使いやすいファイル検索。大量のassetの中からお目当てのファイルを見つける時などによく使います。

GitとGitHubの設定

Git

homebrewがまだApple Siliconに対応していないので、入れたくない。
Xcodeを入れたらGitが入ってるのでOK。

GitHub

SSH Keyの設定は必須なので、設定する。
Qiitaなどにも色々設定方法は載っているが、公式を見るのが一番。
すんなりできた。

ssh -T git@github.comを実行して、下記が表示されたら成功している。

Hi `username`! You've successfully authenticated, but GitHub does not provide shell access.

Node.jsのインストール

フロントエンド開発には必須なので、インストールする。

NodeのIssueを見る限り、LTSのNode v14系は動かないぽい。
自分はnodenvを使用し、Node v14を落とそうとしたがエラーになって動かなかった。

v15系であれば、インストールもできて無事動いている。

NodeがApple Silicon plan #886というIssueで今後の対応を検討してるのがあるので、今後の動向も追っておきたい。

ターミナルの設定

itermにするか、デフォルトのターミナルにするかはお好みで。
自分はitermを落としました。
Universal binary support by stuartcarnie · Pull Request #421 · gnachman/iTerm2がクローズされているので、多分正常に動く。現状動いている。

starship

自分はstarshipというRust製のpromptを使いたいので使用できるようにします。

しかし、Apple Siliconの対応ができていないのか、公式に記載のあるcurlでは落とせませんでした。
そこでAdventure Migrating to Apple Siliconを参考に、cargo経由で落とすことにしました。

cargoを使うためにはApple Silicon を使った Mac に Rust をインストールするにはを参考にしました。

ここまででcargoを使用することができるようになりました。
しかし、公式に案内のあるcargo install starshipではエラーになったので、cargo install --git https://github.com/starship/starship.gitで無事にstarshipを使用することができるようになりました🎊

ついでにVS Codeをターミナルから起動できるようにしておきました。

  • Rectangle
    • ショートカットキーで画面分割や画面の最大化ができる。
    • Apple Silicon対応してくれてる
    • spectacleを使ってたが、メンテ止まったので移行した
ログインするとコメントできます