Monacaチームの小田川です。
前回は、MonacaクラウドIDEでアプリ開発を行う際の作業効率化として、エディター設定を紹介しました。エディター設定については、下記を参照ください。
MonacaクラウドIDEでは、エディターで提供している機能を実行できるショートカットが用意されています。エディターのショートカットについて意は、下記を参照してください。
MonacaクラウドIDEでアプリ開発を行う場合は、キーボード入力が必須になります。コードを入力している途中にエディターの機能を実行したい場合、その都度、マウスやトラックパットのようなキーボード以外からメニュー操作を行なっていると、作業効率が落ちてきます。コード入力のようなキーボードで作業を行なっている場合は、キーボードからエディターの機能を実行した方が、無駄が少なくなり、結果、作業効率が落ちることを防ぐことができます。
現在、キーボード以外からの操作に慣れている場合は、ショートカットに切り替えることで、逆に作業効率が落ちてしまう場合もありますが、一度、ショートカットに慣れてしまうとキーボード以外からのメニュー操作の方が面倒に感じられてきます。
今回は、MonacaクラウドIDEのエディターで使用できるショートカットの中から利用頻度が多いショートカットを紹介したいと思います。
主要なソフトウェアで共通しているショートカット
基本的に、下記の機能を実行するショートカットは、主要なソフトウェアで共通化されています。MonacaクラウドIDEのエディターでも同様に使用できます。
| 機能 | Windows | Mac OS |
| 元に戻す | Ctrl + Z | Command + Z |
| やり直す | Ctrl + Shift + Z or Ctrl + Y | Command + Shift + Z or Command + Y |
| 切り取り | Ctrl + X | Command + X |
| コピー | Ctrl + C | Command + C |
| 貼り付け | Ctrl + V | Command + V |
| 検索 | Ctrl + F | Command + F |
| 置き換え | Ctrl + Shift + F | Command + Alt + F |
| 全てを選択 | Ctrl + A | Command + A |
コードを入力する際に、一部のコードの切り取りやコピー、貼り付けを行うことはよくあります。また、貼り付けたコードに問題があった場合、元に戻すようなケースもよくあります。その場合、ショートカットから処理を実行することで、スムーズに作業を行うことができます。また、上記のショートカットは、主要なソフトウェアで共通化されているため、これらのショートカットに慣れていると、他のソフトウェアでの作業効率も上がってきます。上記のショートカットは、ぜひ慣れて欲しいショートカットになります。
コメント
入力したコードの内容説明をコメントにしたい場合や、一時的にコードをコメントの状態にしたり、コメントの状態から戻したいケースがあります。その際には、下記のショートカットが使用できます。
| 機能 | Windows | Mac OS |
| コメントの切り替え | Ctrl + / | Command + / |
注意点として、すでに上記のショートカット以外の方法で対象をコメントの状態にしている場合は、上記のショートカットが使用できない場合があります。
アプリの動作確認のために、コメントの切り替えを多く使用しているような場合は、ショートカットから処理を行なった方が作業効率が上がります。現在、コメントのショートカットを使用していない場合は、一度、コメントのショートカットを試してみてください。
インデント
コピーしたコードを貼り付けた際に、貼り付けたコードのインデントを調整したい場合があります。その際には、下記のショートカットが使用できます。
| 機能 | Windows | Mac OS |
| インデントを上げる | Tab または Ctrl + ] | Tab または Command + ] |
| インデントを下げる | Shift + Tab または Ctrl + [ | Shift + Tab または Command + [ |
インデントを調整する箇所が多い場合は、ショートカットの操作も多く発生するため、逆に作業効率が落ちる場合があります。その場合は、開いているファイルのコードフォーマットを行うことで、エディター設定の内容でコードフォーマットを行うことができます。コードフォーマット用のショートカットは、下記になります。
| 機能 | Windows | Mac OS |
| コードフォーマット | Shift + Alt + F | Shift + Alt + F |
注意点として、コードフォーマットのショートカットは、半角入力モードで使用する必要があります。状況に合わせて、コードフォーマットのショートカットも試してみてください。
フォントサイズ
MonacaクラウドIDEは、PCにインストールされているブラウザーから利用するため、インターネット環境があれば利用することが出来ます。そのため、普段使用しているPC以外からMonacaクラウドIDEを使用するケースも考えられます。
普段使用しているPC以外からMonacaクラウドIDEを利用する場合、モニターの解像度によっては、文字が大きく表示されたり、逆に小さく表示されてしまう場合があります。その際には、下記のショートカットが使用できます。
| 機能 | Windows | Mac OS |
| フォントサイズを大きくする | Ctrl + . | Command + . |
| フォントサイズを小さくする | Ctrl + , | Command + , |
このショートカットでフォントサイズを変更した場合は、変更したファイルのフォントサイズだけではなく、他のファイルにも反映されます。反映の有効期間は、対象のMonacaプロジェクトを閉じるまでが有効期間になります。そのため、普段使用しているPC以外からショートカットでフォントサイズを変更した場合でも、普段使用しているPCから対象のMonacaプロジェクトを開いた際には、これまで通りのフォントサイズで作業をすることができます。
MonacaクラウドIDEを利用する環境の違いによって、表示されるフォントサイズが合わない場合は、上記のショートカットを試してみてください。
おわりに
MonacaクラウドIDEを利用したアプリ開発で作業効率を上げる例として、エディター設定とショートカットを紹介しました。ショートカットに関しては、これまで使用していなかった場合は、慣れるまで違和感を感じるかもしれませんが、慣れてくるとメニュー操作の方が面倒に感じてくるようになると思います。主要なソフトウェアで共通しているショートカットに慣れるだけでもメリットはあると思いますので、これまでショートカットを使用していなかった場合は、一度、チャレンジしてみてはいかがでしょうか。