どうもユーキです。

今年の4月で、本格的にWeb制作に携わって4年が経ち、様々なツールがものすごいスピードで出て来てると日々感じてます。
制作するにあたってどんどん便利になっていく反面、いっぱいありすぎて「どれを使えばいいのかさっぱりわからない！！」なんてことも多々あると思います。

そこで今回は、実際の業務で、これはオススメというツールを紹介していこうと思います。
業務ではフロントエンドがメインですが、ときおりバックエンドもすることがあるので、両方に関連するツールを紹介していきます。

ちなみに、私はMacユーザーです。Macメインのアプリ紹介になってしまっている部分もありますので、ご了承くださいませ。

テキストエディタ

Atomがオススメ

Web制作では欠かせないテキストエディタから紹介です。
仕事もプライベートも基本はAtomを使ってます。コマンドラインはVimです。
結構たくさんのエディタを触ってきましたが、個人的にはAtomが一番しっくりきたのでオススメします！

• github製
• 拡張機能の追加が容易でカスタマイズしやすい
• プラットフォームを選ばない（windows、mac、Linuxどれでも使える）
• 日本語化も優秀
• gitの差分がファイルごとに可視化して見やすい

といった特徴があります。本当に扱いやすいエディタです。メモからプログラミングまでなんでも出来る優れものです。

導入しているパッケージ

• Stylus@3.1.0
• angular-2-typeScript-snippets@0.6.3
• atom-jade@0.3.0
• atom-terminal@0.8.0
• atom-typescript@10.1.13
• autoclose-html@0.23.0
• autocomplete-paths@1.0.5
• color-picker@2.2.3
• file-icons@1.7.25
• goto-definition@1.1.19
• highlight-column@0.5.1
• highlight-selected@0.11.2
• japan-util@0.2.0
• japanese-menu@1.9.0
• language-pug@0.0.19
• linter@1.11.18
• linter-csslint@1.3.3
• linter-htmlhint@1.3.1
• linter-jade@0.3.2
• linter-sass-lint@1.7.4
• minimap@4.25.7
• minimap-split-diff@0.3.2
• pigments@0.37.0
• project-manager@3.3.3
• react@0.16.0
• react-snippets@0.6.2
• ruby-slim@0.2.0
• show-ideographic-space@1.0.1
• sort-lines@0.14.0
• split-diff@1.1.0
• symbols-tree-view@0.13.2
• tag@0.4.0

その他一般的によく使われているエディタ

• Sublime Text3
• Vim
• Emacs
• Visual Studio Code
• Aptana Studio
• サクラエディタ
• mi
• Coda2
• PHPStorm/WebStorm（有料のIDEですが、オススメです！）

もちろん用途にもよりますが、基本は無料で使えるもので充分だと思います。
有料のものが使いたい場合でも、一定期間はお試しで使えることが多いので、有料版も含め自分に合うものを探してみてはいかがでしょうか。

デザインに必要なソフト

圧倒的にAdobe製品。特にPhotoshop

業務で使われるデザインソフトの99％（自分比）が、Adobe製品です。
下記の中から1つ OR 複数使うことになります。

• Photoshop
• Illustrator
• Fireworks

もちろん上記すべて使えるのがベストですが、全部使うということはまず無いです。
私の業務では、Photoshop 99%、Illustrator 1%の割合で使っています。

Webサイトは、基本的に「文字」と「画像」で出来ているため、画像のスライス作業が発生します。
画像スライスをするならPhotoshopが何かと便利なので、まずはPhotoshopを使えるようにしましょう！

同じAdobe製品なので、使い方も似たり寄ったりな部分が多々有り、どれか一つのソフトの操作を覚えてしまえば、あとは足りない部分・違う部分を補うだけで大体使えるようになります。

どうしても無料が良いという方

• GIMP
• Inkscape

このあたりのソフトが使い勝手よさそうですね。お試しあれ！

FTP/FTPS/SCPクライアント

Filezillaで事足りる

Filezilla（ファイルジーラ）の特徴は、

• 無料
• SFTP、SSL対応
• ローカルとリモートのディレクトリを2つ並べて作業出来る
• プラットフォームを選ばない

です。必要な機能は備わってるので充分ですね。
似たようなアプリだと

• Cyberduck
• WinSCP（Windowsのみ）
• FFFTP（WIndowsのみ）

最近は無料でもほんとに優秀なアプリだらけですね。有料のものをわざわざ使わなくても事足りてしまいますね。

実務では、ForkLiftを使用

