【フロントエンド向け】脱にわかフロントエンドエンジニア！Macでコーディング環境を整えたい人はこれだけは抑えておこう！
今回は、脱にわかフロントエンドエンジニアを目指したい方に捧ぐ、制作環境（ツール）のご紹介です。
にわかフロントエンドエンジニアが増えた昨今、取り残されないために下記は要チェックでございます。
あくまでも、Mac環境でのお話ですので、Windowsユーザーの方はさらりとお目通しいただければと。
そして。
基本的にツールのご紹介ですので、使い方等は各自でぐぐってみてください。
参考になるサイトがたくさん出てきますので、そちらをどうぞ。
本質は、何を選択するか。
どう使うかは、あなた次第です。
ということで、楽しいコーディングライフを！
エディタ編
Coda2
https://panic.com/jp/coda/
FTP、バリデーション、バージョン管理など様々な機能に対応。
マークダウンも書けて、プレビューもできる。（※要プラグイン）
※有料アプリ
こちらは、長年愛用してます。
何度も浮気しましたがｗ
結局、Codaに行き着きました。
で、気づけば2.5にバージョンアップしてます。
使い勝手も向上していて、もう手放せないのです。
過去記事もご参考にｗ
www.web-genba.com
Emmet
http://emmet.io/
コーディングの効率化ツール。
Coda2にインストールして使ってます。
チートシートは必見です。
http://docs.emmet.io/cheat-sheet/
EditorConfig
http://editorconfig.org/
制作環境の統一化ツール。
こちらも、Coda2にインストール済み。
文字コード、改行コード、インデントなど調整してくれる超絶便利な設定ファイル。
チームで作業する方はもちろん、個人でガリガリやってる人もこれはぜひとも導入するべき。
Sass編
詳しくは、こちらの書籍をご参考に！
Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語
- 作者: 平澤隆,森田壮
- 出版社/メーカー: インプレスジャパン
- 発売日: 2013/09/13
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (1件) を見る
Codekit
https://incident57.com/codekit/
コンパイルのためのGUIツール。
これは、便利すぎて手放せない。
※有料アプリ
Compass
http://compass-style.org/
Sassを元に開発されたフレームワーク。
Bourbon
http://bourbon.io/
scssのMixin集。
こちらも使い慣れると味がでてきそう。
これから使い倒してみる。
NEAT
http://neat.bourbon.io/
Bourbonを利用したGridフレームワーク。
Git編
https://git-scm.com/
Gitとは、分散型のバージョン管理システム。
Source Tree
https://www.sourcetreeapp.com/
GitのGUIクライアント。
GitHub
https://github.com/
エンジニアの方は、GitHubのアカウントを取得することをおすすめします。
コードを人に見てもらえるし、教育には持って来いなサービスです。
さいごに
ひさびさに、ガリガリ作りたいと思えるようになりましたｗ
ここまで環境を整えると、効率化もできますし、考えることに時間を割けそうです。
効率化は、いつの時代も永遠の課題ですね。
以上です。
追伸：
英語がわかる方、わからない方も。
オリジナルのドキュメントを見るのが一番手っ取り早いです。
時間がかかっても、自分で読み解く力をつければ百人力！
最近は翻訳サイトもありますので、ざっくり概要つかむとかまではできるのではないでしょうか。
ということで、楽しいコーディングライフを！
追伸2：メルマガもやってます。
創刊号が、2011年10月5日。
時が流れるのはあっという間ですね。。。
気ままに配信しておりますので、ブログと併せて、ぜひご登録を！
目指せWeb業界！就職・転職・起業なら、学校では教えてくれないWeb制作の現場
