生産性UP！開発テクニック・操作Tips集

※本記事は2022年3月にフィヨルドブートキャンプ受講生向けドキュメントとして執筆された文書をブログ記事化したものです。 受講生の皆さんは、よりよい開発者を目指してコードの読み書きや設計スキルなどの学習に日々励んでいることと思います。そこで、メンター陣から募った、開発をより効率よく進めるために日頃活用している Tips をご紹介します！ 「地味〜だけど、たぶん毎日使ってる」レベルから「無いと仕事にならない！」というものまで様々です。いずれも開発・学習効率にジワジワと効いてくるテクニックばかりですので、ぜひ身に着けて、スムーズな学習を目指しましょう〜！ # シェル・ターミナル操作 卒業生謹製のサービス [Shortype](https://shortype.vercel.app/) で Mac 「ターミナル」 アプリのショートカットを練習できる - tab キーで入力補完する（以下キャプチャでは `→|` と表示されている） - <img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL09TQWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--799b5c7f3ce8ae1bf30614670c4e61565f0db801/tab%E8%A3%9C%E5%AE%8C.gif" width="600"> - コマンド実行履歴を検索して再実行する - <img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL1NTQWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--3a4ab1919a29410259494cc5b6b86773d10cfc62/%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%88%E3%82%99%E5%B1%A5%E6%AD%B4.gif" width="600"> - zsh の場合 `Ctrl + R` - [peco](https://github.com/peco/peco) を導入するとより便利になる - ↑キーでコマンド実行履歴を遡る - <img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL2FTQWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--3c6cfcf3910894116f7a7abfe9a341c84695e6cb/%E7%9F%A2%E5%8D%B0%E3%81%A6%E3%82%99%E3%81%95%E3%81%8B%E3%81%AE%E3%81%BB%E3%82%99%E3%82%8B.gif" width="600"> - `history`コマンドで過去のコマンド履歴を確認する - `! + ヒストリ番号`(`!123`など)でそのコマンドを再実行する - `history -100`で過去100件分のヒストリを確認する（ただしこのオプションはシェルによって異なるかも） - MacのFinderからファイルやディレクトリをターミナルにドラッグアンドドロップするとそのファイルやディレクトリのパスが入力される - <img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL2VTQWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--d991ebc7eef2b65af520fd2e3cb20a4518169422/dd%E3%81%A6%E3%82%99%E3%83%8F%E3%82%9A%E3%82%B9%E5%85%A5%E5%8A%9B.gif" width="600"> - `open ファイル名`でそのファイルをアプリで開く（WSLでは動かない。後述のWSL編に代替操作を記載） - <img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL1dTQWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--3990e7d94e0de9b1193c509b4090e4c6de07a9ba/open%E3%81%A6%E3%82%99%E9%96%8B%E3%81%8F.gif" width="600"> - `tail -f ファイル名` でログファイルの末尾をリアルタイムに表示できる - `man (コマンド名)`でそのコマンドのマニュアルを開く（ググるよりmanを読んだ方が速く解決することも多い） - `コマンド --help`（`ruby --help`など）でそのコマンドの使い方を確認する - よく使うコマンドを短いものとしてaliasを設定できる。 zshrc/bashrcなどに `alias g="git"` などとすると gitコマンドが一文字になります。やり過ぎると別のコマンドを潰したりして混乱するので注意 - [Oh My Zsh](https://github.com/ohmyzsh/ohmyzsh)を入れると、いろんなショートカットが登録されます。（`gp` = `git push`、`gco` = `git checkout`など） - なが〜いコマンドを入力するときはテキストエディタ上で編集してからターミナルにコピペした方が文字の切り貼りや、typoの修正などがしやすいのでオススメ # macOS操作 or アプリ共通操作 - `Command + TAB` / `Command + Shift + TAB` でアプリケーション切り替え - `Command + Q` でアプリ終了 - `Command + A` で全範囲選択 - `Command + Z` でアンドゥ、Command + Shift + Zでリドゥ（リドゥはアプリによってできなかったり、コマンドが違ったりすることもある） - `Command + X/C/V` で、それぞれカット/コピー/ペースト - `Command + S` でファイル保存 - `Command + O` でファイルを開く - `Command + F` で検索 - `Command + R` で置換（アプリによってはコマンドが違う場合もある） - `Command + ,` でアプリ設定画面を開く（アプリによってはコマンドが違う場合もある） - `Command + P` で印刷開始 - `Command + N` で新規データを作成（何が作成されるのかはアプリによる） - `Command + M` でウインドウをDockにしまう - `Control + スペース` でSpotlight起動（[OSの設定で変更可能](http://inforati.jp/apple/mac-tips-techniques/system-hints/how-to-activate-mac-spotlight-with-keyboard-shortcuts.html)） - `Command + Control + スペース` で絵文字入力 - スクショを撮るショートカットあれこれ - `Command + Shift + 3` = 画面全体をスクショ - `Command + Shift + 4` = 範囲選択してスクショ - `Command + Shift + 4 + スペース` = ウインドウを指定してスクショ - （さらに）上のコマンドに`Control`キーを加えると、スクショ画像のコピーを取ったことになり、GitHubのコメント欄などでペーストすると、デスクトップに画像を保存することなくスクショ画像を貼り付けることができる - コマンドキーやシフトキーを押しながらFinder上のファイルやディレクトリをクリックすると、複数のファイルやディレクトリを選択できる - ファイルがリスト表示されているときはシフトキーを押しながらファイルやディレクトリをクリックすると、始点と終点の間にあるファイルやディレクトリをまとめて選択できる - 画像やPDFファイルのアイコンを選択した状態でスペースキーを押すとプレビューできる # Windows操作 or アプリ共通操作 - `Alt + TAB` / `Alt + Shift + TAB` でアプリケーション切り替え - `Ctrl + A` で全範囲選択 - `Ctrl + Z` でアンドゥ、`Ctrl + Shift + Z` でリドゥ（リドゥはアプリによってできなかったり、コマンドが違ったりすることもある） - `Ctrl + X/C/V` で、それぞれカット/コピー/ペースト - `Ctrl + S` でファイル保存 - `Ctrl + O` でファイルを開く - `Ctrl + F` で検索 - `Ctrl + P` で印刷 - `Ctrl + N` で新規データを作成（何が作成されるのかはアプリによる） - `Alt + Esc` でウインドウをタスクバーにしまう - Windowsキー でスタートメニューが開いてそのままアプリ等を検索可能 - `Windows + .` で絵文字入力 - `Windows + Shift + S` で範囲選択してスクショ、そのままDiscordやGitHubのコメント欄などに `Ctrl + P` で貼り付けられる # WSL(WindowsTerminal)操作 - `マウスで選択→右クリック` でコピー、`選択せずに右クリック` or `Ctrl + Shift + V でペースト - Windows側で他のアプリでコピーしたものもペースト可能 - `Ctrl + Shift + T` で新規タブ起動、`Ctrl + Shift + W` で閉じるなど、他アプリでは `Ctrl` だけで動く操作がシェル操作との衝突を避ける為に `Ctrl + Shift` になっている事が多い - `xdg-open .` でカレントディレクトリでエクスプローラが開ける - `/mnt/c/Windows/explorer.exe` でも良く、こちらの方が起動が早い。シェル編で書いたaliasを使って `alias open="/mnt/c/Windows/explorer.exe"`とすると便利 - Linuxのディレクトリはエクスプローラに最初から表示されている。 以下画像参照。よく使うhomeディレクトリなどをクイックアクセスに登録しておくと便利 - <img width="131.25" alt="image.png (5.9 kB)" src="https://img.esa.io/uploads/production/attachments/14077/2022/02/09/14935/1fbe5de3-1f55-4ca3-af93-0fb443dbf1cf.png"> - LinuxからWindowsのディスクには `/mnt/c(ドライブ名)/...`でアクセス可能。 # ブラウザ操作（主にChrome） ※Windowsユーザは注記無ければCtrlで同様に動作する 卒業生謹製のサービス [Shortype](https://shortype.vercel.app/) で Chrome ショートカットを練習できる - `Command + L` でURL入力欄にフォーカス - <img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL2lTQWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--2f87c5ca808d86e8b59f9ba66cb006fc5c3c7091/l%E3%81%A6%E3%82%99%E3%83%95%E3%82%A9%E3%83%BC%E3%82%AB%E3%82%B9.gif" width="600"> - `Command + R` でリロード（再読み込み） - `Command + 1` で1番目のタブを開く（1以外の数字も可） - `Command + Shift + [` で左のタブへ移動、`Command + Shift + ]`で右のタブへ移動 - Windowsでは `Ctrl + Tab` で右のタブへ移動、 `Ctrl + Shift + Tab` で左のタブへ移動 - `Command + W` でタブを閉じる - `Command + T` で新しいタブを開く - `Command + Shift + T` で直前に閉じたタブを再度開く - <img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL21TQWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--0374355ba62ac5261c711e285bb33eab0767e4b1/cmd+shift+t%E3%81%A6%E3%82%99%E5%86%8D%E5%BA%A6%E9%96%8B%E3%81%8F.gif" width="600"> - `Command + N` で新しいウインドウを開く - `Command + Shift + N` で新しいシークレットウインドウを開く - `Commandキーを押しながらリンクをクリック` で、リンクを別タブで開く - Markdown用のリンクテキストを作ったりするときは[Create Link](https://chrome.google.com/webstore/detail/create-link/gcmghdmnkfdbncmnmlkkglmnnhagajbm?hl=ja)が便利 ## Chrome DevTools 関連 - Network タブでリクエストとレスポンスを確認する - 参考: [Youtube - 「Chrome デベロッパー ツール.vol5」Webが遅い？それはココで確認！！ネットワーク/セキュリティ機能解説！【プログラミング入門】](https://www.youtube.com/watch?v=Sn1oaEJwt0k) - JavaScript のコードをデバッグする - 参考: [ICS MEDIA - ChromeのデベロッパーツールでJavaScriptをデバッグする方法（2022年版）](https://ics.media/entry/190517/) - `Command + P` で ファイル検索 - `Command + Shift + P` でコマンドパレット - `Command + Shift + C を押してからブラウザ上をクリック` で要素を検証 - Vue.js devtools でコンポーネントの状態を確認する - https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja # VS Code操作 ※Windowsユーザは注記無ければCtrlで同様に動作する - `Command + P` でファイル検索 - <img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL3FTQWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--9582a8d58e2d67ac880be49fcc09fce15edd335a/cmd+p%E3%81%A6%E3%82%99%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2.gif" width="600"> - `Command + Shift + P` でコマンドパレットを開く - `Command + Shift + Option + 矢印キー` で矩形選択（[参考](https://buralog.jp/visual-studio-code-box-select/)） - ファイルの自動保存を設定しておくと便利かも - [VSCode | エディターの自動保存の設定](https://www.javadrive.jp/vscode/setting/index2.html) - RubyMineも自動保存がデフォルトになっている # GitHub操作 - `Command + Enter` でコメント投稿（フィヨルドブートキャンプのコメント欄など、他のアプリでもこのショートカットを採用しているアプリやサービスは多い） - `.` を押すとブラウザ上でVS Codeが動く（[参考](https://www.itmedia.co.jp/news/articles/2108/12/news145.html)） - `Command + K` でコマンドパレットを開く（キャプチャでは、そこから `#` + プルリクタイトルで PR を検索 -> ジャンプ） - <img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL3lTQWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--31542b3eb5220eba0903f2b4cea2e73ef6717d2d/github%E3%81%A6%E3%82%99cmd+k.gif" width="600"> - `t` でファイル検索 - <img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBLzJTQWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--87ec0d9f65e387b26f5ab9b4b0176d1c27452615/github%E3%81%A6%E3%82%99t%E3%81%A6%E3%82%99%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2.gif" width="600"> - Pull Request のコミット詳細画面で `n`, `p` で次/前のコミットを表示 - <img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBLzZTQWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--b58ab035cca78ac1a48b32499cb04ede99580e47/github%E3%81%A6%E3%82%99%E3%82%B3%E3%83%9F%E3%83%83%E3%83%88%E9%80%81%E3%82%8A.gif" width="600"> # その他 - Rubymineの使い方は卒業生執筆の[RubyMine入門](https://zenn.dev/ikuma/books/how-to-use-redimine)がおすすめ - 慣れるまではちょっとしんどいけど、Vimコマンドを覚えるとテキスト編集が速くなるよ（[参考](https://qiita.com/jnchito/items/9f988538d14769478177)） - ファイルメニューを開くと、ショートカットキーが表示されていることが多いので、普段からチェックする癖を付けておくと良さそう <img width="309" alt="image.png (513.4 kB)" src="https://img.esa.io/uploads/production/attachments/14077/2022/02/09/2276/600e8405-e250-4509-89cb-ed15d2b63096.png"> - Macのショートカットキーの記号の意味は[こちら](https://support.apple.com/ja-jp/HT201236)。 - <img width="696" alt="Screen Shot 2022-02-09 at 8.37.04.png (93.2 kB)" src="https://img.esa.io/uploads/production/attachments/14077/2022/02/09/2276/8fe06708-4d71-42d4-9b96-085d6fbe5e75.png"> - 画面操作のアニメーションGIFを作りたいときは[Recordit](https://recordit.co/)が便利 - キー操作の内容を画面に表示させたいときは[Keycastr](https://github.com/keycastr/keycastr)が便利 - Markdownで備忘録的なメモを残したいときはQuiverやInkdropが便利 - [【2022年版】Markdown(マークダウン)エディタ厳選まとめ＜Win/Mac/iOS/Android＞ - NotePM](https://notepm.jp/blog/724) - https://twitter.com/jnchito/status/1286553471089405953 - 長文を入力するときはテキストエディタで書いてからブラウザやアプリに貼り付ける。ブラウザ内で長文を入力しているとちょっとした誤操作で苦労して入力したテキストが失われることがある。 - irbで長いコードを打ち込むときも、テキストエディタで書いたコードをコピペした方がたぶん楽。 - Discordは `Shift + Enter` でテキストを改行できる。他のアプリでもこのショートカットを採用しているアプリやサービスがたまにある