SharePoint Framework の概要Overview of the SharePoint Framework

SharePoint Framework (SPFx) は、クライアント側の SharePoint の開発、SharePoint データとの容易な統合、およびオープンソースツーリングのサポートをすべてサポートするページと Web パーツ モデルです。SharePoint Framework では、優先開発環境内で最新の Web テクノロジとツールを使用し、利用初日から生産性の高い体験と、すばやい反応でモバイル対応のアプリを構築することができます。SharePoint Framework は、SharePoint のオンプレミスおよび SharePoint のオンライン用に機能します。SharePoint Framework は、SharePoint Online およびオンプレミス用 (SharePoint 2016 Feature Pack 2 および SharePoint 2019) にも機能します。The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open source tooling. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready from day one. The SharePoint Framework works for SharePoint Online and also for on-premises (SharePoint 2016 Feature Pack 2 and SharePoint 2019).

SharePoint Framework の主な機能は次のとおりです。Key features of the SharePoint Framework include the following:

  • ブラウザーの現在のユーザーと接続のコンテキストで起動します。It runs in the context of the current user and connection in the browser. カスタマイズ対象の iFrames はありません (JavaScript がページに直接埋め込まれています)。There are no iFrames for the customization (JavaScript is embedded directly to the page).
  • DOM の標準のページで、コントロールが表示されます。The controls are rendered in the normal page DOM.
  • コントロールは、もともと反応が早く簡単です。The controls are responsive and accessible by nature.
  • 開発者は、レンダリングに加え、ロードシリアル化逆シリアル化構成の変更などのライフ サイクルにアクセスすることができます。It enables the developer to access the lifecycle in addition to render, load, serialize and deserialize, configuration changes, and more.
  • これはフレームワークに依存していません。It is framework-agnostic. 任意の他の JavaScript フレームワーク (React、Handlebars、Knockout、Angular、その他) を使用できます。You can use any JavaScript framework that you like: React, Handlebars, Knockout, Angular, and more.
  • ツールチェーンは、npm、TypeScript、Yeoman、webpack、gulp などの一般的なオープン ソースのクライアント向け開発ツールに基づいています。The toolchain is based on common open source client development tools such as npm, TypeScript, Yeoman, webpack, and gulp.
  • パフォーマンスは信頼性が高いです。Performance is reliable.
  • エンド ユーザーは、セルフ サービスのチーム、グループ、または個人用サイトを含むすべてのサイトのテナント管理者 (またはその代理人) によって承認される SPFx のクライアント側のソリューションを使用できます。End users can use SPFx client-side solutions that are approved by the tenant administrators (or their delegates) on all sites, including self-service team, group, or personal sites.
  • クラシックとモダンの両方のページに SPFx Web パーツを追加できます。SPFx web parts can be added to both classic and modern pages.

スクリプト エディターの Web パーツ上で、ランタイム モデルは向上します。信頼性の高いクライアント API、SharePoint と Office 365 への認証を処理する HttpClient オブジェクト、コンテキスト情報、簡単なプロパティの定義と構成などが含まれます。The runtime model improves on the Script Editor web part. It includes a robust client API, an HttpClient object that handles authentication to SharePoint and Office 365, contextual information, easy property definition and configuration, and more.

主に C# を使用する場合は、クライアント側の JavaScript 開発についての学習がさらに必要です。If you work primarily with C#, you want to learn more about client-side JavaScript development. ただし、既存の JavaScript の知識の多くは SharePoint に関連しており、データ モデルが変更されていなければ完全に転用可能です。また、要件に応じて同じ REST サービスまたは JavaScript Object Model (JSOM) を使用します。Most of your existing JavaScript knowledge related to SharePoint, however, is completely transferable, as the data models have not changed, and you’ll use the same REST services or JavaScript Object Model (JSOM), depending on your requirements. C# 開発者の場合は、JavaScript の世界への切り替えに TypeScript が役立ちます。If you are a C# developer, TypeScript is a nice transition into the JavaScript world. IDE の選択は自由です。The choice of IDE is up to you. 多くの開発者は、クロスプラットフォーム IDE の Visual Studio コードを進んで使用します。Many developers like to use the cross-platform IDE Visual Studio Code. また、Sublime や ATOM のような製品も使用します。Many developers also use products like Sublime and ATOM. 自分に最適なものを使用してください。Use what works best for you.

