開発をゴリゴリされている方には馴染みがないかもしれませんが、この世にはWebサイト制作のコーディングをする「Webコーダー」という職種がありまして、僕はその職を3年弱やっております。
Webサイト制作の経験はあるものの、Webサービス開発の経験はゼロ。
そんな僕が2025年1月からモダンフレームワークの学習を開始し、生意気にもプログラミング学習サービスを作り始め、6月にリリースしました。
学習サービスとはいったものの、ユーザー側から何かを入力する機能を一切ないです。
あくまでフロントエンドしか触れなくても作れる範囲で作ったという感じです。
今回は作るに至った経緯から結果までをまとめていきたいと思います。
もともとのプログラミング経験
僕のプログラミング経験は、アニメーションを実装するときにJavaScriptを使うという程度でした。しかもvanilla.jsを使うようになってから1年も経っておらず、その前はjQueryで全て実装を済ますという感じ。
また、実務でLaravelやcakePHPといったphpフレームワークの見た目部分を触ったことはありますが、APIを叩いてデータを引っ張るみたいな経験は皆無。
「フロントエンドエンジニアです」と名乗りたいが、マークアップばかりをやってきたWebコーダーだというのが実際のところでした。
なぜ作ろうと思ったか
空いた時間でJavaScript(vanilla.js)、React、Next.jsという順番で学習を進めた結果、MicroCMSを使ったジャムスタックなWebサイトが作れるようになりました。
その段階で「フロントエンドの知識だけでWebサービスを作りたい」と考えるように。
そして、僕がプログラミング学習をする中で感じた問題点を学習サービスという形にしたいという気持ちが芽生え、作り始めました。
問題点と言っても「文法知識を教えるサービスは結構多いなぁ」「でもプログラムを組むときに必要な考え方を学ぶサービスがないなぁ」「てかパソコンをいちいち開くのがだるくね？」というざっくりと感じたことを強引に形にしていったというのが正直なところです。
下記はトップページに記載しているサービス説明です。
腰を据えてプログラムを考える。もちろんそれは大事なことであり、欠かせないことである。しかし、腰を据えていない時間もある。その時間を有効活用したい。そんな時におすすめなのが、「Snalgo」です。このサイトは、スマホでサクッと学べるようになっています。Snalgoを使ってアルゴリズムを考えてみよう。
どうやって作ったか
ざっくりとですが、開発の詳細を以下にまとめました。
技術スタック
言語：typescript
フレームワーク：Next.js14、React18
CSS：tailwindCSS
CMS：MicroCMS
テキストエディタ：Cursor
デプロイ：Vercel
設計
メインターゲットは「プログラミングを学習中の会社員」にし、通勤電車でもスマホと片手と頭を使って学習できるような設計にしました。
デザイン
簡素なデザインにしたかったため、コーディングと同時進行でデザイン調整を行いました。
figma等のツールは一切使っていないです。
教材作り
問題文や解答コードはCursorチャットにjsonデータとして生成してもらいました。
そのjsonデータをPythonでcsvに変換。
変換したcsvデータをMicroCMSに流し込みました。
変換するためのPythonソースコードを書いたのはもちろんCursorチャットです。
ソースコード
Cursorチャットで壁打ちしながら開発を進めました。
学習段階でcomponentやpropsといったReactの要となる概念は理解していたので、それら概念を用いて実現したいことを言語化し、伝えたことをCursorに実装してもらうという流れで開発を進めていました。
作った結果はどうなったか
Webコーダーが生意気にもプログラミング学習サービスを作ってみましたが、見事にアクセスはほぼゼロ。
SNSなどで集客を全くしていないので、当然の結果ではある。
しかもプログラミング学習者の1人である僕自身がSnalgoを使った学習を続けられませんでした。
小学生でも分かるようなことではありますが、「学習のやる気が継続するような工夫は必須」ということを開発者として、ユーザーの1人として身を持って感じました。
ただ、無駄な時間を過ごしたとは思っていないです。
Next.jsを使った成果物としてポートフォリオを1つ増やすことができましたし、次の個人開発への意欲にも繋がっており、近いうちに個人開発のリベンジをしたいと思っています。
おまけ 学習段階で活用した書籍
学習で活用した書籍たちのリンクを載せておきます。
モダンJSに興味を持つキッカケとなった本
vanilla.jsを基礎から復習するときに使った本
React導入
Next.jsとMicroCMS
TailwindCSS導入