Webサービス

非エンジニアが1ヶ月でWebサービス開発を宣言したけどダメだった話

非エンジニアが1ヶ月でWebサービス開発を宣言したけどダメだった話 サムネイル

どうも!よしいたけです

けっこう何年も前から個人開発でメシ食ってみたいな。という願望があり今回はWebサービス開発をはじめました。

一応アンケートもとってみた上でやることを決意

2月9日から手をつけました。しかし一月で完成しませんでした。

出来上がったWebサービスはこちら

宇宙猫という名前で、ひたすらランダム表示される宇宙猫GIFをシェアできるだけの無益率100パーセントのWebサービスです。

(しかもOGP設定をまだできてないからリンクをそのまましか共有できない)

React + Redux と firebase を使って開発しました。

僕はイーサリアム開発者のヴィタリックがけっこう好きなのですが、ヴィタリックブテリンが好きなものは宇宙な猫です。

言い換えるとヴィタリックが好きということは、ヴィタリックが好きなものも自分は好きという荒削りなロジックで宇宙猫を開発することにしました。

4月23日に完成(仮)

2月9日からだったので地獄のように遅くなりました。

宇宙猫のページを見た人なら、かなりシンプルでjQueryとか使えば数時間で作れそう。って思ったかもしれません。

僕もそう思います。しかし体の血がReactを使えと騒いだのでそっちに転びました。(後ほど解説)

遅くなってしまった原因

・調子に乗ってReduxを触りはじめた

・一つのエラーの対処に2週間以上もかかった

・すぐにレスポンスをもらえる環境を作ることを怠った

他にも、言い訳ですが3月13日にGoogleの地獄のコアアップデートで収益が3分の1に減少して死に絶えそうになっていたこともありますが、それでも遅すぎました。

調子に乗ってReduxを触りはじめた

宇宙猫の作りであれば、Reactオンリーでこと足りました。

しかし、ReactとReduxは一緒に使われることが多いし、これから学習する上でどうせ避けられないものだったので練習がてらReduxを導入しました。

ですが、チュートリアルだと動かせるのに自分の思い通りに動かそうとすると全く動かなく、Reduxの動きがわかりませんでした。

Reduxを捨てようか悩みつつも、安西先生の名言を脳内で連呼させることによって粘ってみたところ無事に公開まで2ヶ月半を超えてしまいました。

一つのエラーの対処に2週間以上もかかった

Gif画像を読み込めるのは良いものの、一回一回で点滅してしまってこれを解決するのに苦しみました。

Redux内だけではどうしても解決しきれませんでした。

そこで正しいやり方かわかりませんが、反則的に子コンポーネントを用意しました。

そこだけはReduxのアクション関数は発行せずにGIF画をランダムに並べ換える関数を入れる手法を使いました。

そうすることによってプレローディング(事前に画像を読み込むこと)を行なった後に、GIF画をランダム表示する流れを実装できました。

すぐにレスポンスをもらえる環境を作ることを怠った

メンターをつけさせてもらっていなかったらもっと悲惨でした。

とはいえ、やっぱり目の前に人がいていつでも聞けるような状態が最強だったと思います。

私と同じアマチュアな人なら分かるかもしれませんが、ググって出てきた解説を理解できないことって多いですよね。

丁寧に解説してあっても、途中ではしょられている箇所があると一発でわからなくなってしまいがちです。

わからなかった解説を自分にも分かるようにいつでも聞ける環境を準備すればもっとよかったなあと思います。(基本、海外にいるので解決策は考え中)

テラテイルなどの質問サイトにも投稿したかったのですが文章で症状をうまく伝えられる自信がなく自分でシラミ潰しに試した方が早いと思ってしまい利用しませんでした。

開発の流れ

最初は良質なReactの教材をみてまとめ動画サービス(POMETUBE)を作りました。ポメラニアンのYoutubeです。人類が欲しているであろうと踏んで作りました。

POMETUBEを通じて、Reactとfirebaseで0から公開するところまでの流れを経験しました。

バンさんにお願いしてメンターになっていただきました。めちゃめちゃ助けてもらいました。

