【勉強会】Reactアプリ開発_20250625

社内勉強会として、Reactによるアプリ開発において、Reactとはどんなものか？、開発の流れは？についての概要として簡単に説明するための資料です。

Transcript

1. M.T.FIELD SERVICES LTD. Presented by: 新事業開発タスク
2. M.T.FIELD SERVICES LTD. この勉強会で学ぶこと この勉強会では、こんなことがわかるようになります︕ ü React（リアクト）って何︖ → Web画⾯を作るための道具です ü アプリはどうやって作られているの︖ → 部品を組み合わせて作ります 🏁 ゴール︓ 「なるほど︕Webアプリってこうやって動いてるんだ︕」 と思えること
3. M.T.FIELD SERVICES LTD. 「React」とは︖ ü Facebookが開発したUIライブラリ ü Webアプリの画⾯（⾒た⽬）を作るツール ü 再利⽤できる「コンポーネント」で開発するのが特徴 🧐 例えると︓ 「画⾯をレゴブロックで組み⽴てる感じ」
4. M.T.FIELD SERVICES LTD. HTMLページの仕組みって︖ 🗂 静的なページとは︖ ・サーバーにあるHTMLファイルをそのまま表⽰するタイプ ・すでに決まった内容しか表⽰されない 例︓会社の概要ページ、アクセスマップなど 👍 特徴︓ ・表⽰が速い ・ユーザーごとに内容が変わらない
5. M.T.FIELD SERVICES LTD. HTMLページの仕組みって︖ ⚙ 動的なページとは︖ ü ユーザーの操作や状況に応じて、表⽰内容が変わるページ ü JavaScriptなどを使って、APIからデータを取得して表⽰ 👍 特徴︓ ü 予約情報、ユーザー名など、ログインした⼈に応じて変化 ü Reactのようなライブラリで作られることが多い
6. M.T.FIELD SERVICES LTD. Webアプリの全体構造 ü Reactが表⽰、APIがデータ提供。役割が分かれている︕ Webブラウザ （ユーザ画⾯） バックエンド （データ） API通信 Reactが動く 座席データ
7. M.T.FIELD SERVICES LTD. 「Node.js」とは︖ ü JavaScriptを「サーバー側」でも動かせるようにしたもの ü 通常はWebブラウザの中で使うJavaScriptを、裏側の処理で も使える︕ ü Webアプリの「データの出し⼊れ」や「通信の管理」などに 活躍します
8. M.T.FIELD SERVICES LTD. Node.jsとReactの関係って︖ 🧐 例えると︓ React︓ホールスタッフ（接客担当） → お客様の注⽂を取ったり、料理を運ぶ Node.js︓キッチンや会計システム（裏⽅） → 注⽂を処理したり、お⾦の計算をする 役割 技術 どんなことをするの︖ フロントエンド React ユーザーが⾒る「画⾯」を作る バックエンド Node.js 裏側でデータのやりとりや処理を 担当
9. M.T.FIELD SERVICES LTD. どうつながるの︖ React（画⾯） で操作 Node.js （サーバー） データの取得依頼 処理後データを反映 ü つまり、⼀緒に使うことで「動くWebアプリ」が完成︕
10. M.T.FIELD SERVICES LTD. React開発の流れ（ざっくり） ステップ 内容 ① 画⾯設計 UIや機能を考える ② 部品づくり コンポーネントを作る ③ データ連携 APIでデータ取得 ④ 表⽰・動作確認 ブラウザでチェック ⑤ 本番公開 サービスとして提供
11. M.T.FIELD SERVICES LTD. 地図表⽰ライブラリ「Leaflet」とは︖ ü 軽量で⾼速、Reactと組み合わせやすい ü 地図上に「マーカー」「ポップアップ」を表⽰できる ü マウスやタッチ操作で地図の拡⼤・縮⼩、移動などができる 🗺 機能を「オフィスマップ」に応⽤︕
12. M.T.FIELD SERVICES LTD. オフィスマップアプリ ü フロア地図の切り替え ü ユーザーのプレゼンス表⽰ ü ユーザーの予定、メッセー ジ表⽰ ü 会議室の予約予定 ü フリー席の利⽤者表⽰ ・・・など
13. M.T.FIELD SERVICES LTD. よく出てくる⽤語集 ⽤語 意味 例え コンポーネント UI部品 レゴブロック JSX HTML⾵のコード 簡単な記述⽅法 Props（プロップス） 親から渡すデータ お弁当箱の中⾝ State（ステート） 変わる値 現在の温度など
14. M.T.FIELD SERVICES LTD. 開発の役割分担イメージ 🧑💻 開発メンバー ü ReactでUIを作る ü データと連携する 🧑🏫 ⾮エンジニア ü UI案のレビュー ü 動作確認やQA ü 利⽤者視点でのフィードバック 💬 開発はチームプレイ︕
15. M.T.FIELD SERVICES LTD. ▶要望 ✔ 本社フリーアドレス席を活⽤したいが、席を予約できないか。 ✔ フリーアドレス席予約は、スマートフォンに対応して欲しい。 ▶要望への対応 ・進⾏中のオフィス改善に加え、本要望にも対応する ・早期の対応に向け、既存環境と既存技術を活⽤する ▶構成 環境︓Microsoft 365（ユーザー認証︓Entra ID、席予約︓Exchane Onlineリソース） 技術︓Webフロントエンドアプリ開発（React + node.js + Microsoft Graph API） 開発︓仮想オフィスアプリを改修（昨年度C&C開発アプリ） 機能︓①座席管理、②フリーアドレス予約、③会議室・ブース利⽤状況と予約確認、 ④座席利⽤者スケジュールとステータス確認 ▶リリース︓ 7⽉予定 座席管理アプリ「せきとりくん」について