# ShowNote:「フロントエンド開発の便利ツール・設定・プラグインなど」を語るフロントエンドTechCafe #2

## イベントページ

https://rakus.connpass.com/event/213084/

## ラクスエンジニアのお薦めのツール類はこちら！

### VSCode拡張

- Jest Runner
- テスト関数ごとに1クリックでrun/debugできる

### Google Chrome拡張

- OneTab
- https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall/related
- 開発に使うわけではないが、chromeのタブをストックしておくツール
- 調べ物などで大量にタブを開いておくと、どこになにがあるかわからなくなったりメモリを使うので一時退避におすすめ
- 使い方
- https://aprico-media.com/posts/4254
- Awesome Screenshot
- https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=ja
- 画像・映像キャプチャの取得、ダウンロード、共有をまとめて行える
- chromeの画面だけではなく、デスクトップ画面全体やカメラのみにも対応
- stylus
- ページに好きなCSSを設定でき、保存もできる
- https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja

### その他（スマホ関連）

- AndroidStudio（IntelliJ）でAndroidエミュレータの起動方法
- https://t-dilemma.info/chrom-devtools-on-avd/
- Webアプリでもスマホの動作確認をしたい時に、PC/Chromeのdevツールだと再現しないこともあるためできるだけ実機に近い環境で動作確認がしたい
- リモートワークなどで実機が手元にない時に便利
- XcodeでiPhoneエミュレータの起動方法
- https://blanche-toile.com/web/web-devtools-ios-simulator
- Androidと同様

## 参考（前回分）

### VSCode拡張

