めちゃ高機能なのに無料、好きですVS Code、最大の魅力は3つのカスタマイズ機能

IT

フルネームは Visual Studio Codeです。IDE(統合開発環境)の一つで、プログラムを開発する際の強力な武器となるソフトです。VsCodeは、ほぼ全ての言語に対応、高機能なのに、フリーという恐るべきソフトなのです。

毎日、朝から使ってて、そのうち自分の体と同期化しそうな勢い。

めちゃ高機能なのに、フリー、おまけにメジャー

さりげなく、オープンイノベーション

最大の特徴は、言語ごとに様々な拡張機能が提供されていて、それらをあとから追加できるんです。世界中のいろいろな人たちがその拡張機能を開発してるので、大量にある拡張機能から便利なものを、うまく選択できると、かなり快適にプログラム開発する事ができます。オープンイノベーションになっているのです!

機能がありすぎて難しそう、最初は敬遠、有料ソフトを使っていた

問題は拡張機能が沢山ありすぎて、選ぶのが大変だったり、あまり入れすぎると拡張機能どうしで衝突がおきて挙動がおかしくなったりすること。ほんとに慣れるまではわりと時間がかかります。

そんなわけで、「時間を買うんだっ」て感じで、有料版のIDEを使ってました。有料版はカスタマイズなしで、最初から快適に使えるようになってます。設定することが少ないのです。文字通り時間が買える。

具体的には、PythonはPycharm(有料版)、その他の言語はWebStormというソフトを主に使っていました。2つのソフトの年間コストは2万円弱、快適だけど、同じ用にVsCodeが使えるようになったら、そっちでも良いかな?

TypeScriptをきっかけに、少しずつ使うように! 意外と低かった学習コスト

TypeScriptを覚えるにあたって、本家がMicrosoftだからVsCodeとの相性がばつぐんということで、TypeScriptをきっかけに使うようになり、だんだん慣れていきました。そして心地よさも使うごとに向上!

やはり世界的にメジャーなソフトだけあって、わからないことがあっても、ググれば大体解決できるし、慣れると、学習コストはそれほど高くないのです。おまけに、起動が早くで動作が軽やかなんですよね。

通常、IDEっていうのは、かなり高機能なぶん、起動までかなり時間がかかったり、動作が重いのが普通なんですが、このソフトはサクっとすぐに起動します。他のIDEに慣れてると、信じられないくらい軽く感じます。

その最大の魅力

無料、動作軽い、Microsoft提供で信頼度も高い、ほぼ全ての言語を網羅、世界中の人が拡張機能を提供している。

です。ほとんど使わない理由はないですね。実際に数か月使ってみて、ほんとうにいいと思ったのは、自分用にいろいろなカスタマイズができること。

ここからは、僕が大事にしている3つのカスタマイズを解説します!

カスタマイズ1:拡張機能を選ぶ、 便利機能は全て使い切る!

まずダウンロード回数が多いものから、ネットで評判を検索、いいと思った順にインストールして自分で試してみます。もちろん、使ってみて、イマイチなものも、かなりありますが、すごくいいものにあたると、嬉しくなります。

この選択作業が、JavaScript、TypeScript、React、Angular、Vuejs、Expressなど数多く発生するわけです。言語のことも理解してないと、選択しにくいってこともあるし、ある意味好きじゃないと逆に辛いかもしれません。

定番機能からはじめて広げていく

大体、ネットで「Vue VsCode 拡張」とか検索して、結果の上位3位くらいを見て、全部で推奨している機能を使えばほぼ間違いないです、あとは習熟の度合いで、こんなのあるといんだけどなって探してみるという順番。

そう思うと、習熟度がかなり重要で、誰もが使ってるようなど真ん中をインストールしたあとに、だんだん機能追加していくという感じですね。

使ってわかったのは、自分のスキルに応じて、拡張機能の構成が再構築できる点がいいんですよね。有料版はそうはなりませんから。

