はじめに

Web サービスの開発経験のないアラフィフのおっさんが、個人開発で Web サービスをリリースしたお話になります。

ほぼすべて（自分にとって）新規技術で開発をして、相当苦労したのでそこら辺も含めた話をしたいと思います。

スペック

自分のスペックは以下のようになります。

• 年齢48歳
• スキル
  • HTML, JavaScript, CSS は一通り分かる
  • C#, Java, PHP の経験は多少ある
  • 今回の採用技術の経験はなし
• 開発経験
  • 主に社内システム開発や支援を行っていた
  • Web サービスの開発経験なし

もともと社内 SE をやっていたので、社内システムの要件定義をやったり、設計をやったり、セキュリティをやってみたりと実装技術の経験は少なめです。SES に転職してから実装を３年位やっていますが、そのうち２年は COBOL だったりします。

要は個人開発にマッチするスキルはないということですね。。

どんなサービス作ったの？

無料の単語帳サービスである 単語帳.com というサービスを作りました。

このサービスは、パソコンやスマートフォンのブラウザで、登録した単語帳情報を、紙の単語帳のようにめくりながら効率的に暗記できるというものです。

要件、設計、デザイン、実装まで１人で行いました。

技術面のお話

どんな技術を使っているの？

ざっくり言うと、サーバレスアーキテクチャの構成で、フロントエンドは React + TypeScript, バックエンドは AWS のサービスを使っています。

詳細に書くと以下のようになります。図で表現できないですが。。

• フロントエンド
  • React + Redux + TypeScript
  • AWS Amplify
    • API(GraphQL), Storage(S3), 認証(Cognito)を使用
