Microsoft 365 開発をはじめる人のための React 超入門 / Super introduction to react for those starting Microsoft 365 development

.NET ラボ勉強会 2021 年 6 月 (https://dotnetlab.connpass.com/event/214208) に登壇したときのスライドです。

Transcript

1. Microsoft 365 開発をはじめる人のための
   React 超入門
   .NET ラボ 勉強会 2021 年 6 月
   2021/6/26
   Microsoft MVP for Office Development 篠原 敬志 (@karamem0)
   

   View Slide

2. Japan M365 Dev User Group にご参加ください
   Facebook グループ
   https://www.facebook.com/groups/jpm365dev
   connpass
   https://jpm365dev.connpass.com
   

   View Slide

3. このセッションのゴール
   モダンな Microsoft 365 開発 に乗り遅れた をこれからはじめる方に、React をはじめるべき理由
   と、超基本的な React の仕組みについて理解します。
   フロントエンドなんて
   自分には関係ないよね
   JavaScript?
   jQuery しかわからん
   

   View Slide

4. モダンな Microsoft 365 開発
   

   View Slide

5. Microsoft 365 開発のスコープ
   Microsoft Graph SharePoint Framework Microsoft Teams
   Office Add-in Microsoft ID Platform Adaptive Cards
   

   View Slide

6. "モダン開発" とは
   レガシー
   一方向
   密結合
   同期的
   SOAP
   XML
   オンプレミス
   シングル プラットフォーム
   シングル デバイス
   手動テスト
   ウォーターフォール
   モダン
   双方向
   疎結合
   非同期的
   REST
   JSON
   クラウド
   マルチ プラットフォーム
   マルチ デバイス
   自動テスト
   アジャイル
   

   View Slide

7. Microsoft 365 開発のモダン化 (SharePoint)
   ファーム
   ソリューション
   サーバー サイド
   ASP.NET Webフォーム
   SSOM
   オンプレミス
   SharePoint
   アドイン
   クライアント サイド
   ASPX + JavaScript
   JSOM
   オンプレミス/クラウド
   SharePoint
   Framework
   クライアント サイド
   HTML5 + TypeScript
   REST API
   オンプレミス/クラウド
   

   View Slide

8. Microsoft 365 開発のモダン化 (Office)
   VBA
   ファイル形式
   Visual Basic
   オンプレミス
   VSTO
   インストール形式
   .NET Framework
   オンプレミス
   Office アドイン
   インストール形式
   HTML5 + TypeScript
   オンプレミス/クラウド
   Office スクリプト
   ファイル形式
   TypeScript
   クラウド
   

   View Slide

9. Microsoft 365 開発のトレンド
   TypeScript
   AltJS のデファクト スタンダード
   マイクロソフトが開発
   静的型付けが可能
   npm
   Node.js に含まれる JavaScript のパッケージ マネージャー
   サーバーサイド/クライアントサイドに関係なく使われる
   SPA
   シングル ページ アプリケーション
   動的に HTML (DOM) を書き換えることでユーザー体験を向上させる
   

   View Slide

10. モダンな JavaScript フレームワーク
    

    View Slide

11. JavaScript フレームワークのトレンド (すべての国)
    https://trends.google.co.jp/trends/explore?date=2014-06-19%202021-06-18&q=%2Fm%2F012l1vxv,%2Fg%2F11c6w0ddw9,%2Fg%2F11c0vmgx5d,%2Fm%2F0268gyp
    

    View Slide

12. 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
    

    View Slide

13. Why React? (※個人の感想です)
    利用者が多い
    最近は特に人気が出てきている
    比較的シンプル
    Angular は全部入っているので逆にちょっと重い
    安定性
    Facebook とコミュニティによって開発されている
    ネイティブへの対応
    React を習得すれば React Native で Windows アプリも作れるようになる
    習得の容易さ
    XAML 開発者であればとっつきやすい
    

    View Slide

14. Fluent UI
    Fluent Design System の実装として提供される UI コンポーネント群
    もともと Office UI Fabric と呼ばれていた
    React または Web Components 向けに提供
    Office 向けと Microsoft Teams 向けのバージョンが存在する (ややこしい)
    

    View Slide

15. jQuery と React を比べてみる
    

    View Slide

16. アプリケーションの構造
    jQuery React
    HTML と JavaScript は別のファイルに書く
    HTML の中に JavaScript を書く
    JavaScript (JSX) の中に HTML を書く
    HTML を JavaScript の変数として扱うことが
    できる
    HTML JS
    HTML
    JS
    <br/>...<br/>
    JSX
    HTML
    
    ...
    
    

    View Slide

17. DOM の操作
    jQuery React
    CSS セレクターにより DOM を直接操作する 仮想的な DOM (インメモリのオブジェクト) か
    ら React が差分検出処理をして実際の
    DOM に同期する
    実際の DOM は操作しない (useRef)
    jQuery DOM JSX
    仮想
    DOM
    DOM
    差分検出
    

    View Slide

18. データ バインディング
    jQuery React
    そんなものはない😡
    あるいは knockout.js
    変数 (props や state) の値が変更されると
    自動的に再レンダリングされる
    $('#myinput').val('jQuery');
    
    const [value, setValue] = useState();
    useEffect(() => {
    setValue('jQuery');
    }, []);
    return (
    
    );
    

    View Slide

19. コンポーネントの利用
    jQuery React
    命令的 宣言的
    
    
    <br/>$(function () {<br/>$('#datepicker').datepicker();<br/>});<br/>
    
    import { DatePicker } from '@fluentui/react-
    northstar';
    ReactDOM.render(
    ,
    document.getElementById('root')
    );
    

    View Slide

20. React の基本
    

    View Slide

21. コンポーネント
    任意の入力 (props) を受け取り UI 要素を返す再利用可能な部品
    感覚的には WPF や UWP のコントロールに近い
    コンポーネントが別のコンポーネントを呼び出すことで構造化することができる
    クラス コンポーネントと関数コンポーネントがある
    props は読み取り専用なので書き換えられない
    親のコンポーネントで props の値が変更されると子のコンポーネントは再レンダリングされる
    

    View Slide

22. ライフサイクル
    コンポーネントの内部の状態は state によって管理される
    useState により state であることを宣言する
    値を変更すると変更が伝播し必要に応じて再レンダリングが発生する
    useEffect を使うことで state の変更を検知できる
    

    View Slide

23. コンテキスト
    props のバケツ リレーを避けるための仕組み
    グローバル変数的にあらゆるところから呼び出しができる
    便利だが影響が大きいので多用は厳禁
    

    View Slide

24. カスタム フック
    useEffect を含むビジネス ロジックをコンポーネントから切り離すための仕組み
    これがないとコンポーネントが Fat になるので積極的に使うべき
    タイマーや API の呼び出しをカスタム フックにまとめることが多い
    

    View Slide

25. テスト
    Jest および React Testing Library により単体テストが可能
    UI テスト
    DOM が正しく生成されることを確認するためのテスト
    イベントを発生させることも可能
    スナップショット テスト
    UI の変更を検知するためのテスト
    

    View Slide

26. 文章じゃわからないので…
    デモ
    

    View Slide

27. まとめ
    Microsoft 365 開発の時流は JavaScript
    その中でも React を使った開発がおすすめ
    React コワクナイヨ
    

    View Slide

28. ご清聴ありがとうございました
    

    View Slide