# はじめに

ボタンにアニメーションを付けるためにLottieを使用したのでどういうものかを纏めました。

# Lottieとは
オープンソースのアニメーションライブラリ。
JSONベースのアニメーションファイルで、使用すると静止画と同じようにアニメーションを使用することができる。

# アニメーションボタンの作成方法
## 準備
①アニメーションファイルを用意
　Lottie公式サイトで配布されている、使用したいアニメーションをダウンロードする。
　ダウンロード時にサイズ調整できるので予めサイズも調整しておくと後が楽。
　新規で作成する方法もあるが、今回は既存のハートアニメーショーンを使用したので割愛。
　サイズを後から調整する場合は、マイページから可能。

②アプリケーションにreact-lottieをインストールする
```yarn
yarn add react-lottie
```

## 実際の使用方法
アニメーションファイルを「Heart.json」とすると、下記のように使用できます。
```tax
import React from "react";
import Lottie from "react-lottie";
import animationData from "./Heart.json";

const ButtonComponent = () => {
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData
  };

  return (
      <button>
         <Lottie options={defaultOptions} height={250} width={250} />
      </button>
  );
};

export default ButtonComponent;
```


## Lottieで使用できるプロパティ例
- loop:ループ
- autoplay:自動再生
- animationData:アニメーションのデータファイル


# まとめ
アニメーションを埋め込むのはかなり難易度の高いものだと思い込んでいたのですが、簡単にアニメーションを設定できました。

