【初心者からプロまで】フロントエンドエンジニア向け、永久不滅ツール【７選】
フロントエンドエンジニアの初心者から、プロまで。
進化の早いフロントエンド業界で永久不滅ツールをご紹介します。
永久不滅、つまり長く使えるツールをオススメする理由
進化が早いので流行り廃りが多い。
その都度、新しいツールを使っていたら、永久にツールのセットアップをする人生になりますね。
新しいツールを触ることは否定しませんが、フロントエンドの目的は、ユーザーに最適なUI/UXを提供することです。目的を忘れずにいきましょう。
» 参考：Railsで開発してもPHPで開発しても大して変わらねえじゃねえか。
フロントエンドエンジニアの定番ツール３選
まずは定番＆必須ツール。
極論いうと、この３つだけでも生きていけます。
SublimeText3：コーディング用のエディタ
もはや説明不要かと。
エンジニアの８割くらいが利用しているのではないでしょうか。おすすめのセットアップは自分用メモ：SublimeText3の設定＆ショートカットにまとめています。
» Sublime Text – Download
MAMP：ローカルの開発環境構築
MAMPとか古いって言われますが、個人で開発する分にはこれで十分。開発会社に入るなら、Vagrantとかがいいかもですが、それは開発会社に入ってから学べばOK。
» MAMP & MAMP PRO
ForkLift：FTPアプリ
FTPアプリならForkLiftが一番オススメ。
無料なら、CyberduckUI重視ならTransmitですが、全部試した結果、ForkLiftに戻ってきました。理由は覚えていません。
» ForkLift 3
フロントエンドは１ピクセルに命が宿る。デザイン系ツール４選
次にデザイン調整ツール。
メインのデザインはデザイナーに任せるにしても、細かい部分はフロントエンドエンジニアが直したほうが早いですよね。
Sketch：ちょっとしたデザインに最適
デザインツールなら、Sketchで十分かと。
簡易的な部分（ちょっとしたアイコン作成など）はSketchだと捗ります。というか、Sketchだけでも十分デザインできちゃいますが…。
» Sketch – Professional Digital Design for Mac
Linear：１ピクセルにこだわる！
１ピクセルにこだわるときは、Linearがおすすめ。
起動すると画面上に半透明の定規が出てきますので、１ピクセル単位で調整できます。
» ダウンロードリンク linear · GitHub
JPEGmini：画像を軽くしましょう
JPEGの軽量化ツール。
画像が重たいとユーザーが萎えるので軽量化しましょう。フロントエンド開発だけじゃなく、ブログ書く時も重宝しています。今すぐDLすべき。
JPEGmini – Your Photos on a Diet!
※補足：PNGファイルはどうするの？
PNG重たいから使いませんｗ MacのプレビューでPNGからJPGに変換しています。ちなみに、下記の方法だと高速でPNG→JPG変換できるのでオススメ。
» Macでpngなどの画像をサクッとjpegに変換する方法
Font Awesome：アイコンを爆速で作る
コード１本でアイコンを作れます。
もはや、Font Awesomeなしじゃコーディング出来ません。僕の場合はデザイナーにも「アイコンを使うときは、Font Awesomeから使うように」と依頼していますｗ フロントエンドエンジニアの必須ツールですね。
» 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タグとかなしで納品してくるエンジニアがいますが、かなり論外だと思います。フロントエンドエンジニアなら、集客チャネルの１つとしてSEOは知っておくべきだし、h1タグ含め、各種タグは最適化して納品すべき。最低限のツールは理解してきましょう。下記にまとめています。
» SEOやWebマーケに必須なツールは８つだけ。全部知っていますか？
※P.S：無料メルマガで発信中：過去の僕は「ブログ発信で５億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら１秒で解約できます。無料登録は「こちら」です。