カスタマイズ2:ショートカットキー、手足のようにソフトを操る!

隠れた便利コマンドを発掘

もともと、VsCodeにはいろいろなコマンドが用意されていて、あらかじめ「Cntrl+Cはコピー」のようにキーが割り当てられているのですが、マイナーなコマンドにはそもそもショートカットが割り当てられていません。

割り当てられていないコマンドで便利そうなものを見つけて自分用に登録したり、割り当てされてるけど、このコマンドは使わないというものを、違うコマンドに割り当て直したりします。

絡まった糸をほぐすのに役立つような機能を探す

HTMLなどのWeb系言語は、「わかりやすいけど、やけにひとつひとつの単語が冗長で、複雑になるとわけわからん」ってなりやすいのですが、VsCodeに存在する便利なコマンドを理解して自分用に再構築することで、自分の手足のように使えるようになります。

一例ですが、HTML言語で<div>で囲まれた部分が300行あったりするとき、対応する</div>を探すこと自体がむずかしいんですが、コマンドを覚えていれば、囲まれた部分を一気に選択したり、対応する</div>に飛ぶことも簡単です。

自分の体の特徴にあった、キーの組み合わせは気持ちいい

ただそうなるまでは結構たいへんで、「登録してみたけど、指が合わないとか、すぐ忘れるとか」うまくいかないことも多くて、何度も配置を変えてみて、調整したり、根気がいるのです。

でもピタっと自分好みの登録ができたときの心地よさは特別です。それで快適にコーディングできるとかなり気持ちいいですよ。

逆に、そういうふうな気持ち良さを作っていかないと、Web系の言語ってつらすぎる作業が多いと思うんですよね。

コマンドを知ってるか知らないかで、作業時間が10分変わるとか、そういう事が、数多くあるわけです。これに対応できるかどうかが、作業効率とヤル気に直結します。

カスタマイズ3:スニペット機能を鍛える、 超高速コーディングへ!

VsCodeは、言語別にフレーズを登録できます。僕はこれに最も時間を費やしています。それをやると自分の記憶力やキータイプの遅さを補うことができるのです。さらに細かい設定も可能。

このスニペット機能も、拡張機能で言語ごとにど真ん中と思える拡張機能があって、まずそれを登録していって、自分で数日実際に使ってみます。自分の感覚にぴたっと合ってると、そのままありがたく使います。

実際は高機能すぎて「自分にはオーバースペック、これは使わないなあ」というものがほとんどだったりするので、使うものだけをピックアップして、自分用に再構築する場合が多いです。

シンプルイズベスト、やはりある程度シンプル化しないとぶっちゃけ使いこなせません。使わないところをフィルタリングすることもかなり大事!

以下は、自分がやっているスニペットカスタマイズのポイントです。参考にしてください。

長いフレーズは短い文字数に!

たとえば、JavaScriptでは、Document.getElemtnByIdのような長いフレーズが沢山あるのですが、それをgidという3文字の単語で入力できるようにするといった感じ。

長いフレーズは入力に時間かかるし、タイプミスしやすいしので、これに対する対処がヤル気に直結してきます。

PHPとか、Angularといった言語もやたら長いフレーズが多いので、この登録スキルがその言語に対する愛情に直結してきます。慣れれば「10文字で100文字書けた」みたいな経験をすると、冗長な文字も全く気になりません。

最初PHPは記号がやたら多くてフレーズもやたら長いので、どうしても好きになれませんでしたが、オリジナルスニペット登録で、まったくストレスはなくなり、やっと好きになれました。

あと、CDNっていうURLを直接参照して、その機能を使うものも登録

VueとかReactとかBootstrapとか、CDNもかなりいろんな種類があるんですが、サイトに行って調べてプログラムに貼り付けるのが面倒なので、見つけるたびに、vueCdnとかbootstrp4CdnとかvuexCdnみたいな名前でスニペット化。

