はじめに
はじめまして、ecbeing新卒1年目でプロダクトグループに所属している、湯上（ゆがみ）と申します！
日頃は、当社製品の「ecbeing」の技術開発を行っています。
今回、ブログをはじめて投稿させていただきますので、暖かい目で見ていただけると幸いです_(._.)_
さて、早速本題に移りたいと思います。
今回は、そんな新人の私がはじめて社内向けのVisual Studio Code(以下、VSCodeと記述)の拡張機能を作ってみたら、色々感じたことがありました。
そのときに感じた、ちょっとした気持ちを皆様に共有させていただきたいと思います。
目次
今回の成果物
今回作った拡張機能の機能は２つです。
MVCモデルのViewに相当する、当社独自のテンプレートファイルの構文を読みやすくハイライトする
テンプレートに変数として埋めこまれている設定値を外部設定ファイルを読んでマークアップする
そのまま載せるわけにはいきませんので、下にJava風のイメージ図を示します。
2.は結構複雑そうに見えますが、拡張機能で実現できてしまうんです。
ことの経緯
今回、社内向け拡張機能を作ることになったきっかけは、もくもく会に参加したことでした。
我々が取り組んでいるもくもく会については過去記事がありますので、こちらの記事と合わせて是非ご一読ください。
blog.ecbeing.tech blog.ecbeing.tech
参加することになったぞー
以前からもくもく会を開催しているという話を聞いていて、少し気になっていましたが参加できていませんでした。
そんな時にお声がけいただので「これは参加せねば」となり参加することと相成りました。
その後、取り組むテーマを考えていたとき、
入社してすぐの新人研修中に、機能1.の作成に挑戦して、挫折していたことをふと思い出しました。orz
思い出した私「完成したらすごく便利じゃん？」
という雑な発想とテーマを引っさげて、もくもく会に初参戦することとなってしまったのでした。
いざ開発
早速開発していきましょう！
そもそもVSCode 拡張機能って何？
拡張機能について、ご存知でない方もいらっしゃると思いますので、ご説明をば。
結論から言いますと、「VSCodeをより便利にするもの」です。
特徴
- JavaScriptやTypeScriptのいわゆる「Web系プログラミング言語」で開発することができます
- npmライブラリ(Node.js)が利用できます
- また JSONだけで言語記法を色付けすることができます（↓みたいに関数とか文字列とかに色がつく機能です）
//ハイライト（色付け）のイメージ function getGreetingMessage() { return "Hello, World."; }
ひらめき次第で、自由に便利機能を作ることができますし、有志の方々が沢山の拡張機能を公開しています。
準備
↓のリンクとかQiitaを見ながら始めていきましょう！
公式ハンズオン code.visualstudio.com
わかりやすかったVSCodeAPI仕様まとめ vshaxe.github.io
Visual Studio Code はじめての拡張機能開発 qiita.com
やったこと
大まかな流れは以下の通りです。
- Node.jsの導入
- Gitの導入
- 開発するフォルダを作る
- 拡張機能の雛形を作ってくれるライブラリをnpmからインストール
- 実行して、雛形を作成
- あとはコーディングあるのみ！！
今回の記事の要点とずれてしまうので詳しくは省略しますが、 Visual Studio Code 拡張機能開発などで検索すると、他にも日本語で書かれたわかりやすい記事がヒットします。
やってみたい！！と思われた方は参考にしてみてください。
リンクの紹介だけでは寂しいですので、実装の概略を少しだけ載せたいと思います。
1. 構文ハイライト拡張機能
- 正規表現を使って構文をパターン分け→名付けしていきます。
- 最小までパターン分けした構造を組み合わせ、文を分類分け（名付け）していく
- 1と2を繰り返す
これだけです！ VSCodeでは、textmate文法という形式で構文を定義していきます。
これは手動で形態素解析する感覚に近いと思います。正規表現の練習にもってこいでした。
気をつけたこと
独自構文がhtmlやjsの文法内に埋め込まれることもあるので、既存のhtml/jsの文法に注入するという方法を選択しました。
2. マークアップ拡張機能
最初は設定値を参照するたびにファイルを開く（検索→DOM解析→出力）という方法で実装を進めていました。
もちろんファイルアクセスの待機時間でCPU使用率と私のストレスがﾏｯﾊになりました。（当たり前）
気をつけたこと
起動時、設定ファイルをメモリに保持する実装で高速化を図りました。やはりキャッシュは偉大。
代償として起動が重くなりましたが、許容範囲内に収まったはずです。
完成！
もくもく会から開発をスタートしましたが、2時間のもくもく会だけで開発が終わるわけもなく、もくもく会後や次月のもくもく会でもずっと開発し続けていました。
これは自分の悪い癖なのですが、作業を始めると止まらず没入してしまい、部内の最終退勤になっていたこともしばしば。
お仕事と趣味の境目が若干あやふやになっていた時期が2ヶ月ほど続きました・・・
でもとても楽しかったので、後悔はしていません。（お賃金もいただきましたし）
作ってみて
さて、今回VSCodeの拡張機能を作ってみた感想ですが、大きく分けて３つあります。
1. どんな形であれ、反応をもらえるのは嬉しい
やはり、感想を頂けるのは嬉しいです。
部内の皆さんが驚いてくれたり、喜んでくれたのは素直に嬉しくなりますね。
2. 達成感
「自分ひとりで要件定義から製造までやりきることができた」という達成感がとても大きかったですね。
業務では、「ひとりで」進めるという訳にはいかないですから。
実装に悩んだ箇所など色々ありましたが、それも含めなんとか完成できたという大きな満足感も得られました。
3. 業務効率化ができた！ はず
ただ単に目の前の業務をこなしていくだけではなく、生産性向上のために時間をさく（若干のマイナス）ことで、結果的に業務効率化（プラス）につながるいい例を示すことができたかなと感じています。
実際、業務中に利用できるレベルのものに仕上がっていると自負しています（恥ずかしながら）
また自分が続けていくことで、周りにこの波を広げていければいいなーとも思います。
部内の皆さん！！お待ちしてます。
まとめ
今回は、「入社1年目がVS Codeの拡張機能を作ってみたら」という内容でした！
まとめますと
- 他人からのフィードバックが自分の最大の糧になることを再認識
- 少しずつ時間を割いて効率化できる施策を進めていくことが大切
- いいものを作るには、まずいい環境から
こちらの3つになります。
またこの記事の公開にあわせて拡張機能を全社公開し、少しでもVSCode利用者が増えるのを祈って、今回の記事を締めさせていただきたいと思います。
お読みいただきありがとうございました！！ それではまた別の機会でお会いしましょう。
ecbeingではモノづくりをしてちょっと嬉しくなりたいエンジニアを募集しています！！ careers.ecbeing.tech
