Flow Client Library (FCL)

[Previous << Clients](https://qiita.com/flowcadence/items/4d0e75b7f49d02f75445)
[Next >> FCL API Reference](https://qiita.com/flowcadence/items/82c4e2d91df09051b1de)

https://qiita.com/flowcadence/items/3073d69c6e9895e68b5a#reference-2020832ebee1810a325a

Flow Client Library (FCL) JS は、ユーザーのウォレットとFlowブロックチェーンとのやり取りに使用されるパッケージです。FCLを認証で使用する時、dappはユーザーとすべてのFCL対応ウォレットのサポートを、dappのソースコード変更やカスタム統合なしにできます。

これは、Flowブロックチェーンに接続するアプリケーションの開発を簡単かつ安全に行うために作成されました。これは、ウォレット・アプリケーション・ユーザー間の標準化された通信のパターンを定義しており、これによりあなたのdappでさまざまなアクションを実行することができます。FCLはまた、Flowブロックチェーンとやりとりするためのフル装備のSDKとユーティリティも提供しています。

FCLそれ自体はコンセプトや標準なのですが、FCL JSはFCLのJavaScript実装であり、ブラウザおよびサーバー環境の両方で使用できます。ウォレットプロバイダーと接続・通信に関するすべての機能はブラウザに限定されています。（補足: バックエンド環境ではウォレットプロバイダーとは接続しません）また私たちは、iOSのためのFCL Swift実装も用意しています。[@lmcmz](https://github.com/lmcmz)による[FCL Swift](https://github.com/zed-io/fcl-swift)を参照してください。

<h1>Getting Started</h1>

<h3>Requirements</h3>

* Node version `v12.0.0 or higher`.

<h3>Installation</h3>

FCL JS をアプリケーションで使用するには、**yarn** または **npm** を使用してインストールします。
```ruby
npm i -S @onflow/fcl
```
```ruby
yarn add @onflow/fcl
```
<b>Importing</b>
**ES6**
```ruby
import * as fcl from "@onflow/fcl";
```
**Node.js**
```ruby
const fcl = require("@onflow/fcl");
```
<h1>FCL for Dapps</h1>

**Wallet Interactions**

* *Wallet Discovery and Sign-up/Login* ： 簡単にユーザーをオンボード化。複数のウォレットをサポートする必要はありません。どの[FCL対応のウォレット](#current-wallet-providers)でもユーザー認証できます。
```ruby
/* in the browser */
import * as fcl from "@onflow/fcl"

fcl.config({
  /* Endpoint set to Testnet */
  "discovery.wallet": "https://fcl-discovery.onflow.org/testnet/authn",
})

fcl.authenticate()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3912821/94e82330-4ebc-2e5c-d69c-98dc0b5ec8d9.png)

* *スマートコントラクトとのやりとり* : ユーザーが選んだウォレット経由でトランザクションを承認できます。
* *ウォレットアドレス所有の証明* : ユーザーがデータを署名・検証できます。

[ウォレットとのやり取りについて、さらに詳しく学ぶ >](https://qiita.com/flowcadence/items/82c4e2d91df09051b1de#wallet-interactions%E3%82%B5%E3%82%A4%E3%83%B3%E3%82%A4%E3%83%B3%E3%82%B5%E3%82%A4%E3%83%B3)

**Blockchain Interactions**
* *Query the chain* : 任意の Cadence スクリプトをチェーンに送信し、デコードされた値を受け取ることができます。

```ruby
import * as fcl from "@onflow/fcl";

const result = await fcl.query({
  cadence: `
    access(all) fun main(a: Int, b: Int, addr: Address): Int {
      log(addr)
      return a + b
    }
  `,
  args: (arg, t) => [
    arg(7, t.Int), // a: Int
    arg(6, t.Int), // b: Int
    arg("0xba1132bc08f82fe2", t.Address), // addr: Address
  ],
});
console.log(result); // 13
```
* *Mutate the chain* : あなたの署名で任意のトランザクションを送信したり、ユーザーのウォレット経由でトランザクションを送信して、チェーン上の状態(state)変更を実行することができます。

```ruby
import * as fcl from "@onflow/fcl";
/* in the browser, FCL will automatically connect to the user's wallet to request signatures to run the transaction */
const txId = await fcl.mutate({
  cadence: `
    import Profile from 0xba1132bc08f82fe2
    
    transaction(name: String) {
      prepare(account: auth(BorrowValue) &Account) {
        account.storage.borrow<&{Profile.Owner}>(from: Profile.privatePath)!.setName(name)
      }
    }
  `,
  args: (arg, t) => [arg("myName", t.String)],
});
```
[チェーン上のやり取りについてさらに詳しく学ぶ >](https://qiita.com/flowcadence/items/82c4e2d91df09051b1de#on-chain-interactions%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B6%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3)

**ユーティリティー**
* Get account details from any Flow address
* Get the latest block
* Transaction status polling
* Event polling
* Custom authorization functions

[ユーティリティについてさらに詳しく学ぶ >](https://qiita.com/flowcadence/items/82c4e2d91df09051b1de#pre-built-interactions%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%83%8F%E3%83%B3%E3%83%89)

<h1>Next Steps</h1>

See the [Flow App Quick Start](https://developers.flow.com/build/getting-started/fcl-quickstart).

See the full [API Reference](https://qiita.com/flowcadence/items/82c4e2d91df09051b1de) for all FCL functionality.

Learn Flow's smart contract language to build any script or transactions: [Cadence](https://qiita.com/flowcadence/items/87147a26f1d2b89b46ca).

Explore all of Flow [docs and tools](https://qiita.com/flowcadence/items/b6acebdde2b9a6a417c3).

<h1 id="FCL-for-Wallet-Providers">FCL for Wallet Providers</h1>

Flowのウォレットプロバイダーは、さまざまな方法でユーザー・インタラクションおよびUIを構築することができる柔軟性を持ちます。

* Iframe、ポップアップ、タブ、またはエクステンションによるFront channel communication
* HTTPによるBack channel communication

FCLはcommunication channelに依存しないカストディアン型および非カストディアン型のウォレットを作成するように設定されています。これにより、ユーザーはアプリやブラウザ拡張機能をダウンロードすることなく、ウォレットプロバイダーとやりとりすることができます。

コミュニケーションチャンネルでは、事前定義されたFCLメッセージセットに応えることにより、要求された情報をdappに送ります。FlowでFCL対応のウォレットを実装するのは、FCLが要求する応答に適切なデータを返すだけでいいので簡単です。front-channel communicationのメソッドを使用する場合、FCLも一連のウォレットユーティリティを提供して、このプロセスを簡素化します。

<h3 id="Current-Wallet-Providers">Current Wallet Providers</h3>

* [Blocto](https://blocto.io/)
* [Ledger](https://www.ledger.com/) (limited transaction support)
* [Dapper Wallet](https://www.meetdapper.com/)
* [Lilico](https://lilico.app/)
* Flipper
* [NuFi](https://nu.fi/)

<h3>Wallet Discovery</h3>

ユーザーにオンチェーンの新しいウォレットを探してもらうのは難しいことです。これを解決するために、私たちはWallet Discoveryサービスを作りました。これはFCLに設定可能でFCL経由でアクセス可能な利用可能なすべてのFlowウォレットプロバイダーをユーザーに表示します。つまり、

* Dappsは、コードを変更することなく、FCL対応の全てのウォレットをサポートし、ユーザーに表示することができます。

* ユーザーは新しいウォレットにサインアップする必要がなく、認証および承認の処理を、FCLを使用するあらゆるdappに対して既存のウォレットで引き継いで行うことができます。

ディスカバリー機能はAPI経由で利用でき、追加設定なしであなた独自のUIにカスタマイズしたり、デフォルトのUIを使用したりすることができます。

<h3>Building a FCL compatible wallet</h3>

* Read the wallet guide to understand the implementation details.
* 概要については、[Flow Dev Wallet](https://github.com/onflow/fcl-dev-wallet)のアーキテクチャを確認してください。
* ノン・カストディアルウォレットを作成する場合は、[Account API](https://github.com/onflow/flow-account-api)とderivation pathとキー生成に関する[FLIP](https://github.com/onflow/flow/pull/727)をお読みください。

<h1>Support</h1>

* 問題を発見したり、機能をリクエストしたい ? [Add an issue](https://github.com/onflow/fcl-js/issues)しましょう。
* [フォーラム](https://forum.flow.com/c/developer-tools/flow-fcl/22)でコミュニティとFCLについて話し合ってください。
* [Discord](https://discord.com/invite/k6cZ7QC)のFlowコミュニティに参加して最新情報を入手し、チームと話してください。

*Last updated on **Nov 15, 2024** by **Chase Fleming***

翻訳元

https://developers.flow.com/tools/clients/fcl-js

***
<b>[Previous << Clients](https://qiita.com/flowcadence/items/4d0e75b7f49d02f75445)
</b>

[Flow blockchain / Cadence version1.0ドキュメント](https://qiita.com/flowcadence/items/3073d69c6e9895e68b5a) (Flow Client Library (FCL))

<b>[Next >> FCL API Reference](https://qiita.com/flowcadence/items/82c4e2d91df09051b1de)</b>