フロントエンジニアとして1年が経ち使うようになった開発ツール紹介

ハル


フロントエンジニアとして1年が経ち使うようになった開発ツール紹介

おはこんばんにちは、ハルです。
新人フロントエンジニアとして、LIGで働き1年が経ちました。

専門学生時代、実際の現場ではどんなツールを使って開発しているのだろうと気になることがありました。

今回は、そんな「これから勉強を始める人」「これからフロントエンジニアとしてスタートする人」へ向けて、僕がフロントエンジニアとして働き始めて1年を経て使うようになったツールを紹介できればと思います。

  • 本稿では、開発で使用しているツールに絞って紹介します。
    Macを使用しているため、Macで開発するツールの紹介になりますが、物によってはWindowsにもあるかと思います。人によって使うものは違うと思いますが、参考になればと思います。
  • 私の場合は、HTML/CSS/JavaScript/PHPを使用し開発していますが、テンプレートとしてfrontplate-cliを使用しています。
    フロントエンドで必要なものは、ひと通りセットになっています。WordPressのオプションを設定すれば、WordPressの開発環境もセットで整います。
    https://github.com/frontainer/frontplate-cli

 

▼目次

テキストエディター

基本的にIDEを使用しています。ちょっとした変更やメモを取るときに、テキストエディターを使用しています。

PHPStorm

phpを使用した案件がメインなので、phpに特化した有料のIDEを使用しています。
特に設定も必要もなく、機能満載ですごく使いやすいです。

https://www.jetbrains.com/phpstorm/

Atom

主に、マークダウンでメモを取ったり、php以外の言語を書くときに使用しています。

https://atom.io/

開発が便利になるもの

iTerm2

ターミナルでも十分ではありますが、さらに便利な機能が追加されています。

見た目もカスタマイズでき、大嫌いな黒い画面が好きになるツールです。定期的に背景を今見ているアニメの壁紙にするのが地味にテンション上がります。

https://www.iterm2.com/

Mapture

スクリーンショットを撮り、最前面に表示してくれます。そこから、透過させることができます。
Maptureでpsdデータのスクリーンショットを撮り、ブラウザの上に乗せてズレがあったら細かく調整するのに使用します。

http://anatoo.jp/mapture/

Linear

画面上に定規を表示できます。ここのマージンは大体どのくらいだろうと、パッと見たいときに使います。

http://linear.theuxshop.com/

Boostnote

エンジニア向けのメモ帳ツールで、マークダウンでメモを取ることができ、コードが綺麗に表示されるのがとても気に入っています。
開発のことで学んだことをメモしたり、よく使うコードはここに書いてまとめています。

https://boostnote.io/

Handbrake

動画のエンコードツールです。
WebサイトでYoutubeを埋め込むこともありますが、videoタグを使って表示することも多く、自分で動画を軽量化するときに使用します。

https://handbrake.fr/

Transmit

有料のFTPクライアントです。無料のFilezillaでも機能は十分ですが、UIがシンプルでかなり使いやすいです。

https://panic.com/jp/transmit/

仕事に便利なツール

Rambox

コミュニケーションツールを、ひとつのウィンドウで管理するツールです。
メインブラウザでチャットやメールなどを開くと、タブがいつの間にか開きすぎてしまったりしますが、このツールを使えば軽減できます!
http://rambox.pro/

HyperSwitch

Macで『Command + Tab』で開いているツールを切り替えるとき、ウィンドウ単位にしてくれるツールです。

https://bahoom.com/hyperswitch

ブラウザの拡張機能

開発段階時、メインブラウザはGoogle Chromeを使用し、サブブラウザでFirefoxを使用しています。
Firefoxではバリデーションチェックと見出し構造のチェックに使用しています(表示のチェック時は他のブラウザ・デバイスでも行います)。

Google Chrome

QR-Code Tag Extension

PCで見ているページをスマホでも確認したいときに、このツールでQRコードを出しています。

QR-Code Tag Extension

Quick Javascript Switcher

JavaScriptをオフにしたときのWebサイトの見た目をチェックするときに、使用しています。

Quick Javascript Switcher

ColorPick Eyedropper

ブラウザ上の色をすぐに調べたいときに使用しています。

ColorPick Eyedropper

Awesome Screenshot

Webサイトのページ全体を画像として保存したいときに使用しています。

Awesome Screenshot

Firefox

Html Validato

HTML5に対応しているHTMLバリデーションチェックツールです。

すばやくバリデーションチェックが行えるのでとても気に入っています。残念ながらGoogle Chromeにはこの拡張機能がないので、Firefoxで使用しています。

Html Validato

HeadingsMap

見出しの構造が正しく設定できているかを確認するのに使用しています。

こちらはGoogle Chromeにもありますが、Firefox版の方が見やすいのでFirefoxで使用しています。

HeadingsMap

まとめ

LIGの先輩社員からオススメされたものがほとんどですが、個人的に使いやすいと思って紹介したものもあるので、人によっては使わないものもあるかと思います。

これからフロントエンド勉強するぞ! という方の参考になればと思います!

ハル
この記事を書いた人
ハル

フロントエンドエンジニア

関連記事