CJコラム

フロントエンドエンジニアの作業環境(PC、ツールなど)をご紹介します


こんにちは。シトラスジャパンでフロントエンドエンジニア(コーダー)をしています。
今回のコラムは、私の作業環境をご紹介したいと思います。

主にコーディングをしているので、コーダーやエンジニア以外の方からはあまりなじみのないソフトばかりかもしれませんが、まあ箸休め程度に(?)ごらんください。

 

PC

– iMac 21.5インチ

5年前くらいまでWindowsを使っていたので、その名残で、CommandとOptionを逆にして使っています。

 

– 同じくらいのサイズのモニター

メインモニタにエディタ、ブラウザを表示、サブモニターにコーディング中のデザインやFTP、GitのGUIソフト(後述)を表示させています。画面は大きいに越したことはないですね!

 

– Macのキーボード(テンキー付いてるやつ)

Macは純正のキーボードがとっても打ちやすいのでいいですね。ちょっと昔のタイプの、キーがあまり薄くないやつを使っています。ところでMacの「Clear」って何に使うんでしょうね。未だにわかりません。電卓…?

 

– Magic Mouse

便利すぎて、マウスはこれじゃないと作業できなくなってしまいました。縦横スクロールとか、昔どうやってやってたのか思い出せません。
Lightningケーブルで充電するタイプなので、充電中だけ非常にダサくなります。(裏に接続端子があるので、充電中はひっくり返るのです)

 

Webサイト制作に使っているソフト

– Sublime Text

テキストエディタです。長年使っていますが、日本語と相性が悪すぎるので、最近VSCodeか何かに移行を考えています。でも、ショートカットキーとかプラグインとかをだいぶカスタマイズしてしまっているので、思うように進みません。作業効率に直結するので、エディタって意外と重要なんですよね。
ちょっと大きめに広げて、画面分割すると非常にはかどります。

 

– CotEditor

Macの無料ソフト。Sublime Textで文字化けしたときはこちらのソフトで開いてます。
Macに標準装備のテキストエディタより使いやすいので、文章作成もこちらを使用しています。
サイドバーにいろいろ情報も出ていい感じです。

– Prepros

Scssなどのコンパイルに使っています。有料ソフトで、3,000円ちょっとでした。
今はエディタにコンパイル機能とかいくらでもつけられそうですが、当時の私は「なんかいろいろめんどいな〜」と思っていたので、非常にわかりやすく手軽に使えて良いです。
設定などがGUIで確認できるので便利かなと思います。コマンドに抵抗ある方や、初心者の方におすすめです。

 

– SourceTree

GitをコマンドではなくGUIで扱えるソフト。
最初Gitが何がなんだか分からず、ちんぷんかんぷんすぎたので、これにはだいぶ助けられています。ブランチとかもビジュアルで一目瞭然なのがいいです。

 

– MAMP

ローカルサーバの構築アプリ。作成中のサイトをローカルで確認できるので必須中の必須です。

 

– Photoshop、XD

デザインから画像やテキストを抽出したり、画像修正をするときに使います。
Photoshopの「ExportToCSV」というスクリプトを使って、テキスト情報を書き出すと、コーディングの際に便利です。が、よくエラーが出るので、結局ファイル情報からRawデータを引っ張ってきてます。

 

FTP

– FileZilla

Macならこれが一番いいかな〜、くらいの、可もなく不可もなくです。
Windowsユーザー時代はWinSCPを使っていたので、最初はなんとなく物足りない気がしていましたが、慣れました。

 

作業効率化

– ターミナル

Mac標準のを使っています。昔iTermが良いと聞いて試したのですが、標準のとあまり違いが分からず、消しちゃいました。お察しの通りフロントエンドの作業はコマンドをあまり使わないですが、ファイル操作などでコマンドを使っています。

 

– Clipy

クリップボード拡張アプリ。
Cmd+Shift+Vでクリップボードの履歴と、あらかじめ登録しておいた語句を呼び出せます。
コーディングでよく使う語句やコマンド、定型文などを登録しています。

 

– MacForkCleaner

Macの.DS_Storeを消してくれるアプリ。Windowsとのファイル共有が多いので、必須アプリです。
なぜか、濃いめのおじさんのデザインなので、アイコンだけ変えました…。
一度見るとしばらく気になってしまう濃いめのおじさん…。アイコンは緑のゴミ箱の画像に変えてみました。

 

その他

– Google日本語入力

新卒のときからずっとこれの信者ですね。OS標準のIMEはあんまり使ったことがないです。

 

– 昔のiPhone

ラジオを流したり、サブスクでアニメを流してBGMがわりにしています。音がないと逆に気が散るので…。
いらん情報ですが、アニメはファンタジーとかより現代の学園ものとかのほうが、耳だけで楽しめていい感じ、ということに最近気づきました。

 

– Googleスプレッドシート、スライド、ドキュメントなど

MacでOffice系を開くと重いのと、Excelは容赦なく落ちるので、個人的にはGoogleのサービスのほうが安心できます。

 

– Pomodoro Tracker

https://pomodoro-tracker.com/?lang=ja

作業時間と休憩時間をタイマーでお知らせしてくれるツール。
なんだか、自分がボクサーになったかのような気分になります。(使ってみればわかりますw)

 

以上、私の作業環境を紹介しました。
自分で書いていて、エディタ変えようかなとか、もうちょっと今どきのスタイルを模索してみようかなとか、気づきがあったのでよかったです。
もし何か移行した際は、また記事にしようと思います。

 

 

最新5件の記事