Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Microsoft 365 開発をはじめる人のための React 超入門 / Super in...
Search
Takashi Shinohara
June 26, 2021
Programming
0
1.1k
Microsoft 365 開発をはじめる人のための React 超入門 / Super introduction to react for those starting Microsoft 365 development
.NET ラボ勉強会 2021 年 6 月 (
https://dotnetlab.connpass.com/event/214208
) に登壇したときのスライドです。
Takashi Shinohara
June 26, 2021
Tweet
Share
More Decks by Takashi Shinohara
See All by Takashi Shinohara
どっちの API SHOW?SharePoint 開発における SharePoint REST API Microsoft Graph API の違い / Which API show? Differences between Microsoft Graph API and SharePoint REST API
karamem0
0
230
Microsoft Ignite 2024 最新情報!Microsoft 365 Agents SDK 概要 / Microsoft Ignite 2024 latest news Microsoft 365 Agents SDK overview
karamem0
0
360
徹底解説!Microsoft 365 Copilot の拡張機能 / Complete guide to Microsoft 365 Copilot extensions
karamem0
1
3.6k
Microsoft Search の Graph コネクタ ハンズオン / Handson for Graph Connector of Microsoft Search
karamem0
0
95
いまだから「検索」を語ろう! SharePoint FAST Search から Microsoft Search セマンティックインデックスまで / Let's talk about search now
karamem0
3
1.4k
徹底解説!Power Platform 導入の成功事例から見る DX 推進のコツ / Tips for DX promotion from Power Platform case studies
karamem0
0
5.2k
どうする Power Pages?Web 開発者からみる Power Pages / How to deal with Power Pages
karamem0
0
1.3k
Fluent UI を理解する / Understanding Fluent UI
karamem0
0
840
Microsoft Teams の 会議アプリ開発のはじめかた / How to start Microsoft Teams app development
karamem0
0
3.7k
Other Decks in Programming
See All in Programming
スモールスタートで始めるためのLambda×モノリス(Lambdalith)
akihisaikeda
2
280
サービスクラスのありがたみを発見したときの思い出 #phpcon_odawara
77web
4
640
Bedrock×MCPで社内ブログ執筆文化を育てたい!
har1101
6
1k
小田原でみんなで一句詠みたいな #phpcon_odawara
stefafafan
0
330
AIコーディングワークフローの試行 〜AIエージェント×ワークフローでの自動化を目指して〜
rkaga
2
3.6k
新しいPHP拡張モジュールインストール方法「PHP Installer for Extensions (PIE)」を使ってみよう!
cocoeyes02
0
380
Develop Faster With FrankenPHP
dunglas
2
3.3k
Building a macOS screen saver with Kotlin (Android Makers 2025)
zsmb
1
150
ComposeでWebアプリを作る技術
tbsten
0
110
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
1.5k
Do Dumb Things
mitsuhiko
0
430
MCP調べてみました! / Exploring MCP
uhzz
2
2.3k
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
Statistics for Hackers
jakevdp
798
220k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Site-Speed That Sticks
csswizardry
5
490
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.1k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Gamification - CAS2011
davidbonilla
81
5.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
4 Signs Your Business is Dying
shpigford
183
22k
Transcript
Microsoft 365 開発をはじめる人のための React 超入門 .NET ラボ 勉強会 2021 年
6 月 2021/6/26 Microsoft MVP for Office Development 篠原 敬志 (@karamem0)
Japan M365 Dev User Group にご参加ください Facebook グループ https://www.facebook.com/groups/jpm365dev connpass
https://jpm365dev.connpass.com
このセッションのゴール モダンな Microsoft 365 開発 に乗り遅れた をこれからはじめる方に、React をはじめるべき理由 と、超基本的な React
の仕組みについて理解します。 フロントエンドなんて 自分には関係ないよね JavaScript? jQuery しかわからん
モダンな Microsoft 365 開発
Microsoft 365 開発のスコープ Microsoft Graph SharePoint Framework Microsoft Teams Office
Add-in Microsoft ID Platform Adaptive Cards
"モダン開発" とは レガシー 一方向 密結合 同期的 SOAP XML オンプレミス シングル
プラットフォーム シングル デバイス 手動テスト ウォーターフォール モダン 双方向 疎結合 非同期的 REST JSON クラウド マルチ プラットフォーム マルチ デバイス 自動テスト アジャイル
Microsoft 365 開発のモダン化 (SharePoint) ファーム ソリューション サーバー サイド ASP.NET Webフォーム
SSOM オンプレミス SharePoint アドイン クライアント サイド ASPX + JavaScript JSOM オンプレミス/クラウド SharePoint Framework クライアント サイド HTML5 + TypeScript REST API オンプレミス/クラウド
Microsoft 365 開発のモダン化 (Office) VBA ファイル形式 Visual Basic オンプレミス VSTO
インストール形式 .NET Framework オンプレミス Office アドイン インストール形式 HTML5 + TypeScript オンプレミス/クラウド Office スクリプト ファイル形式 TypeScript クラウド
Microsoft 365 開発のトレンド TypeScript AltJS のデファクト スタンダード マイクロソフトが開発 静的型付けが可能 npm
Node.js に含まれる JavaScript のパッケージ マネージャー サーバーサイド/クライアントサイドに関係なく使われる SPA シングル ページ アプリケーション 動的に HTML (DOM) を書き換えることでユーザー体験を向上させる
モダンな JavaScript フレームワーク
JavaScript フレームワークのトレンド (すべての国) https://trends.google.co.jp/trends/explore?date=2014-06-19%202021-06-18&q=%2Fm%2F012l1vxv,%2Fg%2F11c6w0ddw9,%2Fg%2F11c0vmgx5d,%2Fm%2F0268gyp
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
Why React? (※個人の感想です) 利用者が多い 最近は特に人気が出てきている 比較的シンプル Angular は全部入っているので逆にちょっと重い 安定性 Facebook
とコミュニティによって開発されている ネイティブへの対応 React を習得すれば React Native で Windows アプリも作れるようになる 習得の容易さ XAML 開発者であればとっつきやすい
Fluent UI Fluent Design System の実装として提供される UI コンポーネント群 もともと Office
UI Fabric と呼ばれていた React または Web Components 向けに提供 Office 向けと Microsoft Teams 向けのバージョンが存在する (ややこしい)
jQuery と React を比べてみる
アプリケーションの構造 jQuery React HTML と JavaScript は別のファイルに書く HTML の中に JavaScript
を書く JavaScript (JSX) の中に HTML を書く HTML を JavaScript の変数として扱うことが できる HTML JS HTML JS <script> ... </script> JSX HTML <div> ... </div>
DOM の操作 jQuery React CSS セレクターにより DOM を直接操作する 仮想的な DOM
(インメモリのオブジェクト) か ら React が差分検出処理をして実際の DOM に同期する 実際の DOM は操作しない (useRef) jQuery DOM JSX 仮想 DOM DOM 差分検出
データ バインディング jQuery React そんなものはない😡 あるいは knockout.js 変数 (props や
state) の値が変更されると 自動的に再レンダリングされる $('#myinput').val('jQuery'); <input id="myInput" type="text" value="" /> const [value, setValue] = useState<string>(); useEffect(() => { setValue('jQuery'); }, []); return ( <input type="text" value={value} /> );
コンポーネントの利用 jQuery React 命令的 宣言的 <script src="./jquery.min.js"></script> <script src="./jquery-ui.min.js"></script> <script>
$(function () { $('#datepicker').datepicker(); }); </script> <div id="datepicker"></div> import { DatePicker } from '@fluentui/react- northstar'; ReactDOM.render( <DatePicker />, document.getElementById('root') );
React の基本
コンポーネント 任意の入力 (props) を受け取り UI 要素を返す再利用可能な部品 感覚的には WPF や UWP
のコントロールに近い コンポーネントが別のコンポーネントを呼び出すことで構造化することができる クラス コンポーネントと関数コンポーネントがある props は読み取り専用なので書き換えられない 親のコンポーネントで props の値が変更されると子のコンポーネントは再レンダリングされる
ライフサイクル コンポーネントの内部の状態は state によって管理される useState により state であることを宣言する 値を変更すると変更が伝播し必要に応じて再レンダリングが発生する useEffect
を使うことで state の変更を検知できる
コンテキスト props のバケツ リレーを避けるための仕組み グローバル変数的にあらゆるところから呼び出しができる 便利だが影響が大きいので多用は厳禁
カスタム フック useEffect を含むビジネス ロジックをコンポーネントから切り離すための仕組み これがないとコンポーネントが Fat になるので積極的に使うべき タイマーや API
の呼び出しをカスタム フックにまとめることが多い
テスト Jest および React Testing Library により単体テストが可能 UI テスト DOM
が正しく生成されることを確認するためのテスト イベントを発生させることも可能 スナップショット テスト UI の変更を検知するためのテスト
文章じゃわからないので… デモ
まとめ Microsoft 365 開発の時流は JavaScript その中でも React を使った開発がおすすめ React コワクナイヨ
ご清聴ありがとうございました