こんにちはtakaです。
現在ウェブカツというプログラミングスクールで絶賛勉強中ですが、その中で様々なエディターに触ってきました。
SublimeText, Atom, Brackets・・・とエディター行脚を繰り返しましたが、その中でもVSCodeはプログラミングを始めた初心者に最適なエディターだと確信してます。
なぜなら自分も初心者なのですが、このVSCodeを導入したおかげで勉強の効率が飛躍的に向上しました。
初心者がプログラミングを学習する上で、根本的な柱となるのは次の三つだと思います。
- 参考となるコードを自分で記述し、動かすこと。
- エラーやバグの箇所を見つけ、修正すること。
- 変数や配列に何が入っているのかを確かめること。
この三つを柱として勉強するのですが、VSCodeは本当に初心者が助かる機能満載です。
エラーやバグが出たときに、目視でエラーを確認してませんか？
全角スペースが入っているのを気づかずにエラーが出て、延々とコードを眺めていませんか？
変数や配列の中身を確認するために「var_dump();」を使ってる？
わざわざ書いては消し、書いては消し・・・面倒じゃないですか？
VSCodeなら拡張機能を使うことで、クリック一つで中身が分かりますよ。
この記事では、初心者の僕が同じようにプログラミングの学習を始めたばかりの人にお勧めしたい、VSCodeの使い方や拡張機能の設定の仕方をお伝えします。プログラミングは効率化を考えることが大事ですが、勉強も効率的に進めていきましょう！
VSCodeのダウンロードはこちら
拡張機能をダウンロードする時は、下にある矢印のマークをクリックすると検索画面が出るので、そこで該当する拡張機能の名前を入力してください！
コードの写経にはこれ。知っててほしい4つの機能
折り返し表示はショートカット一発！
コードを写経する時に結構ストレスだったのが、「長いコードを横スクロールして確認すること」でした。
自分は下記のように参考ファイルを左側に、写経するファイルは右側にとファイルを分割してコードを書いてます。
そうするとどうしても1行で長いコードは見切れて表示されてしまいます。
今までは左側にカーソルを持ってきて、トラックパッドで横スクロールして確認。そして右側に今度はカーソルを持ってきて入力・・・と地味にストレスが溜まる作業をしていました。
それが解消できたのが「ショートカットで折返し表示に切り替える」ということでした。
折返しの表示切り替えは「option + z」/ 「ALT + z」で可能です。
同じ単語を同時に編集！
コードを写経している時、間違った関数名や変数名を使用してあとで全部修正する羽目になった・・・ということがありました。
当時は違うエディタを使用していたので、一つずつマニュアルで変更していたのですが、VSCodeにはまとめて編集する機能があります。
編集したい箇所を一括で操作する
１．単語を選択する
２．command + ⬆️(shift) + L を押すと選択している単語と同じ単語が全て選択される
３．編集する
ただ、これは文字通り「全て」を編集するので、自分では意図しないものまで編集する可能性があります。
そんな時は選択時に「command + D」とすると個別で選択できるようになるので、上手に使い分けて編集しましょう。
見本コードとどこが違うか分からない？ diffツールで確認しよう！
コードの写経をしていると、自分では正しくコードを書いているつもりでもカンマがなかったり、スペルミスだったりで上手く動作してくれないことがあると思います。
目視で「どこが違うのか？」と探すのは手間ですし、diffツール（二つのファイルを比較して、違いを視覚化してくれるツール）を立ち上げるにも、面倒・・・。
VSCodeでは何とデフォルトでこの「diffツール」が搭載されています。使い方もすごく簡単。
１． command(windowsはcontrol)を押しながら、ファイルを一つ選択。
２． 比較したいファイルを、もう一つ選択。
３． 右クリックをして「選択項目の比較」をクリック。
・・・はい、これだけです。
これだけで二つのファイル差分（違い）が視覚化されて、どこを修正すべきか一目瞭然です。
具体的にはこんな感じでです。
今まで目視で差分を確認していた方、またdiffツールを別途立ち上げていた方、これからはそんな面倒なことは抜きで、もっと簡単にエラーを見つられますよ！
HTML/CSS、いちいち更新して確認してない？ 書いたらすぐに反映される拡張機能はこれ！
VSCodeを使用する前は、HTMLやCSSのコードを書いて「どんな感じになってるのかな？」と確認するたびにブラウザのリロードボタンを連打していました。
VSCodeでは「Live Sever」という拡張機能があり、それを使うとわざわざリロードしなくてもエディター側で保存をすれば反映が勝手にされて、コードの変更を確認することができます。
導入方法
１．VSCodeの拡張機能の検索画面で「Live Sever」と検索してインストール
２．HTMLもしくはCSSファイルを開き、画面の下部にある「Go Live」をクリック
３．クリックするとローカルサーバーが立ち上がり、選択しているHTMLファイルが展開
４．コードを書き、保存をするとその結果がすぐに表示される。
エラーを防ぐ。
どれがどのカッコに対応してるんだっけ・・・。 色付けをしてわかりやすくしよう！
今現在PHPを学習しているのですが、関数の中に関数を入れ子にして、また関数・・・みたいなコードを書く時に、
「このカッコ、どの関数のカッコだっけ？！」
となることが多々ありました。目視で確認するにもどうにも効率が悪く、エラーが出ることもしばしば・・・。
そんな折り、最高の拡張機能を見つけました。
「Bracket Pair Colorizer」
これ、もうVSCodeを入れるなら絶対インストールして欲しい拡張機能です。
機能は単純で、「開始カッコと閉じカッコを色別に表示してくれる」というもの。でもこれがとっても便利なんです！
こんな感じで素敵に表示してくれます。(関数は適当です。）
全角スペースはエラーの元！ 視覚化してエラーをなくそう。
誰もが一回はあるんじゃないですかね、「全角スペースエラー問題」。
これ何がタチが悪いかっていうと、全くと言っていほど身に覚えがなく、また目視だと見つけるまでにめちゃくちゃ時間がかかる、ということです。（最長で１時間悩んだこともありました・・・。）
そんな問題児の全角スペースくんを一発で見やすくしてくれる拡張機能があります。
「zenkaku」
清々しいぐらいわかりやすい名前です。こいつをインストールして全角スペースを入力してみると・・・
こんな感じでバッチリ全角くんがどこにいるのかわかるようになります。
ただ、この「zenkaku」ですがデフォルトだと機能しません。
ファイルを開いて、「command + shift + P」でコマンドパレットなるものを開き、そこに「Enable zenkaku」と入力して有効にしないと機能しません。
ただ、正直いちいちこんなことやりたくないので、拡張機能の編集をします。
設定方法
１． VSCodeを開いた状態で、「command + ,」を押す
２．そうすると↓のような画面になるので、そこにある「setting.jsonsで編集をクリック」
3．そうしたら、画面上部にあるusersの次にあるファイル名をクリックして、「VSCode」を選択
４．「extensions」から「mosapride.zenkaku-○.○.○」をクリックして、「extension.js」を選択する。
５．ファイルを開くと、上から数行目の所に「var enabled = false;」となっている箇所があるので、そのfalseをtrueに変更すればVSCodeが起動する時は常に「zenkaku」が有効になります。
＊もし「面倒くさっっ！！」と思った方は、同じように全角スペースを表示する「Trailing Spaces」という拡張機能があります。
こいつはインストールして有効化するだけで全角スペースを表示してくれますが、個人的にインデントの際もハイライト表示してしまうためあまり馴染めませんでした。
ここは個人の嗜好なので、比較して頂いてお好きな方を選んで頂ければと思います。
最大の目玉！変数や配列の中身をすぐに確認できる拡張機能-PHPDebug
僕みたいなプログラミングの初心者は変数や配列にどういった値が入っているのか、確かめたくてたまりません。
来る日も来る日もコードにvar_dump();と書いてはリロードして確認する毎日・・・。
そんな面倒な作業とはもうサヨナラしましょう。これから設定する拡張機能を使えば、各行ごとに変数や配列の中身をワンクリックで確認することができます。しかも自動でエラーも探してくれます。
これを導入するかしないかで、学習効率は大幅に変わるので是非トライしてみてください。
＊自分の環境はmac + MAMPとなっております。windowsの方はxdebugをインストールする必要があります。
（MAMPは元々xdebugがインストールされているため、ダウンロードは不要です。）
ダウンロードはこちら
（ダウンロードする際は、後述する現在使われているご自身のPHPバージョンを確認の上ダウンロードしてください）
準備する
１． VSCodeの拡張機能「PHPDebug」をインストールする。（念のためにデバッグを動作させる前に再起動する）
２． 使用しているPHPのバージョンを確認して、MAMP下にある該当するバージョンのphp.iniファイルを編集する↓
① バージョンを確認するには、MAMPを起動してから「PHP INFO」をクリックする。
② バージョンが分かったら、/Applications/MAMP/bin/php/php7.3.7/conf/php.iniにあるファイルを開く。
（どこにあるんだよ？！って方は、FinderからMAMPを開いて、上記の通りに階層を辿って行くとファイルが見つかると思います）
③ php.iniを開き、一番下までスクロールすると[xdebug]って項目があります。デフォルトだとこんな感じで記述されていると思います。
[xdebug]
;zend_extension=”/Applications/MAMP/bin/php/php7.1.8/~~~~
これを下記のように書き換える。
使い方
１． VSCode起動
２． 対象となるファイルがある「フォルダ」を選択する。（＊ファイル単体だと上手く動作しませんでした。）
３． 対象となるファイルを選択して開く
４． 画面左にある虫のようなアイコンをクリックすると、デバッグ画面が起動。
５． デバッグ画面上部にある緑色の再生ボタンの側にあるところをクリックして「構成の追加」を選択し、「PHP」を選ぶ。
そのあと「Listen for XDebug」を選択し、再生ボタンをおす。
６．開いているファイルの行を表している数字の横にカーソルを持っていくと、赤いポインタのような表示が出る。それをクリックするとポインタが設置される。
これは「ブレークポイント」と呼ばれ、これを設定することでphpファイルを読み込んだ時にそこで処理が止まり、その時点での変数や配列の中身が確認できるようになる。
７．ファイル上部にある時計回りに回転している矢印をクリックすると、1行ごとに処理が進む。これを行うことで変数や配列の中身も都度確認することができる。
具体的な手順や動作は下記を御覧ください。
VSCodeで学習を効率化しよう！
これまで沢山の機能をご紹介してきました。
正直、上記のような設定をした後に他のエディタは触れる気がしません。
エラーを探したり、変数の中身を確認したり、今思えば随分と無駄な時間を費やしてしまいました。
でも VSCodeに出会い、自分なりにカスタマイズすることで勉強の効率は非常に高まりました。
何より、つまらないミスをしてエラーを出すということが圧倒的に減り、コードを書くのが楽しく感じられるほどです。
また変数や配列の中身もクリック一つでつぶさに追えるので、理解が深まります。
これからプログラミングを学習しようとされている方、またすでに学習をしている方でVSCodeを使用していない方。
ぜひ、ダウンロードしてこちらの記事を参考にしつつ、自分好みに使用してみてください！
VSCodeをダウンロードする。
https://code.visualstudio.com/