# 参考
[Lottie公式サイト](https://lottiefiles.com/jp)
			

Lottieを使用したアニメーションボタン作成

# 最初に

![](https://kokosyna-post-bucket-prd.s3.ap-northeast-1.amazonaws.com/150d9da3-d1cb-4209-8dc2-91a33ca1aedf.webp)

フロントエンドでフローチャートやUMLに類する図形を描きたい時があります。
例えばデータの関連性を図として示して分かりやすくしたり、逆にデータ同士をどう紐づけるかをGUIで指定させたいといった状況です。

その際に便利な[React Flow](https://reactflow.dev/)を紹介します。
実際に私もこれを使用し、データを含めて事業戦略を検討できるWebアプリを作成していました。

React Flowはその名の通り、Reactを使用してフローチャートのようなノード、エッジを描画するライブラリです。
逆にユーザーが操作して、直感的にノードとノードを接続するということも可能です。
動作サンプルとしては[公式トップページ](https://reactflow.dev)に表示されているものが分かりやすいと思うのでそちらに譲ります。触って動かせます。

今回はこのライブラリについて、主にエンジニア視点で特徴をいくつか挙げていこうと思います。

# 特徴

### コンポーネント一つを置くだけで利用できる。

ただノードとエッジを描画するだけなら以下の記述で完了します。
(nodesとedgesに描画したいデータを入れる必要はある。)
一般的なコンポーネントと同様に<ReactFlow>コンポーネントを置くだけで済むので、利用も撤去も非常に簡単です。

```
<ReactFlow
  nodes={nodes}
  edges={edges}
>
</ReactFlow>
```

ミニマップや拡大縮小ボタンもコンポーネント化されているため、以下のように<ReactFlow>コンポーネント内に設置するだけでそれらの利用も可能です。

```
<ReactFlow>
  <MiniMap />
  <Controls />
</ReactFlow>
```

### エッジやノードのデータ表現が簡潔。

例えばシンプルなエッジやノードは以下の用になります。
しっかりと整理されておりデータの用途なども想像しやすいため、React Flow初心者でも非常に理解しやすくなっています。

```
nodes = {
  id: "n1", // ノードを特定するID
  position: { x: 0, y: 0 }, // ノードの表示位置
  data: { // ノードの内容について
    label: <>example</>, // 表示テキスト
  },
}

edge = {
    id: "e1", // エッジを特定するID
    source: "n1", // 始点ノード
    sourceHandle: "right", // 始点ノードのどのポイントに接続するか
    target: "n2", // 終点ノード
    targetHandle: "left", // 終点ノードのどのポイントに接続するか
  },
```

### カスタムノードによりフローチャート以外にも利用可能。

これはプログラミングとは少し別方向のメリットですが、ノードの形状やスタイル、接続点などは自由に編集可能なため応用範囲が広く、1つのライブラリを覚えるだけで複数種類のUIを作成できます。

カスタムノードも下記のようにJSXで自由にデザインでき、接続点などの設定も簡潔です。

```
custom = (
  <>
    <>{data.label}</>
    <Handle id="left" type="target" position={Position.Left} />
    <Handle id="top" type="source" position={Position.Top} />
  </>
)
```

ただ現時点の私では、始点にも終点にもできる接続点の設定の可否がわからないため、UMLのような図形を全て賄えるかは分かっていません…。
方法があればどなたか教えて頂けると幸いです。

### イベント等もしっかり用意されている。

もちろん、ノードやエッジの変化、パネルのクリックなど、想定されるイベントはきちんと用意されています。

```
<ReactFlow
  onNodesChange={f1}
  onEdgesChange={f2}
  onConnect={f3}
  onNodeDoubleClick={f5}
  onPaneClick={f6}
>
</ReactFlow>
```

### エッジの経路は自動描画。

ノードとノードの接続線をどういう経路の線で表現するかは自動で判断/描画してくれます。
逆に、エッジがここを通るように描画～ということが可能か、知見が少なくわかっていません。
ただこれはライブラリの目的/用途が違うケースだと思うので、意図通りに線を引きたいという要望であれば素直に基本的な図形描画ライブラリに任せる方が賢明でしょう。

# 最後に

求めるUIに対し、どのライブラリが適しているか検討するのは都度必要かと思います。
しかし逆に、機能的にはあれもこれも足りているという場面も出てくることでしょう。
その際はライブラリの扱いやすさ(簡潔さ、挙動の素直さ)なども加味してみては如何でしょうか。より開発がスムーズになることと思います。


React Flowのすすめ

# 要約

Reactのわかりやすい特徴には以下があります。

- プログラムの中でHTMLが書ける
- データが変わったら自動で表示し直してくれる
- 部品を使い回せる

# 注意事項

初心者に雰囲気を掴んで貰うための内容なので、正しくはない表現などが含まれます。
また、仮想DOMや差分レンダリングなどはもう一歩進んだ理解が必要になるため、省いています。

# Webサイトの基本

Webサイトは主に、以下の要素で構成されています。

- HTML
- CSS
- JavaScript
- 画像、動画ファイルなど

## HTMLとは

HTMLはテキストに対しタグ付けをするためのものです。
以下のような書き方(<〇〇>～</〇〇>)でタグを表し、ブラウザがそれを読み取ってくれます。

```
テキストのうち<強調>強調したい部分</強調>の見た目を変更できます。
```

[表示例]
テキストのうち**強調したい部分**の見た目を変更できます。

## CSSとは

CSSはブラウザでの表示の仕方を具体的に指定するためのものです。
HTMLのタグはあくまで印でしかないので、実際の表示の仕方をCSSで指定します。

```
強調 {
  太さ: 太い:
  打ち消し線: OFF;
}
```

[表示例]
テキストのうち**強調したい部分**の見た目を変更できます。

```
強調 {
  太さ: 普通:
  打ち消し線: ON;
}
```

[表示例]
テキストのうち~強調したい部分~の見た目を変更できます。

## JavaScriptとは

JavaScriptは動的な処理をするためのものです。
HTMLとCSSだけでもWebサイトは作れますが、固定の内容なので書類やポスターと変わりありません。
通販サイトや登録制サービスなど、状態で表示が変化したり、通信が必要な時にJavaScriptが必要です。
カートに入れるボタンでカート内容が更新されたり、購入ボタンで決済するような場面で使われます。

## 画像、動画ファイルについて

これらはおおよそ、単にその画像や動画を表示するために用意するものです。
特段Webサービスの機能には関わっていません。

# Reactの特徴

## プログラムの中でHTMLが書ける

従来の構成では、JavaScriptで表示を変更するためにHTMLを確認する必要がありました。
こういった方法で登録制サービスなどを作ることもできますが、
HTMLで変更予定の場所にタグを付け、ファイルを行ったり来たりして開発する必要がありました。

```:HTML
<変化させる所A>ログインボタン</変化させる所A>
<変化させる所B>プロフィール画像</変化させる所B>
```

```:JavaScript
もしログインしているなら {
  変化させる所Aのタグを取得し、
  それを非表示にする。
  変化させる所Bのタグを取得し、
  その人に応じたプロフィール画像を表示する。
} そうでなかったら {
  変化させる所Bのタグを取得し、
  それを非表示にする。
}
```

しかしReactはJavaScriptの中にHTMLを書けるため、一つのファイル内で以下のように書けます。
これならタグも必要無く、ファイルを行ったり来たりする必要もありません。

```:JavaScript
この内容を表示する (
  もしログインしているなら {
    <その人に応じたプロフィール画像 />
  } そうでないなら {
    <ログインボタン />
  }
)
```

## データが変わったら自動で表示し直してくれる

従来は以下のように、取得したデータを表示に反映する必要がありました。

```:HTML
カートに<変化させる所A></変化させる所A>点の商品が入っています。
```

```:JavaScript
カートの商品点数を取得する。
変化させる所Aのタグを取得し、
表示内容に商品点数を設定する。
```

しかしReactは変更を自動で検知してくれるため、以下のように書けます。
商品点数を取得して変更があると、自動的に表示内容が変わります。

```:JavaScript
カートの商品点数を取得する。

この内容を表示する (
  カートに<カートの商品点数 />点の商品が入っています。
)
```

## 部品を使い回せる

従来は複雑な作りのものを何回も使う際、以下のように全部書く必要がありました。
雛形を作る機能もありますが、JavaScriptでコピー時点から制御したりと、使いにくいものでした。

```:HTML
<枠線>
  <タイトル>HTMLについて</タイトル>
  <ボタン>記事を読む</ボタン>
  <記事のサムネイル画像 />
</枠線>
<枠線>
  <タイトル>CSSについて</タイトル>
  <ボタン>記事を読む</ボタン>
  <記事のサムネイル画像 />
</枠線>
<枠線>
  <タイトル>JavaScriptについて</タイトル>
  <ボタン>記事を読む</ボタン>
  <記事のサムネイル画像 />
</枠線>
```

しかしReactでは簡単に部品化し、使うことができるため、以下のように書けます。

```:JavaScript
記事部品(タイトル) (
  <枠線>
    <タイトル>タイトル</タイトル>
    <ボタン>記事を読む</ボタン>
    <記事のサムネイル画像 />
  </枠線>
)

この内容を表示する (
  <記事部品 タイトル=HTMLについて />
  <記事部品 タイトル=CSSについて />
  <記事部品 タイトル=JavaScriptについて />
)
```

# まとめ

ReactはこのようにWebサービスの開発を効率的で楽にしています。
多くのサービスで使われているのも頷ける便利さです。
他にVue.jsという、使い方の異なる便利なものもあり、どれを使うかは場面によるでしょう。

開発手法は日々進化し、どんどん新しいものが出てきます。
より良い開発ができるよう、最適な手法を模索してみましょう。

# 参考リンク

- [React 公式サイト](https://reactjs.org)
