ポートフォリオ

VS MAGIC:VSCode学習サービス:ポートフォリオ紹介

VS MAGIC

「VS MAGIC」はRUNTEQ修了生の甲斐沼さんが制作した「テキストエディタVSCodeのショートカットをゲーム感覚で練習できるサービス」です。プログラミングの生産性を高めるために開発に着手、ユーザー志向にこだわり、ショートカットの動きをGIFで再現しました。ポートフォリオ制作で経験できた、現場と同じ開発とはどのようなものだったのか伺いました。【修了生ポートフォリオ紹介vol.14】

日々続々と新しいサービスがリリースされているRUNTEQ。

本ブログでは定期的に修了生のポートフォリオを紹介しています!

今回ご紹介するのは「VS MAGIC」、テキストエディタVSCodeのショートカットをゲーム感覚で練習できるサービスです!

VSCodeは馴染みのある方も多いのではないでしょうか?

「VS MAGIC」制作者の甲斐沼さんにお越しいただき、制作過程の裏話をたくさんお聞きしました。

ポートフォリオコンテスト受賞作ともなった本作品は、いったいどのようにして制作されたのでしょうか……?

VSCodeの操作をゲーム感覚で練習できるサービス

「VS MAGIC」について、作成者の甲斐沼さんにお話を伺っていきます。

まず、「VS MAGIC」はどのようなサービスでしょうか?

甲斐沼さん
甲斐沼さん
Visual Studio Code(VSCode)のショートカットをゲーム感覚で練習できるサービスです。

サービスへ

「VS MAGIC」の主な機能は2つ、Lesson機能とTimeAttack機能があります。

順にご紹介します。

まずは、Lesson機能です。

Lessonで練習できるショートカットは、全部で80通りもあるそうです。

これだけ種類があると、VSCodeを使ったことのある人でも知らないショートカットに出会えそうですね!

甲斐沼さん
甲斐沼さん
「VS MGIC」では、正しい順にキーを押さないと正解にはなりません。

そのため、実際にVS Codeを使っているときのような操作ができます。

自分の打ったショートカットが正しいかどうかは、画面右上に表示されます。

そして、TimeAttack機能ではランダムに出題されるショートカットキーを入力するタイムを他のユーザーと競うことができます。

こちらも正しい順にキーを押さないと正解にならないので注意です。

刻々と減っていくタイマーに焦ってしまい、間違いを連発してしまいました……

RUNTEQ受講生の様子から需要を感じる

つづいて、制作秘話についてお伺いします。

どうして「VS MAGIC」を作ろうと思ったのでしょうか。きっかけを教えてください!

甲斐沼さん
甲斐沼さん
業務委託でエンジニアとして働くことになりもっと開発スピードを上げて貢献したいと考えたときに、エディターのショートカットを覚えれば生産性がアップするのではないかと思ったからです。

また、ショートカットをゲーム感覚で勉強できるサービスがあまりないなあと思ったこともきっかけです。

甲斐沼さんは、他のRUNTEQ受講生に開発の様子をみせてもらったときにショートカットを使いこなせる方が意外と少ないのかもしれないと感じたそうです。

そのときに、ゲーム感覚で練習できるサービスは需要があると判断なさったのだとか。

甲斐沼さん
甲斐沼さん

「VS MAGIC」を思いつく前は、会社の業務改善サービスを作ろうと思っていました。

しかし、会社のデータを扱うため実現が難しいと考えた結果、「VS MAGIC」にたどり着きました。

サービスのアイデアはお一人で考えていたそうですが、RUNTEQの校長菊本に壁打ちをお願いしたときに好感触だったため、このサービスに決めたのだそうです。

らんてくん
らんてくん
エディターは他にもたくさんあるけど、どうしてVSCodeにしたんだい?
甲斐沼さん
甲斐沼さん
初めはいろいろなエディターのショートカットキーを覚えるサービスにするつもりでした。

しかし、RUNTEQの先輩に相談したら「ひとつのエディターに絞ったシンプルなサービスにした方がいいのではないか」とアドバイスをいただきました。

そこで、一番需要のありそうなVSCodeを選びました。

受講生さん同士でアドバイスし合える環境は、RUNTEQコミュニティの強みでもあります。

あたたかい人の多い環境だからこそ、ユーザーに寄り添った素敵なポートフォリオが生まれるのかもしれませんね。

「VS MAGIC」はもっと開発スピードを上げて貢献したいとの想いがきっかけで生まれたサービスだとわかりました。

甲斐沼さんご自身は、実際にショートカットを覚えることによって開発スピードが上がった感覚はありましたか?

甲斐沼さん
甲斐沼さん
じつは、僕VSCodeを使っていないんですよね(笑)
らんてくん
らんてくん
なんだって!?それは、びっくりな裏話だな!
甲斐沼さん
甲斐沼さん
ただ、就職先がVSCodeを推奨しているので、新しいパソコンが届いたらVSCodeを使うことになると思います。

そのときは、「VS MAGIC」で勉強します(笑)

なんとここにきてようやくVSCodeを触ることになったのですね!

きっとご自身のつくられた「VS MAGIC」が大活躍されることでしょう♪

「本物」と同じにするためのこだわり

実装段階のお話もお聞きしていきたいと思います。

