MERNでサイトを開発してみた
前言
自分は長年、スマホの開発をメインとして携わりました。
Java（Kotlin）やSwiftはもちろんですが、
クロスプラットフォーム系は大好きで、始めはC++（ゲーム）で、今は
Flutter、2019年末からTypescriptもはまっていました。
フルスタックを目指しているけど、IT業界の神レベルにならないけれども、色々技術を弄るのは好きな人で、サーバーやインフラを多少触っていたが、フルスタックなものを個人で全部やってみたい気持ちあります。
何をやったらおもろしくなるだろうと考え、MERNで自分のために使えるものを作りましょうの目的でした。
初心者的な発言ばかりかもしれないので、こうしたらいいと思うときに、是非どうもコメントいただけると幸いです〜
MERN
M:MongoDB
E:Express
R:React系
N:Node.js
全体像
バックエンド
ExpressとNode.jsの技術選定で、最近流行っている（と言っても、２年前かなぁ？）をフォローしていく感じで、NestJS＋Graphqlでやりました。
ちょうどGraphqlは何者は知りたく、swaggerとともに、今後もう一つの選択肢でAPI出せることができるようになりました。
実は、ExpressとNode.jsなんで最初は全く知らないから始めているけど、NestJsのドキュメントまじで詳しくすぎるので、本当に開発にはなんの穴も踏んでいなく、APIを完成したような感じでした。
GraphqlやMongoはNestJs機能組み立ての時、本当にブロックおもちゃのように作れました。
神のNestJsドキュメントに感謝します。
フロントエンド
フロントエンドは初心者のため、だめなところ多いと思いますが、がんばりました。
自分はスマホアプリ開発者として、Flutterにお世話しているところ、
Flutterの形式と似ているReactはすごく親しいと思っています。
さらに、cssなど作りたくないの気持ちもありました。
ChakraUI
Tailwindcss
Material(Flutterでも結構わかったので、新しいのを挑戦したいですね)
上記3個から選ぶことになりまして、ChakraUIのFlutter感半端ないですね！！
Next.jsをフル活用したく、深堀したく、Next.jsをベースにして、開発しました。
おそらく、SSGとSSRの区別わからない人多いと思いますが、この記事はまとめはいいので、おすすめと思います。
実際に、今回の開発で全部SSRを使いました、理由としては、単純に、早く表示したい思いでした。
３年ぶりにReact系を遊びましたが、その変化にびっくりしました。
神Hookやばいですね、以前はReduxとか使って、４年前のアプリみたいにアクションとか追加して、反映するの仕組みは作りましたの思い出して、時代の変化早いと実感しました。
フロントエンド量多い
APIの完成早いものの、フロントエンドは結構時間かけましたねと実感しました。
デザインないのものの、データの表示方に結構悩みました。
フロントエンドの仕様に合わせるため、Graphqlを修正したり、追加したりするのは繰り返したことがありました。
所謂、会社で、よくあるフロントエンドチームとバックエンドチームの打ち合わせ会議です。
ただ、これらは、自分の頭の中で完結しました。w
デザイナではないので、色々設計できたら進むではなく。
結構やりたいことをベースにして、コード直で書いていました。
アートセンスを磨かないといけないのを実感しました。
NextJs流行っている今、ここは継続的な試験場として、これからは楽しんでいくと思いたいです。
（記事にはZennみたいに便利に編集とかまだできていないですね）
インフラ
構造図書くのは面白く、インフラ思考はチームマネージメントだねという感想でした。
コスト
デプロイして公開するに当たって、何より重視しているのはコストだね。
ECSのEC2を使っています、Fargateならば、すごく便利と管理しやすいですが、せっかくの12月間のEC2無料試しあるので、使わないともったいないです！
それなりに、コストは最低限に抑えたかと思います。
ツッコミ：そもそも、mdファイルで管理したら良いじゃないというのもあり、技術のハンズオンのため、気にしないでくださいw
最後
技術知識には自信あったですけど、やっぱり手を動かさないと、色な細かいところでハマりますね。
落ち着いて、分析して、初めて知ることがどんどん出てきました、ハンズオンは万歳ですね。
これを通じて、色々やらないといけないことがリストアップできて、今後はflutter含めのフルスタック挑戦したいと思います。
Discussion