Written by Manabu Bannai

【初心者からプロまで】フロントエンドエンジニア向け、永久不滅ツール【7選】

PROGRAMMING

フロントエンドエンジニアの初心者から、プロまで。
進化の早いフロントエンド業界で永久不滅ツールをご紹介します。

スポンサードサーチ


永久不滅、つまり長く使えるツールをオススメする理由

ツールに使われる人生じゃなく、ツールを使う人生を。

進化が早いので流行り廃りが多い。
その都度、新しいツールを使っていたら、永久にツールのセットアップをする人生になりますね。

新しいツールを触ることは否定しませんが、フロントエンドの目的は、ユーザーに最適なUI/UXを提供することです。目的を忘れずにいきましょう。
» 参考:Railsで開発してもPHPで開発しても大して変わらねえじゃねえか。

フロントエンドエンジニアの定番ツール3選

まずは定番&必須ツール。
極論いうと、この3つだけでも生きていけます。

SublimeText3:コーディング用のエディタ


もはや説明不要かと。
エンジニアの8割くらいが利用しているのではないでしょうか。おすすめのセットアップは自分用メモ:SublimeText3の設定&ショートカットにまとめています。
» Sublime Text – Download

MAMP:ローカルの開発環境構築


MAMPとか古いって言われますが、個人で開発する分にはこれで十分。開発会社に入るなら、Vagrantとかがいいかもですが、それは開発会社に入ってから学べばOK。
» MAMP & MAMP PRO

ForkLift:FTPアプリ


FTPアプリならForkLiftが一番オススメ。
無料なら、CyberduckUI重視ならTransmitですが、全部試した結果、ForkLiftに戻ってきました。理由は覚えていません。
» ForkLift 3

フロントエンドは1ピクセルに命が宿る。デザイン系ツール4選

次にデザイン調整ツール。
メインのデザインはデザイナーに任せるにしても、細かい部分はフロントエンドエンジニアが直したほうが早いですよね。

Sketch:ちょっとしたデザインに最適


デザインツールなら、Sketchで十分かと。
簡易的な部分(ちょっとしたアイコン作成など)はSketchだと捗ります。というか、Sketchだけでも十分デザインできちゃいますが…。
» Sketch – Professional Digital Design for Mac

Linear:1ピクセルにこだわる!


1ピクセルにこだわるときは、Linearがおすすめ。
起動すると画面上に半透明の定規が出てきますので、1ピクセル単位で調整できます。
» ダウンロードリンク linear · GitHub

JPEGmini:画像を軽くしましょう


JPEGの軽量化ツール。
画像が重たいとユーザーが萎えるので軽量化しましょう。フロントエンド開発だけじゃなく、ブログ書く時も重宝しています。今すぐDLすべき。
JPEGmini – Your Photos on a Diet!

※補足:PNGファイルはどうするの?
PNG重たいから使いませんw MacのプレビューでPNGからJPGに変換しています。ちなみに、下記の方法だと高速でPNG→JPG変換できるのでオススメ。
» Macでpngなどの画像をサクッとjpegに変換する方法

Font Awesome:アイコンを爆速で作る


コード1本でアイコンを作れます。
もはや、Font Awesomeなしじゃコーディング出来ません。僕の場合はデザイナーにも「アイコンを使うときは、Font Awesomeから使うように」と依頼していますw フロントエンドエンジニアの必須ツールですね。
» Font Awesome, the iconic font and CSS toolkit

フロントエンドエンジニアなら、Macを高速で使いこなすべき


Alfredで生産性を高めましょう。
プログラミング用のファイルをFinderから開くとか効率悪いです。Alfredがあれば、コマンド一発なので。Alfredを使うと、人生の空き時間が増えるといっても過言ではありません。使い方は下記をどうぞ。
» パソコン操作が劇的に向上する!ランチャーアプリ『Alfred』をご紹介

番外編①:ちょっと上級者向けだけど、CodeKitもオススメ


初心者なら使う必要はないけど、CodeKitもオススメ。
CSSとJSの圧縮(Minify)やSCSSの自動コンパイルに使えます。使い方は下記で解説しています。
» 【神ツール】CSSとJSの圧縮(Minify)なら、CodeKitがおすすめ【使い方解説】

番外編②:フロントエンドエンジニアなら、SEO知識もいるよね


たまにh1タグとかなしで納品してくるエンジニアがいますが、かなり論外だと思います。フロントエンドエンジニアなら、集客チャネルの1つとしてSEOは知っておくべきだし、h1タグ含め、各種タグは最適化して納品すべき。最低限のツールは理解してきましょう。下記にまとめています。
» SEOやWebマーケに必須なツールは8つだけ。全部知っていますか?

人気記事無料あり:エンジニアの僕がおすすめするプログラミングスクール3社