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の区別わからない人多いと思いますが、この記事はまとめはいいので、おすすめと思います。

３年ぶりにReact系を遊びましたが、その変化にびっくりしました。
神Hookやばいですね、以前はReduxとか使って、４年前のアプリみたいにアクションとか追加して、反映するの仕組みは作りましたの思い出して、時代の変化早いと実感しました。

フロントエンド量多い

APIの完成早いものの、フロントエンドは結構時間かけましたねと実感しました。
デザインないのものの、データの表示方に結構悩みました。
フロントエンドの仕様に合わせるため、Graphqlを修正したり、追加したりするのは繰り返したことがありました。
所謂、会社で、よくあるフロントエンドチームとバックエンドチームの打ち合わせ会議です。
ただ、これらは、自分の頭の中で完結しました。w

デザイナではないので、色々設計できたら進むではなく。
結構やりたいことをベースにして、コード直で書いていました。
アートセンスを磨かないといけないのを実感しました。

NextJs流行っている今、ここは継続的な試験場として、これからは楽しんでいくと思いたいです。
（記事にはZennみたいに便利に編集とかまだできていないですね）

インフラ

構造図書くのは面白く、インフラ思考はチームマネージメントだねという感想でした。

コスト

デプロイして公開するに当たって、何より重視しているのはコストだね。
ECSのEC2を使っています、Fargateならば、すごく便利と管理しやすいですが、せっかくの12月間のEC2無料試しあるので、使わないともったいないです！
それなりに、コストは最低限に抑えたかと思います。

ツッコミ：そもそも、mdファイルで管理したら良いじゃないというのもあり、技術のハンズオンのため、気にしないでくださいw

最後

技術知識には自信あったですけど、やっぱり手を動かさないと、色な細かいところでハマりますね。
落ち着いて、分析して、初めて知ることがどんどん出てきました、ハンズオンは万歳ですね。
これを通じて、色々やらないといけないことがリストアップできて、今後はflutter含めのフルスタック挑戦したいと思います。