• バックエンド
  • AWS の DynamoDB(NoSQL), Cognito(認証), CloudFront(CDN), S3(Storage), Lambda (C#), SES(メール), Route 53(DNS) 等
• CD/CI
  • Amplify Console を使い BitBucket に push すると自動デプロイするようにした
• Web サイト
  • Hugo を使用して Web サイト側を構築

とにかく利用している技術が多く、学習コストがめっちゃ高くなりました。。

サーバレスアーキテクチャ

サーバレスアーキテクチャとは、簡単に言えばサーバを立てずに、サービスを提供するアーキテクチャのことです。

サーバを立てないとは言いましたが、実際にはサーバのインスタンスは存在していて、サーバ上でプログラムは動作するのですが、開発者はサーバの存在を意識する必要がありません。また負荷がかかると自動的にスケールするので面倒や心配もありません。

また、サーバを立てないことにより固定費がかからず、ユーザーが少ないなら月数百円からの運用が可能です。今までのシステム構成だと数万円かかるのでサーバレスアーキテクチャは画期的だと思います。

サーバレスアーキテクチャのためのフレームワークは、AWS なら Amplify, Google なら Firebase になると思いますが、これからの個人開発ではこれらを使用するのが標準になっていくのではないでしょうか。

React + Redux + TypeScript

フロントエンドは React を採用しました。

フロントエンドは、React, Vue.js, Angular が採用候補となると思うのですが、Angular は以前使おうとしてサービス開発に行き詰まったので採用を見送りました。また、Vue.js は初期コストは低いけれど長期的にコストがかかると聞いて採用を見送りました。

で、React を学ぼうと思ったのですが、これがめっぽう難しい。うんうんうなっていたところ、Twitterで以下の同人誌を紹介していただきました。

• りあクト！ TypeScriptで始めるつらくないReact開発 第2版

この本のおかげで行き詰まっていた React がなんとかなりました。

TypeScript を採用したのも、この本でトレンドが JavaScript から TypeScript に移行しつつあるとあったためです。

Redux は正直今でもよく分かりませんが、ボイラーテンプレートを見様見真似で修正することで動作するようになりました。

AWS Amplify

AWS Amplify を採用したのは、最初は認証機能を AWS に丸投げできるからでしたが、調べていけば行くほど個人開発にマッチするものだと思いました。

同様のフレームワークとして Google の Firebase がありますが、人気は Firebase の方があるみたいですね。ただ、企業ユースとしては AWS に軍配が上がるのではないかと思います。アカウントの作成も不要ですしね。

あと、AWS Amplify の情報が少ない。少なすぎる。

英語情報も含め、情報が見つかったらラッキーぐらいの感じでした。

挙句の果てには、Amplify の GitHub のソースをチェックするハメにもなりましたが、なかなか苦労させてくれます。

ですが、ここ１年ぐらいで英語の issue が溜まってきているので、なんとかなるのではないかと思っています。実際、なんとかなりましたしね。

Amplify に関しては以下の同人誌を参考にさせていただきました。

• React x Amplify で始めるサーバーレス アプリケーション開発
• AmplifyとAppSyncで作るサーバーレス開発入門

技術以外のお話

商標について

個人開発を行うにあたり、商標には注意しておきたいところです。

自分も「単語帳.com」というドメインが取れたから開発を進めたのですが、ドメインが取れても商標が登録されてないとは限らないですからね。

商標については以下のサイトで検索することができます。

• 特許情報プラットフォーム｜J-PlatPat

一発で分かるとは限らないので、検索ワードを微妙に変えてみたりして試してみてください。

ちなみに後で気づいたのですが、「単語帳.com」は過去にも存在していなかったのですが、「単語帳ドットコム」というサービスが過去に存在しているなんてことがありました。今はなくなっているので問題はないと思いますが、意外なところで引っかかったりしますね。

利用規約・プライバシーポリシーについて

個人開発であっても、訴訟リスクは避けて通れません。

ネットにあるテンプレートを書き換えて使ってもいいのですが、それだとなんの確証もないので、自分は以下の書籍を購入し内容を理解してから、書籍付属のテンプレートを自分のサービスに合わせて修正しました。

• 【改訂新版】良いウェブサービスを支える 「利用規約」の作り方

一つ注記しておくと、利用規約に紛争が起きた場合の裁判所を書いておかないと、相手側の居住地の裁判所になるというのは覚えておいたほうがよいかもしれません。Web サービスは世界中から使うことができるので、下手したら外国の裁判所で裁判が行われるかもしれないのです。自分は、利用規約に東京地方裁判所を対象の裁判所としました。

教訓

アラフィフのおっさんが Web サービスを初めてリリースした経験としての教訓は以下のようになります。

新規技術はできるだけ使わない

これだけ自分にとって新規技術を採用しておいて何を言うという感じですが、新規技術ばかりを採用すると、行き詰まることが多く、心が折れやすいです。

Web サービスをリリースすることが目的なら、新規技術は一部に留めておいて、Web サービスの開発に注力するようにした方がよいかと思います。

英語と仲良くする

英語は個人開発をする上では避けて通れません。

なにかに行き詰まると、必ずと言っていいほど英語が出てきます。

仕事では、技術チームに依頼できるようなことも、個人開発では全て自分で解決する必要があります。

その時、英語ができないとそこで止まってしまいます。

自分も英語は苦手ですが、iKnow! とスタディサプリをコツコツやることで、英語と仲よくしようとしています。

リスクに敏感になる

個人開発では、なにか問題があったとき誰も自分を守ってくれないのでリスクには敏感になる方がよいです。特に、自分が提供するサービスは著作権や倫理に抵触しないかを意識するのは必須でしょう。

そして、自分を守るためにも利用規約とプライバシーポリシーを制定します。

なにかあってからじゃ遅いですからね。

ツイートする

技術的にどうしようもなくなったら、本当は AWS なら技術サポートに入るということになるのでしょうが、個人開発だとなかなか難しいですよね。

そんなときは、行き詰まっている内容をできるだけ詳しく Twitter にツイートするという方法があります。

当てにしすぎてはいけませんが、たまにキーワードでツイートをチェックしている有識者の方のフォローをいだだけることがあります。

自分も何回かそれに救われています。

おわりに

アラフィフのおっさんが、Web サービスを初めてリリースして学んだことをつらつらと書いてみました。

個人開発はちょっとした壁で行き詰まってしまうので、できれば周りの協力も得ながらリリースまでこぎつけていただければと思います。