Shopifyの様々なAPI Shopifyには主に以下のAPIがあります。 ・Admin API：アプリやサービスがShopifyと連携するのに使う（メインAPI） ・Storefront API：商品データ、顧客情報などを取得する ・Partner API：パートナーダッシュボードにあるデータにアクセスする ・Marketing activities API：プロモーションキャンペーンとマーケティングオートメーションを管理 Storefront APIのjavascript用のsdk(shopify-buy)の日本語記事はよく見るのですが、Admin APIの日本語記事があまり見当たらなかったので、今回はAdmin API(shopify-api)を用いた簡単な実装を紹介します Admin APIでもGraphQLかRESTがサポートされていますが、今回はREST Admin APIで実装します まずは、 npm i @shopify/shopify-api をしておいてください。 Shopifyの管理画面でAdmin API用のaccess tokenを発行 Shopifyのアプリの作成はこちらの記事が分かりやすかったので参考にしてください。 プライベートアプリを作成するところまで完了したら、Admin APIのアクセストークンを発行するために、プライベートアプリ管理ページのConfigurationからAdmin API integrationでセッテイングをしてください（利用するscopeは、ここではとりあえず全てにチェックします） 設定が完了するとAdmin API access tokenが発行されるので、それをどこかにコピーしておいてください、後で使います。（決してネットにあげるなどしてはいけません！笑） pages/api下にAPIの処理を記述 ここからは実際にコードに書いていきます。 今回は顧客を新規作成する実装をしています。 api部分 pages/api/createCustomer.ts import Shopify, { DataType } from '@shopify/shopify-api'; export default function createCustomer() { const client = new Shopify.Clients.Rest( //ここにXXX(shopの名前).myshopify.com（string） `${process.env.NEXT_PUBLIC_SHOPIFY_SHOP_DOMAIN}`, //ここに先ほど発行したアクセストークン（string） `${process.env.NEXT_PUBLIC_SHOPIFY_ACCESS_TOKEN}`, ); client.post({ path: 'customers', data: { customer: { first_name: 'higu', last_name: 'chimmy', email: 'higu@example.com', phone: '+819012345678', verified_email: true, }, }, type: DataType.JSON, }); } フロント部分 pages/index.tsx import type { NextPage } from 'next'; import { MouseEventHandler } from 'react'; const Home: NextPage = () => { const createCustomer: MouseEventHandler<HTMLButtonElement> = async (event) => { event.preventDefault(); await fetch('/api/createCustomer'); }; return ( <button onClick={createCustomer}>顧客作成</button> ); }; export default Home; ものすごく簡素なコードですがこのようにしてAdmin APIを叩くことができます。 本来であれば、createCustomer()にフロントで入力された色々な顧客情報を引数に渡して、それぞれ値を置き、顧客を新規作成するという使われ方をします。 参考程度にCustomerで取れるobjectを掲載しておきます。こちらから引用 Customerで取れる情報 { "accepts_marketing": false, "accepts_marketing_updated_at": "2013-06-27T08:48:27-04:00", "addresses": [ { "id": 207119551, "zip": "40202", "city": "Louisville", "phone": "555-625-1199", "company": null, "country": "United States", "default": true, "address1": "Chestnut Street 92", "address2": "Apartment 2", "province": "Kentucky", "last_name": "Norman", "first_name": "Bob", "customer_id": 6940095564, "country_code": "US", "country_name": "United States", "province_code": "KY" } ], "currency": "JPY", "created_at": "2013-06-27T08:48:27-04:00", "default_address": { "id": 207119551, "zip": "40202", "city": "Louisville", "phone": "555-625-1199", "company": null, "country": "united states", "default": true, "address1": "Chestnut Street 92", "address2": "Apartment 2", "province": "Kentucky", "last_name": "Norman", "first_name": "Bob", "country_code": "US", "country_name": "United States", "province_code": "KY" }, "email": "bob.norman@hostmail.com", "first_name": "John", "id": 207119551, "last_name": "Norman", "last_order_id": 234132602919, "last_order_name": "#1169", "metafield": { "key": "new", "type": "string", "value": "newvalue", "namespace": "global" }, "marketing_opt_in_level": "single_opt_in", "multipass_identifier": null, "note": "Placed an order that had a fraud warning", "orders_count": 3, "phone": "+16135551111", "sms_marketing_consent": { "state": "subscribed", "opt_in_level": "single_opt_in", "consent_updated_at": "2021-08-03T15:31:06-04:00", "consent_collected_from": "OTHER" }, "state": "disabled", "tags": "loyal", "tax_exempt": true, "tax_exemptions": [ "CA_STATUS_CARD_EXEMPTION", "CA_BC_RESELLER_EXEMPTION" ], "total_spent": "375.30", "updated_at": "2012-08-24T14:01:46-04:00", "verified_email": true } 使いたいapiはclient.postのpath:XXXの部分で指定し、渡す値も使うapiによって様々なので、詳しくはREST Admin APIの公式docを参考にしてください。

初めに Express + TypeScriptで開発を行う際に、sessionの設定方法がJavascriptと異なっていたため備忘録として投稿する。 環境 ■ Nodeのバージョン 14.14.0 ■ 使用OS MacOS Big Sur：バージョン11.6 ■ expressのバージョン 4.16.1 ■ @types/express-sessionのバージョン 1.17.4 ■ express-sessionのバージョン 1.17.2 設定方法 使用するパッケージをインストールする。 JavaScriptでは、express-sessionのみインストールしていたが、TypeScriptで使用するには@types/express-sessionが必要。 npm i express-session @types/express-session app.tsに下記の記載を行う。 var session = require('express-session'); declare module 'express-session' { interface SessionData { user: any, like_arr: any } } var session_opt = { secret: 'secret', cookie: {maxAge: 60 * 60 * 1000} }; app.use(session(session_opt)); アンビエント宣言内に、使用したいオブジェクトを追加することでTypeScriptにも対応できる。 session_optという変数には、cookieの有効時間等の情報を格納する。 使用例 import express from 'express'; const router = express.Router(); router.post('/sign_in', (req: express.Request , res: express.Response, next: express.NextFunction) => { (async () => { req.session.user = result; req.session.like_arr = like_arr; req.session.save(); res.redirect('/'); }); })(); }); reqの型は、インポートしたexpressのRequestに設定することでsessionを使用可能。