- [live share](https://visualstudio.microsoft.com/ja/services/live-share/)
- 複数人同時編集
- https://docs.microsoft.com/ja-jp/visualstudio/liveshare/
- ペアプロなど今後やっていきたいのでそこで使えそう
- [LiveServer](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
- 以下、参加アンケートの原文ママ
- vscodeの拡張機能
- 簡単にwebサーバが立ち上げられる
- ローカルで作ったペライチhtmlからAPI叩くときに便利。
- Chromeのデフォルト設定ではローカルhtmlファイルから外部ソースを参照すると、デフォルトではorigin:nullでCORSエラーにひっかかるため
- [Visual Studio Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview)
- VSCodeの拡張パック。名前はRemoteとあるが、リモートマシン上の開発の他、コンテナやWSL上での開発でも使用できる。
- これを使えばリモートマシン上だろうがコンテナ上だろうがWSL上だろうが、同じ感覚で開発ができる。
- 参加アンケートコメント
- Windows環境でもWSL2(Linux) + Dockerで開発環境を整えられてとても便利です！
- Linux上なのでDockerのファイルアクセスも物凄く素早いです
- [Regex Previewer](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex)
- 正規表現チェックがVSCode上で気軽に行える
- [JSON to TS](https://marketplace.visualstudio.com/items?itemName=MariusAlchimavicius.json-to-ts)
- JSONからTypeScriptの型を生成してくれる
- [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)（R勤怠Tより）
- シンプルにコードにブックマークをつけてサイドバー管理できる
- 修正のし忘れ防止や実装揃えたい時にとても便利(特に自分はファイル開きっぱなしでどんどん増えることが多いので)
- 特に勤怠はファイルをきっちり分けているのでどこかに行ってしまうこともあるはず
- [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
- 括弧の対応を可視化
- 括弧に色がつく
- 範囲もわかる
- [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)
- プロジェクト中のTODOコメントなどを一覧化
- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
- インデントに色づけし深さを可視化
- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
- ペアになっているHTML / XMLタグの名前を自動的に変更してくれる拡張

### 開発者ツール / Chrome拡張

- [Vue.js Devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja)
- Vue.jsで書かれたアプリのデバッグが楽になる
- Vue.jsの開発をサポートするブラウザの拡張機能、ChromeとFirefoxであるっぽい
- パフォーマンスの検証で実際にかなり役に立った（レンダリングに時間がかかっているコンポーネントの特定）
- [JavaScript Errors Notifier](https://chrome.google.com/webstore/detail/javascript-errors-notifie/jafmfknfnkoekkdocjiaipcnmkklaajd)
- JSエラーをdevツールを開いていなくても通知してくれる
- [DevTools z-index](https://chrome.google.com/webstore/detail/devtools-z-index/bcnpmhefiohkpmjacfoanhbjhikegmoe)
- devツールでz-indexが確認できるようになる
- [Pesticide for Chrome](https://chrome.google.com/webstore/detail/pesticide-for-chrome-with/neonnmencpneifkhlmhmfhfiklgjmloi)
- 要素に枠線が付くのでUI崩れやpadding,margin調整ミスに気付きやすくなる
- [Firefoxの開発ツール](https://developer.mozilla.org/ja/docs/Tools)
- FirefoxでF12押したら出てくるアレ。
- 参加アンケートコメント
- Chromeが出る前(?)から長年使っていて他が使えないので
- [iMacros](https://chrome.google.com/webstore/detail/imacros-for-chrome/cplklnmnlbnpmjogncfgfijoopmnlemp?hl=JA)
- 上記リンクはChrome用
- 参加アンケートコメント
- ブラウザマクロのアドオンで、JSソースを3個まで入れることが可能のため
- tips
- [Chromeのdevツールでminifyを解除する](https://qiita.com/comocc/items/461a5019a2da7031d429)
- [Chromeのdevツールでネットワーク速度をエミュレートする](https://qiita.com/Hexa/items/c3d864bc4ac5be0c9d2b)

### Webページ関連（参考情報系）

- [MDN](https://developer.mozilla.org/ja/docs/Web)
- [Can I use](https://caniuse.com/)
- HTML,CSS,JavaScriptの機能についてブラウザの対応状況が分かる
- IE対応や、新しい機能を利用したい場合に参照すると便利

### JSライブラリ

- [json server](https://www.npmjs.com/package/json-server)
- REST APIのモック作成が簡単に行える
- バックエンドに先行してフロントエンド開発を行う時には便利
- 参考記事
- https://www.webprofessional.jp/mock-rest-apis-using-json-server/
- [htmlhint](https://www.npmjs.com/package/htmlhint)
- htmlの構文チェックを可能にする
- vue.jsのv-htmlを利用制限を行う際に役に立った
- 参考記事
- https://www.i-ryo.com/entry/2020/02/06/061443
- https://qiita.com/tnemotox/items/b4b8f0f627e23dd62447
- [Testing library](https://testing-library.com/)
- 実装の詳細に関係なくUIのテストを書けるライブラリ、Reactでは公式推奨のテストライブラリとなっている

### API関連

- [Swagger](https://swagger.io/)
- REST APIの設計、ドキュメンテーション、モック作成などを行うツール群
- [OpenAPI仕様](https://swagger.io/specification/)に準拠
- [Postman](https://www.postman.com/)
- APIクライアント。開発時にAPIのテストなどを行う際に任意のリクエストを送信しレスポンスを受け取ることができる。
- 自動テストの機能など、テスト用機能の他、モックやドキュメンテーションなどの用途にも活用できる。
- [WireMock](http://wiremock.org/)
- APIのモックツール。
- [リクエストに対する多様なマッチング判定](http://wiremock.org/docs/request-matching/)による柔軟性
- [リクエストの記録／再生](http://wiremock.org/docs/record-playback/)による効率的なモック作成
- 参加アンケートコメント
- 一番簡単にサーバサイドのモックが作れると思っているから。
- [Open API generator](https://openapi-generator.tech/)
- 定義ファイルから言語に合わせたAPIリクエストのソースコードを生成する

### その他

- [Tabnine](https://www.tabnine.com/)
- AIを用いたインテリセンス（コード補完など）ツール。
- Githubなどの公開リポジトリ上の膨大なコードを元に作られた予測モデルを使用しているため、補完力が高い
- Javascript, Python, Typescript, PHP, Java…など主要な言語をサポート
- VSCode, IntelliJなど主要なIDEに対応
- [kite](https://www.kite.com/)
- AIを用いたインテリセンス（コード補完など）ツール。
- この領域においてはTabninteとkiteが２強のようですね。
- Javascript, Python, Typescript, PHP, Java…など主要な言語をサポート
- JavaScrpit向けは[こちら](https://www.kite.com/javascript/)
- VSCode, IntelliJなど主要なIDEに対応
- 参加アンケートコメント
- Kiteです。AIで入力補完をしてくれるので楽です
- [tailwindcss](https://tailwindcss.com/)
- Bootstrapなどと同じCSSフレームワークの一種
- BootstrapなどがUI部品ごとにクラスを定義しているのに対し、特定の振る舞いをするクラスを組み合わせることでデザインを構築する（utility-first）
- 記述量は増えるが細かい調整などがしやすい
- [コンセプトを記載した記事](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/)
- と、[翻訳されている記事](https://yuheiy.hatenablog.com/entry/2020/05/25/021342) by yuheiyさん
- 参加アンケートコメント
- 最近tailwindCssを導入してみました。
- [tailwindcss intellisense](https://tailwindcss.com/)
- tailwindcssのインテリセンスプラグイン
- 参加アンケートコメント
- ないと覚えてられない
- tailwindはインテリセンスありきで設計されている気がしますね
- [Prettier](https://prettier.io/)
- デファクトと言っていい気がするコード整形ツール
- ちなみにコードを奇麗にする行為を「prettify（プリティファイ）」。反対に難読化することを「uglify（アグリファイ）」
- [ESlint](https://eslint.org/)
- こちらもデファクトと言って良い気がするJavaScriptのLinter（ソースコードの構文チェック）ツール
- [TSlint](https://palantir.github.io/tslint/)
- TypeScript用のLinter
- なのですが、2019年にコミュニティから公式に利用が非推奨と宣言。ESLintの仕様が推奨されています。
- [TypeScript](https://www.typescriptlang.org/)
- JavaScriptに型を定義できるようにした言語。AltJSの一種。
- 型を定義できることで、不具合が少なく、また理解しやすいコードを書くことができる。
- 参加アンケートコメント
- TypeScriptは必須です！
- [Responsively](https://responsively.app/)
- [WinMarge](https://winmerge.org/?lang=ja)
- Windowsにおけるファイルの比較・マージのためのツールといえばこの人
- 最近はエディタやIDEが高性能になってきましたがお世話になった人も多いのでは。
- なんといってもアンケートコメントに書かれている内容は便利。
- 参加アンケートコメント
- Excelの差分が見れる
- [Windows terminal](https://www.microsoft.com/ja-jp/p/windows-terminal/9n0dx20hk701?activetab=pivot:overviewtab)
- Windowsで使えるターミナルソフト、Power shellやbash(WSL)を1つのソフトで扱える
- [Intellij IDEA](https://www.jetbrains.com/ja-jp/idea/)
- 参加アンケートコメント
- 有料ですがVSCodeより使いやすいと思っています
- tips
- [Puppeteer で HTTP リクエストエラーを検知し、テストを失敗させる](https://qiita.com/kawanamiyuu/items/164184205c28ef8f01d3)
- [Puppeteer で JavaScript の実行時エラーを検知し、テストを失敗させる](https://qiita.com/kawanamiyuu/items/a9fdc103a1e621d627a5)
- [jestでimport文を相対パスにするための設定](https://blog.mitsuruog.info/2019/06/jest-module-name-mapper)