Moon.jsの使用を開始する

今日は、インターフェースを開発するための次のJavaScriptライブラリについて説明します。そのようなライブラリがますます頻繁に現れるという感覚があります。この記事では、Moon.jsライブラリを見て、作業を開始するために知っておく必要のある機能を明らかにします。特に、新しいMoon.jsプロジェクトの作成方法、インターフェイス要素の作成方法、イベントの処理方法について説明します。このチュートリアルでは、Moon.jsを使用して独自のアプリケーションを開発できるはずです。

Moon.jsライブラリ

Moon.jsは、高速で機能的なインターフェイスを開発するための最小限のJavaScriptライブラリです。サイズが比較的小さいため、かなりコンパクトなアプリケーションを作成できます。ライブラリは非常に高性能です



Moon.jsは、インターフェイス設計にコンポーネントベースのアプローチを採用しています。テンプレートは、コンポーネントの作成に使用されます。このライブラリはVue.jsと非常によく似ています。

Moon.jsの強み

• Moon.jsはコンパクトなサイズです（縮小および圧縮すると約2 KBになります）。これは、ReactやAngularなどの他のライブラリやフレームワークのサイズよりも小さいです。
• このライブラリは、高速なレンダリングインターフェイスが特徴です。
• Moon.jsは、機能開発手法に基づくライブラリです。それを使用する場合、いわゆる「ドライバー」に基づいたインターフェース設計へのアプローチが使用されます。

仕事の始まり

Moon.jsライブラリは、2つの方法でプロジェクトに含めることができます。1つ目は、NPMからインストールすることです。2つ目は、使用する予定のページに直接接続することです。



ライブラリのNPMバージョンを使用する場合は、最初にパッケージmoon-cli、コマンドラインツールをインストールする必要があります。

$ npm i moon-cli -g

この例では、このツールはグローバルにインストールされており、任意のディレクトリから呼び出すことができます。



Moon.jsに基づいてプロジェクトを作成するには、次のコマンドを実行できます。

$ moon create moon-prj

このコマンドは、フォルダーに新しいプロジェクトを作成しますmoon-prj。プロジェクトの作成が完了すると、将来のアプリケーションの基盤を自由に使用できるようになります。



Moon.jsを使用するための2番目のオプションは、Moon.jsを使用する予定のページに接続することです。ライブラリには、moon-browser接続先のページでその機能を直接使用できるモジュールがあります。



したがって、ライブラリをページに接続するには、次の2つのタグをページに含める必要があります。

<script src="https://unpkg.com/moon"></script>
<script src="https://unpkg.com/moon-browser"></script>

ご覧のとおり、対応するスクリプトはunpkgCDNからロードされます。最初のタグはメインライブラリをインポートします。2番目はライブラリmoon-browserです。彼女は、Moon.jsテンプレートをコンパイルし、ブラウザーでの表示に適した形式に変換する責任があります。



ここで、ページでMoon.js構文を使用するには<script>、属性をtypeとして設定することを忘れずに、タグにそれらを含める必要がありますtext/moon。

<!--      -->
<script src="./main-script.js" type="text/moon"></script>
<!--    ,    -->
<script type="text/moon">
    ...
</script>

Moon.jsアプリケーションをページに接続する

Moon.jsは、単一ページアプリケーションの作成に使用される他のライブラリやフレームワークと同様に、特定のページ要素に接続します。通常、要素はMoon.jsアプリケーションのコンテナの役割を果たします<div>。

<div id="root"></div>

Moon.jsアプリケーションのルート要素である同様の要素はindex.html、プロジェクトへのエントリポイントであるファイルのコードに配置されます。



ドライバーは、Moon.jsアプリケーションをこの要素に接続するために使用されますview（以下では、ドライバーについて詳しく説明します）。

Moon.use({
    view: Moon.view.driver("#root")
})

この構成は、アプリケーションを識別子を持つ要素に接続する必要があることをライブラリに通知しますroot。必要に応じて、DOMを操作するために設計されたブラウザAPIを使用して、ライブラリに同様の要素を指定できます。

Moon.use({
    view: Moon.view.driver(document.getElementById("root"))
})

次に、Moon.jsでデータ操作がどのように編成されているか、およびこのライブラリを使用してインターフェイス要素を作成する方法について説明します。

インターフェイス要素を記述するための構文

Moon.jsインターフェースを説明するために、この問題を解決するために特別に開発されたMoon View Language（MVL）プログラミング言語が使用されます。JSXに似ています。この言語は、要素を記述し、それらの関係をカスタマイズするために使用されます。次に例を示します。

<script type="text/moon">
    function aView(data) {
        return (
            <div>Hi from Moon</div>
        )
    }
