MakeCodeで拡張機能を作ってみよう

更新日：2026-05-25

MakeCodeで拡張機能を作ってみます。

MakeCodeで拡張機能を作るためには、GitHubのアカウントが必要になりますが、アカウントの作成に関しては省略し、既に作成済みということで話を進めます。

MakeCodeを開、新しいプロジェクトを作成します。

作成する時は、コードのオプションで必ずJavaScriptが含まれていることを確認した後に作成ボタンを押してください。

ブロックコーディング用のエディタが表示されましたら、画面中央下にありますGitHubのボタンをクリックします。

画面の指示に従い、GitHub上でリポジトリと呼ばれるプログラムや設定ファイルを一まとめにして保存しておくフォルダのようなものになります。

今回はpxt-my-first-extensionという名称にして話を進めます。

リポジトリを作成しましたら、自動でエディタの画面に戻りまして、画面中央下のGitHubのボタンにチェックが入ったことを確認します。

---

拡張機能作りを始めます。

最初ブロックとずっとブロックを削除し、

のような感じで関数を一つ作成します。

関数ができましたら、

画面中央上にありますエディタの切り替えボタンでJavaScriptに切り替えます。

このような画面が表示されましたら、下記のようにコードを書き換えます。

function hello () {
    return "hello microbit!"
}

を

//% color="#000000" icon="\uf1e6" block="初めての拡張機能"
namespace myFirstExtension {

    //% block="hello microbit!"
    export function hello (): string {
        return "hello microbit!"
    }
}

詳しい説明は一旦置いときまして、このコードを他のプロジェクトで使用できるようにします。

画面中央下にありますGitHubのボタンをクリックして、

変更をコミットしてプッシュのボタンを押します。

このボタンを押した後に、画面をスクロールして、

拡張機能関連の項目の拡張機能のテストのボタンをクリックしてみますと、新しいプロジェクトが作成され、

先程作成しましたhelloブロックが追加され使用できるようになっていました。

---

コードの解説になります。

コードはTypeScriptの記法で書いていきます。

TypeScript: JavaScript With Syntax For Types.

//% color="#000000" icon="\uf1e6" block="初めての拡張機能"
namespace myFirstExtension {

    //% block="hello microbit!"
    export function hello (): string {
        return "hello microbit!"
    }
}

で、

namespace myFirstExtension {...}

ですが、拡張機能として配布する時は必ず作成する必要がありまして、namespaceで指定した内容がMakeCodeにおけるメニューの一項目として扱われるようになります。

MakeCodeで使う時にわかりやすくするためにnamespaceの上の行に挿入しているコメントが重要になります。

//% color="#000000" icon="\uf1e6" block="初めての拡張機能"

ですが、colorはメニューを追加する時の文字の色や、項目内に設置される各ブロックの背景色になります。

iconはメニューに項目が追加される際の項目名の頭につくアイコンになりまして、Font Awesome(フォント・オーサム)のバージョン5の無料版から選ぶことになっているそうです。

Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome

各アイコンには f から始まる文字列(例：プラグであれば f1e6)を\uアイコンの文字列という形式で指定します。

blockはメニューに表示される項目名になります。

関数の方は

export function 関数名(引数と型): 返り値 {...}

の形式で書き直す必要があります。

functionの前にexportを追加することで、拡張機能のブロックとして配置されるようになります。

functionの前にexportを追加しなかった場合は、今回作成しましたnamespace(オブジェクト)内で使用する関数になります。