※タイトルはChatGPT先生につくってもらったよ
先月、社内で開かれたReact勉強会に参加しました！！
↑主催したひと（テックリード）
Reactにはじめて触れましたが、このままなにもしないと
勉強会にただ参加した経験に満足してしまうため
- 得た知識と自分の理解が合っているかどうか
- 「Reactを触ったことがある」と自信をもっていえるレベルに落とし込んだか
- 次回、自分が同様の内容を他者に伝えられるか
このような心構え（？）を持って
zennにアウトプットしていきたいと思います😤
勉強会の参加条件
この勉強会、「興味がある人なら誰でも参加していい」ものではありませんでした。
対象者はReactを触ったことがない人です。
なぜReactを社内で学ぶ必要があるのか
Reactを利用した開発がおこなわれているからです。（そりゃそうだ）
そして、わたし自身Reactの開発経験はありません。
わたしのように、他のプロダクトに参画しており
Reactでの開発実務経験がないエンジニアは複数人いました。
しかし、社内でReactを利用した開発事例が存在する以上、
いつ自分にReactを使った開発が依頼されてもおかしくありません。
普段従事するプロダクトは異なっても、
社内でおこなっているものは「自分ごと」と捉えなければなりません。
別チームの仕事であったとしても
我が事・自分事（自分の仕事）として捉え、責任感を強くする役割も担えるはずです。
これが、コラボスタイル開発部の原動力❤️🔥でもあります🥳
本題：Reactとは
JavaScriptでinnerHTMLなどのDOM操作をおこなったことはありますか？
let sample = document.getElementById('h1');
sample.innerHTML = '要素を動的に変更しました！';
Reactは、innerHTMLをもっと楽にやれるJavaScriptライブラリです。（すごいざっくり）
フロントエンド開発をするならまず名前が挙がる、それがReact。
世界的にもめちゃ使われている
Node.jsに次ぎ、42.62パーセントのエンジニアが開発で利用しています。
😎 「突然会社をクビになったとき、今のスキルで転職ができるか？」 by ﾃｯｸﾘｰﾄﾞ
Node.jsをダウンロードしておこう
事前準備をするよ
適当な場所にディレクトリを作っておきます。
※わたしはWindowsでやっています
または以下のコマンドで作る
mkdir hello_react
Reactアプリを作成
ディレクトリ上でコマンドをたたきます。
Typescriptでやっていくヨ！
PS D:\study\hello_react> npx create-react-app . --template typescript
memo：「 .」について
npx create-react-appの直後にある .は、カレントディレクトリを示しています。
今コマンド叩いているところに、Reactアプリを作成するよ～ ということですね！
異なるディレクトリに作成したいときは以下を実行します。
PS D:\study\hello_react> npx create-react-app hello-app --template typescript
ディレクトリ構成について
さっきのコマンドをたたき、トイレ行って戻ってきたころには
Reactアプリが作成されていました！便利でわっほい！
さて、Reactアプリを作成したのでついに実装…
という前に、勉強会で「なるほど」となったディレクトリ構成について触れます。
hello-app
├── public
├── src
│ ├── components # 共通かつ汎用的なコンポーネント
│ ├── features # 機能単位のモジュール
│ │ └── hello
│ │ ├── api # API にリクエストを送信する処理
│ │ ├── components # 機能単位で使用するコンポーネント
│ │ ├── routes # 特定機能のルートコンポーネント
│ │ ├── types # 型定義
│ │ └── index.ts # 機能モジュールのexportを集約する
│ ├── App.css
│ ├── App.tsx
│ ├── index.css
│ └── index.tsx
├── package.json
└── tsconfig.json
※written by テックリードです。
ファイル名の文頭「大文字」「小文字」問題については、
（プロジェクトのルールに合わせることが大前提ですが）慣例に倣いました。
※命名のおやくそくごとについては
ﾍｲｼｬのGM（グループマネージャー）の記事がパッと見で分かりやすいです！
“シンプルに” を心がけよう
MountainEntity の mountainId って、頭痛が痛いみたいになっていませんか？🤔
よくやってしまうのですが、
例えば「hello」というフォルダを切ったのに
配下のディレクトリで「helloApi」とか「helloComponents」とか、、、
親ディレクトリを見れば分かる情報を
不要に子ディレクトリ（または関数/変数名など）に与えてしまい
結果的に冗長になってしまった、、 という経験があります。
「一発で分かる命名を！」とこだわるばかりに
あーだこーだと余分なトッピングを付けることはせず、
シンプルに！ 考えられていることが
このディレクトリ構成で読み取れますね✨
Hello!Reactしてみた
ゴリゴリタイム
srcフォルダにファイルを作成し、以下を記述します。
const HelloReact = () => {
return (
<p>Hello React!</p>
);
};
export default HelloReact;
App.tsxに作成したファイルを呼び出す記述をします。
※App.tsxは、最初に必ず読み込まれるファイルだヨ！
import HelloReact from './Hello_React';
import './App.css';
function App() {
return (
<div className="App">
<HelloReact /> {}
</div>
)
}
export default App;
実行する
PS D:\study\hello_react> npm run start
画面に「Hello React!」を表示することができました！
memo: npm start とのちがい
よくGoogleなどで検索をおこなうと、
npm run startで実行していたりnpm startを使う人もいたりします。
この違いですが、書き方として正しいのはnpm run startです！
では、なぜrunを省略しても機能するのか？
その答えはpackage.jsonにあります。
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
package.jsonのscripts内に
startがキーとして宣言されているため、runを省略しても機能します。
自分でキー宣言を追加することもできますので、
たとえばビルドしてからすぐに起動したい、、なんて時も
scriptsに宣言を増やせばコマンド1つで実行できるようになります！
さいごに：tsxってなんやねん
.jsや.tsはわかるけど、.jsxや.tsxってなんなんでしょう？
GoogleやZennで検索してみたのですが、納得いく答えが中々みつからず、、
.tsファイルは、純粋なTypeScriptファイル。
.tsxファイルは、TypeScriptなんだけどHTMLっぽいものが書けるファイル。
なので、apiを呼び出すコンポーネントなどは
（HTMLを書く必要がないため）.tsで記述しますが
フロントエンドの部分は.tsxで書きます。
ファイル名から役割を推測することもできる ってことですね！
最後については自分なりに調べた結果出た答えなので
合ってるかどうか分かりませんが（違ってたり補足あればコメントください）
React楽しみましたってことで終わります🐰
「ワークスタイルの未来を切り拓く」を理念に掲げ、リアルとデジタルの2つの働く場に向けた事業展開に留まらず、自社が率先して新しいワークスタイルに挑戦し、発信を行うことでワークスタイルの未来を切り拓いていきます。
Discussion