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

SharePoint Framework の実践的な開発における 10 のヒント / 10 tips for practical development of Sharepoint Framework

SharePoint Framework の実践的な開発における 10 のヒント / 10 tips for practical development of Sharepoint Framework

Microsoft 365 Virtual Marathon (http://www.m365virtualmarathon.com) で登壇したときのスライドです。

9cdd446fb259ec93e52d4388f60197f8?s=128

Takashi Shinohara

May 28, 2020
Tweet

Transcript

  1. MICROSOFT 365 Virtual MARATHON May 27 & 28, 2020 36

    hours / 2 days MICROSOFT 365 VIRTUAL MARATHON SharePoint Framework の実践的な開発における 10 のヒント 篠原 敬志 (Takashi Shinohara) Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  2. MICROSOFT 365 Virtual MARATHON May 27 & 28, 2020 36

    hours / 2 days Mark Your Calendars : March 23-25, 2021 MGM Grand Resort Las Vegas, Nevada, USA M365Conf.com #M365CONF The SharePoint Conference is now The Microsoft 365 Collaboration Conference Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  3. THANK YOU TO ALL OUR GENEROUS SPONSORS

  4. 自己紹介 ▪ 篠原 敬志 (Takashi Shinohara) ▪ アバナード株式会社 シニアコンサルタント ▪

    Microsoft MVP for Office Development (2018-) ▪ Twitter: @karamem0 ▪ Facebook: t.shinohara.56 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  5. ▪ ベンダーブースやセッションに参加し、ビデオを観よう ▪ 答えを送って、抽選会にエントリーしよう ▪ 抽選で当たるには、少なくとも 5 問正解する必要があります (米国、APAC、EMEA ごとにそれぞれ

    1 つ当たります) 抽選会へ参加しよう! 抽選で OCULUS QUEST ALL IN ONE! (3名様) が当たる! https://bit.ly/m365raffle
  6. 次のチャリティー救済基金への寄付をご検討ください : UNITED WAY: HTTPS://GIVE.UWKC.ORG/M365VM INTERNATIONAL MEDICAL CORPS: HTTPS://BIT.LY/MEDICALCORPSFUND スポンサーからの寄付金の

    10% は地域社会の救済支援に使われます 詳細は INFO@M365VIRTUALMARATHON.COM までお問合せください
  7. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ いくつかのプロジェクトで SharePoint Framework (SPFx) 開発の現場を技術支援してきました。 そこで得た経験をこれから SPFx 開発に携わる人に役立てることができればと考えています。 ▪ プログラミングに関する話はあまり出てきません。 開発者よりもマネージャーやアーキテクトに向けた内容になります。 セッションについて Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  8. 本題に入る前に ▪ SPFx について簡単におさらい Brought to you by: The Global

    Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  9. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ 2016 年 8 月に開発者プレビュー ▪ 2017 年 2 月に一般提供 (GA) ▪ 2020 年 5 月時点の最新版は 1.10 SPFx の歴史 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  10. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ SharePoint のクラウド化やモダン化に対応するための新しい開発方法 ▪ 現在のユーザーのコンテキストで動作する JavaScript コード ▪ 最新の Web テクノロジを使ったクライアント側での開発 ▪ 高速化された読み込みとレンダリング ▪ REST API によるリソースへのアクセス SPFx の特長 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  11. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    SPFx SharePoint アドイン 開発言語 TypeScript ASP.NET 表示方法 ページにコードを埋め込み iFrame による埋め込み 表示速度 速い 遅い データ アクセス REST API JSOM 開発ツール Visual Studio Code Visual Studio SPFx と SharePoint アドインの比較 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  12. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ Web パーツ ▪ アプリケーション カスタマイザー ▪ フィールド カスタマイザー ▪ リスト ビュー コマンド セット SPFx でサポートされる機能 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  13. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ ワークフロー ▪ イベント レシーバー ▪ アプリケーション ページ SPFx でサポートされない機能 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  14. アジェンダ Brought to you by: The Global Microsoft Community &

    M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  15. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ ヒント 1: SPFx で開発するメリットを明確化する ▪ ヒント 2: SPFx を採用するかどうかを決定する ▪ ヒント 3: SPFx の JavaScript フレームワークを選択する ▪ ヒント 4: SPFx の開発チームを構成する ▪ ヒント 5: SPFx の開発環境を準備する アジェンダ ▪ ヒント 6: SPFx の権限の昇格に注意する ▪ ヒント 7: SPFx を外部システムと連携する ▪ ヒント 8: SPFx の表示方法を拡張する ▪ ヒント 9: SPFx の開発を CI/CD で効率化する ▪ ヒント 10: SPFx のトラブルに対応する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  16. ▪ SPFx で開発するメリットを明確化する ヒント 1: Brought to you by: The

    Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  17. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ SPFx は SharePoint のプラットフォーム上で動作します。 ▪ SharePoint 上で動作するということは通常のアプリケーション開発よりもインフラやセキュリ ティを考慮しなくてよいということになります。 それはつまりリソースを "やるべきこと" に集中させることに繋がります。 プラットフォームとしての SharePoint Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  18. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ さまざまなデータ列を定義することができるリスト ▪ 階層的にファイルを格納できるドキュメント ライブラリ ▪ Azure AD をベースとしたセキュアな認証 ▪ 細かい制御が可能な権限管理 ▪ 高度な検索 SharePoint が提供する機能 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  19. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ 開発が進むにつれて "SharePoint を使わなければよかった" と後悔することはよくあります。 ▪ 通常のアプリケーション開発ではなぜ駄目なのかを考えましょう。 SharePoint 上でアプリケーションを動作させなければならない理由を明らかにしましょう。 SPFx で開発するメリットを明確化する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  20. ▪ SPFx を採用するかどうかを決定する ヒント 2: Brought to you by: The

    Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  21. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ モダン化された SharePoint のカスタマイズとしては以下の 2 種類の方法があります。 ▪ SPFx の Web パーツ開発 ▪ Power Apps のカスタム フォームまたは Web パーツでの埋め込み ▪ SPFx 開発が常に最適解とは限りません。 それぞれの方法における特性を理解して適切な方法を選択する必要があります。 SharePoint のカスタマイズ方法 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  22. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ メリット ▪ SharePoint のモダン UI と統合された美しい UI を使用できる ▪ SharePoint の機能を完全にサポートする ▪ 追加のライセンス費用が発生しない ▪ デメリット ▪ 開発コスト (初期コストや運用コストを含め) がかかる ▪ 開発するのに専門の知識が必要となる SPFx のメリットとデメリット Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  23. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ メリット ▪ 開発コストがかからない ▪ 専門知識が不要なため誰でも開発できる ▪ デメリット ▪ SharePoint に埋め込むため UI の統一感がなくなる ▪ SharePoint のすべての機能が使えるわけではない ▪ 追加のライセンス費用が発生する Power Apps のメリットとデメリット Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  24. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ SPFx は "開発" です。 開発には (自社開発にせよ委託開発にせよ) 大きなコストがかかります。 ▪ 実現しようとしているその機能は Power Apps で実現できませんか? SPFx ではないとできない理由があるかどうかを考えましょう。 SPFx を採用するかどうかを決定する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  25. ▪ SPFx の JavaScript フレームワークを選択する ヒント 3: Brought to you

    by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  26. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ SPFx は開発言語として TypeScript を使用します。 ▪ TypeScript を使った開発では JavaScript フレームワークを採用することで開発の生産性を格段に 上げることができます。 ▪ SPFx ではプロジェクトを作成するときに JavaScript フレームワークを選択する必要があります。 "どのフレームワークを選択するか" はプロジェクトを始める上で最初に決めなければなりません。 SPFx の開発言語とフレームワーク Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  27. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ 公式テンプレート (@microsoft/gererator-sharepoint) ▪ React ▪ Knockout.js ▪ コミュニティ ベースのテンプレート (@pnp/spfx) ▪ Vue.js ▪ Handlebars ▪ Angular Elements ▪ Aurelia Power Apps のメリットとデメリット Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  28. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ 基本的には公式にサポートされていて安定性が高い React を選択します。 Fluent UI や PnP SPFx Controls といった UI ライブラリを活用することで生産性も上がります。 ▪ @pnp/spfx を使う場合は十分に事前検証をしましょう。 意図しない不具合が発生する可能性があります。 JavaScript フレームワークを選択する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  29. ▪ SPFx の開発チームを構成する ヒント 4: Brought to you by: The

    Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  30. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ SPFx は "開発" です。 一般的に開発はチームで行います。 チームで開発するためにはメンバーとなる要員を確保する必要があります。 ▪ SPFx 開発はこれまでの SharePoint 開発と比べて使用するテクノロジーが大きく異なります。 これまでの SharePoint 開発の経験者を集めてもうまくいくとは限りません。 SPFx 開発のチーム ビルディング Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  31. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ チーム メンバーは SharePoint の知識があることよりもフロントエンドの知識があることのほう が重要です。 ▪ HTML や TypeScript などの開発言語の知識 ▪ npm や gulp などの開発ツールの知識 ▪ JavaScript フレームワークの知識 ▪ ただしチーム リーダーには SharePoint の知識が必要です。 SPFx 開発に必要となるスキル Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  32. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ もちろん理想的なチームをはじめから作ることはできません。 むしろ SPFx 開発未経験のメンバーだけでプロジェクトを始めることがほとんどです。 ▪ プロジェクトの早い段階から SharePoint およびフロントエンド技術の専門家をそれぞれプロジェ クトに参加させるようにします。 ナレッジをチームに共有して開発がスムーズに進められるようにしましょう。 開発チームを構成する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  33. ▪ SPFx の開発環境を準備する ヒント 5: Brought to you by: The

    Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  34. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ 必要となるソフトウェアはすべて無償で入手できます。 ▪ Node.js (現在は v10.x を推奨) ▪ Visual Studio Code (他のテキスト エディタでも可) ▪ Windows 10 ではなく Mac OS X や Linux でも開発することができます。 SPFx の開発環境 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  35. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ Self-Hosted Workbench ▪ localhost でホストする簡易的な Workbench ▪ SharePoint-Hosted Workbench ▪ SharePoint でホストする Workbench ▪ REST API 呼び出しを実行することができる ▪ コードは localhost で動くので複数の人が同じ環境で開発できる SPFx の Workbench Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  36. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ Office 365 開発者プログラムから改名 ▪ 開発向けの Microsoft 365 E5 の 25 ユーザー ライセンスが無償で提供されるプログラム ▪ 90 日間で更新だが更新している限りは永続的に使用できる Microsoft 365 開発者プログラム Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  37. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ SPFx では複数の人が同じ実行環境で開発作業をすることができます。 同じ環境を共有できるということは開発する上で非常に大きなメリットがあります。 ▪ 開発者ごとに異なる実行環境を提供する場合は環境の違いによる問題が発生しないように注意し ましょう。 開発環境を準備する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  38. ▪ SPFx の権限の昇格に注意する ヒント 6: Brought to you by: The

    Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  39. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ SPFx はユーザーのコンテキストで動作します。 そのためユーザーの権限の範囲を超える操作はエラーになります。 ▪ SPFx にはこれまでの SharePoint 開発にあったような "権限の昇格" をすることはできません。 ユーザーに対して適切な権限を付与することが基本的な対応方法になります。 SPFx でのユーザーの権限 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  40. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ 最も簡単な方法は Azure App Service または Azure Functions で特権アカウントで動作する処理を 実装し Web API として提供することです。 ▪ 特権アカウントで動作させるためにはいくつかの方法があります。 ▪ サービス アカウントの利用 ▪ アプリケーションのアクセス許可の利用 ▪ いずれの方法もメリットとデメリットがあり慎重に検討する必要があります。 SPFx での権限の昇格の代替案 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  41. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ サイト コレクションの管理者または SharePoint 管理者の権限を持つアカウントを作成します。 アカウントのユーザーとパスワードでログインします。 ▪ 実装が簡単ですがセキュリティ上の懸念があります。 また多要素認証や定期的なパスワードの変更が要求される場合には使用できません。 サービス アカウントの利用 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  42. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ Azure AD に登録したアプリケーションにアプリケーションのアクセス許可を付与します。 証明書でログインします。 ▪ 実装が複雑ですがセキュリティ上は安全です。 特定のサイト コレクションにのみ許可を与えるということはできません。 アプリケーションのアクセス許可の利用 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  43. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ ユーザーに与える権限をきちんと設計しましょう。 場合によってはカスタムの権限を作成することを検討しましょう。 ▪ ユーザーに対してそれ以上の権限を与えることは脆弱性を生むことになりかねません。 組織によってはポリシーで禁止されている可能性もあります。 十分に検討した上で採用しましょう。 権限の昇格に注意する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  44. ▪ SPFx を外部システムと連携する ヒント 7: Brought to you by: The

    Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  45. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ SPFx は SharePoint REST API のほかに外部 API を呼び出すための機能を提供しています。 ▪ Microsoft Graph (MSGraphClient) ▪ Azure AD でセキュリティ保護された API (AadHttpClient) ▪ OAuth は SPFx で実装されるため開発者は考慮する必要がありません。 SPFx の外部 API のサポート Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  46. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    サービス 機能 ユーザーとグループ ユーザー、グループ ID およびアクセス管理 ID およびアクセス管理 生産性 予定表、ファイル、メール、メモ、個人用連絡先、ブックとグラフ グループ作業 サイトとリスト、タスクとプラン、チームワーク ユーザーと職場のインテリジェンス 複数のユーザー、プロファイル、ドキュメントの分析情報、分析 デバイスの管理 クラウド印刷、デバイスとアプリの企業管理 セキュリティ セキュリティ統合 クロスデバイス エクスペリエンス クロスデバイス エクスペリエンス ユーザー通知 ユーザー通知 利用状況レポート レポート 教育 教育 ビジネス アプリケーション 顧客の予約、会計 Microsoft Graph のサービス Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  47. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ マニフェスト ファイルに使用するアクセス許可の種類を宣言します。 ▪ アクセス許可はテナント レベルで管理されます。 ▪ アクセス許可の承認には SharePoint 管理者の権限が必要になります。 外部 API へのアクセス許可の仕組み Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  48. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ マニフェスト ファイルに分離された Web パーツであることを宣言します。 これにより Web パーツに固有の Azure AD アプリケーションが作成されます。 ▪ アクセス許可は Web パーツ単位で管理されます。 そのため他の Web パーツからの意図しない Web API の実行を防ぐことができます。 分離された Web パーツ Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  49. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ Microsoft Graph との連携は簡単です。 さまざまなサービスが統合されたエンドポイントである Microsoft Graph を使えば SPFx のできる ことが格段に広くなります。 ▪ Web パーツと連携するカスタムの Web API を作成する場合はセキュリティを向上させるため分 離された Web パーツにしましょう。 外部システムと連携する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  50. ▪ SPFx の表示方法を拡張する ヒント 8: Brought to you by: The

    Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  51. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ Web パーツの表示はサイト ページの設定で切り替えることができます。 ▪ Article ▪ Home ▪ SingleWebPartAppPage Web パーツの表示方法 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  52. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ マニフェスト ファイルに Single Part App Pages をサポートすることを宣言します。 ページの種類を SingleWebPartAppPage にすることで単一の Web パーツのみをサポートするペー ジを作成することができます。 Single Part App Pages Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  53. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ Article または Home では複数の Web パーツを段組みで表現できます。 Web パーツ同士を接続してデータの交換を行うことができます。 https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/dynamic-data 動的データによる Web パーツの接続 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  54. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ マニフェスト ファイルに Teams タブをサポートすることを宣言します。 ▪ テナントのアプリ カタログ サイトにデプロイし Teams と同期することで Web パーツを Teams タブとして使用することができるようになります。 ▪ Teams のチームには Microsoft 365 グループのチーム サイトが紐づきます。 SPFx ではこのリソースを使用することができます。 Teams タブへの Web パーツの表示 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  55. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ "作るもの" の目的によって表示方法を検討しましょう。 ▪ Single Part App Pages は Web パーツの没入感を向上させます。 SharePoint をベースとしたシステム開発では非常に役立ちます。 ▪ Teams はコラボレーションのハブです。 Teams タブ開発ではユーザーのコラボレーションを加速させることができます。 SPFx の表示方法を拡張する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  56. ▪ SPFx の開発を CI/CD で効率化する ヒント 9: Brought to you

    by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  57. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ SPFx でのソリューションのビルドおよび展開の自動化はぜひとも検討しておきたい課題です。 自動化することで開発者の余計な手間をなくすことができ開発者は本来の作業に集中できます。 ▪ SPFx では Azure DevOps を使用してソリューションをビルドおよび展開する方法が紹介されてい ます。 https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/toolchain/implement-ci-cd-with-azure-devops SPFx における CI/CD Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  58. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ ビルドやデプロイという反復的な作業から脱却できる ▪ 常に最新のビルドによる動作を確認できる ▪ コードに対しての品質が保証される ▪ 顧客のフィードバックを早く受け取ることで改善を加速させる CI/CD によるメリット Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  59. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ 一般的にソフトウェア開発において CI/CD を導入することは必須といえます。 SPFx 開発も例外ではありません。 ▪ Azure DevOps を使用する場合はジョブの実行時間について注意が必要です。 SPFx のビルドには時間がかかるため Free プランでは実行時間を使い切ってしまう可能性があり ます。 SPFx の開発を CI/CD で効率化する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  60. ▪ SPFx のトラブルに対応する ヒント 10: Brought to you by: The

    Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  61. ▪ SPFx 開発で発生しうるトラブルは以下のように分類できます。 ▪ SharePoint に起因するトラブル ▪ SPFx に起因するトラブル SPFx

    開発で発生するトラブル Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  62. ▪ SharePoint に起因するトラブルは SharePoint の仕様や制限によるものがほとんどです。 ▪ 例としては REST API の

    5000 件問題があります。 複数のフィルター条件の指定の順番によってエラーになることもあります。 リストのアイテムを 5000 件以下にするか検索を使うことで回避できます。 SharePoint に起因するトラブル Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  63. ▪ SPFx に起因するトラブルは原因を究明することが難しいものがほとんどです。 ▪ 例として SPFx はロード時に SPLoaderError.loadComponentError を発生させることがあります。 これは存在しないファイルを

    require したことや import の指定が間違っていることが原因です。 しかしエラー メッセージから判断することは困難です。 SPFx に起因するトラブル Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  64. ▪ パフォーマンス テストは早めに実施しましょう。 特にリスト アイテムが 5000 件を超えるのかどうかは見積もりしておくようにしましょう。 ▪ SPFx のエラーで解決できない場合は社内外のサポートを得られるようにします。

    GitHub の issue や Tech Community も活用しましょう。 マイクロソフトのサポートを得る場合はプレミア サポートが必要になります。 SPFx のトラブルに対応する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  65. まとめ Brought to you by: The Global Microsoft Community &

    M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  66. May 27 & 28, 2020 Takashi Shinohara | JP #M365VM

    ▪ SPFx は新しく進化し続ける技術のためナレッジがまだ十分ではありません。 とはいえ実際に SPFx を使った事例は増えてきているというのが実感です。 ▪ 10 のヒントとして実際に SPFx 開発を始めるために考えなければならないことを詰め込みました。 これからの SPFx 開発にご活用いただけると幸いです。 まとめ Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
  67. MICROSOFT 365 Virtual MARATHON May 27 & 28, 2020 36

    hours / 2 days ご参加いただきありがとうございました! ご質問はありますか? Speaker feedback https://bit.ly/M365VMSpeakerFeedback Event feedback https://bit.ly/M365VMFeedback