SharePoint Framework を選択する理由Why the SharePoint Framework?

SharePoint は、2001 年にオンプレミス製品として立ち上げられました。時間が経つにつれて、大規模な開発者コミュニティが広がり、さまざまな方法で形成されるようになりました。開発者コミュニティの大部分は、Web パーツ、SharePoint 機能の XML など SharePoint の製品開発チームが使用する同じパターンとプラクティスに従っています。多くの機能が C# で記述され、DLL にコンパイルされ、オンプレミスのファームに展開されました。SharePoint was launched as an on-premises product in 2001. Over time, a large developer community has extended and shaped it in many ways. For the most part, the developer community followed the same patterns and practices that the SharePoint product development team used, including web parts, SharePoint feature XML, and more. Many features were written in C#, compiled to DLLs, and deployed to on-premises farms.

そのアーキテクチャは 1 つのエンタープライズのみの環境ではうまく機能しましたが、複数のテナントが並行して実行するクラウドにまで拡大しませんでした。その結果、クライアント側の JavaScript インジェクションと SharePoint のアドインという 2 つの代替モデルを導入しました。どちらのソリューションにも、長所と短所があります。That architecture worked well in environments with only one enterprise, but it didn’t scale to the cloud, where multiple tenants run side-by-side. As a result, we introduced two alternative models: client-side JavaScript injection, and SharePoint Add-ins. Both of these solutions have pros and cons.

JavaScript インジェクションJavaScript injection

SharePoint Online で最も人気のある Web パーツの 1 つは、スクリプト エディターです。JavaScript をスクリプト エディターの Web パーツへ貼り付け、ページにレンダリングするときに JavaScript を実行することができます。単純かつ基本的なものですが、効果的です。ページと同じブラウザーのコンテキストで実行し、同じ DOM にあるので、ページ上の他のコントロールと相互作用することができます。比較的高性能で、容易に使用できます。One of the most popular web parts in SharePoint Online is the Script Editor. You can paste JavaScript into the Script Editor web part and have that JavaScript execute when the page renders. It’s simple and rudimentary, but effective. It runs in the same browser context as the page, and is in the same DOM, so it can interact with other controls on the page. It is also relatively performant, and simple to use.

ただし、このアプローチにはいくつか欠点があります。There are a few downsides to this approach, however. まず、ソリューションをパッケージ化することができるので、エンド ユーザーはページ上にコントロールをドロップできるのですが、構成オプションを簡単に提供することはできません。First, while you can package your solution so that end users can drop the control onto the page, you can't easily provide configuration options. また、エンド ユーザーはページを編集し、スクリプトを修正できるので、Web パーツを壊してしまう可能性があります。Also, the end user can edit the page and modify the script, which can break the web part. 別の大きな問題は、スクリプト エディターの Web パーツが 「スクリプトを実行しても安全」 だとマークされていないことです。Another big problem is that the Script Editor web part is not marked as "Safe For Scripting". ほとんどのセルフ サービス サイト コレクション (個人用サイト、チーム サイト、グループ サイト) には、有効な 「NoScript」 と呼ばれる機能があります。Most self-service site collections (my-sites, team sites, group sites) have a feature known as "NoScript" enabled. 技術的には、ページの追加とカスタマイズ (ACP) アクセス許可の SharePoint 内での削除です。Technically, it is the removal of the Add/Customize Pages (ACP) permission in SharePoint. つまり、スクリプト エディター Web パーツがこれらのサイトで実行をブロックされるということです。This means that the Script Editor web part will be blocked from executing on these sites.

SharePoint アドイン モデルSharePoint Add-in model

NoScript のサイトで実行されているソリューションの現在のオプションは、アドイン/アプリケーション パート モデルです。この実装は、実際の経験が存在し、実行する iFrame を作成します。利点は、システムの外部にあり、現在の DOM と接続へのアクセス権を持たないため、IT ワーカーがより容易に信頼し、展開することができます。エンド ユーザーは、NoScript のサイト上のアドインをインストールすることができます。The current option for solutions that run in NoScript sites is the add-in/app-part model. This implementation creates an iFrame where the actual experience resides and executes. The advantage is that because it's external to the system and has no access to the current DOM/connection, it's easier for information workers to trust and deploy. End users can install add-ins on NoScript sites.

