Slide 1
Slide 1 text
Microsoft 365 開発をはじめる人のための
React 超入門
.NET ラボ 勉強会 2021 年 6 月
2021/6/26
Microsoft MVP for Office Development 篠原 敬志 (@karamem0)
Slide 2
Slide 2 text
Japan M365 Dev User Group にご参加ください
Facebook グループ
https://www.facebook.com/groups/jpm365dev
connpass
https://jpm365dev.connpass.com
Slide 3
Slide 3 text
このセッションのゴール
モダンな Microsoft 365 開発 に乗り遅れた をこれからはじめる方に、React をはじめるべき理由
と、超基本的な React の仕組みについて理解します。
フロントエンドなんて
自分には関係ないよね
JavaScript?
jQuery しかわからん
Slide 4
Slide 4 text
モダンな Microsoft 365 開発
Slide 5
Slide 5 text
Microsoft 365 開発のスコープ
Microsoft Graph SharePoint Framework Microsoft Teams
Office Add-in Microsoft ID Platform Adaptive Cards
Slide 6
Slide 6 text
"モダン開発" とは
レガシー
一方向
密結合
同期的
SOAP
XML
オンプレミス
シングル プラットフォーム
シングル デバイス
手動テスト
ウォーターフォール
モダン
双方向
疎結合
非同期的
REST
JSON
クラウド
マルチ プラットフォーム
マルチ デバイス
自動テスト
アジャイル
Slide 7
Slide 7 text
Microsoft 365 開発のモダン化 (SharePoint)
ファーム
ソリューション
サーバー サイド
ASP.NET Webフォーム
SSOM
オンプレミス
SharePoint
アドイン
クライアント サイド
ASPX + JavaScript
JSOM
オンプレミス/クラウド
SharePoint
Framework
クライアント サイド
HTML5 + TypeScript
REST API
オンプレミス/クラウド
Slide 8
Slide 8 text
Microsoft 365 開発のモダン化 (Office)
VBA
ファイル形式
Visual Basic
オンプレミス
VSTO
インストール形式
.NET Framework
オンプレミス
Office アドイン
インストール形式
HTML5 + TypeScript
オンプレミス/クラウド
Office スクリプト
ファイル形式
TypeScript
クラウド
Slide 9
Slide 9 text
Microsoft 365 開発のトレンド
TypeScript
AltJS のデファクト スタンダード
マイクロソフトが開発
静的型付けが可能
npm
Node.js に含まれる JavaScript のパッケージ マネージャー
サーバーサイド/クライアントサイドに関係なく使われる
SPA
シングル ページ アプリケーション
動的に HTML (DOM) を書き換えることでユーザー体験を向上させる
Slide 10
Slide 10 text
モダンな JavaScript フレームワーク
Slide 11
Slide 11 text
JavaScript フレームワークのトレンド (すべての国)
https://trends.google.co.jp/trends/explore?date=2014-06-19%202021-06-18&q=%2Fm%2F012l1vxv,%2Fg%2F11c6w0ddw9,%2Fg%2F11c0vmgx5d,%2Fm%2F0268gyp
Slide 12
Slide 12 text
JavaScript フレームワークのトレンド (日本)
https://trends.google.co.jp/trends/explore?date=2014-06-19%202021-06-18&geo=JP&q=%2Fm%2F012l1vxv,%2Fg%2F11c6w0ddw9,%2Fg%2F11c0vmgx5d,%2Fm%2F0268gyp
Slide 13
Slide 13 text
Why React? (※個人の感想です)
利用者が多い
最近は特に人気が出てきている
比較的シンプル
Angular は全部入っているので逆にちょっと重い
安定性
Facebook とコミュニティによって開発されている
ネイティブへの対応
React を習得すれば React Native で Windows アプリも作れるようになる
習得の容易さ
XAML 開発者であればとっつきやすい
Slide 14
Slide 14 text
Fluent UI
Fluent Design System の実装として提供される UI コンポーネント群
もともと Office UI Fabric と呼ばれていた
React または Web Components 向けに提供
Office 向けと Microsoft Teams 向けのバージョンが存在する (ややこしい)
Slide 15
Slide 15 text
jQuery と React を比べてみる
Slide 16
Slide 16 text
アプリケーションの構造
jQuery React
HTML と JavaScript は別のファイルに書く
HTML の中に JavaScript を書く
JavaScript (JSX) の中に HTML を書く
HTML を JavaScript の変数として扱うことが
できる
HTML JS
HTML
JS
...
JSX
HTML
...
Slide 17
Slide 17 text
DOM の操作
jQuery React
CSS セレクターにより DOM を直接操作する 仮想的な DOM (インメモリのオブジェクト) か
ら React が差分検出処理をして実際の
DOM に同期する
実際の DOM は操作しない (useRef)
jQuery DOM JSX
仮想
DOM
DOM
差分検出
Slide 18
Slide 18 text
データ バインディング
jQuery React
そんなものはない😡
あるいは knockout.js
変数 (props や state) の値が変更されると
自動的に再レンダリングされる
$('#myinput').val('jQuery');
const [value, setValue] = useState();
useEffect(() => {
setValue('jQuery');
}, []);
return (
);
Slide 19
Slide 19 text
コンポーネントの利用
jQuery React
命令的 宣言的
$(function () {
$('#datepicker').datepicker();
});
import { DatePicker } from '@fluentui/react-
northstar';
ReactDOM.render(
,
document.getElementById('root')
);
Slide 20
Slide 20 text
React の基本
Slide 21
Slide 21 text
コンポーネント
任意の入力 (props) を受け取り UI 要素を返す再利用可能な部品
感覚的には WPF や UWP のコントロールに近い
コンポーネントが別のコンポーネントを呼び出すことで構造化することができる
クラス コンポーネントと関数コンポーネントがある
props は読み取り専用なので書き換えられない
親のコンポーネントで props の値が変更されると子のコンポーネントは再レンダリングされる
Slide 22
Slide 22 text
ライフサイクル
コンポーネントの内部の状態は state によって管理される
useState により state であることを宣言する
値を変更すると変更が伝播し必要に応じて再レンダリングが発生する
useEffect を使うことで state の変更を検知できる
Slide 23
Slide 23 text
コンテキスト
props のバケツ リレーを避けるための仕組み
グローバル変数的にあらゆるところから呼び出しができる
便利だが影響が大きいので多用は厳禁
Slide 24
Slide 24 text
カスタム フック
useEffect を含むビジネス ロジックをコンポーネントから切り離すための仕組み
これがないとコンポーネントが Fat になるので積極的に使うべき
タイマーや API の呼び出しをカスタム フックにまとめることが多い
Slide 25
Slide 25 text
テスト
Jest および React Testing Library により単体テストが可能
UI テスト
DOM が正しく生成されることを確認するためのテスト
イベントを発生させることも可能
スナップショット テスト
UI の変更を検知するためのテスト
Slide 26
Slide 26 text
文章じゃわからないので…
デモ
Slide 27
Slide 27 text
まとめ
Microsoft 365 開発の時流は JavaScript
その中でも React を使った開発がおすすめ
React コワクナイヨ
Slide 28
Slide 28 text
ご清聴ありがとうございました