はじめに こんにちは、家業を飛び出したヤメツギフリーランスの笠原大瑚(@KasaharaDaigo_)と言います。 プログラミングを学び始めて半年にも満たないですが、Qiitaでアウトプットすることを決意し、今回が初投稿になります。 エンジニアなら知ってて当たり前のようなステップを端折っている記事が多く散見され、これらが初学者のつまづきの原因になっているのでは？という仮説の基、私自身が躓いたところを網羅するよう、あくまで初学者目線でとにかく手順を丁寧に記載することを心掛けています。 世界一端的かつわかりやすい記事を心掛けていきますので、どうぞ応援よろしくお願いします！ この記事では以下のことを約束します。 難しいカタカナ語は使わない！ カタカナ語ばかりの記事ダメ、絶対。 細かい手順も端折らない！ 細かい手順を端折っている記事ダメ、絶対。 要点をシンプルかつ明快に！ 長ったらしい記事ダメ、絶対。 今回使うツールや技術 ターミナル Docker 開発に使える仮想環境のひとつ。色々な言語やプロジェクトを一括で管理でき、新規作成や削除も簡単。PC自体に色々な言語をインストールしないので汚れにくいと良いことづくめ。 Node React Create-React-App 目次 事前準備 Terminalのインストール Dockerのインストール Node.jsのインストール フォルダ名、プロジェクト名の決定 Reactのインストール 作業用フォルダの作成 Dockerfileの作成 docker-compose.ymlファイルの作成 Dockerイメージのビルド Reactのインストールとプロジェクトの作成 Reactの起動 Dockerを起動 コンテナを起動 Reactを実行 Reactプロジェクト画面が立ち上がるか確認 事前準備 Terminalのインストール（Windowsのみ） ここでやること ・windows Terminalのインストール ターミナルが開発においての基本となる。 Windows11では既定のターミナルアプリが「windows Terminal」となっているため問題ないはず。 もしインストールしていなければ、以下のリンクからインストール。 https://docs.microsoft.com/ja-jp/windows/terminal/ Dockerのインストール ここでやること ・Dockerのインストール まだインストールしていなければ、以下のリンクからインストール https://www.docker.com/products/docker-desktop DockerへNode.jsをインストール ここでやること ・Docker Hubでnode.jsのイメージを探す ・ターミナルでコマンドを叩いてnodeをdockerへインストール Dockerはあくまで仮想環境を構築するツールであり、 実際には利用するイメージをインストールして使うことになる。 今回はReactを利用するためにNode.jsのインストールが必要なので、 Node.jsをDockerへインストールする方法を解説する。 ・以下のリンクからDockerHubを開く（もしくはググる） https://hub.docker.com/ ・サインインをするような表示がされているがしなくても問題はない ・Nodeと書かれたイメージを検索してクリック この画像ではちょうど上段右から二番目にnodeがある。 ここにないイメージを探したい場合は、右下にある「See all Docker Official images」をクリックして検索しよう ・インストールするためのコマンドがサイトに書かれているのでコピー ここでいうdocker pull nodeが該当部分 ・ターミナルを管理者権限で開く ・コピーしたコマンドを貼り付けてEnterで実行 ・NodeがDockerにインストールされる ・Dockerを起動 ・左サイドバーのイメージをクリック ・nodeと書かれているイメージが入っていることを確認する フォルダ名、プロジェクト名の決定（重要！） ここでやること ・作業用フォルダ名の決定 ・プロジェクト用フォルダ名の決定 コマンドの実行やymlファイル内の記述にはフォルダ名やプロジェクト名を多用します。 整合性が取れないと正しくインストールができなかったり、エラーが発生するので、 先にきちんとしたフォルダ名、プロジェクト名を決定することがとても大事。 フォルダの名前は自由だが、必ずわかりやすい名前かつ英語表記に。 Reactをインストール 1．作業用フォルダを作成する ・使いたい場所に作業用フォルダを作成 ・フォルダの名前は事前準備で決めた名前にする ・今回はdocker-react-appとする 【現時点の作業用フォルダの構成】 docker-react-app 2．Dockerfileを作成する 次にDockerfileの作成を行う。 Dockerfileとは Docker上で動作させるコンテナの構成情報を記述したファイルのこと。 これを元にDockerがイメージを生成してくれる。 Dockerfileのファイル名をつけるときのポイント ・必ず英語で表記する ・わかりやすい名前にする ・拡張子はつけない 今回はファイル名をDockerfileとする。 ファイル内の記述は以下の通り。 Dockerfile #Node.jsの最新版を記載 FROM node:16.14.0 #コンテナ内の作業ディレクトリを記載 WORKDIR /usr/src/app # 【各項目の説明】 #FROM #コンテナのベースとなるDockerイメージを記載 #ここではReactを使うために利用するnode.jsを記載 #基本的には最新版を使うことが望ましい #nodeの公式サイトを確認し、最新版のバージョンをここに記載する #WORKDIR #コンテナ内の作業ディレクトリを記載 【現時点の作業用フォルダの構成】 docker-react-app └── Dockerfile 3．docker-compose.ymlを作成する 次にdocker-compose.ymlファイルを作成する。 ymlファイルとは ローカルPCに作成した作業ディレクトリとDockerにおけるコンテナ内の作業ディレクトリを接続するためのファイル docker-compose.yml version: '3.8' services: node: build: context: . dockerfile: Dockerfile volumes: - ./:/usr/src/app command: sh -c "cd free-parking && yarn start" ports: - "3000:3000" # 【各項目の説明】 # version：Composeファイルのバージョンを記載。Dockerの最新版を入れている場合は、ここを最新版にする。 # バージョンによっては非対応なのでリファレンスをチェック（https://matsuand.github.io/docs.docker.jp.onthefly/compose/compose-file/compose-versioning/） # dockerfile：先ほど作成したdockerfile名を記載 # volumes：ローカルのディレクトリが接続するDockerコンテナ内の作業ディレクトリを指定 # command:コンテナ内で実行されるコマンドを記載 # ports:外部に対して公開するポート番号 【現時点の作業用フォルダの構成】 docker-react-app ├── Dockerfile └── docker-compose.yml 4．Dockerイメージをビルドする Dockerへnode.jsをベースとしたイメージのビルドを行う。 作成したディレクトリ（Dockerfileが入っているところ）をTerminalで開き、以下のコマンドを打ち込むことでdockerfileに基づいたイメージがビルドされる。 docker-compose build 以下のような画面にFINISHEDという文言が表示されていたらビルド完了 【豆知識】Reactプロジェクト作成場所にしたいフォルダをターミナルで開く方法 方法１：ターミナルからcd(チェンジディレクトリ)コマンドで移動 ・ターミナルを起動 ・コマンドによって階層を移動 ・ターミナルでプロジェクト作成予定のフォルダが参照される 良く使うターミナルのコマンド（これだけは最低でも覚える） .. 　　　　　　　　　　　　　　：階層を一つ上がる cd {同じ階層にあるフォルダ名}　：同じ階層にある指定のフォルダへ移動 ls -l　　　　　　　　　　　　　：現在の階層にあるフォルダをリスト形式で縦表示 方法２：フォルダを作成したあとに、右クリックから開く ・フォルダを新規作成 ・フォルダ内の空白を右クリック ・「Windowsターミナルで開く」をクリック ・ターミナルでプロジェクト作成予定のフォルダが参照される 5．Reactをインストール&プロジェクトを作成 ここではReactのインストールを行い、さらにプロジェクトフォルダも同時に作成する。 ・作成した作業用フォルダをターミナルで開く　※イメージをビルドした直後はターミナルを開いているはずなので飛ばしてＯＫ ・以下のコマンドを実行 コマンド解説 npmコマンドでcreate-react-appを使って、任意のプロジェクト名のフォルダを作成し、さらにReactをインストールしている。 Create-React-Appは、ターミナルで使うコマンドの一つ。簡単にReactの開発環境を構築して開発をスタートできる。 Reactでアプリを作る際は、このコマンドを使うことが公式から推奨。 docker-compose run --rm node sh -c "npm install -g create-react-app && create-react-app {任意のプロジェクト名（英語）}" ・末尾に「Happy hacking!」という文言が表示されたらReactインストール完了　※たまにエラーが起きるが、再度コマンドを実行すると通る場合も ・実行したコマンドに記述したプロジェクト名のフォルダが、作業用フォルダ内に新しく作成されていることを確認する 【現時点の作業用フォルダの中身】 docker-react-app ├──新しく作成されたプロジェクトフォルダ ├── Dockerfile └── docker-compose.yml React起動編 ここからは実際にReactを起動する手順を解説 1．Dockerを起動する ・まずはDockerを起動 ・クジラのマークのアレ? 2．コンテナを起動し、Reactを実行する ・Docker上でイメージを選択し、Runを押す ・「Optional Settings」を設定可能なので、コンテナ名をわかりやすい名前（プロジェクト名など）に設定する ・Runを押す ・コンテナが作成される ・コンテナを起動　※起動している状態（緑色）になっていたらここはスキップ ・ターミナルを起動して、作業用フォルダを参照 ※docker上から開くのではなく、PC上からそのままターミナルで開く →ターミナル上で移動するか、フォルダを開いて右クリで起動するかのどちらか。 ・以下のコマンドを実行すると、docker-compose.ymlが実行される docker-compose up ・以下のような文言がターミナルに表示されていたら起動成功 3．Reactプロジェクト画面が立ち上がるか確認 ・Webブラウザを開く ・アドレスバーに http://localhost:3000 と入力して開く →ここの3000とはdocker-compose.ymlファイル内に記載したポート番号3000のこと →変えたい場合は、ymlファイルのポート番号記載を修正してやり直し ・次のような画面が出ればプロジェクト作成成功

