この記事はモチベーションクラウドシリーズアドベントカレンダー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 |
.contentspan.text
|
<div class="content"></div><span class="text"></span>
|
基本の形です。タグ名+クラス名でさくさくコーディングできますね！ |
| HTML |
MyButtonMyHeader/
|
<MyButton></MyButton><MyHeader />
|
コンポーネントを記述するときも！ |
| CSS |
mt12pl8
|
margin-top: 12px;padding-left: 8px;
|
よく使うマージンやパディングもこれなら楽ですね！ |
| CSS |
fz14fwbtac
|
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にも書き出せる。便利。
終わりに
いかがだったでしょうか？
筆者もアンケートを取る中で、知らなかったことがあり大変参考になりました！
今後も増えていけば、更新していこうと思います。
どこかの誰かの生産性がちょっとでも上がることを祈っております！！