会社に入った当初はFilezillaを使っていたのですが、セキュリティ的な面で本社サーバー（プロキシ）を経由してFTP接続が義務化という話になり、Filezillaだとできないようでした。

Forklift 3が出たため、Forklift 2が無料化されました。
MacのFinder（Windowsでいうフォルダ画面のこと）ライクで非常に使いやすいですね。

ちなみに、WinSCPではプロキシ経由での通信が可能なので、必要があるならWinSCPを使うと良いでしょう。

実はエディタにもFTP機能がある

最近のエディタだとFTP機能がついてるものが有ります。
かくいうAtomも機能を追加すれば使えます。Sublime Text、Codaあたりもいけますね。
編集したファイルをすぐ同期などといったことができるので、効率化したいときに使ってみてはいかがでしょうか。

バージョン管理ツール

GitならSourceTree

そもそも無料のものがほとんど無いのですが…。
きちんと作り込まれてるアプリがSourceTreeなのでこちらオススメです。
Windowsでも使えるので、プラットフォームを気にせずに済みますね。

ちなみに私は、実はほとんどSourceTreeは使ってないです。基本全部コマンドラインでやってます。
SourceTreeは差分ファイルの抽出くらいでしかつかってないです。
ただ、差分ファイルの抽出もデフォルトでは無い機能なので、シェルスクリプトを拾ってきて使えるようにしてます。

あと、GitHubを使っているなら、GitHub製のアプリを使うのもオススメです。
Windows,Macどちらでも使えます。

Subversion（SVN）は、WindowsならtortoiseSVN。だがMacは…

業務で未だにSVNを使ってること自体が億劫ですが、しょうがないですね。笑

Windowsなら、tortoiseSVN一択ですね。機能も豊富で使いやすいようです。

Macだと、Cornerstoneというアプリが非常に使いやすいです。高機能で素晴らしいです。ユーザビリティは文句なし。
ただ高い！有料アプリで、結構なお値段します。現在 2017/03/08時点だと、$69（upgradeは$49）ですね。

じゃあ無料のやつ使えばいいじゃん！と思いの方。
残念ながら無料のやつだと使いやすいクライアントがないのです。。＞＜

しいて使ってるものといえば、svnXです。
というかこれくらいしか無いです。そしてこれがまた使いづらいのなんの！
しょっちゅう強制終了するし、機能が直感的にわかりづらいし…英語だからなおさら…。
使ってるうちに慣れるとは思いますが、それでも強制終了連発はいただけないですよね。
コマンドラインでもやれるんですが、差分ファイルの抽出とかもできないので面倒でしょうがないです。
svnXの機能もそのうち簡単にまとめたい！

じゃあどうしてるのかというと、SourceTree使ってます。GitでSVN動かしちゃってます。
git-svnというものがあるので、そちらを利用することでSVNをGitとして使うことができちゃうすぐれものです。
導入方法とか詳しい解説は別途記事にするので、しばしお待ちください！

コマンドラインツール

iTerm2がオススメ

みんなご存知黒い画面。Macだとデフォルトで入ってるターミナルというアプリでもいいんですが、結構見づらいんですよね。
iTerm2だと、カラーテーマなるものがあり、色とか自分で好きにカスタマイズできるので、こちらを使うのがおすすめです。

Windowsはごめんなさい、全くわからないです。Windows使ってるときにコマンドプロンプトあんまり使ってなかったです。m(_ _)m
なにかオススメあれば教えてください！

homebrewは必須

Mac用のパッケージマネージャー。Macならhomebrewは必ず入れましょう。
Macの標準で入ってるコマンドには無いものが結構あり、毎回.pkgのファイルをDLしてインストール、アップデートするのが結構手間になるし、何入れたか覚えてないよ！とかなりかねないので、それを管理するためにもhomebrew導入を推奨します！

これのおかげで、node.jsやRuby、gitなどなど各種のバージョンを簡単にアップ、ダウン出来るようになります。
その他にもrbenv（rubyの管理ツール）とかnodebrew（node.jsの管理ツール）だったりをhomebrewを通していれておくとさらに管理しやすくなるのでおすすめです。

タスクランナー

Gulp

タスクランナーとは、上でちらっとでたnode.jsで動かす自動化ツールです。
HTML・CSS・JSの記述を効率化・圧縮したり、画像の圧縮だったりを自動で行うようにするすぐれものです。
最初は素のHTML・CSSが一番良いだろ！って思って使ってなかったんですが、試しにつかったところ、もうこれなしじゃコーディングするのが億劫！っておもえるくらい便利なものです。

