💻

ReaSemi(議事録Vol.1)

RURI

2024/07/27に公開6件

【ReaSemi記念すべき1回目✨】

2024.07.27 22:30~　
たくさん人が集まってとても楽しく、とても勉強になる会でした😊
今回はそんな記念すべき第1回目の議事録を書かせていただきます!

【本日の内容】
①Reactのファイルとコードの構造をイメージ
②ざっくり環境構築
③りあゼミ会議

①Reactのファイルとコードの構造をイメージ

1.Reactとは
簡単にいうとHTMLとJavaScriptを合体させたようなもの。
WebサイトはHTMLだけでは表示の変更などの動作はできない。
この動作をできるようにするのがJavaScript。
例えば時期によってクリスマスバージョンの表示にする、文字色を黒から赤にする、など。

2.ファイルの構造
JavaScriptでWebアプリ制作を行う際には、
・index.html
・style.css
・reset.css
・main.js
などのファイルを作成する。
一方でReactでは
・📁src-main.jsx
-app.jsx
-📁css-reset.css
-style.css
-index.html
・package.json
・package-lock.json
・webpack.config.js
などJavaScriptでの記述と比べてファイルが多いのが特徴。
それぞれの役割を簡単に説明すると…
　①.jsxはHTMLとJavaScriptを合体したような書き方をする。
JavaScriptにHTMLを埋め込むことができるようなイメージ。
React内のHTMLはとてもシンプルで、

index.html

<body>
    <div id="root"></div>
</body>

この中にJavaScriptを入れていくことで、header等も作ることができる。
最終的にブラウザに表示するのはHTMLで、それを何で作るのかによって内容が変わる。
例えばHTMLの中にJavaScriptを記述して動きがあるものを作るなど、HTMLの内容を変えていく
ことができる。

②main.jsx

main.jsx

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const rootElem = document.getElementById('root');
const root = createRoot(rootElem);
root.render(<App />);

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

importでReactや他のファイルを使えるようにする。

const rootElem = document.getElementById('root');
この記述ではDOMの取得をしている。
DOMを簡単にいうと、HTMLにあるものをJavaScriptで操作できるようにするというもの。
HTMLの世界から持ってきたものを定数という箱に入れて(=代入)あげる。
大人数で開発をする際に書き換えてしまう恐れがあったり、変わってしまうとその後の全ての
記述が崩壊してしまう可能性があるので、変数ではなく定数を使用する。
JavaScriptでDOMの取得をすると軽く10個以上は記述が必要になる。
しかし、本質は「何をした時に何が起こるかという」部分。
これをアプリ制作に特化させて記述を楽にしたものがReact。

const root = createRoot(rootElem);
root.render(<App />);
この()内のタグのようなものがコンポーネント。App.jsxの中で定義したものを表示させる。
rootを使ってDOM取得し、用意した箱に対して中にこれからJavaScriptで書くものを入れる。
同じものは繰り返し使ったり、いつも表示するものは残しておくという考え方がコンポーネント。

App.jsx

const App = () => {
}

アロー関数。
(functionを使わない関数の書き方。Reactではアロー関数を使用することが多い)。
【関数とは】
処理をまとめたもの。何度も同じ処理を書くと、書くのも修正も大変なので関数を使用する。
【関数コンポーネントとは】
関数の形をしたコンポーネント。返すのがJavaScriptコードではなくタグのようなもの。

☑︎ Reactにおけるコンポーネント

コンポーネントという概念がありましたが、Reactはこのコンポーネントを実装するのにとても便利な書き方ができます。

基本的な書き方

Reactのコンポーネントの作成は、大まかに、

import文

export文

コンポーネント本体（関数の形で書きます）
の３つで構成されています。

②ざっくり環境構築

1.環境構築とは
できるようにするために準備すること。(インストール、設定、ファイル作成など)
【フロントエンド】
ユーザーが見ている画面など見た目をつくる。
【バックエンド】
裏の処理を行う。
例えばブログサイトなら、データベースから記事の情報をもってきたりフォームを送信して
保存する。
フロントエンドで動くプログラミング言語↔︎JavaScript(ほぼイコール)
JavaScriptをバックエンドで動かすための環境がNode.js。
なのでNode.jsは厳密にはプログラミング言語ではないですが、Node.jsで動くJavaScriptを
Node.jsと呼んだりもする。
【npm】
Node.jsのパッケージを管理するシステム。
最初に必ず初期化のコマンドを入力する。
$ npm -y init
「-y」はオプションなのでつけなくても、initの後ろにつけてもOK。
(全部「yes」と回答するオプション。)
実行するとpackage.jsonが作成される。(おつかいメモみたいなもの)
【package.json】
node_modulesを削除するとReactが使えなくなる。
もし無くなっても何をインストールするかを思い出すためのメモみたいなもの。

$ npm install
package-lock.jsonとnode_modulesができる。
【package-lock.json】
より詳しい内容のメモ。
【node_modules】
とても重たいファイルなので、誰かに送ったりアップするときは削除する。
【オプション「-d」について】
save-dev。開発で使うかどうかで判断する。
開発環境でのみ必要なもののinstallの際につける。
Reactなど公開する時にも必要なものにはつけない。
【webpack.config.js】
設定を行っているファイルと覚えておく。
React→JavaScriptの変換を行ったり、コマンドでサーバーの立ち上げを行ったりする。
($npm run dev)
~~この"dev"で省略などの設定はwebpack.config.jsに書く。~~
→07.27追記(修正)
"dev": "npx webpack"みたいなエイリアス（省略した別名）は、package.jsonファイルのscriptsに記述。やまぴー先生がコメントにて資料添付してくれています！

2.ディレクトリ(ファイル)の構成
【src】
アプリを構成するファイル(index.html,style.cssなど)
インストールしたものはその外(プロジェクトディレクトリの直下)

③りあゼミ会議

今後りあゼミでやっていきたいこと
・Viteについて(今回時間足りなかったため次回)
・各々課題のコードを記述し、他の人がどのようなコードを記述するのか、どのコードが
なぜいいのかなどを議論する
・WebAPIについて

感想

記念すべき第1回目のReaSemiでした✨
とても楽しく勉強になる内容が盛りだくさんで、今後もできる限り毎週参加したいです!
今回は講義に近いような形でしたが、時々やまぴー先生からの問いが飛んでくるのでドキドキし
つつ、自分の知識が定着している部分と曖昧な部分が明確になりました。　
たくさん学んで自分でも課題や議題を提示できたり、人に教えられるレベルまで知識と理解を
深めていきたいです!
議事録もアウトプットの練習になるので、もっと上手に書けるように頑張ります。
(7期生:RURI)