WEB TOOL

プログラミングのエラーおたすけツール!

質問に答えてプログラミングのエラーを解決していく、初心者Webエンジニアの方へ向けたウェブツールです

プログラミングのエラーおたすけツール!
使用技術
フロントエンドNuxt.js 3, TypeScript, Vite, Feature-Sliced Design
インフラAWS(S3 / CloudFront / CloudFront Functions / Route53 / ACM 等)
プロビジョニングAWS CDK v2(TypeScript)
CI/CDGitHub Actions
開発環境bolt.new, Cursor(Claude 3.5 Sonnet / gpt-4o)
主要パッケージ等Tailwind CSS, Headless UI, Pinia
品質保証Vitest, Vue Testing Library, Storybook
ビルドSSG
コーディング規約 ESLint & Prettier
その他Illustrator
主な機能
質問に答えてプログラミングのエラーを解決していく機能

利用するユーザーは質問の内容に従って、エラー解決に向けた確認や作業を順番にしていきます。また、具体的にどのような作業をすればいいのか「ヒント」を見ることもできます。
選択肢の回答のボタンを押すと次の質問が表示され、「解決した」ボタンの場合はポップアップが表示されます。

進捗状況の保存・共有機能

質問に対しておこなった回答の進捗状況(各ボタンの選択など)を、URL発行として保存・共有することができます。 発行されたURLにアクセスすると、途中から回答の再開ができ、また、ほかの人へ進捗を共有することができます。

開発背景

Web開発プログラミング初心者にありがちな悩みである「進捗が出ない」「先輩への質問と報告が辛い」という課題を解決しようと考えたことが背景です。


私の体験談として、未経験からエンジニアとして入社した会社ではリモート勤務が主体でした。 オフィスへの出社は自由でしたが、チームメンバーは多忙かつ家から場所が遠いこともあり、ほとんど出社していない状況でした。

開発背景-1
開発背景-2

初心者のうちのリモートワークは分からないことだらけで、用語・知識をたくさんインプットしたり、目の前の実装をこなしていくことがで精一杯だったり、だんだんと作業効率が落ちている実感がありました。 また、疲れている状態だと初歩的なエラーにも気づくのが遅れてしまって、数時間以上も無駄にすることもありました。
特に、タスクごとに、どこまで進捗が進んだのかを把握して、それをまとめた文章にするため思考し、先輩に質問や報告をする、という一連の作業がとにかく大変でした。

私が経験したこの悩みは、Qiitaなどのブログ記事を見ると他の未経験エンジニアの方も多く感じていることを知り、「初心者でもプログラミングを楽しく、ラクにするツールを開発をしよう」と思い立ちました。

「疲れているせいか、今日はまったく進捗が出ていないような気がする…」
エンジニアが納期に追われているときの進捗が出ない焦りのストレスは想像以上に大きいです。 また、プロジェクトリーダー・マネージャー側もスケジュールに対して進捗が見えない、把握と確認に対するコミュニケーションコストが負担になりがちです。

そのような状況で、この補助ツールを使うことで、エラー解決の手順を一定化し、進捗を可視化します。
エンジニアは進捗を安定して出せる安心感を得ることができ、マネージャー・リーダーは少ない時間コストで進捗・質問状況を把握し回答することができ、お互いWin-Winの関係を築くことがねらいです。

開発背景-3
各種図面
インフラ構成図

クラウドサービスにAWSを採用しています。 フロントエンドはAWS S3 & CloudFrontでホスティングしています。 インフラは、IaCであるAWS CDK v2(TypeScript)を用いてコード化しています。

ワークフロー図

指定したブランチのリポジトリへのプッシュをトリガーにCI/CDが実行され、ビルドされたコンテンツをS3にアップロードしています。

開発期間および主なアップデート履歴
年月内容
〜現在現在も継続してアップデート中
2024年12月ホスティングをVercel から AWS CDK v2(S3 & CloudFront) へ変更
2024年10月Vercel にて初回リリース