このアプローチにもいくつか欠点があります。There are some downsides to this approach as well. まず、それらは iFrame で実行されます。First, they run in an iFrame. iFrame は、別のページに新しい要求を必要とするため、スクリプト エディター Web パーツよりも遅くなります。iFrames are slower than the Script Editor web part, because it requires a new request to another page. ページは、認証と承認を経て、SharePoint のデータを取得する独自の呼び出しを行い、さまざまな JavaScript ライブラリの読み込みなどを行う必要があります。The page has to go through authentication and authorization, make its own calls to get SharePoint data, load various JavaScript libraries, and more. 例として、通常、スクリプト エディター Web パーツは読み込みとレンダリングに 100 ミリ秒かかりますが、アプリ パーツでは 2 秒以上かかる場合があります。A Script Editor web part might typically take, for example, 100 milliseconds to load and render, while an app part might take 2 seconds or more. さらに、iFrame の限界が応答性の高いデザインの作成、および CSS とテーマの継承を困難にしています。Additionally, the iFrame boundary makes it more difficult to create responsive designs and inherit CSS and theming information. iFrame にはより強力なセキュリティがあり、開発者自身 (自分のページは、ページ上の他者のコントロールでアクセスできません) とエンド ユーザー (コントロールには、Office 365 の接続へのアクセス権がありません) に役立ちます。iFrames do have stronger security, which can be useful for you (your page is inaccessible by other controls on the page) and for the end user (the control has no access to their connection to Office 365).

SharePoint FrameworkSharePoint Framework

従来、Web パーツはクラウド サーバーにインストールされている完全な信頼 C# アセンブリとして作成されました。ただし、現在の開発モデルの大部分は、SharePoint と Office 365 のバックエンド ワークロードに REST API の呼び出しを行うブラウザーで実行する JavaScript が関連します。C# アセンブリは、この状況では動作しません。新しい開発モデルが必要でした。SharePoint Framework は、SharePoint 開発における次の進化です。Historically, we created web parts as full trust C# assemblies that were installed on the cloud servers. However, current development models for the most part involve JavaScript running in a browser making REST API calls to the SharePoint and Office 365 back-end workloads. C# assemblies don’t work in this world. We needed a new development model. The SharePoint Framework is the next evolution in SharePoint development.

次の作業What's next?

SharePoint Framework Web パーツと拡張機能は現在、一般提供 (GA). されるようになりました。SharePoint Framework web parts and extensions have now reached General Availability (GA). お客様のフィードバックと体験に基づいて、引き続き更新および修正を行います。We continue to provide updates and refinements over time based on your feedback and experiences. 最初にプレビュー モードで立ち上げたその他の SharePoint フレームワーク機能については、API 名、フロー、その他の領域で、ときおり大きな変更が発生する可能性があります。For any additional SharePoint Framework capabilities that are first launched in preview mode, you might experience occasional breaking changes around API names, flows, and more. SharePoint フレームワークへの今後の更新は、下位互換性があるので、ソリューションは引き続き動作することができます。Future updates to the SharePoint Framework will be backward-compatible so that your solutions continue to work.

SharePoint Framework のライセンスSharePoint Framework License

SharePoint Framework のコンポーネントは、本 Microsoft 使用許諾契約書において、許可されています。The SharePoint Framework components are licensed under this Microsoft EULA.

質問Questions?

ご質問がある場合は、SharePoint StackExchange に投稿してください。ご質問やコメントに #spfx#spfx-webparts、また #spfx-webparts でタグ付けしてください。If you have any questions, post them on SharePoint StackExchange. Tag your questions and comments with #spfx, #spfx-webparts, and #spfx-tooling.

GitHub リポジトリ内のドキュメント、もしくは SharePoint Framework に関する問題やご質問、またはフィードバックも投稿することができます。You can also post issues, questions, or feedback about the docs or the SharePoint Framework in our GitHub repo.

関連項目See also