はじめに こんにちは、家業を飛び出したヤメツギフリーランスの笠原大瑚と言います。 プログラミングを学び始めて半年にも満たないですが、Qiitaでアウトプットすることを決意し、今回が初投稿になります。 エンジニアなら知ってて当たり前のようなステップを端折っている記事が多く散見され、これらが初学者のつまづきの原因になっているのでは？という仮説の基、私自身が躓いたところを網羅するよう、あくまで初学者目線でとにかく手順を丁寧に記載することを心掛けています。 世界一端的かつわかりやすい記事を心掛けていきますので、どうぞ応援よろしくお願いします！ この記事では以下のことを約束します。 難しいカタカナ語は使わない！ カタカナ語ばかりの記事ダメ、絶対。 細かい手順も端折らない！ 細かい手順を端折っている記事ダメ、絶対。 要点をシンプルかつ明快に！ 長ったらしい記事ダメ、絶対。 今回使うツールや技術 ターミナル Docker 開発に使える仮想環境のひとつ。色々な言語やプロジェクトを一括で管理でき、新規作成や削除も簡単。PC自体に色々な言語をインストールしないので汚れにくいと良いことづくめ。 Node React Create-React-App 目次 事前準備 Terminalのインストール Dockerのインストール Node.jsのインストール フォルダ名、プロジェクト名の決定 Reactのインストール 作業用フォルダの作成 Dockerfileの作成 docker-compose.ymlファイルの作成 Dockerイメージのビルド Reactのインストールとプロジェクトの作成 Reactの起動 Dockerを起動 コンテナを起動 Reactを実行 Reactプロジェクト画面が立ち上がるか確認 事前準備 Terminalのインストール（Windowsのみ） ここでやること ・windows Terminalのインストール ターミナルが開発においての基本となる。 Windows11では既定のターミナルアプリが「windows Terminal」となっているため問題ないはず。 もしインストールしていなければ、以下のリンクからインストール。 https://docs.microsoft.com/ja-jp/windows/terminal/ Dockerのインストール ここでやること ・Dockerのインストール まだインストールしていなければ、以下のリンクからインストール https://www.docker.com/products/docker-desktop DockerへNode.jsをインストール ここでやること ・Docker Hubでnode.jsのイメージを探す ・ターミナルでコマンドを叩いてnodeをdockerへインストール Dockerはあくまで仮想環境を構築するツールであり、 実際には利用するイメージをインストールして使うことになる。 今回はReactを利用するためにNode.jsのインストールが必要なので、 Node.jsをDockerへインストールする方法を解説する。 ・以下のリンクからDockerHubを開く（もしくはググる） https://hub.docker.com/ ・サインインをするような表示がされているがしなくても問題はない ・Nodeと書かれたイメージを検索してクリック この画像ではちょうど上段右から二番目にnodeがある。 ここにないイメージを探したい場合は、右下にある「See all Docker Official images」をクリックして検索しよう ・インストールするためのコマンドがサイトに書かれているのでコピー ここでいうdocker pull nodeが該当部分 ・ターミナルを管理者権限で開く ・コピーしたコマンドを貼り付けてEnterで実行 ・NodeがDockerにインストールされる ・Dockerを起動 ・左サイドバーのイメージをクリック ・nodeと書かれているイメージが入っていることを確認する フォルダ名、プロジェクト名の決定（重要！） ここでやること ・作業用フォルダ名の決定 ・プロジェクト用フォルダ名の決定 コマンドの実行やymlファイル内の記述にはフォルダ名やプロジェクト名を多用します。 整合性が取れないと正しくインストールができなかったり、エラーが発生するので、 先にきちんとしたフォルダ名、プロジェクト名を決定することがとても大事。 フォルダの名前は自由だが、必ずわかりやすい名前かつ英語表記に。 Reactをインストール 1．作業用フォルダを作成する ・使いたい場所に作業用フォルダを作成 ・フォルダの名前は事前準備で決めた名前にする ・今回はdocker-react-appとする 【現時点の作業用フォルダの構成】 docker-react-app 2．Dockerfileを作成する 次にDockerfileの作成を行う。 Dockerfileとは Docker上で動作させるコンテナの構成情報を記述したファイルのこと。 これを元にDockerがイメージを生成してくれる。 Dockerfileのファイル名をつけるときのポイント ・必ず英語で表記する ・わかりやすい名前にする ・拡張子はつけない 今回はファイル名をDockerfileとする。 ファイル内の記述は以下の通り。 Dockerfile #Node.jsの最新版を記載 FROM node:16.14.0 #コンテナ内の作業ディレクトリを記載 WORKDIR /usr/src/app # 【各項目の説明】 #FROM #コンテナのベースとなるDockerイメージを記載 #ここではReactを使うために利用するnode.jsを記載 #基本的には最新版を使うことが望ましい #nodeの公式サイトを確認し、最新版のバージョンをここに記載する #WORKDIR #コンテナ内の作業ディレクトリを記載 【現時点の作業用フォルダの構成】 docker-react-app └── Dockerfile 3．docker-compose.ymlを作成する 次にdocker-compose.ymlファイルを作成する。 ymlファイルとは ローカルPCに作成した作業ディレクトリとDockerにおけるコンテナ内の作業ディレクトリを接続するためのファイル docker-compose.yml version: '3.8' services: node: build: context: . dockerfile: Dockerfile volumes: - ./:/usr/src/app command: sh -c "cd {作成したプロジェクトフォルダ名} && yarn start" ports: - "3000:3000" # 【各項目の説明】 # version：Composeファイルのバージョンを記載。Dockerの最新版を入れている場合は、ここを最新版にする。 # バージョンによっては非対応なのでリファレンスをチェック（https://matsuand.github.io/docs.docker.jp.onthefly/compose/compose-file/compose-versioning/） # dockerfile：先ほど作成したdockerfile名を記載 # volumes：ローカルのディレクトリが接続するDockerコンテナ内の作業ディレクトリを指定 # command:コンテナ内で実行されるコマンドを記載 # ports:外部に対して公開するポート番号 【現時点の作業用フォルダの構成】 docker-react-app ├── Dockerfile └── docker-compose.yml 4．Dockerイメージをビルドする Dockerへnode.jsをベースとしたイメージのビルドを行う。 作成したディレクトリ（Dockerfileが入っているところ）をTerminalで開き、以下のコマンドを打ち込むことでdockerfileに基づいたイメージがビルドされる。 docker-compose build 以下のような画面にFINISHEDという文言が表示されていたらビルド完了 【豆知識】Reactプロジェクト作成場所にしたいフォルダをターミナルで開く方法 方法１：ターミナルからcd(チェンジディレクトリ)コマンドで移動 ・ターミナルを起動 ・コマンドによって階層を移動 ・ターミナルでプロジェクト作成予定のフォルダが参照される 良く使うターミナルのコマンド（これだけは最低でも覚える） cd ..　　　　　　　　　　　　　：階層を一つ上がる cd {同じ階層にあるフォルダ名}　：同じ階層にある指定のフォルダへ移動 dir 　　　　　　　　　　　　：現在の階層にあるファイルやフォルダをリスト形式で表示 方法２：フォルダを作成したあとに、右クリックから開く ・フォルダを新規作成 ・フォルダ内の空白を右クリック ・「Windowsターミナルで開く」をクリック ・ターミナルでプロジェクト作成予定のフォルダが参照される 5．Reactをインストール&プロジェクトを作成 ここではReactのインストールを行い、さらにプロジェクトフォルダも同時に作成する。 ・作成した作業用フォルダをターミナルで開く　※イメージをビルドした直後はターミナルを開いているはずなので飛ばしてＯＫ ・以下のコマンドを実行 コマンド解説 npmコマンドでcreate-react-appを使って、任意のプロジェクト名のフォルダを作成し、さらにReactをインストールしている。 Create-React-Appは、ターミナルで使うコマンドの一つ。簡単にReactの開発環境を構築して開発をスタートできる。 Reactでアプリを作る際は、このコマンドを使うことが公式から推奨。 docker-compose run --rm node sh -c "npm install -g create-react-app && create-react-app {任意のプロジェクト名（英語）}" ・末尾に「Happy hacking!」という文言が表示されたらReactインストール完了　※たまにエラーが起きるが、再度コマンドを実行すると通る場合も ・実行したコマンドに記述したプロジェクト名のフォルダが、作業用フォルダ内に新しく作成されていることを確認する 【現時点の作業用フォルダの中身】 docker-react-app ├──新しく作成されたプロジェクトフォルダ ├── Dockerfile └── docker-compose.yml React起動編 ここからは実際にReactを起動する手順を解説 1．Dockerを起動する ・まずはDockerを起動 ・クジラのマークのアレ? 2．コンテナを起動し、Reactを実行する ・Docker上でイメージを選択し、Runを押す ・「Optional Settings」を設定可能なので、コンテナ名をわかりやすい名前（プロジェクト名など）に設定する ・Runを押す ・コンテナが作成される ・コンテナを起動　※起動している状態（緑色）になっていたらここはスキップ ・ターミナルを起動して、作業用フォルダを参照 ※docker上から開くのではなく、PC上からそのままターミナルで開く →ターミナル上で移動するか、フォルダを開いて右クリで起動するかのどちらか。 ・以下のコマンドを実行すると、docker-compose.ymlが実行される docker-compose up ・以下のような文言がターミナルに表示されていたら起動成功 3．Reactプロジェクト画面が立ち上がるか確認 ・Webブラウザを開く ・アドレスバーに http://localhost:3000 と入力して開く →ここの3000とはdocker-compose.ymlファイル内に記載したポート番号3000のこと →変えたい場合は、ymlファイルのポート番号記載を修正してやり直し ・次のような画面が出ればプロジェクト作成成功