コースID : OH-2017-201

SharePoint Framework 入門

SPFxのイメージ

SharePoint Framework(略称は、SPFx)はモダンUIに対応する新しい開発手法です。モダンUIでは従来、スクリプトエディタWebパーツや コンテンツ エディタWebパーツを使った手軽なJavaScriptベースの開発が行われてきましたが、この難点はサイト管理者が 把握できないスクリプトが乱立することにあり、管理者を悩ませる原因となっていました。しかし、モダンUIではこうした Webパーツは利用できなくなり、その代り SharePoint Frameworkを使った開発のみがサポートされています。 SharePoint Framework は JavaScriptベースの開発フレームワークです。この仕組みの 導入により、管理者がスクリプトを把握できるようになり、アプリのライフサイクルも含めた管理が可能になりました。 SharePoint Frameworkを利用することで独自のWebパーツ開発が可能です。また、SharePoint Framework Extensions を利用することでコマンドバーのカスタマイズやページへのカスタムスクリプトの埋め込み、カスタムのフルページなども 開発できるようになりました。さらにSharePoint Frameworkでのカスタマイズは Microsoft Teams 内でも利用できます。

本研修では SharePoint Framework および SharePoint Framework Extensions の基本的な開発手法を体系立てて学習します。 SharePoint Framework はオープンソースを利用した開発が可能ですが、SharePoint に携わる開発エンジニアの多くが、こうした オープンソースの技術になじみがないのが現状です。そのため、関連技術として TypeScript や SaSS の基礎にも触れ、 網羅的に開発方法を学習していきます。なお、コードエディタとしては Visual Studio Code を用います。

研修内容

弊社で用意する Office 365 環境を利用し実機演習も行います。

  1. SharePoint Framework の概要
    • SharePoint の開発環境の変遷
    • SharePoint Framework の概要
    • Visual Studio Code (VSCode)
    • Node.jsとnpm
    • Gulp (Gulp.js)
    • Yeoman
    • React
    • [参考]Angular
    • Office UI Fabric
  2. SharePoint Framework の基礎
    • SharePoint Framework のバージョン
    • 開発環境の準備
    • SharePoint Developer Community (SharePoint PnP)
  3. TypeScript の基礎
    • TypeScript の概要
    • Tsconfig.json
    • Visual Studio Code の利用
    • 変数
    • データ型
    • 型アサーション
    • 関数
    • クラス
    • インタフェース
    • モジュール
  4. Sassの基礎
    • Sassの概要
    • ネスト
    • コメント
    • 変数
    • 演算
    • 制御構文
  5. クライアントサイドWebパーツ開発 (SPFx)
    • 基本的なWebパーツを構築する
    • HelloWorld Webパーツ プロジェクト内のを読み解く
    • Webパーツの構成
    • メンテナンス モード
    • SharePoint サイト情報を取得する
    • SharePoint リストに対して CRUD 処理を行う
    • jQueryを利用する
    • Webパーツを展開する
    • SharePoint アセットを展開する
    • SPFx のバージョンの変遷と新機能
  6. SharePoint Framework Extensions
    • SharePoint Framework Extensions の概要
    • プレース ホルダー
    • フィールドのカスタマイズ
    • カスタム コマンド メニュー
    • SharePoint PnP からのサンプルコードの紹介

2019年2月に目次を更新しました。 ※新機能の登場などにより、内容の一部は予告なく変更することもあります。あらかじめご了承ください。

コース情報
対象者
  • SharePointサイトのカスタマイズや開発を行う方
  • JavaScriptによるコーディングができる方 (C#等のオブジェクト指向の言語の経験者が望ましい)
前提条件
対象製品
Microsoft 365
実施日数と時間
2日 (9:30 - 17:00)
提供形態
リモート講義 + ハンズオン(リモート開催) 
オープンコース
定員 : 6名様 | 参加費 : 140,000円 (税別 1名様当たり ※テキスト代含)