changed 4 years ago  
Published Linked with GitHub

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

イベントページ

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

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

VSCode拡張

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

Google Chrome拡張

その他（スマホ関連）

参考（前回分）

VSCode拡張

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

開発者ツール / Chrome拡張

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

  • MDN
  • Can I use
    • HTML,CSS,JavaScriptの機能についてブラウザの対応状況が分かる
    • IE対応や、新しい機能を利用したい場合に参照すると便利

JSライブラリ

API関連

  • Swagger
    • REST APIの設計、ドキュメンテーション、モック作成などを行うツール群
    • OpenAPI仕様に準拠
  • Postman
    • APIクライアント。開発時にAPIのテストなどを行う際に任意のリクエストを送信しレスポンスを受け取ることができる。
    • 自動テストの機能など、テスト用機能の他、モックやドキュメンテーションなどの用途にも活用できる。
  • WireMock
  • Open API generator
    • 定義ファイルから言語に合わせたAPIリクエストのソースコードを生成する

その他

  • Tabnine
    • AIを用いたインテリセンス（コード補完など）ツール。
    • Githubなどの公開リポジトリ上の膨大なコードを元に作られた予測モデルを使用しているため、補完力が高い
    • Javascript, Python, Typescript, PHP, Java…など主要な言語をサポート
    • VSCode, IntelliJなど主要なIDEに対応
  • kite
    • AIを用いたインテリセンス（コード補完など）ツール。
    • この領域においてはTabninteとkiteが２強のようですね。
    • Javascript, Python, Typescript, PHP, Java…など主要な言語をサポート
    • VSCode, IntelliJなど主要なIDEに対応
    • 参加アンケートコメント
      - Kiteです。AIで入力補完をしてくれるので楽です
  • tailwindcss
    • Bootstrapなどと同じCSSフレームワークの一種
    • BootstrapなどがUI部品ごとにクラスを定義しているのに対し、特定の振る舞いをするクラスを組み合わせることでデザインを構築する（utility-first）
    • 記述量は増えるが細かい調整などがしやすい
    • コンセプトを記載した記事
    • と、翻訳されている記事 by yuheiyさん
    • 参加アンケートコメント
      • 最近tailwindCssを導入してみました。
  • tailwindcss intellisense
    • tailwindcssのインテリセンスプラグイン
    • 参加アンケートコメント
      • ないと覚えてられない
    • tailwindはインテリセンスありきで設計されている気がしますね
  • Prettier
    • デファクトと言っていい気がするコード整形ツール
    • ちなみにコードを奇麗にする行為を「prettify（プリティファイ）」。反対に難読化することを「uglify（アグリファイ）」
  • ESlint
    • こちらもデファクトと言って良い気がするJavaScriptのLinter（ソースコードの構文チェック）ツール
  • TSlint
    • TypeScript用のLinter
    • なのですが、2019年にコミュニティから公式に利用が非推奨と宣言。ESLintの仕様が推奨されています。
  • TypeScript
    • JavaScriptに型を定義できるようにした言語。AltJSの一種。
    • 型を定義できることで、不具合が少なく、また理解しやすいコードを書くことができる。
    • 参加アンケートコメント
      • TypeScriptは必須です！
  • Responsively
  • WinMarge
    • Windowsにおけるファイルの比較・マージのためのツールといえばこの人
    • 最近はエディタやIDEが高性能になってきましたがお世話になった人も多いのでは。
    • なんといってもアンケートコメントに書かれている内容は便利。
    • 参加アンケートコメント
      • Excelの差分が見れる
  • Windows terminal
    • Windowsで使えるターミナルソフト、Power shellやbash(WSL)を1つのソフトで扱える
  • Intellij IDEA
    • 参加アンケートコメント
      • 有料ですがVSCodeより使いやすいと思っています
  • tips
Select a repo