</script>

要素のレンダリングを担当するMoon.jsのこの部分が、<div>HTMLに似た構文構造を使用していることは簡単にわかります。ただし、これらの構造はJavaScriptコードで使用されます。Moon.jsはそのような構成を通常のJavaScriptにコンパイルするため、ブラウザーはそのようなJavaScriptコードを実行できませんが、必須ではありません。

データの操作

Moon.jsは、ドライバーの概念を使用して、要素の視覚的表現を制御し、データを操作します。ここでは、データを操作できるようにするドライバーを見ていきます。次のセクションでは、インターフェイス要素を操作するためのドライバーについて説明します。



データドライバは、アプリケーションデータを保存し、必要な場所でデータを使用できるようにする役割を果たします。つまり、このドライバーはアプリケーションのグローバル状態を格納します。



APIを使用して、Moon.jsアプリケーションの初期データを設定できますMoon.use。

Moon.use({
    data: Moon.data.driver
})

対応する関数から状態を返すことにより、状態に新しいデータを書き込むことができます。

Moon.run(({ data }) => {
    console.log(data) // undefined
    return {
        data: "Nnamdi"
    }
})

APIMoon.runは、アプリケーションの起動を担当します。このAPIに渡されるコールバックは、グローバルデータへの参照を引数として受け取りますdata。この関数を呼び出した時点でdataはまだ何もないので、console.logこの例のコマンドはを出力しますundefined。値が。の



プロパティdataを持つオブジェクトをコールバックから返しますNnamdi。このオブジェクトは、アプリケーションの新しい状態を表し、そのデータは、を呼び出す他の関数で使用できますdata。



Moon.jsでデータを操作するためのメカニズムを調べました。それでは、インターフェース要素の操作について詳しく説明しましょう。

インターフェイス要素の操作

Moon.jsには、view要素を作成してDOMにマウントするためのドライバーがあります。



以下で繰り返されるコードスニペットをすでに調べました。ここでは、<div>ベースのMoon.js要素が要素に接続されています。

Moon.use({
    view: Moon.view.driver("#root")
})

これは、要素がマウントされる場所です。関数は、古い要素を置き換えることができる要素を返すことができるようになりました。それらはview、対応するデータが書き込まれるプロパティを含むオブジェクトの形式で表すことができます。ライブラリは、view関数によって返されたオブジェクトからプロパティ値を取得し、識別子が要素に接続されている要素に書き込みますroot。



Moon.jsは、仮想DOMの概念と、古いインターフェイスバージョンと新しいインターフェイスバージョンを比較するための強力なアルゴリズムを使用しています。これにより、ライブラリはDOMをいつ更新するか、およびDOMのどの部分を更新する必要があるかを決定できます。

function handleClick() {
    return {};
}
Moon.run(() => ({
    view: <button @click=handleClick>Click Me!</button>
}));

ここで渡さMoon.runれるコールバックは、ボタンをDOMに出力しています。これは、関数がプロパティを持つオブジェクトを返すために発生しますview。このプロパティに割り当てられた値はDOMに入ります。



ボタンには、click関数で表されるイベントハンドラーがありますhandleClick。この関数は空のオブジェクトを返し、それを呼び出してもDOMは変更されません。

要素の作成

Moon.jsは、インターフェイス要素を作成するためのヘルパー関数の大規模なセットを開発者に提供します。その結果、Moon.jsインターフェース記述言語ではなく、対応する関数を使用して要素を作成できることがわかりました。

const { div, text, node, p } = Moon.view.m

Moon.jsは、作成する要素の名前と名前が一致する関数をエクスポートします。したがって、この関数をdiv使用すると、アイテムを作成できます<div>。この関数textはテキストノードを作成します。この関数をnode使用すると、カスタム要素を作成できます。この関数pは要素を作成します<p>。ご覧のとおり、これらの関数の名前はその目的を明確に示しています。



要素を作成しましょう<div>：

const Div = div({});

プロパティを持つオブジェクトを対応する関数に渡すことにより、要素に属性を割り当てることができます。

const Div = div({
    class: "DivClass"
});

ここでは、値を書き込む必要がある<div>属性の要素について説明しました。 テキスト要素を作成する方法は次のとおりです。classDivClass

const Text = text({ data: "A text node" });

data関数textに渡されるオブジェクト のプロパティには、要素のテキストが含まれています。



カスタム要素を作成しましょう：

const CustomEl = node("custom-el");

この要素に任意の属性を割り当てるには、次のようにします。

CustomEl({ "attr": "attr-value"})

開発

シンボルを使用する構成を使用して、イベントハンドラーを要素にアタッチできます@。

