「VS MAGIC」はRUNTEQ卒業生の甲斐沼さんが制作した「テキストエディタVSCodeのショートカットをゲーム感覚で練習できるサービス」です。プログラミングの生産性を高めるために開発に着手、ユーザー志向にこだわり、ショートカットの動きをGIFで再現しました。ポートフォリオ制作で経験できた、現場と同じ開発とはどのようなものだったのか伺いました。【卒業生ポートフォリオ紹介vol.14】
日々続々と新しいサービスがリリースされているRUNTEQ。
本ブログでは定期的に卒業生のポートフォリオを紹介しています！
今回ご紹介するのは「VS MAGIC」、テキストエディタVSCodeのショートカットをゲーム感覚で練習できるサービスです！
VSCodeは馴染みのある方も多いのではないでしょうか？
「VS MAGIC」制作者の甲斐沼さんにお越しいただき、制作過程の裏話をたくさんお聞きしました。
ポートフォリオコンテスト受賞作ともなった本作品は、いったいどのようにして制作されたのでしょうか……？
VSCodeの操作をゲーム感覚で練習できるサービス
「VS MAGIC」について、作成者の甲斐沼さんにお話を伺っていきます。
まず、「VS MAGIC」はどのようなサービスでしょうか？
（サービスへ）
「VS MAGIC」の主な機能は2つ、Lesson機能とTimeAttack機能があります。
順にご紹介します。
まずは、Lesson機能です。
Lessonで練習できるショートカットは、全部で80通りもあるそうです。
これだけ種類があると、VSCodeを使ったことのある人でも知らないショートカットに出会えそうですね！
そのため、実際にVS Codeを使っているときのような操作ができます。
自分の打ったショートカットが正しいかどうかは、画面右上に表示されます。
そして、TimeAttack機能ではランダムに出題されるショートカットキーを入力するタイムを他のユーザーと競うことができます。
こちらも正しい順にキーを押さないと正解にならないので注意です。
刻々と減っていくタイマーに焦ってしまい、間違いを連発してしまいました……
RUNTEQ受講生の様子から需要を感じる
つづいて、制作秘話についてお伺いします。
どうして「VS MAGIC」を作ろうと思ったのでしょうか。きっかけを教えてください！
また、ショートカットをゲーム感覚で勉強できるサービスがあまりないなあと思ったこともきっかけです。
甲斐沼さんは、他のRUNTEQ受講生に開発の様子をみせてもらったときにショートカットを使いこなせる方が意外と少ないのかもしれないと感じたそうです。
そのときに、ゲーム感覚で練習できるサービスは需要があると判断なさったのだとか。
「VS MAGIC」を思いつく前は、会社の業務改善サービスを作ろうと思っていました。
しかし、会社のデータを扱うため実現が難しいと考えた結果、「VS MAGIC」にたどり着きました。
サービスのアイデアはお一人で考えていたそうですが、RUNTEQの校長菊本に壁打ちをお願いしたときに好感触だったため、このサービスに決めたのだそうです。
しかし、RUNTEQの先輩に相談したら「ひとつのエディターに絞ったシンプルなサービスにした方がいいのではないか」とアドバイスをいただきました。
そこで、一番需要のありそうなVSCodeを選びました。
受講生さん同士でアドバイスし合える環境は、RUNTEQコミュニティの強みでもあります。
あたたかい人の多い環境だからこそ、ユーザーに寄り添った素敵なポートフォリオが生まれるのかもしれませんね。
「VS MAGIC」はもっと開発スピードを上げて貢献したいとの想いがきっかけで生まれたサービスだとわかりました。
甲斐沼さんご自身は、実際にショートカットを覚えることによって開発スピードが上がった感覚はありましたか？
そのときは、「VS MAGIC」で勉強します（笑）
なんとここにきてようやくVSCodeを触ることになったのですね！
きっとご自身のつくられた「VS MAGIC」が大活躍されることでしょう♪
「本物」と同じにするためのこだわり
実装段階のお話もお聞きしていきたいと思います。
「VS MAGIC」の実装時にこだわったポイントは2つあるそうです。
最初は文字だけで表現なさっていたそうです。
しかし、他の受講生の方々に触ってもらったときに「どういうショートカットなのかわかりにくい」という声があったので、動きのあるGIFを取り入れて改善したのだとか。
例えば「Ctrl + C」のショートカットなら、先に「Ctrl」キーを押してから「C」を押さないと正解にはなりません。
正解判定を細かく設定した点は、技術面接の練習でも講師からとても好評でした！
全てJavascriptで処理しているので、ひとつひとつデバックで止めて入力と出力をみながら地道に開発していったという感じですね。
デバックでひとつずつ入出力を確認しながらの実装とは、考えただけで苦労が伝わってきますね……
丁寧な検証を行い、実装期間は全部で1ヶ月半だったそうです。
そして甲斐沼さんは「VS MAGIC」で、ポートフォリオコンテスト「editch」にも出場しました。
実際に甲斐沼さんがご出場なさったときの記事がこちらです。
「editch」の予選が終わった後は、いろんな方からたくさんのご意見をいただいて改善したとのことですが、大変だったのではないですか？
それに加えて業務委託で重めのタスクに取り組んでいる時期だったので前半1週間ほどはあまり開発ができず、後半1週間は毎日12時間くらい作業をして完成させたので大変でした。
しかし、持ち前のチャレンジ精神で完成させ、結果的にはオーディエンス賞を受賞されました！
ユーザーの要望から改善へ
需要も考えてアイデアを練ったVS MAGIC。
そのかいあって、リリース後のユーザー数は、1000PV・105ユーザーにものぼるそうです！
たくさんの方から利用されているVS MAGICですが、ユーザーからのうれしい声はありましたか？
こだわった部分を「わかりやすい！」と言っていただけるのは、甲斐沼さんがユーザー視点で開発したからこそですね！
この要望を受けて改善するためには、自分のパソコンへWindowsの仮想環境を入れる必要があったため大変だったとお話してくださいました。
VS MAGICの今後の展望などはあるのでしょうか？
いまだったら、IoT関連のポートフォリオを出したいなと思いますね。
みんなと差別化ができますし、おもしろそうなので！
たしかに、IoT関連のポートフォリオはあまり聞いたことがないので面接官の方の興味を大いに惹きつけられそうですね！
最後に、ポートフォリオ作成について全体を通しての感想をお聞かせください。
実際に世の中のサービスもこの流れで開発しているので、現場通りの流れを個人開発で経験できたことは、とてもいい経験でした。
甲斐沼さん、ありがとうございました！
今後のご活躍も応援しております！
編集後記
いかがでしたでしょうか？
甲斐沼さんの制作した「VS MAGIC」は、企画から運用までとことんユーザー志向で作られたサービスでしたね。
就活でもユーザーを意識したサービスは高評価に繋がります。
なぜなら未経験であっても現場と同じ開発サイクルを経験した「実績」として認められるからです！
RUNTEQでは、運用まで含めたポートフォリオ開発を経験することができます。
転職市場で差をつけられるポートフォリオ、つくってみませんか？
RUNTEQに少しでもご興味のある方、未経験からWebエンジニアを目指そうとお考えの方は、まずは一度無料キャリア相談会へお越しください！ https://runteq.jp/
「VS MAGIC」を読んだあなたにおすすめ！学習系ポートフォリオ例
Pomotto：ポモドーロ・テクニック×タスク効率化サービス
