React を使用して独自のブログを作成する (MERN Stack)

2024年6月はどんな6月と違ってとても暑い日々ですが、みんな勉強頑張っていますか？

私は2023年末頃に「Node FullStack開発ガイド（合計3部作）」講義を出し、新しい言語で新しい講義を作成し、これを直接サービスするために独自のプラットフォーム制作に着手しました。

その新しい言語はすぐに~~~!!!

毎年、開発者が新たに学びたいという有名な~~~~ Rustです。

難しいと言われていたRustに移ってみたらなんだ？

すでにJavaScriptの超高水分たちが生態系を芽生えてきて、思ったより(?)簡単に学び、新しいフレームワークでウェブを開発しています。

私が使うフレームワークは'Leptos'ということで個人的には現時点に最も完成もあり、React（リアクトはフレームワークではないが）、NextJS程度の位置に行くと見られますよ~~~

さらに、NextJSが行きたいIsomorphic開発をリードしているフレームワークと考えるRustのWebフレームワークです。

ところで…開発すれば開発するのかなぜ新ニュースで知らせるのか!!!

一般にNodeで開発するとJavaScriptで始まりタイプスクリプトに進むが、

タイプが与える利点（協業性、均一性、予測性など）のほかには、性能的なメリットのないタイプスクリプトをあえて学ばないで、その努力でRustを学んでウェブアセンブリとしてウェブ開発してみてほしいと推薦するために新ニュース作成してみました。

2024.6月 現時点基準では該当書籍、講義などがほとんどなく、ひたすらleptos docsと該当羽毛ハブの例などでしか学ばなければならないのが大きな欠点ですが、ある程度目につくとrust特有のタイプ厳格性でコードの均一性を持ってきながら、c、c++と打ち込む速度に反することになります。 （現時点でのチャットGPT-4oもleptosをよく知りません...ㅠㅠ）

私がプラットフォームの開発が終わったら、当然のことながら、leptosによるWebアセンブリ講義を準備します。講義は2つで構成されます。

1. leptosによる基本的なCRUD講義

2. leptosで自分だけのブログを作る（Rust版Reactで自分だけのブログを作る）

しかし、これを準備するには少なくとも1〜2年かかります。

だから私の足りない講義よりはJavaScriptをある程度学んだらラスト挑戦してみてほしいと、leptosで開発するRustの魅力を先にお知らせしたいサプルでした。

【1行要約】JavaScriptを学んだらタイプスクリプトではなくRust勉強して！思ったより簡単です~~~^^

※2024.6月基準の羽根リポジトリ（完成度20％）

※（参考）Nix flakeも勉強してみてください。一種のpythonの仮想化と同じですが、nix flakeはこれを汎用化してくれます。

「Node FullStak開発ガイド」ロードマップクーポンの発行が開始されました。

「Colini Web開発ガイド（1部／入門者対象）」、「Node FullStack開発ガイド（2部／初級者対象）」、「Terraform配布ガイド（3部／以前講義受講者および中級者対象）」講義を一か所に集めて

「Node FullStack開発ロードマップ、A～Zまで」という名前でロードマップをリリースしました。

マイクロサービス開発関連の講義として、入門者から中級者まで、口当たりを選んで受講できるように講義を構成しました。

このロードマップへの参加は無料で、参加時に3つのレクチャーの20％割引クーポンが発行されます。

期間制限はないので興味があれば、いつでも気軽に参加してください~~~ ^^

※ロードマップアドレス：https: //www.inflearn.com/roadmaps/731

またインスタも開設しました。開発ニュースや日常などを上げる予定なのでいいですフォロー＆ハートお願いします~~~^^

※インスタアドレス：https: //www.instagram.com/ssaplecode

「Terraform導入ガイド」は、

• Gitにコードを保存するだけ

• Git Actionを介してTerraformコードが自動的に機能します

• 「Node FullStack開発ガイド」でドッカーで作成したアプリケーションをprod状態に置き換えて

• Azure にデプロイする方法を学ぶ

配布方法に渇きがある場合は、2023.11.30。まで進むアーリーバードの割引時に購入してください~~!!!

購入住所：https: //inf.run/2GAGp

※今回発売された「Node FullStack開発」（計3部）シリーズはロードマップでもご案内となりますので参考にしてください^^

本当にお久しぶりです。 （その間ご挨拶できなくてすみません😭 ）

いよいよ~~!!! 3年ぶりに新しい講義をもって帰ってきました。

名前は「Node FullStack開発ガイド」で、合計3部で構成されています。

その講義を簡単に紹介すると

1. Colini Web開発ガイド（1部） ＜講義移動＞

   1. 完全初心者のための講義（Html、Css、Javascript、リアクト勉強）

2. Node FullStack開発ガイド（パート2） <講義の移動>

   1. 初心者の段階を超えた方のための講義で

   2. Docker、Nginx、Postgresql、SNS Login、カカオペイの実装でショッピングモールを作成します

   3. ドッカーで開発から最終仕上げまで進めます

3. Terraform 導入ガイド<講義移動>

   1. リアクトでウェブを実現することを知っている人のための講義

   2. 最新の展開技術であるTerraformを使ってクーバーネティスを運営

   3. 2部で作ったショッピングモールを配布してみる段階で2部を聞かなくても独立して受講に支障がないようにしました

アーリーバードの30％割引はわずか1ヶ月間（10.31〜11.30）で行われます。

以後、割引はインプラン公式割引またはロードマップ購入時の10％基本割引には別途進行しないのでお見逃しなく～～

react-router-domが6バージョンに上がり、変わった部分が多いです。

その講義はバージョン5に基づいて作成されたため、インストール時に

npm i react-router-dom@^5

で設置してください。

npm i node-sass@ 4.14.1にしてください。

私は怠けです。

質問コメントに書き留めてお知らせしなければならなかったのですが…今は上げますね。

質問いただいた受講生に感謝します。 *^^*

1. Import メソッドが変更されました。

(既存) import CKEditor from "~~" -> (変更) import {CKEditor} from "~~"

2. CKEditorが既存のonInitからonReadyに変更されました

<その他の注意事項> https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html

[通知] nodemon, babel-node 衝突問題の解決策 / (5) Express Start 講義関連

現在のウィンドウを使用している場合は、nodemonを使用しないでください。以下の方法で進んでください。

【原因】

Windowsでnodemonとbabel-nodeを一緒に書くと正しく動作しないという問題があります。 （2回実行されるか、ignoreなどのオプションが正しく機能しません）

[解決方法]

(インストール) npm i babel-watch

(script)追加

"dev-watch" : "babel-watch server/server.js --ignore'./client'" ,

（サーバー実行）

npm run dev-watch

このように置き換えると、サーバーの操作後など、フロント操作時にサーバーも再実行されません。