Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

More Decks by Takashi Shinohara

Other Decks in Programming

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