# やりたいこと
reactで作ったWebアプリをコマンドラインからデプロイしたい。
# 環境
macOS Big Sur バージョン11.5.2
# 目次
### 1. Firebaseプロジェクトの設定
### 2. アプリの準備
### 3. アプリのデプロイ

# 1.Firebaseプロジェクトの設定
まず[Firebase](https://firebase.google.com/?hl=ja&gclid=Cj0KCQiA0p2QBhDvARIsAACSOOOyMgo6fWiQXMX50HJuCCBZt9LL1vPH-wsl9HfY2KNQwngCfLbkkY4aAkDeEALw_wcB&gclsrc=aw.ds)  でプロジェクトの作成を行います。
下記の画像の赤い四角で囲んだ「使ってみる」をクリックしてください。
![firebase_deploy1.png](https://res.cloudinary.com/ki-log/image/upload/v1644666546/firebase_deploy1_a9a8456912.png)
Googleアカウントにログインし、「プロジェクトを追加」をクリックします。  
次に、プロジェクト名を入力し「続行」をクリックします。  
Googleアナリティクスの設定は、「Default Account For Firebase」を選択し、「プロジェクトを作成」をクリックします。    
処理が終了したら、「続行」をクリックすると、ダッシュボードに遷移します。  
ダッシュボードに遷移したら、 下記の画像で赤の四角で示しているアイコンをクリックします。  
![firebase_dashboard.png](https://res.cloudinary.com/ki-log/image/upload/v1644667616/firebase_dashboard_7f0d08de89.png)

するとウェブアプリへのFirebaseの追加画面に遷移します。次に、ウェブアプリの名前を入力し、チェックマークにチェックをして「アプリを登録」をクリックします。  
![スクリーンショット 2022-02-12 21.09.31.png](https://res.cloudinary.com/ki-log/image/upload/v1644667860/2022_02_12_21_09_31_bbf5638728.png)
そして、「Firebase SDKの追加」、「Firebase CLIのインストール」と続くのですが、特に設定することもないので「次へ」を押してください。  
「Firebase Hostingへのデプロイ」では「コンソールに進む」を押してください。これでFirebaseのダッシュボードでの設定は終わりです。

# 2. アプリの準備
今回は、単純に下記のコマンドを入力し、reactのアプリケーションの雛形をデプロイします。
```
$ npx create-react-app test-app
$ cd test-app
$ yarn start
```
yarn startを実行し、http://localhost:3000/ にアクセすると、下記の画像のようなサイトが見られます。
これを、Firebaseでホスティングします。
![スクリーンショット 2022-02-12 21.27.23.png](https://res.cloudinary.com/ki-log/image/upload/v1644668922/2022_02_12_21_27_23_fa4a36e92b.png)


# 3. アプリのデプロイ
次に、コマンドラインで下記のコマンドを実行します。
```
$ yarn add global firebase-tools
もしくは
$ npm install -g firebase-toos
```
次に、「firebase login」を実行するとGoogleアカウントのログインページが開くので、使用するアカウントを選択。
```
$ firebase login
i  Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI usage and error reporting information? Yes
i  To change your data collection preference at any time, run `firebase logout` and log in again.

Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=978944836&redirect_uri=http%3A%2F%2Flocalhost%3A9005

Waiting for authentication...
```
ログインできたら、
```
$ yarn build
```
を実行し、buildファイルを作成します。  
次に
```
$ firebase init
```
を実行すると、下記のような選択肢が出てくる。

```
? Which Firebase CLI features do you want to set up for this folder? Press Space
 to select features, then Enter to confirm your choices. (Press <space> to selec
t, <a> to toggle all, <i> to invert selection)
❯◯ Database: Configure Firebase Realtime Database and deploy rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
 ◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features
 ◯ Remote Config: Get, deploy, and rollback configurations for Remote Config
```

今回は、Hostingするだけなので十字キーで「Hosting: Configure and deploy Firebase Hosting sites」まで矢印を持っていき、spaceキーを押して選択し、Enterを押す。
```
? Which Firebase CLI features do you want to set up for this folder? Press Space
 to select features, then Enter to confirm your choices.
 ◯ Database: Configure Firebase Realtime Database and deploy rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features
 ◯ Remote Config: Get, deploy, and rollback configurations for Remote Config
```
次に、下記のような選択肢が出てくる。1. Firebaseプロジェクトの設定ですでにプロジェクトを作成したので、「Use an existing project」でEnterを押す。すると先ほど作成したプロジェクト名が出てくるので、選択してEnterを押す。
```
? Please select an option: (Use arrow keys)
❯ Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project
```
次に下記のような質問がくるので、下記のように入力する。
```
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
✔  Wrote build/404.html
✔  Wrote build/index.html
```
これで設定は完了です。  
次にfirebase deployを実行させ、firebaseにアプリをデプロイします。
```
$ firebase deploy

=== Deploying to 'test-app-fa963'...

i  deploying hosting
i  hosting[test-app-fa963]: beginning deploy...
i  hosting[test-app-fa963]: found 7 files in public
✔  hosting[test-app-fa963]: file upload complete
i  hosting[test-app-fa963]: finalizing version...
✔  hosting[test-app-fa963]: version finalized
i  hosting[test-app-fa963]: releasing new version...
✔  hosting[test-app-fa963]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/test-app-fa963/overview
Hosting URL: https://test-app-fa963.web.app
```
Hosting URLに記されているURLにアクセスすると、下記のようにサイトにアクセスできるようになります。

 
![スクリーンショット 2022-02-12 21.27.23.png](https://res.cloudinary.com/ki-log/image/upload/v1644668922/2022_02_12_21_27_23_fa4a36e92b.png)

# おわりに
今回は、簡単にReactのアプリをfirebaseにデプロイしてみました。
アプリの内容を変更したい場合は、2. アプリの準備のコードを変更してみてください。
最後まで、読んでいただきありがとうございました。

簡単なreactアプリをコマンドラインからfirebaseへデプロイ

deploy react app to firebase

small_firebase_deploy.png

thumbnail_firebase_deploy.png

firebase_deploy.png

reactアプリをfirebaseにデプロイしてみた

# はじめに
アルバイトで複数人でRDBのテーブル設計をする機会があったのですが、複数人で同時にER図などの編集ができないかなと良い方法を探していたら、VSCodeの拡張機能に便利そうなのがあったので試してみました。
# 環境
 - macOS Big Sur バージョン11.5.2
 - Visual Studio Code バージョン: 1.64.1 (Universal)
# 使用技術
- Visual Studio Code
- Live Share
- Draw .io Integration

# Draw .io  Integrationの導入
1. VSCodeを立ち上げる
2. 拡張機能の検索窓に「Draw.io Integration」で検索して、インストールする。拡張機能は下記の画像の赤で囲んだ箇所からインストールできる。  
![drawio2.png](https://res.cloudinary.com/ki-log/image/upload/v1644794241/drawio2_bba7e9baf3.png)
3. VSCodeを立ち上げ直す。  
4. 拡張子が.drawioのファイルを新規作成するか、既存のファイルを開く。  



これで、VSCodeで.drawioのファイルの編集などができるようになります。

# Live Shareの導入
1. VSCodeを立ち上げる
2. 拡張機能の検索窓に「Live Share」で検索して、インストールする。
3. VSCodeを立ち上げ直す。
4. 下記の画像の赤で囲んだアイコンをクリックを押すと、「共有」と「参加」のボタンが出てくると思います。ここで、自分のファイルを編集する場合は「共有」、他の人のファイルを編集する場合は「参加」を押してください。今回は、「共有」を押した場合の手順で進めます。  
![drawio4.png](https://res.cloudinary.com/ki-log/image/upload/v1644795471/drawio4_391eddb28c.png)  

5. 共有を押すと、urlが取得できます。もし、取得できていなかったら右下の「Copy again」押してください。どこかにペーストすることでurlをみることができます。
![drawio5.png](https://res.cloudinary.com/ki-log/image/upload/v1644795811/drawio5_f290b8bcb8.png)  

6. 5.で取得したurlを共有したい人に教えてください。共有された人はそのurlにアクセスすることで共同で作業できるようになります。

これで、複数人で作業できるようになります。  

ここまでできたら後は、.drawioファイルを作成し、Live Shareをするだけで複数人でER図などを編集することができます。

# おわりに
今回Draw.io Integrationを使ってみて、ブラウザを開かずに.drawioファイルを編集できることに感激しました。また.drawioで図なども作成できるのでVSCodeだけで色々なことができるなど改めて思いました。

VSCodeの拡張機能であるLive ShareとDraw.io Integrationを使って、複数人でdraw.ioの編集を行いました。

vscode-liveshare-drawio

small_複数人で作業2.png

thumbnail_複数人で作業2.png

複数人で作業2.png

VSCodeでLive Shareしながら draw.ioを使ってみた

本記事は、[クックパッド春の超絶技巧パンまつり〜スプリングインターンシップ 2022〜](https://cookpad.connpass.com/event/238257/)の参加レポートです。インターンシップは、3/18、4/24 日に開催されたのですが、3/18 日の方に参加しました。

# インターンシップ概要

1 日のスケジュールは下記の通りです。本来なら、オフラインでパン作りが体験できる予定だったのですが、コロナウイルスの影響でオンラインで開催され、パン作りもできませんでした。なので、オンラインでクックパッド CTO の成田さんのパン作りが中継されるという形でした。

13:00 集合&注意事項説明  
13:15 超絶技巧プログラミングの講義  
14:00 超絶技巧プログラミングの発表作品の作成  
17:00 作品の発表  
18:00 Q&A  
18:30 終了

超絶技巧プログラミングの講義では、[「あなたの知らない超絶技巧プログラミングの世界」](https://www.amazon.co.jp/dp/B015R0GNXK/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)の著者である遠藤さんにどのような超絶技巧プログラムがあるのかの紹介や、作成方法などを教えていただきました。14:00 からは、講義や本を参考にしながら、実際に自分で超絶技巧プログラムを作成します。そして、17:00 から作成したプログラムを発表します。発表では、悪い箇所を指摘されるのではなく、良い箇所をとことん褒めていただけるという感じです。

# 感想

結論から言うと、とても楽しかったです。初めて超絶技巧プログラミングというものをしたのですが、とても奥が深く、実装できたらとても達成感がありました。また、初めて ruby を触るということで、心配だったのですが基本的な構文だけで作成できたので安心しました。
インターンといっても、本気でプログラムを書くと言うより、楽しくプログラムを書くと言う感じなので、気楽に参加できました。
心残りなのは、オンラインでの開催だったことと、実際にパン作りができなかったことです。ただ、オンラインでもとても楽しいインターンシップでした。自分も手作りのパンを作ってみようと思いました。

# 作成したプログラム

私が発表のために作成したプログラムを紹介します。
私は、アスキーアートでデジタル時計を作成しました。  
![スクリーンショット 2022-03-24 21.18.55.png](https://res.cloudinary.com/ki-log/image/upload/v1648124473/2022_03_24_21_18_55_a7662b2667.png)  

リアルタイムで時間が更新されます。  
![スクリーンショット 2022-03-24 21.18.56.png](https://res.cloudinary.com/ki-log/image/upload/v1648124473/2022_03_24_21_18_56_b311d23372.png)  

```ruby:get-num
def convertSharpToNum(asciiart,input_num)
  num = asciiart.scan('#').length
  num_string = ""
  loop{
   if num ==0 then
    break
   end
   num_string +="#{input_num}"
   num-=1
 }
 convertedAsciiart = asciiart.gsub("#"){num_string.slice!(0,1)}
 return convertedAsciiart
end

def getZero
  asciiart = <<END
    #######
  ##       ##
##           ##
##           ##
##           ##
##           ##
##           ##
##           ##
##           ##
  ##       ##
    #######
END

  return convertSharpToNum(asciiart,0);
end

def getOne
  asciiart = <<END
     ####
  ##   ##
##     ##
       ##
       ##
       ##
       ##
       ##
       ##
       ##
  #############
END
return convertSharpToNum(asciiart,1);
end

def getTwo
  asciiart = <<END
    #####
  ##     ##
##        ##
        ##
        ##
      ##
    ##
    ##
  ##
##
###############
END
    return convertSharpToNum(asciiart,2);
end

def getThree
  asciiart = <<END
  ####
##    ##
        ##
        ###
      #####
   ########
      #####
        ###
        ##
##    ##
  ####
END
return convertSharpToNum(asciiart,3);
end

def getFour
  asciiart = <<END
     ##    ##
    ##     ##
   ##      ##
  ##       ##
 ##        ##
##         ##
#################
           ##
           ##
           ##
           ##
END
return convertSharpToNum(asciiart,4);
end

def getFive
  asciiart = <<END
##############
##
##
##
###########
            ##
            ##
            ##
##         ##
  ##      ##
  #######
END
return convertSharpToNum(asciiart,5);
end

def getSix
  asciiart = <<END
    #######
  ##        ##
##           ##
##
##
#############
##           ##
##            ##
##           ##
  ##        ##
  #########
END
  return convertSharpToNum(asciiart,6);
end

def getSeven
  asciiart = <<END
##############
##          ##
##         ##
          ##
          ##
        ##
        ##
      ##
      ##
    ##
    ##
END
  return convertSharpToNum(asciiart,7);
end

def getEight
  asciiart = <<END
    #######
  ##       ##
##           ##
##           ##
  ##       ##
    #######
  ##       ##
##           ##
##           ##
  ##       ##
    #######
END
  return convertSharpToNum(asciiart,8);
end

def getNine
  asciiart = <<END
    #######
  ##       ##
##           ##
##           ##
  ##       ##
    #######
        ##
        ##
      ##
      ##
    ##
END
  return convertSharpToNum(asciiart,9);
end

def getNum(input_num)
  case input_num
  when 0 then
    return getZero
  when 1 then
    return getOne
  when 2 then
    return getTwo
  when 3  then
    return getThree
  when 4  then
    return getFour
  when 5  then
    return getFive
  when 6  then
    return getSix
  when 7  then
    return getSeven
  when 8  then
    return getEight
  when 9  then
    return getNine
  end
end

```

get-num.rb ではデジタル時計で利用する数字のアスキーアートの作成と、そのアスキーアートを取得するための関数を書いています。

```ruby:clock.rb
require './get-num.rb'
require "date"

def sliceNum(num)
    tens_place = (num/10) %10
    ones_place = (num/1) %10
    return tens_place,ones_place
end
print "\x1b[2J"

loop{
    nowTime = DateTime.now
    hour_tens_place,hour_ones_place = sliceNum(nowTime.hour)
    minute_tens_place,minute_ones_place = sliceNum(nowTime.minute)
    seconde_tens_place,second_ones_place = sliceNum(nowTime.second)
    hour_tens_place_str = getNum(hour_tens_place).split(/\R/)
    hour_ones_place_str = getNum(hour_ones_place).split(/\R/)
    minute_tens_place_str = getNum(minute_tens_place).split(/\R/)
    minute_ones_place_str = getNum(minute_ones_place).split(/\R/)
    seconde_tens_place_str = getNum(seconde_tens_place).split(/\R/)
    second_ones_place_str = getNum(second_ones_place).split(/\R/)
    print "\x1b[1;1H"
    i = 0
    loop{
        if i > 11 then
            break
        end

        if i==3||i==4||i==7||i==8 then
            str ="#{hour_tens_place_str[i]}#{hour_ones_place_str[i]}時時    #{minute_tens_place_str[i]}#{minute_ones_place_str[i]}分分    #{seconde_tens_place_str[i]}#{second_ones_place_str[i]}"
        else
            str ="#{hour_tens_place_str[i]}#{hour_ones_place_str[i]}        #{minute_tens_place_str[i]}#{minute_ones_place_str[i]}        #{seconde_tens_place_str[i]}#{second_ones_place_str[i]}"
        end
        puts str
        i+=1
    }
}
```

clock.rb では、時刻を取得し、アスキーアートの表示を行なっています。  
1 つ目の loop では無限ループを使い、最新の時間を取得しています。そして、時間によって取得するアスキーアートの数字を変えています。2 つ目の loop では、取得したアスキーアートの数字を横並びで表示させるために文字列を操作して、表示させています。i=3,4,7,8 ではデジタル時計の":"の部分を表示させるために条件を書き分けています。

```
$ ruby clock.rb
```


クックパッド春の超絶技巧パンまつり〜スプリングインターンシップ 2022〜の参加レポートです。インタンシップ概要、感想を書いています。

cookpad-spring-internship-2022

スクリーンショット 2022-03-24 21.18.55.png

large_スクリーンショット 2022-03-24 21.18.55.png

medium_スクリーンショット 2022-03-24 21.18.55.png

small_スクリーンショット 2022-03-24 21.18.55.png

thumbnail_スクリーンショット 2022-03-24 21.18.55.png

クックパッドスプリングインターンシップ2022に参加した

# 本記事で扱う内容

本記事では、ApexChart とは何かを説明し、使用できる基本的なグラフを紹介します。そして、実際に折線グラフを作成するところまでを行います。

# 環境

macOS Big Sur バージョン 11.5.2


# ApexCharts とは

まず ApexChart とは、Web ページに簡単にグラフを作成するライブラリです。このライブラリは、オープンソースプロジェクトであるので、商用アプリケーションなどに自由に使うとことができます。

# ApexCharts でできること

まず、ApexCharts で扱うことができる基本的なグラフを紹介します。

## 折れ線グラフ（line chart)

まずは折線グラフです。基本的に時間経過に伴うデータの変動を見ることができます。  
![line_chart.png](https://res.cloudinary.com/ki-log/image/upload/v1646264779/line_chart_1069957a3c.png)  

## ドーナッツグラフ（donut chart)

ドーナツグラフは、データの比率を視覚化するグラフです。アンケート結果の比率などをみやすくすることができます。円の中央には合計などを表示させることもできます。  
![donut_chart.png](https://res.cloudinary.com/ki-log/image/upload/v1646264780/donut_chart_5c8e590006.png)  

## 棒グラフ（bar chart)

棒グラフはカテゴリ別に、データの比較を行うことができます。  
![bar_chart.png](https://res.cloudinary.com/ki-log/image/upload/v1646264780/bar_chart_fe4f4e2767.png)  

他にも使えるグラフは色々あるので、[公式のドキュメント](https://apexcharts.com/docs/installation/)を参照してください。基本的に本記事で説明するオプションを使えば問題なく他のグラフも作成できると思います。

# ApexCharts の良さ

ApexCharts の良さは色々あるのですが、私が実際に使ってみて良いと思ったのは、

- 簡単にグラフ作成ができる
- グラフが綺麗
- グラフの拡大・縮小機能がある
- グラフをエクスポートできる
- グラフのクリック時などに簡単にイベントを発生させることができる

というポイントが使っていて感動しました。

# 便利なオプション

基本的便利なオプションを紹介します。

## [series](https://apexcharts.com/docs/options/series/)

series はグラフに表示させたいデータを格納するオプションです。これさえ使えれば何かしらグラフに表示させることはできます。

```
 {
      name: "series-1",
      data: [30, 40, 45, 50, 49, 60, 70, 91],
    },
```

## [colors](https://apexcharts.com/docs/options/colors/)

colors ではグラフの色を自由に変えることができます。扱うグラフが多くなっても、識別することができます。

```
  colors: [
    "#FF0000",
    "#0000FF",
    "#008000",
    "#808080",
  ],
```

## [xaxis](https://apexcharts.com/docs/options/xaxis/) もしくは [yaxis](https://apexcharts.com/docs/options/yaxis/)

xaxis ではグラフの x 軸、yaxis では y 軸の変更ができます。例えば、以下のように書くことで x 軸の font サイズを 12px にすることができます。

```
xaxis{
    labels:{
        style:{
            fontSize:'12px'
        }
    }
}
```

## [chart の event](https://apexcharts.com/docs/options/chart/events/)

chart では、グラフの色や大きさなどを設定することができます。しかし、その中でも event が便利です。下記のように書くことで、グラフ上のクリックした箇所の情報を取得することができます。他にも、スクロールするときに発火する scrole やグラフがマウントされたときに発火する mounted などもあります。

```
chart:{
    events:{
        click:(event,chartContexxt,config)=>{
            console.log(event)
        }
    }
}
```

# 実際にグラフを表示してみよう

折線グラフを描画してみましょう。とりあえずアプリの準備をしましょう。

```
$ npx create-react-app line-chart
$ cd line-chart
$ yarn add react-apexcharts apexcharts
```

これでアプリの準備は完了です。次に、コードを変更していきましょう。とりあえず、App.jsx を下記のコードに置き換えてください。下記のコードは ApexCharts の公式ドキュメントに書かれているコードです。

```javascript:App.js
import Chart from "react-apexcharts";
import { useState } from "react";

function App() {
  const options = {
    chart: {
      id: "basic-bar",
    },
    xaxis: {
      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
    },
  };
  const [series, setSeries] = useState([
    {
      name: "series-1",
      data: [30, 40, 45, 50, 49, 60, 70, 91],
    },
  ]);
  return (
    <div className="app">
      <div className="row">
        <div className="mixed-chart">
          <Chart options={options} series={series} type="line" width="500" />
        </div>
      </div>
    </div>
  );
}

export default App;
```

これでとりあえず、実行してみましょう。

```
$ yarn start
```

下記のように折線グラフが描画されていると思います。
 ![実行結果1.png](https://res.cloudinary.com/ki-log/image/upload/v1646264179/1_f7e175f336.png)  
次はこれを修正していこうと思います。options を下記のように修正してください。これによって、グラフの色を赤に変えることができます。

```javascript
const options = {
  colors: ["#ff0000"], //追加
  chart: {
    id: "basic-bar",
  },
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
  },
};
```

![実行結果2.png](https://res.cloudinary.com/ki-log/image/upload/v1646264236/2_dbdc7465af.png)  

最後に、グラフをクリック時のイベントの発火を試したいと思います。

```javascript
const options = {
  colors: ["#ff0000"],
  chart: {
    id: "basic-bar",
    //以下追加
    events: {
      click: (event, chartContext, config) => {
        const categories = config.globals.categoryLabels;
        const datas = config.config.series[0].data;
        const dataPoint = config.dataPointIndex;
        alert(`x座標：${categories[dataPoint]}\ny座標：${datas[dataPoint]}`);
      },
    },
    //ここまで
  },
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
  },
};
```
  
  

![実行結果3.png](https://res.cloudinary.com/ki-log/image/upload/v1646264268/3_788067710d.png)

今回追加したイベントクリックでは、クリックした座標の x 座標と y 座標の値をアラートで表示するようにしています。今回はアラートに表示するだけですが、グラフの値を取得できているのでもっと違うことにも応用できるかもしれませんね。

# 終わりに

今回は ApexCharts について紹介させていただきました。なんといってもグラフが綺麗なのがとても良いなと個人的には思います。とても使いやすいライブラリなので是非使ってみてくださ。今後 ApexCharts の便利な使い方を見つけることができたら、また ApexCharts についてのブログを更新しようと思います。

# 参考資料

- [ApexCharts の公式ドキュメント](https://apexcharts.com/docs/installation/)


グラフの描画が簡単にできるライブラリであるApexChartsについて紹介します。

react-apex-charts

medium_グラフサムネイル.png

small_グラフサムネイル.png

thumbnail_グラフサムネイル.png

グラフサムネイル.png

ApexChartsの良さを語りたい

# やりたいこと

自分でブログを作りたい

# 概要

フロントエンドを Next.js で ISR を実現し、Strapi を使ってバックエンドのことをあまり考えずにブログを作成します。デプロイ場所は Heroku でデータの保存場所は Heroku の PostgreSQL と Cloudinary を利用します。

# 環境

macOS Big Sur バージョン 11.5.2

# 使用技術

- Next.js
- Strapi
- Cloudinary
- heroku

# strapi とは

ヘッドレス CMS と呼ばれるコンテンツの作成と管理を行うバックエンドの機能を備えているものです。そして、Strapi はコマンドで簡単に実装から運用をすることができます。しかし、ヘッドレス CMS である strapi は CMS と違いフロントエンド側は別で運用する必要があります。

# strapi の準備

1. Heroku CLI のインストール
   ※heroku のアカウントは既に作成済みであることを想定しています。

```
$ brew tap heroku/brew && brew install heroku
```

Mac 以外のインストール方法は、[こちら](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/heroku.html#heroku-install-requirements)を参考にしてください

2. Heroku へのログイン

```
$ heroku login
```

3. strapi のプロジェクトを作成
   --quickstrat を入れると、ローカル環境で SQLite のデータベースが使われます。この SQLite のデータベースは Heroku とは互換性がないので注意が必要です。

```
$ npx create-strapi-app@latest [アプリ名] --quickstart
```

strapi のアプリが起動するので、一旦停止させます。
そして、作成した strapi のフォルダに移動しましょう。そして、git を作成します。

```
$ cd [アプリ名]
$ git init
$ git add .
$ git commit -m "first commit"
```

4. Heroku プロジェクトの作成
   新しく Heroku プロジェクトを作成します。

```
$ heroku create [新しく作成するプロジェクト名]
$ heroku git:remote -a [新しく作成するプロジェクト名]

```

5. Heroku で PostgreSQL を利用できるように設定
   下記のコマンドで heroku で postgresql を利用できるようになります。"hobby-dev"は無料プランでの利用になります。容量などの制限があるので、データ量が増えたら有料プランに変更するのを検討する必要があるかもしれません。

```
$ heroku addons:create heroku-postgresql:hobby-dev
```

下記のコマンドを入力して、"DATABASE_URL"に url がが表示されたら、データベースが作成されています。この url は"postgres:// USERNAME : PASSWORD @ HOST : PORT / DATABASE_NAME"で構成されています。

```
$ heroku config
```

6. Heroku で PostgreSQL を利用するための準備
   下記でインストールするライブラリは、5.で説明した url から USERNAME や PASSWORD などを分割するためのものです。

```
$ yarn add pg pg-connection-string
```

pg-connection-string をインストールしたら、config 直下に env/production ディレクトリを作成してください。そして、./config/env/production/database.js を作成してください。

```javascript:database.js
const parse = require('pg-connection-string').parse;
const config = parse(process.env.DATABASE_URL);

module.exports = () => ({
  connection: {
    client: 'postgres',
    connection: {
      host: config.host,
      port: config.port,
      database: config.database,
      user: config.user,
      password: config.password,
      ssl: {
        rejectUnauthorized: false
      },
    },
    debug: false,
  },
});
```

次に、コマンドラインから下記のコマンドを入力してください。これは、作成したデータベースが本番環境で使用されるように設定しています。

```
$ heroku config:set NODE_ENV=production
```

7. 本番環境の Strapi サーバー構成を作成
   ./config/env/production/server.js を作成してください。

```javascript:server.js
module.exports = ({ env }) => ({
  url: env('MY_HEROKU_URL'),
});
```

次に、下記のコマンドを入力してください。環境変数に本番環境の url をセットします。

```
$ heroku config:set MY_HEROKU_URL=$(heroku info -s | grep web_url | cut -d= -f2)
```

次に、./config/middlewares.js を下記のように修正してください。これで、Strapi 上で

```javascript:middlewares.js
module.exports = [
  "strapi::errors",
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "connect-src": ["'self'", "https:"],
          "img-src": ["'self'", "data:", "blob:", "res.cloudinary.com"],
          "media-src": ["'self'", "data:", "blob:", "res.cloudinary.com"],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  "strapi::cors",
  "strapi::poweredBy",
  "strapi::logger",
  "strapi::query",
  "strapi::body",
  "strapi::favicon",
  "strapi::public",
];
```

8. Heroku へのデプロイ

```
$ git add .
$ git commit -m "Update database config"
$ git push heroku HEAD:main
```

これでデプロイができました。下記のコマンドで strapi のアプリを開いてみましょう。画像を取り扱わない場合は、ここまでの準備で strapi を利用することができます。

```
$ heroku open
```

![スクリーンショット 2022-03-11 17.24.23.png](https://res.cloudinary.com/ki-log/image/upload/v1647161044/2022_03_11_17_24_23_779d09f234.png)  

次に、url に"/admin"を追加して、アクセスしてください。するとアカウントの登録をするページに遷移します。アカウントを作成してください。メールアドレスとパスワードは次回ログイン時に必要になります。

# heroku にデプロイした strapi で画像保存

heroku に strapi をデプロイして、strapi で画像を取り扱おうとすると、heroku の無料サーバーではサーバーがスリープするたびに画像が消えてしまいます。異なるサービスに画像を保存して、strapi で扱うようにします。そのサービスとして、本記事では[Cloudinary](https://cloudinary.com/)というサービスを使わせていただきます。Cloudinary とは簡単に説明すると、画像や動画を保存することができるストレージサービスです。本記事ではフリープランを利用します。それでは、Cloudinary と heroku を連携させましょう。

1. Cloudinary のアカウント登録
   アカウント登録は[こちらのサイト](https://kanaxx.hatenablog.jp/entry/cloudinary/first-step)を参考にしてください。
2. ライブラリのインストール
   strapi と Cloudinary を連携させるためのツールをインストールします。

```
$ yarn add @strapi/provider-upload-cloudinary
```

3. 環境変数のセット
   下記の画像のように Cloudinary のマイページに"Cloud Name"、"API Key","API Secret"が書かれているのでそれを環境変数にセットします。

![cloudinary_key.png](https://res.cloudinary.com/ki-log/image/upload/v1647161005/cloudinary_key_22684bdad6.png)
```
$ heroku config:set CLOUDINARY_NAME="~~~"
$ heroku config:set CLOUDINARY_KEY="~~~~"
$ heroku config:set CLOUDINARY_SECRET="~"
```

4. ファイル作成
   ./config/env/production/plugins.js を作成してください。

```javascript:plugins.js
module.exports = ({ env }) => ({
  upload: {
    config: {
      provider: "cloudinary",
      providerOptions: {
        cloud_name: env("CLOUDINARY_NAME"),
        api_key: env("CLOUDINARY_KEY"),
        api_secret: env("CLOUDINARY_SECRET"),
      },
    },
  },
});
```

5. Heroku へ push  
   変更を heroku へ push します。

```
$ git add .
$ git commit -m "Cloudinaryへの画像追加機能の実装"
$ git push heroku master
```

6. 画像の追加ができるか確認
   Strapi の Media Library で何か画像を追加してみましょう。

![スクリーンショット 2022-03-11 19.01.29.png](https://res.cloudinary.com/ki-log/image/upload/v1647161123/2022_03_11_19_01_29_3dba681db6.png)  
    Strapi で下記のように画像を追加しました。  
    
![スクリーンショット 2022-03-11 19.01.55.png](https://res.cloudinary.com/ki-log/image/upload/v1647161170/2022_03_11_19_01_55_46dd3a99ef.png)
    すると、Cloudinary のストレージを確認すると、strapi で保存した画像が追加されていることが確認できます。
![スクリーンショット 2022-03-11 19.03.00.png](https://res.cloudinary.com/ki-log/image/upload/v1647161197/2022_03_11_19_03_00_096ce686ec.png)
   これで、Strapi で保存した画像が消えずに済みます。

# 終わりに

本記事では、Strapi を Heroku へのデプロイ、Cloudinary の連携までを行いました。次回の記事では、ブログ作成のためのデータを作成していきます。

# 参考資料

- [Strapi を理解する！初心者でも分かる特徴、対応フレームワークなどの基礎知識を簡単に解説！](https://anken-hyouban.com/blog/2021/12/21/strapi/#:~:text=%E3%82%92%E7%90%86%E8%A7%A3%E3%81%99%E3%82%8B%EF%BC%81-,%E5%88%9D%E5%BF%83%E8%80%85%E3%81%A7%E3%82%82%E5%88%86%E3%81%8B%E3%82%8B%E7%89%B9%E5%BE%B4%E3%80%81%E5%AF%BE%E5%BF%9C%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%AA%E3%81%A9%E3%81%AE,%E7%9F%A5%E8%AD%98%E3%82%92%E7%B0%A1%E5%8D%98%E3%81%AB%E8%A7%A3%E8%AA%AC%EF%BC%81&text=Strapi%E3%81%A8%E3%81%AFNode.js,%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82)

- [Heroku Setup &Deployment](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/heroku.html#heroku-install-requirements)
- [Strapi v4 を Heroku と Cloudinary を使って無料で動かす](https://zenn.dev/platina/articles/6fca432ec1ae1a)
- [Build a blog with Next (React.js) and Strapi](https://strapi.io/blog/build-a-blog-with-next-react-js-strapi)
- [Headless CMS】Heroku に Strapi 入れて API 叩く【無料】](https://qiita.com/manimigue/items/0d02701f710e1419a83d#%E5%86%99%E7%9C%9F%E3%82%92%E4%BF%9D%E5%AD%98%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84)
- [Cloudinary の始め方。画像や動画を配信するサービスを使えるようになるまでの手順](https://kanaxx.hatenablog.jp/entry/cloudinary/first-step)

Strapiを使ってブログ作成。本記事では、ブログでStrapiを使うための準備を行います。

create-strapi-blog-1

medium_strapi-logo.png

small_strapi-logo.png

thumbnail_strapi-logo.png

strapi-logo.png

Strapiを使って簡単にブログ作成 #1

# やりたいこと

サイトにアクセスした際のログイン画面、サインアップ画面と認証機能を作りたい。そして、認証に成功したユーザだけ Top 画面に遷移できるようにする。

# 概要

今回は、react で作成したアプリにログイン画面と認証機能を追加するまでを行いたいと思います。また、今回利用するログイン画面などのソースコードは[こちらのコード](https://github.com/akakiyo/firebase-authentication-app)を参照してください。

# 使用技術

- Firebase Authentiation
- React

# Firebase Authentication とは

Google が提供しているユーザ情報を管理し、ユーザ認証機能が簡単に利用できるサービスです。ドキュメントには以下のように書かれています。  
>Firebase Authentication には、バックエンド サービス、使いやすい SDK、アプリでのユーザー認証に使用できる UI ライブラリが用意されています。Firebase Authentication では、パスワード、電話番号、一般的なフェデレーション ID プロバイダ（Google、Facebook、Twitter）などを使用した認証を行うことができます。

# Firebase の準備

1. まず Firabase でプロジェクトを作成し、ウェブアプリを追加してください。プロジェクトの作成とアプリの追加方法は[こちらのリンク](https://ki-log.vercel.app/article/deploy-react-app-to-firebase)の「1.Firebase プロジェクトの設定」を参考にしてください。
2. Firebase のプロジェクトが作成できたら、Authentication の画面で Sign-in method のタブでログイン方法を追加します。今回は、「メール/パスワード」を利用します。  
![firebase_authnetication1_format.png](https://res.cloudinary.com/ki-log/image/upload/v1645093399/firebase_authnetication1_format_71f7ac714d.png)  
3. 「メール/パスワード」を選択したら、「メール/パスワード」を有効にするをオンにして保存します。これで、メールアドレスとパスワードでのログインができるようになりました。 
![firebase_authentication2.png](https://res.cloudinary.com/ki-log/image/upload/v1645093524/firebase_authentication2_1f95539d34.png)  
4. ツールバーのプロジェクトの設定ページで apiKey、authDomation、projectId、storageBucket、messagingSnederId を記録してく置いてください。後の設定で使います。  
![firebase_authentication3_format.png](https://res.cloudinary.com/ki-log/image/upload/v1645093770/firebase_authentication3_format_0bb02b9e1e.png)
# アプリの作成

1. まず下記のコマンドで react のアプリケーションの雛形を作成します。

```
$ npx create-react-app firebase-authentication-app  //firebase-authenticationa-appの箇所は自由に変更してください
```

2. そのほかに今回利用するライブラリをインストールします。

```
$ yarn add firebase                     //^9.6.6
$ yarn add react-router-dom      //^6.2.1
$ yarn add styled-components  //^5.3.3
```

3. まずプロジェクト直下に.env ファイルを作成します。そして、Firebase の準備の 4.で記録しておいた値を入力してください。上から、apiKey、authDomation、projectId、storageBucket、messagingSnederId の順番です。

```.env
REACT_APP_FIREBASE_KEY="~~~~~~~~~~"
REACT_APP_FIREBASE_DOMAIN="~~~~~~~~~~"
REACT_APP_FIREBASE_PROJECT_ID="~~~~~"
REACT_APP_FIREBASE_STORAGE_BUCKET="~~~~~~~~~~~"
REACT_APP_FIREBASE_SENDER_ID="~~~~~~~~~~~"
```

4. 次に、src 直下に、firebase.js を作成してください。

```javascript:firebase.js
import firebase from "firebase/compat/app";
import "firebase/compat/auth";

firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID
})

const firebaseAuth = firebase.auth();

export { firebaseAuth };
```

5. src 直下に auth ディレクトリを作成してください。
6. src/auth/useFirebaseAuth.js を作成してください。

```javascript:useFirebaseAuth.js
import { useState, useCallback, useEffect } from "react";
import { firebaseAuth } from "../firebase";

const useFirebaseAuth = () => {
  const [currentUser, setCurrentUser] = useState(firebaseAuth.currentUser);
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    let unmounted = false;
    firebaseAuth.onAuthStateChanged((user) => {
      if (user) {
        user.getIdTokenResult(true).then((result) => {
          if (!unmounted) {
            setIsAuthenticated(true);
            setCurrentUser(user);
            setIsLoading(false);
          }
        });
      } else if (!unmounted) {
        setIsAuthenticated(false);
        setCurrentUser("");
        setIsLoading(false);
      }
    });

    return () => {
      unmounted = true;
    };
  }, []);

  const cleanUpAuthentication = () => {
    setIsAuthenticated(false);
    setCurrentUser("");
    setIsLoading(true);
  };

  const signup = useCallback((email, password) => {
    firebaseAuth
      .createUserWithEmailAndPassword(email, password)
      .catch((err) => alert(err));
  }, []);

  const login = useCallback((email, password) => {
    firebaseAuth
      .signInWithEmailAndPassword(email, password)
      .catch((err) => alert(err));
  }, []);

  const logout = useCallback(() => {
    firebaseAuth.signOut();
    cleanUpAuthentication();
  }, []);

  return {
    signup,
    login,
    logout,
    currentUser,
    isAuthenticated,
    isLoading,
  };
};

export default useFirebaseAuth;

```

7. src/auth/Login.js を作成してください。これは、ログインを行う画面を作成しています。

```javascript:Login.js
import { useState } from "react";
import { Navigate, Link } from "react-router-dom";
import styled from "styled-components";
import useFirebaseAuth from "./useFirebaseAuth";

const Login = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const { login, isAuthenticated } = useFirebaseAuth();
  const isInvalid = password === "" || email === "";
  if (isAuthenticated) {
    return <Navigate to="/" />;
  }

  return (
    <Body>
      <Title>ログイン</Title>
      <Email>
        Email：
        <input
          value={email}
          type="email"
          onChange={(e) => setEmail(e.target.value)}
        />
      </Email>
      <Password>
        Password：
        <input
          value={password}
          type="password"
          onChange={(e) => setPassword(e.target.value)}
        />
      </Password>
      <LoginButton
        disabled={isInvalid}
        type="submit"
        onClick={() => login(email, password)}
      >
        ログイン
      </LoginButton>
      <HorizontalLine />
      <p>アカウントがない方はこちら</p>
      <Link to="/signup">
        <TransitionCreateAccount data-testid="signup-button">
          アカウント作成はこちら
        </TransitionCreateAccount>
      </Link>
    </Body>
  );
};

const Body = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20px;
`;
const Title = styled.div`
  font-weight: bold;
  font-size: 30px;
`;
const Email = styled.div`
  font-size: 24px;
  margin: 40px 0 0 60px;
  input {
    font-size: 24px;
    height: 43px;
    width: 200px;
  }
`;
const Password = styled.div`
  font-size: 24px;
  margin: 20px;
  input {
    font-size: 24px;
    height: 43px;
    width: 193px;
  }
`;
const LoginButton = styled.button`
  color: #3366ff;
  font-size: 24px;
  width: 340px;
  height: 56px;
  background: #faf9f9;
  border: solid 1px #3366ff;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  margin: 32px;
`;
const HorizontalLine = styled.hr`
  width: 100%;
`;
const TransitionCreateAccount = styled.button`
  color: #faf9f9;
  font-size: 24px;
  width: 340px;
  height: 56px;
  background: #3366ff;
  border: solid 1px #0f9ada;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  margin: 20px;
  :active {
    border: solid 1px #03a9f4;
    box-shadow: none;
    text-shadow: none;
  }
`;

export default Login;
```

8. src/auth/SignUp.js を作成してください。これは、サインアップ行う画面を作成しています。

```javascript:SignUp.js
import { useState } from "react";
import { Navigate, Link } from "react-router-dom";
import styled from "styled-components";
import useFirebaseAuth from "./useFirebaseAuth";

const SignUp = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const { signup, isAuthenticated } = useFirebaseAuth();

  if (isAuthenticated) {
    return <Navigate to="/" />;
  }
  return (
    <Body>
      <Title>アカウント作成</Title>
      <Email>
        Email：
        <input
          value={email}
          type="email"
          onChange={(e) => setEmail(e.target.value)}
        />
      </Email>
      <Password>
        Password：
        <input
          value={password}
          type="password"
          onChange={(e) => setPassword(e.target.value)}
        />
      </Password>
      <SubmitButton onClick={() => signup(email, password)}>
        アカウント作成
      </SubmitButton>
      <HorizontalLine />
      <p>すでにアカウントがある方はこちら</p>
      <Link to="/login">
        <TransitionCreateAccount data-testid="signup-button">
          ログインはこちら
        </TransitionCreateAccount>
      </Link>
    </Body>
  );
};

const Body = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20px;
`;
const Title = styled.div`
  font-weight: bold;
  font-size: 30px;
`;
const Email = styled.div`
  font-size: 24px;
  margin: 40px 0 0 60px;
  input {
    font-size: 24px;
    height: 43px;
    width: 200px;
  }
`;
const HorizontalLine = styled.hr`
  width: 100%;
`;
const Password = styled.div`
  font-size: 24px;
  margin: 20px;
  input {
    font-size: 24px;
    height: 43px;
    width: 200px;
  }
`;
const SubmitButton = styled.button`
  color: #3366ff;
  font-size: 24px;
  width: 340px;
  height: 56px;
  background: #faf9f9;
  border: solid 1px #3366ff;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  margin: 20px;
`;
const TransitionCreateAccount = styled.button`
  color: #faf9f9;
  font-size: 24px;
  width: 340px;
  height: 56px;
  background: #3366ff;
  border: solid 1px #0f9ada;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  margin: 20px;
`;

export default SignUp;
```

9. src/Top.js を作成してください。これは、ログインが成功した後に表示させる画面です。

```javascript:Top.js
import useFirebaseAuth from "./auth/useFirebaseAuth";

const Top = () => {
  const { logout } = useFirebaseAuth();
  return (
    <>
      <h1>ログイン完了</h1>
      <button onClick={() => logout()}>ログアウト</button>
    </>
  );
};
export default Top;
```

10. src/App.js を下記のコードに修正してください。

```javascript:App.js
import { Route, Navigate, Routes } from "react-router-dom";
import useFirebaseAuth from "./auth/useFirebaseAuth";
import Top from "./Top.js";
import Login from "./auth/Login";
import SignUp from "./auth/SignUp";

function App() {
  const { isAuthenticated, isLoading } = useFirebaseAuth();
  if (isLoading) return <p>loading...</p>;
  return (
    <>
      <Routes>
        <Route
          path="/"
          element={isAuthenticated ? <Top /> : <Navigate to="/login" />}
        />
        <Route exact path="/login" element={<Login />} />
        <Route exact path="/signup" element={<SignUp />} />
      </Routes>
    </>
  );
}
export default App;
```
11. src/index.js を下記のコードに修正してください。

```javascript:index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);
```

# 動作確認

1. まずアプリを起動してください。

```
$ yarn start
```

2. 次に、http://localhost:3000/ にアクセスしてください。まだログインしていないので http://localhost:3000/login にリダイレクトされると思います。  
![firebase_authentication4.png](https://res.cloudinary.com/ki-log/image/upload/v1645093911/firebase_authentication4_562aae3cb8.png)  
3. まだアカウントを作成していないので、「アカウント作成はこちら」からアカウントを作成しましよう。自由にメールアドレスと パスワードを入力してください。（例　 Emai:tete@stst.com、Password:adadaminmin1234)

4. 「アカウントを作成」をクリックすると、アカウントが作られログイン状態になり Top 画面に遷移します。
![firebase_authentication5.png](https://res.cloudinary.com/ki-log/image/upload/v1645093961/firebase_authentication5_f622bf4fa4.png)
5. ログアウトボタンを押すとログイン画面に遷移します。
6. そして、先ほど登録したメールアドレスとパスワードを入力し、「ログイン」を押すと Top 画面に遷移できます。

これで一通りの機能の確認ができました。もし、どこかでエラーが発生してうまく動作しなかったら、package.json から firebase のバージョンを確認してみてください。今回私は、^9.6.6 を利用してのですが^9 以降に仕様が変わっている場所があります。

# おわりに

今回は、Firebase Authentiation を利用してユーザ認証機能をアプリに追加しました。このサービスを利用することで簡単に認証機能を実装することができました。また、今回紹介させていただいたコードは他のコードに埋め込みやすいように書いたつもりなので、ぜひご自身のコードに組み込んでください。

# 参考資料
- [Firebase Authentication](https://firebase.google.com/docs/auth?hl=ja)
- [チュートリアル：React の導入](https://ja.reactjs.org/tutorial/tutorial.html)
- [Firebase Authentication ってどんなもの？利用するメリット、実装方法を解説](https://giginc.co.jp/blog/giglab/Firebase_Authentication#:~:text=%EF%BC%91%EF%BC%8EFirebase%20Authentication%E3%81%A8%E3%81%AF&text=%E3%80%8CFirebase%20Authentication%E3%80%8D%E3%81%AF%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E8%AA%8D%E8%A8%BC,Google%E9%81%8B%E5%96%B6%E3%81%AE%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%A7%E3%81%99%E3%80%82)


Firebase Authenticationを使って、reactアプリにログイン画面、サインアップ画面、認証機能を追加する。

reactアプリをfirebaseにデプロイしてみた

VSCodeでLive Shareしながら draw.ioを使ってみた

クックパッドスプリングインターンシップ2022に参加した

ApexChartsの良さを語りたい

Strapiを使って簡単にブログ作成 #1

Firebase Authenticationで認証機能を追加してみた