すぐに、CDNを貼り付けできるので、HTMLベースの軽いテストが手軽にできるようになりました。

指が苦しいフレーズの登録、おもに記号フレーズ

<%= %>とか、<?php>とか{( name )} =”xxx” 、$_で始まる単語とか、() => { … } ,みたいなフレーズは巧みに、「Shiftキーと、指が届きにくいキーとの組み合わせ」になっています。

以前はそれらのフレーズがたくさん出てくると、リズムが乱れるって感じで、ほとんど拷問のように感じていました。快適からは程遠い状態。

そこで<%= %>は ejs= に、()=> {…} はarになど、よく使う拷問フレーズは、タイピングエリアを狭くするようなイメージで、打ちやすい、短めの英単語フレーズとして片っ端から登録。

劇的にタイプミスが減り、コーディング速度が早くなると同時に、言語に対するマイナスイメージも払拭されたのです。{、[、% 、-> 、=>などがからまりまくったような、拷問フレーズって、言語ごとにかなり沢山あります。

カッコのなかに、またまたカッコが入ってる、入れ子地獄フレーズの登録

具体的には、カッコの中に、関数が入ってたり、その関数の中にまたまた関数が入ってたりするフレーズです。最近はそういう書き方は減ってくる傾向にあるのですが、JavaScript系は、このパターンがかなり多いんですよね。

書きにくいし、見にくいし、間違えやすい典型フレーズなんで、嫌でしょうがなかったのですが、これもスニペットにすると、かなり高速に間違えずに、コーディングできるようになります。

このパターンはデータベース処理とか、Webサービスからデータを取ってくるような重要な場面で出てくることが多いので、ここがスニペットで楽になったところは非常に大きいです。

でも、登録しすぎて覚えられない問題も発生、そこからが本当の勝負!

毎日、毎日いろいろな言語について、登録作業を重ねて、どんどん効率的になってはいくのですが、それには条件があります。「自分が登録した内容と、登録キーワードをきっちりとおぼえている事」。

いろいろ考えて登録するので、「忘れないかな?」と思っていたのですが、わりと忘れてしまいます。ただ登録した内容自体はそれなりに覚えていて、登録キーワードが思い出せないことが多いのです。

思い出せないときは、いろいろなキーワードを打ち込んでみて探してみます。結局、自分で予想して、最初に打ち込むキーワードが、再現性のある記憶できるキーワード。あとで、登録キーワードを変更していきます。

たとえば、Expressで使うDatabaseのGetコマンドをexdbgetとかにしてみたけど、最初に思いつくのがdbgetだったので、末尾にExpresがわかるように、exをつけてdbgetexにするような感じで。

そういう規則にすると、Pythonで行うDatabaseのGetコマンドだったら、dbgetpyにするとか、応用が効きます。こういう細かい調整を行って、大量のスニペットを自分の体の一部のように、身に着けて行くのです。

ペン字を練習するように、毎日、様々な言語でコーディング、タイムを計る

自ずと、慣れれば慣れるほど、コーディングが早くなります。例えば普通にベタで書いたら15分くらいはかかりそうなフレーズ、ショートカットと、スニペットを駆使すると、すぐに3分くらいにはなります。

ただ、もっといい感じに、カスタマイズできたら、これ1分でも書けるかもって考えて、カスタマイズ化してしまうんです。ほとんど趣味ですが、普通はそこまでやらないと思えることをやるのが、大事なんです。

これができると、普通の人はとても覚えられない多種類の言語をハンドリングできるようになるかも、って思うんですよね。違うかもしれないけど、普通に楽しいです。

まとめ

簡単にいうと、タダで、高機能。軽いし、学習コストがひくい。更にうまくカスタマイズできれば、超快適。それがVsCodeという話でした。

もっと簡単に言うと、「使ってて気持ちいいので、大好き」ということでした。あなたの快適プログラミングライフの参考になれば幸いです!