Zenn
Open22

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

sakitosakito

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

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

catnosecatnose

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

開発系

  • 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のアプリから読んだりしてます。

2022/07追記: もはやMac関係ないけど…

  • Open Source Insights：Googleのプロジェクト。npmなどのパッケージの依存関係を視覚化してくれて便利。
  • bundlejs：npmパッケージのサイズをチェックしたいときに便利。もともとはBundlephobiaを使ってましたが、最近こっちを使うようになりました。
catnosecatnose

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

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

意外となかった…

JJJJ

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

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

個人的に好きなMac アプリ

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

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

sakitosakito

エディタ周り

エディタ

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
    • ファイルやディレクトリに適したアイコンがつく
negitoronegitoro

わたしもShades of Purpleのテーマ好きです！それだけですが、、

sakitosakito

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のローカル管理アプリ。
chikoskichikoski

アプリ

  • 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 を使ってデバッグができるようになります。
okunokentarookunokentaro
  • CleanShot X
    • スクリーンショットを撮影後すぐにアノテーションを足したりモザイクを追加して、ドラッグドロップで保存したり、Slackに送信したりできる。
  • PixelSnap 2
    • 画面上に表示されてる全要素（アプリケーション問わず）の要素間px数の計測や、特定領域の幅高さの取得など。GUI解析やデザイン調整に便利。
KukkyKukky

Chrome 拡張

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

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

アプリ (Mac)

  • iTerm2
    ターミナルの代替アプリです。ショートカットを設定して、今いるスクリーンにフルスクリーンでターミナルを表示させたり画面を透過させたりなどいろいろできます。詳しい解説はこちら。
WhyKWhyK

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がコピーできるので、とても重宝しています。
sakitosakito

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.
sakitosakito

Node.jsのインストール

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

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

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

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

sakitosakito

ターミナルの設定

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をターミナルから起動できるようにしておきました。

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

私が普段 macOS で使っているものを紹介します

ターミナル拡張

  • Fig
    • シェルの方ではなく、ターミナル側に強力な補完やサジェスト機能をつけることができるようになります
      • 純正ターミナル、iTerm、VSCode などのさまざまなターミナルに対応しています
    • zsh-autocomplete などとは異なり、履歴にないコマンドや、ファイルパスの補完もすることができます
    • Dotfile の管理や同期、スニペットのカスタマイズをしたり、zshのプラグインを管理することもできます
mizdramizdra

VScode 拡張機能

  • Jest
  • classnames
    • 生の HTML を CSS Modules 形式に書き換えてくれる
    • レガシーアプリケーションの React 化で、作業効率アップのために使ってる
  • Copy With Imports
    • TypeScript コードをペーストする時に、import 文を補完してくれる
    • 超便利
  • GraphQL
    • GraphQL の Language Server
    • gql`...` の中で補完やコードジャンプが効くようになる
  • map-replace.js
    • JavaScript で機械的に文字列置換ができる

ブラウザ拡張機能

Bookmarklet

uukiuuki

VS Code プラグイン

  • Project Manager
    • ワークスペース管理が便利になるやつです
  • Customize UI
    • 個人的なアレで左のツールバーをクリックする頻度が低いのでEXPLORERを広く見るために使っています
  • Mithrill Emmet
    • タグやCSSをShortcut展開してくれるやつです
  • Reload
    • 稀ですが特定のExtentionがクラッシュした時などVS Codeを再起動せずに復帰するやつです

Chrome拡張

  • EditThisCookie
    • チョットした時にCookieをパパッと確認、編集できるやつです
  • JSONVue
    • 最近は使う機会が減っていますが、jsonを整形して表示してくれるやつです

Macアプリ

  • CleanShot X
    • スクショ、動画キャプ＋加工の有料アプリです。これより前はLICEcapやSkitchを使っていたんですが、一元化できつつ動画までトリム可能な点が便利でIssue起票時によく使っています
  • Mos
    • マウスのホイール挙動を好みの感じに改善できるやつです。マウスによってシステム設定だけだと微妙な挙動のものがあり重宝してます