(バンさんはブロックチェーンゲーム開発したり、React関連の開発も含めてフリーエンジニアとして活動している人です。

Webサービス開発を本気でやりたい人がいれば相談に乗ってくれるのでDMしてみると良いかと思います!@van_eng622

骨組みを作る

設計の概念の中にコンポーネントと呼ばれるものがあって静的サイトとは考え方が異なります。

それでコーディングをイメージできなかったので最初にHTML/CSSで組みました。

その後に、React用に置き換えてCSS(styled-component)で装飾しました。

sass(cssの便利なフレームワーク)をそれとなく触って見たのですがReactのスタイリングで変数を扱ったりしたところでsassの考え方が役に立って良かったです。

5日目から作るものを宣言

HTML/CSSで骨組みはできていて、ある程度は進め方を決めたのでデザインだけ公開しました。

この中で宣言したことは全部できませんでした!

7日目以降は進捗報告

思った以上に、早くView(見た目)ができたので「やっベー早く終わりすぎちゃうww」と余裕をこいたタイミングです。

今から過去の自分に戻れるなら伝えてあげたい「地獄はこれからだ」と。

つけたい機能をcodesandboxでテスト→実装

GIF取得をいきなり実装するコーディングをイメージできなかったので必要な機能だけをcodesandboxと呼ばれるブラウザで環境構築なしでReactを動かせるサイトでテストしました。

Reduxにやられる

挫折する気がしない。」と余裕のある発言をかましました。しかしこの後、Reduxで思っていた以上に死にます。

わからなすぎてハゲそうでした。

とにかくやりきるぞ!と意気込むも無事死亡しました。

いよいよ間に合わない気配MaxになりReduxを捨てようか悩む

受託とかだったり100パーセント捨てるとこ。

しかし締め切りの直前に生半可に動かせてしまったのでダッシュで実装しようと結局Reduxを導入します。

結局間に合わなかった

ラストデイは結局、寝落ちしたし、Reduxでやりたい動きそのものは実装できたのですが、挙動が遅くておかしくなりました。

事前に画像を読み込むことで解決できるのでは。とエンジニアの知り合いにアドバイスをもらい色々と調べて実装してみるました。

しかしなぜかメンターのパソコンでは動くのに、自分のパソコンでは動かせない謎の挙動が起こり長期的に詰みました。

そしてメンターのバンさんに何度かお願いして見てもらうことを繰り返し、妥協策を使って、4月の後半になんとか動かせるようになり不完全でありながら公開に踏み切るところに至りました。

Reactを選んだ理由

↑無駄にファイルが大量に生成された宇宙猫

Reactの「一度覚えれば、どこでも書ける」というコンセプトが好きです。(learn once, write anywhere)

簡易的なアプリを早くローンチできるようになるし、いろんなとこでも書けます。

それでいてSPAやPWA(Gatsby.js)という利用者がもっと便利に使える機能の実装もできます。

(例えばネットフリックスのように大量のデータ検索結果を一瞬で反映できて使ってて気持ちい)

あれこれと手をつけるのは嫌な僕はひとまずReactオンリーで極めたいと思いました。

今度は大量に個人開発していきたいマンのため、どんどんWebサービスを作っていきます。

最初は無駄も多いと思うし、覚えるまでは青汁を飲むかのごとく、辛いポイントは多いと思いますが今後もしばらくはReactと心中していきます。

公開している宇宙猫は不完全

今回、開発した「宇宙猫」ですが、実はまだ何度か格闘したけれど解消できていない箇所があります。

ですが、今年中に個人開発で1円を稼ぐという目標があるのでひとまずここで手を引きます。

1年間、アフィリエイトサイトの運営で身につけたライティングやSEOの知識も絡めて人に使ってもらえるサービスを作りたいです。

とはいえ、Google先生にサイトを認識してもらうまでは時間がかかります。

なのでこれ以上は時間を割けないため(壁にぶち当たりまくりでトラウマ)のため宇宙猫はスケールせずに次のモノを作ることにしました。

1ヶ月でWebサービス開発を宣言したけどダメだった話

今年の目標は個人開発で1円を稼ぐこと。早く1円を稼げるようになり、、たい!!!

しかし今回の宇宙猫には時間をたっぷり持ってかれました。

とてもシンプルな機能のサービスなので最初は「2週間くらいでできるっしょw」と思っていました。

ですが、現実は2ヶ月半かかってしまい、他の作りたいものやエストニアでのやりたいことに手をつけられていませんでした。

最近は、グーグルのコアアップデートの立て直しでアフィリエイトの方に時間を大きく取っているので使える時間の中でダッシュで個人開発を進めていきます。

1円ゲットを夢見て非エンジニア野郎なりに頑張ります。

まだまだ挙動がおかしい宇宙猫を使ってみたいという人はこちらに貼っておきます。↓

宇宙猫

github(https://github.com/yoshisansan/spacecat-redux