一昔前（といっても2年くらい前）はGruntが主流だったんですが、カクカクシカジカで動作がもたついたりと不便なことが多々ありました。
それが改善されたのがgulpです。

どんな感じで利用しているのか

• HTML：Pug
• CSS：Stylus
• JS：Webpack+Babel
• 画像：imagemin
• ブラウザ:browsersync

こんな感じで使っています。シンプルにまとめておきたいと試行錯誤し今の形となりました。まとめたものをGitHubで開発環境公開しています。

→tnyk35/min-dev-starter-kit

ご自由にお使いください。何か要望や質問がありましたら、メールやissuesでご連絡くださいませ。

タスク管理ツール

GithubのIssues、Projectsを利用

Projectsというカンバン方式でissuesの分類分けができるようになってからほとんどこればっかり使ってます。

プロジェクトにもよりけりですが、新規作成案件の場合は、まずは1ページごとにissueを切る→Projectsにissueを入れる→消化してクローズする、という流れでやってます。

一人でやるならProjectsも使わずにissuesのみでやってしまうことが多いですが、複数人だとProjectsにいれておけばだれが何をやってる、進捗も見やすくできます。

Github使えないときだけ、Jootoを利用

業務上のタスク管理ツールは、JootoというWebサービスを利用してます。カンバン方式のもので、色もある程度設定できて、進捗状況がわかりやすく便利です。
あとは、googleカレンダーにスケジュールを書いとけばいいのでとくに困ってないです。

コミュニケーションツール

SkypeよりもSlack

メッセージやデータのやり取りはもちろん、Webhookの設定が簡単なので、githubと連携してpushなどの通知をだしたり、はたまたbotを作って遊ぶこともできる、グーグルカレンダーとも連携出来るなどメリット盛りだくさんです。

マルチプラットフォームで、スマホも対応してるので非常に便利です。メンションを使えるのもなにげに便利ですね。

ちなみに会社ではgoogleハングアウト使ってますが、メッセージと画像しか送れないのが非常に不便。。。（セキュリティ的には良いとは思いますが）

ブラウザ

Chromeがなんだかんだ一番便利

googleアカウント連携すればブックマークだったり、拡張機能だったり、わざわざ再度入れ直す必要が無いのが便利すぎですね。
デベロッパーツールも使いやすいのでオススメです。業務では、まずChromeで作業して最後に各ブラウザで確認すると言った感じですね。

業務で対象になるブラウザ一覧

• Chrome（Windows/Mac）
• Firefox（Windows/Mac）
• Safari
• IE9〜IE Edge(たまにIE8)

ChromeやFirefoxはWindows、Macどちらもブラウザチェックするほうがいいですね。たまに片方が崩れてるみたいなときがまれにあったりなかったり。フォントの関係とかJSとか原因というのがほとんどですが。

IEに関しては、Microsoft公式でブラウザの仮想環境を用意しているので、そちらを利用してます。

→https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

オフィスソフト

オフラインは断然Microsoft Office

Windows版、Mac版どちらもあるのでそれぞれに合わせてインストールできます。

ただ、Windows←→Macの互換性がイマイチなところもあるため、MacならWindowsの仮想環境を作り、そこにOfficeをインストールするのが一番かしこいやり方かなと。
word、excel、powerpointあたりが使えるようにしておくのがベター。

オンラインならGoogle Docs

ほとんどオンラインでのやり取りならGoogle Docsですよね。
ドキュメント、スプレッドシート、スライド、フォームをつかえば事足りちゃいます。

あと、インポート/エクスポートも出来るので本当にこれあればなんとかなっちゃいますね。
ドキュメント←→wordファイル、スプレッドシート←→excelファイル、スライド←→powerpointファイル…など。

オンラインストレージ

Google DriveとDropbox

記事書いてて思いましたが、オンラインはGoogle系がやっぱり強いですね！どのデバイスからも共有できるのって本当に便利ですね。
容量もおおきめで、しかも無料で使えちゃいます。

ということで、大体GoogleDriveであとはたまにDropboxみたいな感じで使ってます。
あとfirestorageも稀につかうことあります。主に共有目的ですが。

おわりに

いかがでしたでしょうか。後半駆け足になっちゃいましたが、実際の業務で使っているものを紹介しました。使ってみたいものはありましたか？

カスタマイズ性の高いものを割りと利用していますが、日々より良いツールが出てくるので、日々情報収集は怠らないようにしておきつつ、自分の開発スタイルに合うようカスタマイズもしていくのがよいのではないでしょうか。