フロントエンド開発における開発効率をめっちゃ上げる方法

お久しぶりです😀
最近は開発環境について学習をしています〜。

個人開発を早くやりたい！と先走った結果、ベースとなる開発環境が貧弱になってしまったんですよね。。。
まぁ、個人で開発する分にはそれで良いのですがチーム開発とか今後していくなら、開発環境を強化してみんなで楽しく開発に集中！といったことをしていきたいし、求められるのかなーと思ったので学習を始めました！

そもそも私が思う開発環境がめっちゃ強い！は以下の通りです。とっても素人なので、ご容赦ください。他にもあると思うので、コメントいただけると嬉しい！

• 依存関係最初から解決しといてくれ〜〜！

• 必要なツールは最初からインポートしといてくれ〜〜！

• 全く同じ開発環境を簡単に他人が用意できるようにしたいな〜〜！

ということで早速上記を叶える方法があったので、超ざっくり書いてみる🙆‍♂️

用意するもの 🔨

• Docker

• Vite

• Github

• GithubActions

ひとつずつスーパーざっくり解説します！

Docker 🐳

Dcoker

Dockerはコンテナ化という技術を用いることで、Dockerをインストールしている環境であれば簡単に開発環境を移植することができる！
ローカル環境では動いているけど、本番環境ではエラーを出している・・・そんなお悩みを解決してくれます。
このコンテナー📦があるおかげで、誰が作っても同じような環境が出来上がってしまうんです・・・！

Vite ⚡️

Vite

モダンなフロントエンド開発における必需品！？
いざフロントエンドでコードを書いてアプリを作るぞ！となってもただReactやvueのコードを書けば良い・・・という訳ではないんですよね（泣）
Prettierと呼ばれるコード整形ツール、静的コード解析ツールであるESLintを入れたり、NodeJSをインストールしたり・・・。そしてそれら全てのツールのバージョンは互換性があるのか・・・？

非常にめんどくさい！！開発に専念させてくれ！

そこでそんな悩みを全て解決してくれるのがViteなんです🤗
導入からローカル環境構築まで5分ほどあればサクっと用意できてしまうんですね〜〜！！すてき♡♡

これ、CRA（Create React App）などのビルド環境を使用したことある人ならこのありがたみが分かるんじゃ無いでしょうかー？
自分でPrettierやESLintの導入をしてつけるようにするのは非常に時間がかかるんですよね・・・。
あとは、まだ実際にviteで開発を進めてないので何とも言えないのですが、色々と動作が軽くて早いそうです！

GitHub 🐈‍⬛

これはエンジニアとして必須ですよね！！
オンライン上でプロジェクトのバージョンを管理するためのツールです！
以上！！

GithubActions🏃‍♀️

これもすっごい重要🔥
JSのフレームワークで書いたコードってビルドしないと動かないし、上述したGitHubにもコミットしないといけないですよね。
これをコミットして・・・ビルドして・・・それをデプロイして・・・というのはとても面倒くさい！
そこで、本番に上げる際に
ビルド+コードのテスト+デプロイ+リポジトリにコミット
を全て一括で処理してくれちゃうんです🔥🔥
QOL爆上がりですね〜〜。

まとめ🙆‍♂️

ということでDockerコンテナ上にViteのビルド環境を乗せてGitHub ActionsでCI/CD環境を構築するといったことをやりました！！
実際はそこにFirebaseも絡ませていたのですが、同様の環境を作られている方の記事が少なかったので環境構築だけで1日半ほど使ってしまいました・・・！！だけど、自分で環境構築するととっても楽しい！！
ということで、今後は今回作った開発環境にて新たなアプリを開発して行きます😊

では( ＾∀＾)