こんにちは、フロントエンドエンジニアのライダーです。
2017年に芸術系の大学を卒業後、フロントエンドエンジニアとしてLIGに新卒入社してから一年半くらい経ちました。
現在の業務内容は、Webサイト・Webサービスのマークアップ、フロントエンド開発です。ときには WordPress や Laravel を触ることもありますが、基本的には HTML / CSS / JavaScript をごにょごにょしています。業務でWebデザインをすることはありません。
今回は、そんな僕の開発環境をご紹介したいと思います。
僕の開発環境
必ずしも全社として導入しているものではなく、あくまで僕が業務に使っているものを掲載しています。見出しの粒度がばらばらだったりするのもご容赦ください。
OS
- macOS High Sierra 10.13
これはアプリケーションとは呼ばないかと思いますが、念のため。以前は Windows の方もいた気がしますが、現在はLIGの社用PCは全て macOS で統一されているみたいです。
コーディングまわり
- PhpStorm 2018.2
- iTerm 2
コーディング業務はすべて PhpStorm でおこなっています。PhpStorm は僕にとってはじめての IDE でしたが、素晴らしいアプリケーションだなと思いました。
基本的に、設定を含むほとんどに GUI が採用されていますが、それらをショートカットで扱うときの快感からは抜け出せませんね。
ターミナル
iTerm 2 に oh-my-zsh が入っていますが、これも PhpStorm 経由で扱うことの方が多いですね。いつもバックグラウンドで頑張ってくれています。
Git
- PhpStorm 2018.2
いろんなオプションを付ける場合はコマンド（in PhpStorm）で操作するようにしていますが、基本的な Git 操作は GUIツールを用いています。少し前まで Source Tree を使っていたものの、現在は PhpStorm 内で操作するようになりました。
ちなみに、操作時間の短さでは GUI + ショートカット が最強だと思っています。また、LIG社内標準のホスティングサービスは Bitbucket です。
FTP クライアント
- Cyberduck
- FileZilla
Cyberduck か FileZilla を使うことが多いです。Transmit 5 を使っている人が周りに多いですが、僕は持っていません。FTPを触らない世界へ……。
その他
Docker……「その他」にまとめてしまってホントすみません。僕は `docker-compose up` くらいしかできないです。
VirtualBox……IE対応が必要な場合、そのチェックをするのに使っています。
デザインまわり
デザインカンプの確認
- Adobe Photoshop
- Adobe Extract
- Zeplin
- Preview
LIGでは Adobe Photoshop を使ってデザインすることが多いようです。そのデザインを確認するために Adobe Extract を使っています。ただ見たい場合（レイヤーなど必要ない場合）はデフォルトのプレビューで開いています。
最近では Zeplin を導入しよう！という動きがあるようですので、そちらに移行していくかもしれません。
余談ですが、`.psd` のデフォルトアプリケーションをプレビューにしておくと少し幸せになりました。
図や何かを作るとき
- Sketch
- Skitch
- Preview
デザインカンプ作成ではないですが、たとえば ワイヤーフレームだったり、LIGブログ執筆用に図版を用意したいような場合は、Sketch を使っています。デザイナーとくらべてハードユーザではないですが、おすすめです。
Issue に詳細を記入する際、キャプチャを撮ったあと矢印や文字で説明を追加したりすることがあると思います。そのとき開くのは Skitch か Preview、完全に気分で使い分けています（要は使い分けられていません）。
タスク管理
- Todoist
見た目が可愛かったので Todoist を利用しています。タスク管理に関してはこれといったこだわりはありませんが、現状、必要十分な機能があると感じています。
余談ですが、タスク管理が習慣づかないなら、「タスク管理」をタスクとして登録しておくことだけはおすすめできます。僕はこれでタスク管理ができるようになりました。不思議。
チャット・メール
- G Suite
- Slack
- ChatWork
メールに関しては普通に G Suite の GMail です。クライアントもそのままです。というか垂れ流されるメール通知を見ているだけですね。
全社的には ChatWork が導入されていますが、チームチャットやプロジェクトチャットなどは Slack を利用していますので、ChatWork の方は全社的な告知などを受け取るのがメインになっています。案件にもよりますが、個人的には Slack に通知を送信してしまえばChatWorkはある程度手放せそうな頻度になってきています。早く統一してしまいたいです。
ウィンドウ・画面操作系
- Switch Res X
- Better Snap Tool
アプリケーションはすべてウィンドウとして開き、画面を通して見るわけですから、バカにできないですよね。
Switch Res X は、画面の解像度を変更できるアプリケーションです。Macbook Pro 本体の画面解像度は 2048 * 1280 に設定しており、外部ディスプレイ（縦置き）は 2160 * 3840 に変更しています。
Better Snap Tool は ウィンドウの大きさや配置を変更できるアプリケーションです。ショートカットを割り当てることもできます。下記の記事で詳しく解説しているのでぜひ読んでみてください。 BetterSnapToolを使ってPCのウィンドウ操作を極めよう！ MacBookPro の画面解像度を大きくして作業能率を大幅アップ！
ライダー
ライダー
その他
Alfred
PowerPack を使っています。これがないともうダメですね。こちらも別途記事にしておりますのでぜひ参考に、Alfred を導入してみてください！ Alfred3 の Workflow でかっこよく業務効率化！
ライダー
1Password 7
言わずもがな。ID / Password に限らず機密情報はここで管理しています。
Franz
ChatWork、Gmail、Todoist、Google カレンダー、Messanger を、この Franz にまとめています。Slack は参加しているチーム数が多いためなるべく切り分けたく、Slack.app を使っています。
PixelSnap
こちらは社内で少し話題になったものです。
要素の大きさや、隙間の幅などを計測してくれるアプリケーションです。要素というとHTMLだったりが想像されてしまいますが、画面内に表示されているものならなんでも対象となります。色の違いで判断しているのでしょうか。
有料ですが、ぜひ試してみてください。
Clipy
クリップボードの拡張機能です。履歴をビジュアル的に管理することができます。スニペットとしてメールアドレスや住所などタイポしたくないもの、ダミーテキスト文（英・日・文字数 などそれぞれ）などを登録して使用しています。
Giphy Capture
画面内の任意の範囲をキャプチャできるアプリケーションです。キャプチャ後に、.mp4 や GIFアニメーションに変換できます。変換する際のオプションも豊富なのでファイルサイズとの兼ね合いだったり、重宝しています。
https://itunes.apple.com/us/app/giphy-capture.-the-gif-maker/id668208984?mt=12
おわりに
もちろんこれで全部ではなく、ニッチなものよりポピュラーなものが多いですが……普段よくつかうアプリケーションたちを紹介しました。Webサービスとかぶる部分も少しありますが、デスクトップアプリケーションを中心にその周辺をピックアップした次第です。
※もともとのタイトルは「ソフトウェア編」としていたんですが、範囲が広すぎたために今回アプリケーションに絞ってみました
よければみなさんの開発環境についても教えてください！ ライダーでした。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
