SharePoint Framework(以下SPFx)で独自アプリを作成するには、まず環境構築が必要になります。
環境構築と言うと難しく感じますが、必要なアプリをいくつかインストールしているだけなので、やってみると簡単です。
目次
SPFxの作成に必要なツール
SPFxを利用するために必要なツール一覧です。たくさんありますが、一つずつ試していきましょう。
- Node.js（v16系）
- Gulp
- Yeoman
- Yeoman SharePointジェネレーター（3の追加パックのようなもの）
ツールをインストールするために
前項で説明したツールをインストールするために、Visual Studio Code（以下VSCode）などのエディターを使います。Power Shellでも構いません。どちらもないようであればインストールしてください。
VSCodeのターミナルを起動する
ツールをインストールするために、VSCodeを起動して、ターミナルを開きます。
[ ターミナル ]＞[ 新しいターミナル ]
ターミナルが開けたら、ひとまずこのままにしておいてください。後程使用します。
Node.js（v16）をインストールする
まずは、Node.jsをインストールします。Node.jsはサイトからインストーラーをダウンロードできます。
⇒ https://nodejs.org/en/download/prebuilt-installer
Node.jsのWEBサイトです。SPFxに対応しているのはv16ですので、16系の一番新しいものを落としてきます。（2024年9月時点ではv16.20.2でした）
起動したインストーラーの画面です。英語ですが、基本は画面の通りにインストールすれば完了です。
Gulpをインストールする
次に、Gulpをインストールします。
コマンドを入力して実行
先程起動したVSCodeのターミナルに、以下のコマンドを入力します。
|
1 |
npm install gulp-cli --global |
開いたターミナルウィンドウに、コマンドという呪文のようなテキストを入力して実行します。テキストをコピーして、VSCodeのターミナル上で右クリックを押すと勝手にペーストされます。この状態でEnterを押せば実行されます。
少し待つと、インストール完了です。
Yeomanをインストールする
Yeomanをインストールします。
Gulpと同じように、VSCodeのターミナルにコマンドを入力して実行します。
コマンドを入力して実行
Yeomanをインストールするコマンドはこちらです。
|
1 |
npm install yo --global |
コマンドをターミナルにペーストして、Enterで実行します。
しばらくすると、インストールが完了します。
最後に、SharePointジェネレーターをインストールします。
|
1 |
npm install @microsoft/generator-sharepoint --global |
コマンドをターミナルにペーストして、Enterで実行します。
しばらくすると、インストールが完了します。
以上で、必要なツールのインストールが完了しました。
エラーが出てしまった時は
コマンドを実行した時に、赤い文字のエラーが出て、インストールが失敗してしまう時があります。そんな時はエラーメッセージをコピーしてChatGPTに聞いてみるのがおすすめです。エラーの多くはPCの環境に依存するため、エラーの内容を解消することが重要です。エラーメッセージをコピーするには、マウスドラッグで選択して、Ctrl+Cです。
以上で、環境構築が完了しました。
