2021/08/31に、ブロックチェーンの技術普及を目的として、NEMTUS公式テックブログを公開しました。
第一弾の記事では、symbol-sdkをAngularプロジェクトで使用する際に最初に遭遇するであろう問題の解決方法や、symbol-sdkが積極的に使用しているrxjs、そのrxjsをフレームワーク自体で積極的に利用しやすい仕組みが整ったAngularの実践的なチュートリアルを解説しました。

Zenn公式でもピックアップ頂き、NEMTUSとしても非常にうれしい結果となりました。
⛓ ピックアップ ✨
Symbol x Angular その1 Angularでsymbol-sdkを使うための環境構築
by @nemtusofficialhttps://t.co/6G8dyaeQ62— Zenn公式 (@zenn_dev) September 1, 2021
今回は、この記事の中ではあまり触れられなかった、記事作成に至った背景や、今後のNEMTUSの取組、コミュニティの皆様へのご協力のお願い等を説明します。
背景
Symbolブロックチェーンでは、REST APIやWebSocketを通じて、極めて柔軟にブロックチェーンにデータを刻んだり、ブロックチェーンからデータを読み取ったりすることが可能です。
さらに、それら多くの機能は、APIを呼び出す箇所の処理を細かく手動で実装せずとも利用可能となるようにSDK(symbol-sdk)が提供されています。
現代のWeb開発では、REST APIやWebSocketを通じてWebアプリに表示するデータを読み込んだり、必要なデータを書き込みしたりする処理については、Angular, Vue, React等のSPA(Single Page Application)フレームワークを用いて実装することが多くなってきています。
symbol-sdkをそれらのフレームワークで利用するための手順や、実際にそれらのフレームワークでsymbol-sdkを利用しているサンプルコードがあると、より多くの開発者にとって、Symbolブロックチェーンの活用方法をイメージしてもらいやすくなるのではないかと考え、記事を執筆しました。
第一弾 Angular解説記事公開について
第一弾として、Angular, Vue, Reactのいずれのフレームワークを扱うかを考えた際に、symbol-sdkの特徴と、それぞれの特徴を改めて考えてみました。
まず、symbol-sdkには以下のような特徴があります。
symbol-sdk
TypeScriptによる型のサポート
SymbolではAPIを通じてブロックチェーンに柔軟にデータを刻んだり、ブロックチェーンからデータを読み込むことが可能ですが、裏を返すと、様々なパターンのトランザクションがあり、アプリ開発者が、それぞれのトランザクションに適合したデータを扱えるよう実装する必要があります。
その作業はそれなりに手間ではあるのですが、SDKがそれらの様々なパターンの型を網羅してくれているので、SDKが網羅してくれている型をそのまま利用することで、効率よく、多様なパターンの実装を行うことが可能となります。
rxjsによる非同期処理の実装
symbol-sdkでは非同期な通信処理がrxjsで扱われています。
一般的なJavaScript, TypeScriptの世界で、非同期な通信処理ではPromise, Thenやasync, await等の一回限りの非同期な通信処理を使用することが多いのですが、symbol-sdkではより柔軟に非同期な通信処理を扱うことができるrxjsが使用されています。
symbol-sdkはこのように、「TypeScriptによる型のサポート」「rxjsによる非同期処理の実装」という点に特徴があります。
その一方、Angular, Vue, Reactには、(記事作成者の個人的な所感として、)それぞれ以下のような所感を感じており、TypeScript, rxjsの利用が前提となっているAngularが、symbol-sdkと相性が良いのではないかと考えました。
(記事作成者が本業でAngularを日常的に用いていることからも、)第一弾の解説記事として、Angularを選択しました。
Angular
TypeScript, rxjsの利用が前提となり、それらの習得のための学習コストが高めという印象があります。
しかし、いったんそれらを習得することができると、大規模なプロジェクトでも、一貫性のある堅牢で安定した構造を構築しやすく、Angular自体のバージョンアップにも長期的に安定的に追従しやすいという特徴があると思います。
Vue
非常にわかりやすいSPAフレームワークで、学習コストは最も低いと思います。
しかし、わかりやすい反面、「プロジェクト全体の構造として好ましくないような実装でも動かせてしまう」といった状況が発生しやすく、プロジェクト全体として構造を適切に保つためには、結局のところ一定以上のスキルレベルや、技術的な意味でのメンバー間の意思の統一等が必要な印象があります。
また、現在ちょうど、JavaScriptからTypeScriptへの移行や、バージョン2.x系列から3.x系列への移行等の移り変わりのタイミングであると感じていて、状況によって様々なパターンが存在し、局面によっては、意思決定や技術選定における選定眼が求められる印象もあります。
React
SPAフレームワークを利用するために必要となる特別な知識が最も少ないフレームワークで、JavaScriptの延長線上で理解しやすいフレームワークだと感じます。
そして、React関連のエコシステムは非常に選択肢が多く、それだけでなく最前線の新しい課題解決にもスピーディーに様々な方法が日々新たにどんどん生まれている印象があります。
さらに業界内の案件比率等は、事実上React一強状態になりつつあると感じています。
しかし、エコシステムの多様性の裏返しで、技術選定やプロジェクトとしての統一的な構造の維持といった点には、多様なエコシステムの全体像を適切に把握し、状況に応じてそれらの中から適切な技術を選定して維持できる技術力が求められる印象があります。
今後のNEMTUSの取組について
以上のような経緯で、まずはテックブログ第一弾として、Symbol x Angularという切り口で、symbol-sdkをAngularのプロジェクトのデフォルト設定で導入しようとしたときに発生する問題と、それに対する解決策や、rxjsやAngularの特徴等を体感できるチュートリアル的な内容を含む記事を作成することにしました。
今後は、Angular以外のVue, React等についても、Symbolと組み合わせて使うイメージがわきやすいような解説記事を公開していきたいと考えていますし、その他にも様々な技術情報を発信していきたいと考えています。
寄稿やサンプルアプリの開発にご興味のある方へ
Vueに関しては、NEMTUS内部メンバーで、記事作成やサンプルアプリの作成等を検討中ですが、Reactに関しては、記事作成やサンプルアプリ作成に今のところ目途がついておりません。
もしコミュニティの方々の中で、サンプルアプリの作成や記事の寄稿にご興味をお持ちの方がいらっしゃいましたら、お気軽にNEMTUSのtwitterや、GitHubレポジトリにIssueやPull Request作成くださいますと幸いです。
また、既に公開中の、Symbol x Angularのサンプルアプリについても、何かご意見や修正したい点等あれば、GitHubレポジトリにお気軽にIssueやPull Request作成くださいますと幸いです。
NEMTUSとしても、皆様とともに、様々な情報を発信していきたいと考えていますので、今後とも引き続きよろしくお願いします。