やってて当然！？エンジニア向け生産性Tipsを社内調査してみた

この記事はモチベーションクラウドシリーズアドベントカレンダー2021の記事です。

この記事はなに？

一日中PCと共に過ごすエンジニアにとって、Tipsほど知りたいことはないと思います。
この記事では、社内エンジニアに「生産性をあげるTips」をテーマにアンケート調査したものをまとめました。
特に新人エンジニアの方や手っ取り早くTipsを知りたい方におすすめの記事です。
まとめたアンケートからつらつら書いてるので、順番にまとまりはありません。あらかじめご了承くださいmm

※ この記事は定期的に更新されます。

Chrome Tips

皆さんよく使うGoogle Chromeに関するTipsです。

ショートカット

まずは王道。ショートカットから！

Chrome Tab Group

こんなタブになることはありませんか？見るだけで嫌ですよね。
Tab Groupでまとめてしまいましょう！（こんなに開かなくてもいいようになることが大事かも...？）

Before

After

オムニボックスからの検索

簡単にwebページ内の検索ができるようになるよ！
弊社だとGoogle DriveやConfluenceなどの検索が多いので、簡単になります。

Slack

キーボードショートカット編

より優先度が高いものだけ！
Windowsの人は⌘→Ctrlに置き換えてもらえればだいたい使える。
後、忘れたら ⌘ + / でショートカット一覧呼び出せるので、いったんこれを覚えておいて欲しい。

移動系

分類	コマンド	感想
Channelの検索	⌘ + K (or ⌘ + T)	未読のChannelが優先的に候補で出てくるので便利！ 左のバーから探す手間が省けて便利！
All Unreadへの移動	⌘ + Shift + A	未読を一気に消化できて便利！
ワークスペース間の移動	⌘ + 数字	複数のワークスペースを持ってる人に便利！
直前/直後に見ていたチャネル/スレッドへの移動	⌘ + ← or →	通知きて一瞬他の話題に行った後戻ってくるのに便利！ さっき話したのどこだっけ〜〜〜ってなったときに便利！

チャット系

分類	コマンド	感想
インラインコード	バックコートで囲む	なんか強調されて見やすい！
コードブロック	バックコート三つずつで囲む	なんか区切られて見やすい！
引用	> text	何に言及してるかわかりやすい！
リスト	番号付きリスト 1. text 番号なしリスト - text	どっちもTabキーでインデントできる！便利！
ファイルアップロード	⌘ + U	もはやボタンがどこにあるかわかってない！
最新の投稿にリアクションする	⌘ + Shift + ¥	そのままスタンプ検索できて便利！
未読にする	option押しながらメッセージをクリック	通知バッジが復活するので忘れないようにするのに便利！！
絵文字のサジェスト	:	slack絵文字検索できる！便利！ 絵文字たくさん使おう！

エディタ

Emmet編

EmmetはHTMLやCSSのコーディングを効率化する記法群です。
多くのエディタに内臓されており、拡張機能としても提供されているため、一度覚えればエディタをまたいで活用することが出来ます。

ここではEmmet愛用エンジニアに聞いた使用頻度の高い記法をピックアップします。

分類	記法	展開後	感想
HTML	.content span.text	<div class="content"></div> <span class="text"></span>	基本の形です。タグ名+クラス名でさくさくコーディングできますね！
HTML	MyButton MyHeader/	<MyButton></MyButton> <MyHeader />	コンポーネントを記述するときも！
CSS	mt12 pl8	margin-top: 12px; padding-left: 8px;	よく使うマージンやパディングもこれなら楽ですね！
CSS	fz14 fwb tac	font-size: 14px; font-weight: bold; text-aligh: center;	文字組みCSSも頻繁に出てくるので覚えると便利です！

vscode拡張機能編

それぞれ利用しているIDEによって違うとは思いますが、今回は利用率の高かったVisual Studio Codeからいくつかプラグインをピックアップしました！

vscode上でPRを作成したりできるようになるよ！

現在行のblameが常に表示されたり、ワンクリックで前のコミットとの差分見れたりするよ！

全角スペースが分かりやすくなるよ！

インデントがいい感じに可視化される。pythonでは必須では？

vscode上でブランチツリーが見れるよ！

カッコの対応をいい感じに色付けしてくれるよ！

文末に入った無駄なスペースを可視化したり消したりしてくれるよ！

Vueのコンポーネントに定義ジャンプができるようになるよ！

２人で同じソースコード共有したり編集したりできる。ペアプロするときに便利だよ！

プログラミングフォント編

プログラミングフォントは、コーディング時に読みやすくなる、プログラミングに適したフォントの総称です。
お気に入りを見つけると、コーディングが楽しくなりますね！

Mac設定編

キー入力を早くする

便利なツール編

BetterTouchTool

ショートカットや、トラックパッドのコマンドをカスタマイズできるようになるよ！

Alfred

MacのSpotlightを完全にオーバーライドするスグレモノ。

Karabiner

純正キーボード以外を使う人は結構使ってました。Qiitaのタグにもなってそうです。
色々キーボードをカスタマイズできます。

peco

色々便利にしてくれるスグレモノ。
色々受け取って便利にやれるよ！

Dimensions

Chromeの拡張機能で要素の大きさ測ってくれます。
必須。

Clipy

クリップボードに何十個もコピーした内容を貯められるよ。
よく使うのはスニペットに登録して簡単にペーストできるようになるよ！

Shiftlt

画面分割をショートカット使ってできるようになるよ！

FireShot

Webページ全体をスクショできる。pdfにも書き出せる。便利。

終わりに

いかがだったでしょうか？
筆者もアンケートを取る中で、知らなかったことがあり大変参考になりました！
今後も増えていけば、更新していこうと思います。
どこかの誰かの生産性がちょっとでも上がることを祈っております！！