React
更新履歴
- ver0.1 2024/3/19
はじめに
全然触ってないので詳しくないけど、必要になってきたので…
コースで扱っている内容より、難易度高いです。
ターミナルなどの操作が全然わからない人は、全くわからないと思います。
ツールが色々あって、どれ使って良いか悩むと思います。ヒントになれば… 情報が古いの拾ってたらごめんなさい。
node.js
元々JavaScriptはWebブラウザ上で実行されることを想定していましたが、 それを、コンピュータ上でも利用できるようにしたJavaScript実行環境がnode.jsです。
ダウンロードしてインストールでも良いですが、次のnodebrew/voltaを使ってもいいかもしれません。
nodebrew(node.js バージョン管理)…古いか？
開発していると、node.jsのバージョンを管理したくなります。 そのため、それを管理するにはnodebrewが便利です。
インストールするときにhomebrewというののインストールを求められます。 これは、macにアプリケーションをインストールするためのパッケージマネージャと呼ばれるもので、
ここから、インストールのコマンドラインをコピーして、ターミナルで貼り付けるとインストールされます。
volta(node.js バージョン管理)
npm(Node Package Manager)
node.jsで利用されるパッケージマネージャで、簡単に追加機能をインストールできます。
フロントエンドJSフレームワーク
UIコンポーネントを作成するのに利用されます。 単純にいうと、Web上で表示するパーツをコンポーネントという単位で管理できるという事です。
フロントエンドで利用されるJSフレームワークとして
- React
- Vue
- Angular
- jQuery
などありますが、現在シェア率の高いのはReact,Vueとなりますが、Reactの方が圧倒的です。
Vueの方が初心者向け、という人もいます。
jQueryは一世風靡しましたが、古くなっちゃったという感じがしています。
Next.js
ReactベースのJavaScriptフレームワークであり、Reactアプリケーションの開発を簡素化することが可能です。 主な特徴に次のものがあります。
- サーバサイドレンダリング（SSR）
- 静的サイト作成（SSG）
- AFIルーティング
- ファイルベースのルーティング
- ホットリロード
- TypeScriptへのサポート
Vite
次世代のフロントエンド開発ツールと言われています。 Next.jsではwebpackというのを利用していますが、それより高機能のようです。
TypeScript
TypeScriptを使うとJavaScriptをベースにしつつ、型安全性を提供しより信頼性の高いコードの作成を可能にします。
create-react-app???
Reactで開発するときに
npx create-react-app
としていましたが、
によれば、非推奨になりそう、とのことです。 記事を調べるときに気をつけましょう。
Tailwind CSS
Reactとはこれがよく使われます。 Tailwind CSSは、ユーティリティファーストのCSS（カスケーディングスタイルシート）フレームワークです。
通常のCSSではクラス名を設定し、そこにCSSを書いていくのですが、Reactではコンポーネント単位で開発が進められるため、別のCSSファイルを利用せず、TailwindCSSの方式で記載することが多いようです。
どう使えばいいの？
現時点では
- volta
- node.js
をインストール後に
- React + next.js
- React + vite
で利用する流れになっているようです。
React入門
-
【2024年】React環境構築を1から丁寧に初めてみよう【viteを利用】 はじめはいらないでしょうが、vitest(テスト環境),eslint(静的検証ツール)等いろんな環境構築をしています。
-
新・日本一わかりやすいReact入門【基礎編】 create-react-app使ってるけど…