読者です 読者をやめる 読者になる 読者になる

僕は僕で誰かじゃない

ビジネスとテクノロジーと健康についてあれこれ

MENU

【フロントエンド向け】脱にわかフロントエンドエンジニア!Macでコーディング環境を整えたい人はこれだけは抑えておこう!

f:id:sitk:20150523092200p:plain

今回は、脱にわかフロントエンドエンジニアを目指したい方に捧ぐ、制作環境(ツール)のご紹介です。
にわかフロントエンドエンジニアが増えた昨今、取り残されないために下記は要チェックでございます。

あくまでも、Mac環境でのお話ですので、Windowsユーザーの方はさらりとお目通しいただければと。

そして。
基本的にツールのご紹介ですので、使い方等は各自でぐぐってみてください。
参考になるサイトがたくさん出てきますので、そちらをどうぞ。

本質は、何を選択するか。
どう使うかは、あなた次第です。

ということで、楽しいコーディングライフを!

エディタ編

Coda2

https://panic.com/jp/coda/
FTP、バリデーション、バージョン管理など様々な機能に対応。
マークダウンも書けて、プレビューもできる。(※要プラグイン) ※有料アプリ

こちらは、長年愛用してます。
何度も浮気しましたがw
結局、Codaに行き着きました。
で、気づけば2.5にバージョンアップしてます。
使い勝手も向上していて、もう手放せないのです。

過去記事もご参考にw
www.web-genba.com

Emmet

http://emmet.io/
コーディングの効率化ツール
Coda2にインストールして使ってます。

チートシートは必見です。
http://docs.emmet.io/cheat-sheet/

EditorConfig

http://editorconfig.org/
制作環境の統一化ツール
こちらも、Coda2にインストール済み。
文字コード、改行コード、インデントなど調整してくれる超絶便利な設定ファイル。
チームで作業する方はもちろん、個人でガリガリやってる人もこれはぜひとも導入するべき。

Sass編

Sassとは、CSSを拡張したメタ言語です。

詳しくは、こちらの書籍をご参考に!

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のアカウントを取得することをおすすめします。
コードを人に見てもらえるし、教育には持って来いなサービスです。

さいごに

ひさびさに、ガリガリ作りたいと思えるようになりましたw
ここまで環境を整えると、効率化もできますし、考えることに時間を割けそうです。

効率化は、いつの時代も永遠の課題ですね。

以上です。

追伸:

英語がわかる方、わからない方も。
オリジナルのドキュメントを見るのが一番手っ取り早いです。
時間がかかっても、自分で読み解く力をつければ百人力!
最近は翻訳サイトもありますので、ざっくり概要つかむとかまではできるのではないでしょうか。

ということで、楽しいコーディングライフを!

追伸2:メルマガもやってます。

www.mag2.com

創刊号が、2011年10月5日。
時が流れるのはあっという間ですね。。。

気ままに配信しておりますので、ブログと併せて、ぜひご登録を!
目指せWeb業界!就職・転職・起業なら、学校では教えてくれないWeb制作の現場