24歳になりましたので、サービスを1つ立ち上げました🎉

こんにちは、けんぞうです。
24歳になったので、サービスをまた1つ作りました。

24歳になったので、サービスを作ってみた。

6/12で24歳になりましたー🎉 というわけで、「Devmap | 独学ロードマップを誰でも共有できるサービス」を作りました。

サービスの紹介

Devmapでは「プログラミングの独学ロードマップを誰でも気軽に作成して共有できる」というコンセプトのサービスです。

例えば「Reactをどのように独学したか」という僕の投稿では、僕がReactの勉強をどこから始めて、何を参考にして勉強を進めてきたのか、ということを割と細かく書いています。

僕は以前から「プログラミングを独学するなら、現在の自分の知識レベルに合わせて順を追って学習することが大事だよなー」という主張を続けてきたので、それを体現する感じのものを作りました。

モチベーション

上記のツイートの通り、ちょうど1週間前に「そういえば1週間後、誕生日だー!」と気が付いた訳なのですが、「せっかくだったら区切りも良いし1週間で何か作ってみるかー」と腰をあげて、1週間かけてガリガリ実装しました。

ちょうどReactを最近触り始めたところだったので、1週間あればReactではどれくらいのアプリケーションが作れるのかという「Reactの力量をみてやろう」という生意気なスタンスで、Reactを採用しました。

タスク管理

タスク管理は今まではWBSを作って進捗をみていたのですが、GSS自体の立ち上がりや操作がちょっと煩雑だなと感じていたことから、今回はTrelloをタスク管理として採用しました。

使ってみた感想としては、サクサク動くのは良いけれど、全体感(どれくらいのタスクがいつまでに完成したのか?)という振り返りが微妙にしづらい印象を持ったので、また何か作るときにはWBSに再乗り換えするかなと思います。


苦戦したところ

以下の技術で実装しました。

  • React
  • Redux
  • Firebase

①認証ログイン

Google/Twitter/Facebookでの認証ログインを実装しているのですが、signInWithPopupを呼び出す形にしていて、この実装方法だと「認証と同時にuser collectionが作成されて、自動でユーザー情報が保存されない」というsignInWithRedirectとの違いに気がつくのに、少し時間がかかりました。

signInWithRedirectだと自動でusers collectionを作ってユーザーデータを格納してくれる)

signInWithRedirectを採用して挙動を確認してみたところ、リダイレクトされるページが一時的に(3秒間くらい)真っ白になるという謎の問題も生じていて、こちらは解消に時間がかかりそうだったので、「signInWithPopupを採用しつつ、users collectionにデータを格納する」という実装をおこないました。

 

結果的に上記のようなアクションクリエイターを呼び出しているのですが、ポイントとしては、idを明示的に指定しつつdocumentを作成する必要があったため、addではなくsetを使用しているところで、ここに気がつくのにもまた時間がかかりました。

②カスタムドメイン

お名前.comで取得したドメインを紐づける際にこちらの記事を参考にしたのですが、途中でお名前の方にIPアドレスを登録する下りで、「ホスト名にwwwを入れていたので、いつまでも反映されない」という問題がありました。

結果的には、ホスト名にはwwwをいれずに登録しておけば反映されたのですが、実際に登録したドメインは「保留中」から「接続済」になるまでに丸一日かかりました
Google先生のことなので、サクッと接続してくれるかなーという余計な期待をしていたら間違いでした。

③stepsのupdateアクション

Devmapでは自分が作成したロードマップのstepについて、投稿後からでも編集可能にしているのですが、stepのupdateアクションをどのように実装するかで、結構悩みました。

具体的にいうと「setStateをしても、すぐにstateが変更されるわけではなく、render()のタイミングで上書きされたstateを取得することができる」という事実に気がつくまでに時間がかかりました。

④動的なOGP設定(未解決問題)

DOYAで実装したように動的にOGPデータが切り替わるような実装をしたかったのですが、react-helmetなどを導入しても、Twittercardが切り替わらなかったり、og:titleも変わらないという問題がありました。

SPAの開発自体が初だったので、全然知らなかったのですが、クローラーがJavascriptを実行しないため、react-helmetを使用してReactコードのrender()以下でmetaタグを変更しても反映されないらしいのです。まじかよ

CloudFunctionsを用いたmetaデータの書き換えや、react-helmet+snapshotを用いたmetaデータ記述など試みたのですが、どれも途中で何かしらの問題にぶち当たってしまうため、とりあえずデフォルトのOGPデータをindex.htmlに書き込むという形にしているのですが、ダイナミックにアイキャッチが生成されるのがDevmapの良さなので、引き続き調査+対応を続けたいと思います。(良い案がある人は教えてください)

Github issue動的なOGP画像生成を行いたい #8

⑤自動でアイキャッチ画像を生成する(工夫)

Cloudinaryを使用して、「入力されたタイトルを画像に乗せた形でアイキャッチ画像を自動生成する」という実装を行いました。

工夫と言える部分はここくらいかもしれません、、Reactの記法に慣れつつ、要件を完成させることに必死でした。


まとめと感想

とりあえず誕生日おめでとう㊗️おれ!

ReactJS、Redux、Firebaseでの実装はちょっと情報量が少ない部分もあって苦戦する箇所ももちろんあったけれど、全体としては「Railsでモノリシックなアプリケーションを作るよりも、少し簡単な箇所も多かった(認証ログインとか)」という感想です。

なので、今まではスクールの教材含めて「Railsでアプリケーションを作って、ポートフォリオとして使おう!」だったのが、今後は「Reactでサクッとアプリケーションの方が簡単だ!」という人も増えるのかなーと思いました。

そんなわけで、24歳になったけんぞうを今後ともよろしくです。