function handleClick() {
    return {};
}
Moon.run(() => ({
    view: <button @click=handleClick>Click Me!</button>
}));

その結果、テキスト付きのボタンがページClick Meに表示され、クリックすると関数が呼び出されhandleClickます。

コンポーネント

Moon.jsでは、関数はコンポーネントです。これは、インターフェイス要素の説明で機能について言及できることを意味します。関数が返すものは要素に含まれます。



次のような関数があるとします。

function aView({ data }) {
    return <div>A View</div>
}

この関数は、aViewレンダリング可能な要素を返します。

Moon.run(() => {
    view: <div><aView /></div>
})

この例では、関数名が要素名として使用されています。このコードを実行した結果、関数が返すものがタグに配置されることがわかりました<div>。これらすべてがDOMにある場合、次のようなマークアップがあります。

<div>
    <div>A View</div>
</div>

Moon.jsに基づくアプリケーションの開発

今お話ししたすべてをまとめるために、Moon.jsで簡単なTODOアプリケーションを作成しましょう。ここでは、Moon.jsの開発者によって作成された対応する例を使用します。



新しいライブラリとフレームワークを習得する際には、彼らの助けを借りて小さなアプリケーションを作成することをお勧めします。これにより、学習をスピードアップし、学習したツールの機能を理解するのに役立ちます。最初はそれらの基礎について話しますが、時間が経つにつれて、より複雑なメカニズムの理解が得られます。



このアプリケーションのページは次のようになります。





アプリケーション



ページこのページには、タイトル、フィールド、ボタン、およびTo Doリストがあり、フィールドに説明を入力してボタンをクリックすると更新できます。



ファイルを作成することから始めましょうindex.html。ここでは、Moon.jsをページに直接接続します。

<html>
<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/moon"></script>
<script src="https://unpkg.com/moon-browser"></script>
<!--  ,    -->
<script type="text/moon">
    function viewTodos({data, view}) {
        return (
            <div>
                <input type="text" value=data.todo @input=updateTodo/>
                <button @click=createTodo>Create</button>
                <ul children=(data.todos.map(todo =>
                    <li>{todo}</li>
                ))/>
            </div>
        )
    }
    function updateTodo({ data, view }) {
        const dataNew = { ...data, todo: view.target.value };
        return {
            data: dataNew,
            view: <viewTodos data=dataNew/>
        }
    }
    function createTodo({ data }) {
        const dataNew = {
            todo: "",
            todos: [...data.todos, data.todo]
        };
        return {
            data: dataNew,
            view: <viewTodos data=dataNew/>
        }
    }
    <!--   data  view -->
    Moon.use({
        data: Moon.data.driver,
        view: Moon.view.driver("#root")
    })
    <!--   -->
    Moon.run(() => {
        data: [],
        view: <viewTodos data=[]>
    })
</script>
</html>

この機能viewTodosは、新しいケースに関する情報を入力し、それらをリストに表示するために必要な項目を表示します。その引数は、dataとview。



この関数createTodoは新しいケースを作成し、dataそれを返すオブジェクトのプロパティに返します。



この関数updateTodoは、新しいケースをアプリケーションの状態に書き込みます。



イベントハンドラに注意して@clickと@input、その関数ですviewTodos。@input適切なフィールドにケースを説明するテキストを入力すると、イベントがトリガーされます。このイベントが処理されると、関数が呼び出されupdateTodoます。引数viewこの関数では、発生したイベントを表します。これを使用して、DOMにアクセスし、フィールドに入力されたデータを取得します。次に、このデータはプロパティとして状態に入りますtodo。ボタンをクリックすると、



イベント@clickが呼び出されます。新しいやることリストを記録します。この関数は、この問題を解決するために使用されますcreateTodo。この関数は、状態プロパティにアクセスしtodoて新しいデータをプロパティに書き込みますtodos。その後、view返されたオブジェクトのプロパティで<viewTodos>、対応する関数によって表される要素を返します。この要素にはdata、値が書き込まれdataNewます。



これviewTodosにより、DOMが再レンダリングおよび更新されます。ページに表示されるやることリストに新しいタスクが追加されます。



このアプリをブラウザで実行して、試してみてください。

結果

Moon.jsの基本について説明しました。つまり、NPMからインストールしてページに直接接続することでライブラリを使用できるということを話しました。次に、ライブラリの内部メカニズムについて説明しました。データの操作、イベントの処理、コンポーネントの開発です。



Moon.jsは素晴らしいライブラリのようです。そして、他の利点については言わなくても、コンパクトなサイズなので気に入っています。



Moon.jsを使用したことがありますか？