「VS MAGIC」の実装時にこだわったポイントは2つあるそうです。

甲斐沼さん
甲斐沼さん
ひとつめは、実際のショートカットの動きがわかるようにGIFを入れたところですね。
Image from Gyazo

最初は文字だけで表現なさっていたそうです。

しかし、他の受講生の方々に触ってもらったときに「どういうショートカットなのかわかりにくい」という声があったので、動きのあるGIFを取り入れて改善したのだとか。

甲斐沼さん
甲斐沼さん
ふたつめは、実際に使うときと同じ動きをしないと正解にならないようなロジックにしました。

例えば「Ctrl + C」のショートカットなら、先に「Ctrl」キーを押してから「C」を押さないと正解にはなりません。

Image from Gyazo

正解判定を細かく設定した点は、技術面接の練習でも講師からとても好評でした!

らんてくん
らんてくん
実装で苦労したところはあったのかな?
甲斐沼さん
甲斐沼さん
ショートカットの正解判定のロジックが一番苦労しました。

全てJavascriptで処理しているので、ひとつひとつデバックで止めて入力と出力をみながら地道に開発していったという感じですね。

デバックでひとつずつ入出力を確認しながらの実装とは、考えただけで苦労が伝わってきますね……

丁寧な検証を行い、実装期間は全部で1ヶ月半だったそうです。

そして甲斐沼さんは「VS MAGIC」で、ポートフォリオコンテスト「editch」にも出場しました。

実際に甲斐沼さんがご出場なさったときの記事がこちらです。

「editch」の予選が終わった後は、いろんな方からたくさんのご意見をいただいて改善したとのことですが、大変だったのではないですか?

甲斐沼さん
甲斐沼さん
問題や要望が多かったので、本戦までの残り2週間で全てに対応するのか…と不安に思いましたね。

それに加えて業務委託で重めのタスクに取り組んでいる時期だったので前半1週間ほどはあまり開発ができず、後半1週間は毎日12時間くらい作業をして完成させたので大変でした。

しかし、持ち前のチャレンジ精神で完成させ、結果的にはオーディエンス賞を受賞されました!

らんてくん
らんてくん
editchに出場してよかったと思ってくださったそうで、その声を聞くことができてぼくたちも嬉しいぞ!

ユーザーの要望から改善へ

需要も考えてアイデアを練ったVS MAGIC。

そのかいあって、リリース後のユーザー数は、1000PV・105ユーザーにものぼるそうです!

たくさんの方から利用されているVS MAGICですが、ユーザーからのうれしい声はありましたか?

甲斐沼さん
甲斐沼さん
GIFがあることで、ショートカットを使ったときの動きが見られるからわかりやすいね!」という声は、実際にこだわった部分なのでうれしかったですね。

こだわった部分を「わかりやすい!」と言っていただけるのは、甲斐沼さんがユーザー視点で開発したからこそですね!

らんてくん
らんてくん
反対に、予想外な反応や要望はあったのかな?
甲斐沼さん
甲斐沼さん
ユーザーさんから「Windowsにも対応してほしい!」と言われて、Windowsのパソコンを使っている方のほうが多いかも知れないと思い対応しました。

この要望を受けて改善するためには、自分のパソコンへWindowsの仮想環境を入れる必要があったため大変だったとお話してくださいました。

VS MAGICの今後の展望などはあるのでしょうか?

甲斐沼さん
甲斐沼さん
Rubymineのショートカットや、他のサービスのショートカットを実装したいなと思っています。
らんてくん
らんてくん
他のサービスを作る予定はあるのかな?
甲斐沼さん
甲斐沼さん
SwitchBotを使って、家電などをプログラミングで制御してみたいなと思っています。

いまだったら、IoT関連のポートフォリオを出したいなと思いますね。

みんなと差別化ができますし、おもしろそうなので!

たしかに、IoT関連のポートフォリオはあまり聞いたことがないので面接官の方の興味を大いに惹きつけられそうですね!

最後に、ポートフォリオ作成について全体を通しての感想をお聞かせください。

甲斐沼さん
甲斐沼さん
ユーザーからの要望をサービスへ反映して改善するというサイクルを経験できてよかったです。

実際に世の中のサービスもこの流れで開発しているので、現場通りの流れを個人開発で経験できたことは、とてもいい経験でした。

甲斐沼さん、ありがとうございました!

今後のご活躍も応援しております!

編集後記

いかがでしたでしょうか?

甲斐沼さんの制作した「VS MAGIC」は、企画から運用までとことんユーザー志向で作られたサービスでしたね。

就活でもユーザーを意識したサービスは高評価に繋がります。

なぜなら未経験であっても現場と同じ開発サイクルを経験した「実績」として認められるからです!

RUNTEQでは、運用まで含めたポートフォリオ開発を経験することができます。
転職市場で差をつけられるポートフォリオ、つくってみませんか?

RUNTEQに少しでもご興味のある方、未経験からWebエンジニアを目指そうとお考えの方は、まずは一度無料キャリア相談会へお越しください! https://runteq.jp/

「VS MAGIC」を読んだあなたにおすすめ!学習系ポートフォリオ例

VIMATE:Vim学習サービス

Pomotto:ポモドーロ・テクニック×タスク効率化サービス