Blog

【作業効率UP】2015年マークアップエンジニアにおすすめのツール&技術

こんにちわ親バカ山王です。

最近MacBookProを買いました。
これでスタバでドヤ顔したいと思います。

余談ですがもうすぐ我が地元鳥取にスタバが出来ます。
皆様是非足を運んでください。

さて今回の記事はここ最近の制作で使っているツールのご紹介です。
効率化&作業工数短縮に是非活用してください!

_r2_c2

目次

  1. Sublime Text
  2. Sass
  3. gulp.js
  4. Vagrant
  5. git
  6. iTerm
  7. Google Chrome

 

 

Sublime Text3

imgres

Sublime Text3

言わずと知れた恋に落ちるエディタSublimeText3。

僕の心を掴んで離しません。
Atomがいいって聞いたんで少し浮気しそうになったんですがやっぱりこいつでしたね。

自分好みのカスタマイズが出来て使いやすいです。
まだ使ってない方はぜひ使ってみてください。

詳しい使い方はユニオンネットの過去記事があるんで確認して下さい!

マークアップエンジニアもDreamweaverよりずっと捗るSublime text2を使うべき

 

 

Sass

photo

Sass

言わずと知れたCSS拡張メタ言語SASSこいつがないとコーディング出来ないと言っても過言ではないです!
Mixinや変数、for文など便利な機能満載で一度使うと普通のCSSはかけません。

compassを一緒に使用すればかなり工数削減にも繋がります!

こちらも簡単ではありますが過去記事あります。

Preprosの使い方&Sass入門編

他にもこちらなど参考になると思います。

Sassを覚えよう

 

gulp.js

gulp

gulp.js

こちらはGruntに変わるフロントエンドタスクランナーgulp.jsです。

Sassのコンパイル、Js、CSS、画像の圧縮等フロントエンド制作で必要な事を
自動でやってくれる便利なツールです。

インストールや設定ファイルの作成が少し面倒くさいですけど別々でやっていた作業をまとめれるので
是非導入してください!

こちらも記事があるので参考にしてみてください。

【Gulp.jsインストール】フロントエンドタスクランナーGulp.jsの使い方

 

 

Vagrant

vagrant_header_background-482a12a7

Vagrant

VagrantとはVirtualboxなどで仮想サーバーを立てることができるツールです。

自分好みのサーバーを用意できVagrantコマンドで簡単に起動停止を行え失敗してもすぐ破棄して作りなおすことも出来ます。

本番サーバーを触る前の練習にもいいと思います。

コマンドラインでvagrant upすればすぐにローカルサーバーが立ち上がり使用できます。
(構築は少しめんどくさいですが何回もやれば慣れますw)

こちらも記事あるので確認して下さい!

仮想環境構築ツール「Vagrant」でローカル開発環境を構築してみた

 

 

Git

git

Gitはバージョン管理のためのツールです。

有名なGitのコードホスティングサービスと言うとGitHubが有名ですが僕はBitBucketを使用しています。

なぜBitBucketがいいかというと1つのリポジトリに対して5ユーザーまでプライベートリポジトリが無料です。
GitHubは無料のプライベートリポジトリを持つことは出来ません。

僕は基本的に自分一人でしかコードの管理をしないのでBitBucketが向いてるのです。

Gitは難しいイメージがありますがSourceTreeというGUIのGitクライアントを使えば比較的簡単に扱えます。

是非チャレンジしてみてください!

 

 

iTerm

maxresdefault

iTerm

こちらはMacのターミナルを使いやすくするためのツールです。

機能、UIともにターミナルよりオススメです。

Windowsでいうとコマンドプロンプトを使いやすくするためのやつです。
ちなみにWindowsでssh接続するときはコマンドプロンプトよりTeratermのほうがやりやすいですね!

 

 

Google Chrome

url

Google Chrome

最後はブラウザです。

やっぱり僕はChromeが使いやすいですね。

重くなった重くなった言われますが32bitから64bitに変更したらサクサクになりました!

Chromeが重いな~と思ったら32bit版を使ってた件。64bitにしたら快適でワロタwww

デベロッパーツールも使いやすいしいいですね!
スマホのエミュレータとしても活躍します!

 

 

まとめ

ざっくり僕が使ってるものを紹介しただけなんですがいかがでしたでしょうか??

当たり前のように使用しているものばっかりですが、もし使用してなくて興味があればぜひ使用してみてください!

今後もっといいツールが出てくればどんどん使っていきたいですね!

それでは良いWEB制作ライフを!

  • Knowledge DEPOT
  • サポートサイト