おはこんばんにちは、ハルです。
新人フロントエンジニアとして、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以外の言語を書くときに使用しています。
開発が便利になるもの
iTerm2
ターミナルでも十分ではありますが、さらに便利な機能が追加されています。
見た目もカスタマイズでき、大嫌いな黒い画面が好きになるツールです。定期的に背景を今見ているアニメの壁紙にすると、地味にテンション上がります。
Mapture
スクリーンショットを撮り、最前面に表示してくれます。そこから、透過させることができます。
Maptureでpsdデータのスクリーンショットを撮り、ブラウザの上に乗せてズレがあったら細かく調整するのに使用します。
Linear
画面上に定規を表示できます。ここのマージンは大体どのくらいだろうと、パッと見たいときに使います。
Boostnote
エンジニア向けのメモ帳ツールで、マークダウンでメモを取ることができ、コードが綺麗に表示されるのがとても気に入っています。
開発のことで学んだことをメモしたり、よく使うコードはここに書いてまとめています。
Handbrake
動画のエンコードツールです。
WebサイトでYouTubeを埋め込むこともありますが、videoタグを使って表示することも多く、自分で動画を軽量化するときに使用します。
Webサイトに動画を埋め込む際のサイズと軽量化方法
ハル
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コードを出しています。
Quick Javascript Switcher
JavaScriptをオフにしたときのWebサイトの見た目をチェックするときに、使用しています。
ColorPick Eyedropper
ブラウザ上の色をすぐに調べたいときに使用しています。
Awesome Screenshot
Webサイトのページ全体を画像として保存したいときに使用しています。
Firefox
Html Validato
HTML5に対応しているHTMLバリデーションチェックツールです。
すばやくバリデーションチェックが行えるのでとても気に入っています。残念ながらGoogle Chromeにはこの拡張機能がないので、Firefoxで使用しています。
HeadingsMap
見出しの構造が正しく設定できているかを確認するのに使用しています。
こちらはGoogle Chromeにもありますが、Firefox版の方が見やすいのでFirefoxで使用しています。
まとめ
LIGの先輩社員からオススメされたものがほとんどですが、個人的に使いやすいと思って紹介したものもあるので、人によっては使わないものもあるかと思います。
これからフロントエンド勉強するぞ！ という方の参考になればと思います！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
