【ひょっとこ塾】〜エディタ編〜　駆け出しエンジニアのための環境構築！

みなさんこんにちは！

千葉県は船橋市にて、マーケティングにつよいホームページ制作を行うノベルティのエンジニア、ひょっとこです！

今回は駆け出しエンジニアの制作環境を整えていく【ひょっとこ塾】第二弾です！

お題はエディタ！

さっそくいってみましょう。

第一弾はこちらからご覧いただけますので、ぜひ。

Visual Studio Codeを使っていきましょう！

今回ご紹介および推奨させていただきますエディタは、見出しの通りVisual Studio Codeです！

「え？ いろんなエディタを比較して紹介してくれるんじゃないの...？」と思ったあなた。

すみません、一択です。

ちょっとびっくりかもですが、実際にVisual Studio Codeは制作に必要な機能が揃っていて、拡張機能もたくさんあります。

競合のエディタはいくつかありますが、私自身がVisual Studio Codeを使っていて困ったことはないのでこちらをご紹介させていただきます。

正直どのエディタを使うか、が重要ではなく、必要な機能があるかです。

逆にこれから説明させていただく要点を満たせて入れば、Visual Studio CodeでなくてもOKですよ！

必要な機能とは

ホームページ制作にスポットを当てて、必要最低限な機能は下記の通りです。

• ディレクトリ単位で展開することができるか(＝複数のファイルを同一ウィンドウで開けるか)
• ターミナルを起動できるか
• ドキュメントのフォーマット機能がついているか
• 検索および置換機能がついているか(grepで)
• ダブルクリック時の区切り文字設定が可能か
• コードのサジェスト機能がついているか

※もっともっと便利かつ効率的な機能はありますが、それは速度を求めるレベル感に到達してから。詳しい内容は、エンジニア高宮がいつかご紹介してくれることでしょう。

以上です！

上記の機能がないと正直かなりきついです。それでは一つずつ解説していきます。

エンジニアの猛者になればエディタの能力は関係ありませんが、それはまたべつのおはなし...

ディレクトリ単位で展開することができるか

これはエディタを開いた際に、同じウィンドウで複数のファイルを開けるかを指します。

要するにタブわけでファイルが表示されるか、ですね。

ホームページを制作していると、AのファイルをいじったあとすぐにBのファイルを開きたいことは多いです。それらをスピーディに行うためには、タブで分けられていたり、ディレクトリツリーがサイドメニューに表示されていることがベスト。

メモ帳で作業するとAのファイルが一つのウィンドウとして開いてしまうので、切り替えがもたついてしまうかもしれませんよね。

ぜひこちらの機能は大切にしましょう。

ターミナルを起動できるか

こちらはちょっと初心者の方には難しいかもしません。

ターミナルとは、あの真っ黒なエンジニアがよく見ている画面です。

普段は使わないと思うのですが、ホームページ制作に慣れてくると、より効率化を求めてnodeを取り入れたいケースが出てくると思います。

nodeを起動させるには、ターミナル(コマンドプロンプト)を経由することがベター。その時にこちらの機能があるととても便利です。

今回の要件では外していますが、拡張機能によってはVisual Studio CodeはFTPの機能も持てるのでおすすめです。

エクスプローラー内ですぐにターミナルが呼び出せる環境下であれば不要かもですが、最初のうちは一つのツールで完結したほうが分かりやすいですね！

ドキュメントのフォーマット機能がついているか

これは個人的にめちゃめちゃ重要だと思っています。

Visual Studio Codeの場合、Ctrl＋Shift＋Pで機能メニューが開きます。その際に「フォーマット」と打ち込んであげるとドキュメントをいい感じに整形してくれます。

保存時に自動で整形してくれるものもあります。

ソースコードは可読性を考え、インデントなどを綺麗に整えることがめちゃめちゃ大切です。

これらを怠るとあっという間にスパゲティコードに見えてしまいます。それを防ぐためにも、ドキュメントのフォーマット機能はとっても大切なんですね。

ちなみにさまざまな言語にフォーマットは対応しているので、拡張機能としてインストールして使っていきましょう！（拡張機能はエディタ内でCtrl＋Shift＋Pしていただくとすぐに出てきますよ！）

検索および置換機能がついているか

これは割と良くある機能かと思いますが、それだけに必須な機能。

ファイル内をクリックし、Ctrl＋Fを入力すると検索エリアが出現し、ファイル内を検索することが可能になります。

この機能は1日のうち必ずと言っていいほど使っていますね。

まとめて修正したい時には、検索したものを一気に変換する置換機能もあるので、ぜひ活用ください。

ちなみに豆知識ですが、検索に対して正規表現を使うこともできるので、中級者以後ではより幅広い検索や置換が行えることでしょう。

ダブルクリック時の区切り文字設定が可能か

こちらはそこまで重要じゃないという声もありますが、個人的には作業のストレスが非常に少なくなる機能だと思っています。

Visual Studio Codeの場合ですと、基本設定＞設定で設定画面が開きます。

ここで検索ボックスの中に「区切り文字」もしくは「separators」と入力するといろんな記号が書かれたテキストボックスが出現します。

こちらがマウスをダブルクリックした際に区切る文字として識別されるもの。

個人的には「-」や「$」を外してあげることがおすすめ。クラス名や変数をコピーしたい時にダブルクリックで完結するので非常に楽です。

この辺りはご自身の感覚でカスタマイズできるのでその点もVS Codeは優秀かなぁと思います。

コードのサジェスト機能がついているか

こちらもなくても良いのですが、あると便利なもの。

サジェスト機能とは、「$hogehoge」を参照したい時にわざわざ再入力するのではなく、「$h」と入力した時点で「$hogehoge」を自動でおすすめしてくれる機能です。

優先順位としてそのファイル内を参照するので、ミスも減ります。

また、関数も参照できる範囲は「こんなん使えるよ」とおすすめしてくれるので、誤字対策として効率化がはかれます。

そのほかif文やfor文、switch文など、WordPressでの構築をする際についつい忘れがちな構文も例題付きで自動入力してくれるので便利です！

Visual Studio Codeはカスタマイズ性も抜群！

すでに書いていますが、拡張性もポイントです。

先述のFTP接続だけでなく、pxをremに相互変換したり、スニペットという機能でよく使う文字列を爆速で表示したり、複数のファイル内の文字列を一括置換したり...とにかく便利な拡張性がたくさん。

今回ご紹介したのはあくまでも必須で、それ以外でも世の開発者様が生み出してくれた便利機能が山のようにあります。

これは探さないのがもったないですね！

自分の中でこの動作が苦...といったお悩みを、エディタが簡単に解決してくれるかもしれませんね。

まとめ

以上、これらの要点を満たすVisual Studio Codeのご紹介でした！

ディレクトリが整理できたら、やはりエディタ周りもきちんとしておきたいところ。自分にぴったり合ったエディタと出会って環境の整備をしてみてくださいね。

Visual Studio Codeのダウンロードと詳しいご説明はこちらから（公式サイト）

次はCSSをより素早く、便利にできる【SCSS】についてご紹介したいと思います！

それではまた！