はじめに Reactを使って画面作成をしてみたいと思うようになり、サイトを調べてチュートリアル を試しにやってみました。 ここにかかれていることをサイト内にあるスターターコード を使って試したものになります。 ○×ゲームを作ることが題材となっています。 スターターコードにチュートリアルの内容に従いコードを書いていくことで動きを確認することはできました。 ここまで2回にわたってチュートリアルに関して理解したことを纏めてきました。 最終回として、 イミュータブルとミューテートについての理解 今回理解したこと イミュータブルとミューテート チュートリアルの中で、.slice() を使い、square配列をのコピーを作ることを勧められ実装していますが、なぜ、この.slice()を行うことがそもそもイミュータビリティ（不変性）となるのかが理解できなかったため、ここでも図式化してイメージを固めたいと思います。 実装では、最初にBoardコンポートの中でhandleClick()メソッドの中で定義しています。 handleClick(i){ const squares = this.state.squares.slice(); squares[i] = 'X'; this.setState({squares: squares}); } このメソッドは、SquareコンポーネントのonClickイベントが発生すると対象のコンポーネントにおいて、発動します。この時のを動きをイメージにすると以下のような図となり、slice()でコピーされた配列を操作して、最後にstateの内容全体を書き換えるといった動きをしています。 私の理解としては、『この何の値かをセットする部分的な動きについては、直接的にstateの中身を書き換えるのではなく、コピーした要素の書き換えを行うことで、state自体の不変性（イミュータビリティ）が保たれている。』となりました。 ここまでくると、ゲームの勝敗を付けるところまでの実装ができ、ゲームとしてはいったんの完成を迎える。 チュートリアルでは、この先、ゲームの手番をHistoryとして記録し、そのHistoryのところに状態（state）を戻せるということを学べるようになっている。 その内容に焦点を絞り纏めておく。 まずは、Historyとして記録できるようにするため、Board →　GameにStateのリフトアップした上でsqauresの状態をhistory配列の中に持たせることで実現している。この実現にあたって次のようなイメージに変更している。 この変更により、onClickイベントで情報は次のように変化していくことがイメージでき、なぜイミュータブルに実装しておくのが良いかということの理解ができた。 まとめ チュートリアル を忠実にまねてまずは動くことを確認し、感嘆するところから始めて、何度も何度もチュートリアルを試した。その中で、stateやPropsで扱う変数を例えばsquaresとして置き換えながら使っていることで理解できなかったため、変数名を変えたりしながら、それに伴い起きる変化をキャッチアップしながら、全3回の投稿を使ってReactのさわりを理解できた気がしている。 まだまだ、実装を経験したわけではないので、学ぶことは多いと思うので、その都度、理解したこと纏めていけたらなと思っています。 一先ず、以下の3点について、学べたかな？ Propsとstate stateのリフトアップ イミュータブルとミューテート

私は現在、SIerから自社サービス企業への転職を目指しています。 その準備のひとつとして自身のポートフォリオサイトを作成したので、完成までの流れをまとめました。 Reactで簡単な開発を行う流れやUIライブラリのMaterialUIを使って短時間でサイトを作成したい方の参考になれば嬉しいです！ アジェンダ もう少し自己紹介 使用技術 アーキテクチャ構成 フロントエンド バックエンド デプロイ ハマったこと さいごに もう少し自己紹介 私は現在メーカー系SIer3年目で、主にサーバーサイドエンジニアとして働いておりフロントエンドの開発歴は今まで合わせて4ヶ月程度です。 業務で初めてReactの開発を行うこととなったときはそもそもフロントエンド自体UdemyでHTMLを少し勉強したことある程度で焦りましたが、簡単な画面だったこともありReactを学びながらHTML, CSSの知識も強化することができ良い経験でした。 もっと個人的なことは今回作成したサイトに書いています！ 使用技術 今回使用した主な技術をまとめました。 フロントエンド React (create-react-app, JavaScript) Material UI (UIライブラリ) styled-components （CSSライブラリ） react-responsive　/ styled-media-query (レスポンシブ対応) クラウド AWS (API Gateway, Lambda(Python)) (Web APIの作成) デプロイ GitHub Pages その他 Slack incoming webhook (Slackへのチャットの送信) アーキテクチャ構成 基本的にはReactをビルドしたファイルをGitHub Pagesで公開しているという流れです。 それに加えて、今回は問い合わせフォームを作成し入力された内容をSlackに送る機能を考え、そのためにAWSでサーバーレスAPIを作成しました。 フロントエンド 今回はできるだけ早く完成させることを第一にしていたためNext.jsやTypeScriptは使用せず、webpackの設定なども必要ないcreate-react-appでプロジェクトを作成しました。 コンポーネントの設計としてはAtomic Designを参考にしましたが、まだ理解は浅く独自の構成になってしまった部分もあると思います。 例えば、表示されない機能だけのコンポーネントをutilsというディレクトリにまとめたりしています。 CSS関連では、大まかな画面デザインはMaterial UIのBoxやGridコンポーネントを使用して細かい部分はstyled-componentsにて行いました。 また、レスポンシブデザインとしたかったため、react-responsiveにて画面幅ごとに表示コンポーネントの切り替えをし、styled-media-queryにてstyled-componentsのCSSの切り替えをしました。 そしてWeb APIとの連携にはaxiosを使用しました。 バックエンド アーキテクチャ構成にも書きましたが、今回はSlackにお問い合わせフォームの内容を送るAPIのみ用意する必要がありました。 そのため、まずはSlack APIからincoming webhookのURLを生成しました。 生成したURLの扱いについて、送信専用なのでセキュリティ的にデータ流出のリスクはありませんが、念のため荒らしなどの対策も含めAWSのAPI GatewayとLambdaを使いフロントエンドから見えないようにしました。 同時にAPI自体のリクエスト数なども簡単に設定できて本当に便利ですね、、 デプロイ GitHub Pagesでのデプロイはgh-pagesというライブラリが便利そうだったので使用しました。 GitHubリポジトリの設定から一連の流れは以下の記事を参考にさせていただきました！ ハマったこと 本題とはそれますが今回の開発で一番ハマったことを1つ紹介します。 内容は、Material UIのモーダルの中にテキストの入力欄を配置したとき、入力値をuseStateを使って保持する実装をすると、入力欄のフォーカスが1文字入力するとすぐ外れてしまうという現象です。 今回は以下のようなお問い合わせフォームを作成しています。 このフォームで会社名をクリックして"a"と入力すると、すぐに会社名欄からフォーカスが外れて入力ができなくなってしまいました。 外れたフォーカスがどこにいったのか調べるとモーダル自体にいっているようで、しばらく悩みuseStateを使ったことで再レンダリングが走っていることが原因でないかと考えました。 そのためuseStateを使わない方法を考え、以下のように送信ボタンを押したのみ各入力欄の値を取得し送信する方式として解決しました。 入力中に値のバリデーションなどを行いたい場合はこの方法ではいけませんが、今回は簡易的なフォームであることからこれで良いことにしました。 入力ができなくなってしまうコード const Contact = props => { // 会社名の入力値の保持 const [company, setCompany] = useState(""); const handleSetCompany = (e) => { setCompany(e.target.value); } // 氏名の入力値の保持 const [name, setName] = useState(""); const handleSetName = (e) => { setName(e.target.value); } // メールアドレスの入力値の保持 const [mail, setMail] = useState(""); const handleSetMail = (e) => { setMail(e.target.value); } // 問い合わせ内容の入力値の保持 const [content, setContent] = useState(""); const handleSetContent = (e) => { setContent(e.target.value); } const Contents = () => ( <> ... <TextField id="company" label="会社名" variant="standard" required value={company} onChange={handleSetCompany} /> <TextField id="name" label="お名前" variant="standard" required value={name} onChange={handleSetName} /> <TextField id="mail" label="メールアドレス" variant="standard" required value={mail} onChange={handleSetMail} /> <TextField id="content" label="お問い合わせ内容" variant="standard" required value={content} onChange={handleSetContent} multiline rows={8} /> ... </> ); 修正後のコード // 送信ボタンのonClickイベントメソッド const handleSendMessage = () => { const company = document.getElementById("company").value; const name = document.getElementById("name").value; const mail = document.getElementById("mail").value; const content = document.getElementById("content").value; // 送信処理 　　　　　　　... } const Contents = () => ( <> ... <TextField id="company" label="会社名" variant="standard" required /> <TextField id="name" label="お名前" variant="standard" required /> <TextField id="mail" label="メールアドレス" variant="standard" required /> <TextField id="content" label="お問い合わせ内容" variant="standard" required multiline rows={8} /> ... </> ); さいごに ↓今回作成したコードのリポジトリです。 コードについての内容はほぼ書いていないので、気になる内容などありましたらコメントやTwitterからご連絡いただければ知識の範囲で答えさせていただきます！ また、少しでも興味持っていただいた方や同じような状況の方からのご連絡などもお待ちしております！

まえがき 百聞は一見に如かずということで、TODOアプリを作りながらReactを学んでいきます。 環境構築＆プロジェクト作成 基本的に↓に書いてある通り進めていく。 ・NodeJSがインストールされていること node -v ・プロジェクト作成 npx create-react-app react-practice ・動作確認 cd react-practice npm start 初期画面が表示される。 プロジェクト構成 ・src 　- Reactのソースコードをここに書いていく。 ・public 　- HTMLファイル/画像ファイル等 ... HTTPリクエストで取得されるやつら レンダリングの流れ index.htmlとindex.js ・index.htmlに対して、React(JavaScript)がレンダリングの処理をかける。 ・ReactDOM.render()＝レンダリング ・ReactDOM.render(①React要素, ②①を反映する場所) 　①React要素 を ②index.htmlの<div id="root"></div>に反映する。 App.js ・index.jsではimport App from './App';で参照しているApp.jsを元にレンダリングしているので、このApp.jsとそれに繋げるコンポーネントを作成していくことでReactアプリケーションを実装していく流れとなる。 ・exportされているApp関数は、HTMLっぽいやつを戻り値に返す関数。 ・index.jsのReactDOM.render()の第１引数にはReact要素を渡す必要があるので、このHTMLっぽいやつを書けばReact要素が生成される。 HTMLっぽいやつの正体 = 「JSX」というプログラミング言語 ・HTMLっぽいやつは「JSX」というプログラミング言語である。 ・JSXで書かれた処理はReact.createElement関数でReact要素を生成する処理に変換される。 　↓なぜ？↓ ・ReactDOM.render()の第１引数に渡すReact要素を生成する処理が、まさにこのReact.createElement関数だから。 ・毎回↓のような書き方をしてReact要素を定義するよりも、JSXのようなHTMLっぽいやつの方が当然書きやすいからJSXを使うよね～という感じ。 // aは"React要素" var a = React.createElement('h1', { myaddr: 'bar' }, 'First element!') // 第１引数にReact要素が渡される ReactDOM.render(a, document.getElementById('root')) TODOアプリ作っていく。 入力して追加する 参考 TODOアプリ作るうえで必要な機能 ・「追加」を押したら、TODOタスク一覧に反映されること ・反映されたTODOタスクは残り続けること ・「実行済」にしたらタスクが消えること つまり「状態」を保持する必要がある。ReactではReact Hooksを使って状態管理を実現する。 先ほどのApp.jsに直接書いてみた。 import { useState } from 'react'; function App() { /** * todo = ステートの値 * setTodo = ステートの値を更新するメソッド */ const [todo, setTodo] = useState(``) const [todoList, setTodoList] = useState([]); // TODOリストに入力項目を追加する関数 const addTodoList = () => { if (!todo) return const newTodoList = [todo]; // 配列(オブジェクト)に対して"イミュータブル"な操作で追加する setTodoList([newTodoList, ...todoList]); setTodo(``); } return ( <div> <h1>TODOタスク一覧</h1> <ul> {todoList.map((item) => { return <li>{item}</li> })} </ul> <form onSubmit={(e) => { e.preventDefault(); addTodoList(); }}> <input type="text" value={todo} onChange={(e) => setTodo(e.target.value)} /> <input type="submit" value="追加" // addTodoList関数そのもの渡す。 // 実行自体はform要素のonSubmit()で実施する onSubmit={addTodoList} /> </form> </div> ); } export default App; こんな感じになった。 追加したものを「実行済」にして消す　※後日追記

まえがき 百聞は一見に如かずということで、TODOアプリを作りながらReactを学んでいきます。 環境構築＆プロジェクト作成 基本的に↓に書いてある通り進めていく。 ・NodeJSがインストールされていること node -v ・プロジェクト作成 npx create-react-app react-practice ・動作確認 cd react-practice npm start 初期画面が表示される。 プロジェクト構成 ・src 　- Reactのソースコードをここに書いていく。 ・public 　- HTMLファイル/画像ファイル等 ... HTTPリクエストで取得されるやつら レンダリングの流れ index.htmlとindex.js ・index.htmlに対して、React(JavaScript)がレンダリングの処理をかける。 ・ReactDOM.render()＝レンダリング ・ReactDOM.render(①React要素, ②①を反映する場所) 　①React要素 を ②index.htmlの<div id="root"></div>に反映する。 App.js ・index.jsではimport App from './App';で参照しているApp.jsを元にレンダリングしているので、このApp.jsとそれに繋げるコンポーネントを作成していくことでReactアプリケーションを実装していく流れとなる。 ・exportされているApp関数は、HTMLっぽいやつを戻り値に返す関数。 ・index.jsのReactDOM.render()の第１引数にはReact要素を渡す必要があるので、このHTMLっぽいやつを書けばReact要素が生成される。 HTMLっぽいやつの正体 = 「JSX」というプログラミング言語 ・HTMLっぽいやつは「JSX」というプログラミング言語である。 ・JSXで書かれた処理はReact.createElement関数でReact要素を生成する処理に変換される。 　↓なぜ？↓ ・ReactDOM.render()の第１引数に渡すReact要素を生成する処理が、まさにこのReact.createElement関数だから。 ・毎回↓のような書き方をしてReact要素を定義するよりも、JSXのようなHTMLっぽいやつの方が当然書きやすいからJSXを使うよね～という感じ。 // aは"React要素" var a = React.createElement('h1', { myaddr: 'bar' }, 'First element!') // 第１引数にReact要素が渡される ReactDOM.render(a, document.getElementById('root')) TODOアプリ作っていく。 入力して追加する 参考 TODOアプリ作るうえで必要な機能 ・「追加」を押したら、TODOタスク一覧に反映されること ・反映されたTODOタスクは残り続けること ・「実行済」にしたらタスクが消えること つまり「状態」を保持する必要がある。ReactではReact Hooksを使って状態管理を実現する。 先ほどのApp.jsに直接書いてみた。 import { useState } from 'react'; function App() { /** * todo = ステートの値 * setTodo = ステートの値を更新するメソッド */ const [todo, setTodo] = useState(``) const [todoList, setTodoList] = useState([]); // TODOリストに入力項目を追加する関数 const addTodoList = () => { if (!todo) return const newTodoList = [todo]; // 配列(オブジェクト)に対して"イミュータブル"な操作で追加する setTodoList([newTodoList, ...todoList]); setTodo(``); } return ( <div> <h1>TODOタスク一覧</h1> <ul> {todoList.map((item) => { return <li>{item}</li> })} </ul> <form onSubmit={(e) => { e.preventDefault(); addTodoList(); }}> <input type="text" value={todo} onChange={(e) => setTodo(e.target.value)} /> <input type="submit" value="追加" // addTodoList関数そのもの渡す。 // 実行自体はform要素のonSubmit()で実施する onSubmit={addTodoList} /> </form> </div> ); } export default App; こんな感じになった。 追加したものを「実行済」にして消す　※後日追記

概要 npm install [パッケージ]コマンドでグローバルインストールを行う際、グローバルインストールはできているが、なぜかその[パッケージ]コマンドが効かない時の対処方法。 事前準備としてHomebrew Node.js npmのインストールをする。 環境 MacBookPro(M1Pro) OS:Monterey Homebrewのバージョン：3.3.16 nodeのバージョン：16.14.0 npmのバージョン：8.3.1 グローバルインストールをするコマンド expoCLIのグローバルインストール Terminal % npm install expo-cli --global Create-React-Appのインストール Terminal % npm i -g create-react-app など よし、エラーもなくこれで無事インストール完了！と、思ったら・・・ 結果 Terminal zsh: command not found:[パッケージ] グローバルインストールしたはずなのにこれはおかしい・・・ ちゃんとグローバルインストールできているか確認作業をしてみる。 試したこと まずはグローバルインストールができているかの確認 Terminal % npm list -g --depth=0 // 出力結果 /Users/ユーザー名/.npm-global/lib ├── expo-cli@5.2.0 グローバルインストールはできている。 となるとPATHが通っていないことが原因かな・・・ 解決方法 ホームディレクトリで【code .】コマンドを実行し、vscodeを開く。 もしくは【open ~/.zshrc】で.zshrcを開く。 以下の記述を追加する。 Terminal export PATH=~/.npm-global/bin:$PATH vscodeであれば、command＋Sなどで上書き保存をする。 最後にターミナル上でコマンドを実行する。 Terminal % source .zshrc これ忘れがちなので注意。 コマンドを実行したら念の為Terminalを一度再起動する。 最後にグローバルインストールしたパッケージが実行できるか確認する。 今回であれば・・・ expoのバージョンを確認 Terminal % expo --version // 出力結果 5.2.0 create-react-appのバージョンを確認 Terminal % create-react-app --version // 出力結果 5.0.0 無事バージョンが確認できればあとはアプリ開発するだけです！ お疲れ様でした！

こちらで使った jsx ファイルをプリコンパイルします。 React で jsx を使うサンプル (その 3) コマンドのインストール sudo npm install -g react-tools fetch_test.jsx を fetch_test.js にして src に入れます。 ツリー構造 $ tree . └── src └── fetch_test.js 変換 $ jsx --harmony src/ build/ built Module("fetch_test") ["fetch_test"] 変換後のツリー構造 $ tree . ├── build │   └── fetch_test.js └── src └── fetch_test.js 変換前のファイル src/fetch_test.js // ----------------------------------------------------------------------- // // fetch_test.jsx // // Mar/03/2022 // ----------------------------------------------------------------------- const getCities = async() => { // const url = 'http://localhost/tmp/json/tochigi.json' const url = './tochigi.json' const response = await fetch(url) let text = await response.text() // console.log(text) const dict_aa = JSON.parse(text) const Example = () => <table id='table_aa'> <thead> <tr><th>key</th> <th>name</th> <th>population</th> <th>date_mod</th> </tr> </thead> <tbody> { Object.entries(dict_aa) .map( ([key, value]) => <tr key={key}><td>{key}</td> <td>{value["name"]}</td> <td>{value["population"]}</td> <td>{value["date_mod"]}</td> </tr> ) } </tbody></table> ReactDOM.render(<Example />, document.getElementById('root')); } // ----------------------------------------------------------------------- console.log("*** start ***") getCities() console.log("*** end ***") // ----------------------------------------------------------------------- 変換後のファイル build/fetch_test.js // ----------------------------------------------------------------------- // // fetch_test.jsx // // Mar/03/2022 // ----------------------------------------------------------------------- const getCities = function() { // const url = 'http://localhost/tmp/json/tochigi.json' const url = './tochigi.json' const response = await fetch(url) let text = await response.text() // console.log(text) const dict_aa = JSON.parse(text) const Example = function() {return React.createElement("table", {id: "table_aa"}, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", null, "key"), React.createElement("th", null, "name"), React.createElement("th", null, "population"), React.createElement("th", null, "date_mod") ) ), React.createElement("tbody", null, Object.entries(dict_aa) .map( function($__0 ) {var key=$__0[0],value=$__0[1];return React.createElement("tr", {key: key}, React.createElement("td", null, key), React.createElement("td", null, value["name"]), React.createElement("td", null, value["population"]), React.createElement("td", null, value["date_mod"]) );}) ));} ReactDOM.render(React.createElement(Example, null), document.getElementById('root')); } // ----------------------------------------------------------------------- console.log("*** start ***") getCities() console.log("*** end ***") // ----------------------------------------------------------------------- このままだと次のエラーが出ます。 Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules そこで次のように編集します。 fetch_test.js const getCities = async function() { （省略） index.html は次のようにします。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>React Elements</title> </head> <body> <div id="root"></div> <br /> Mar/03/2022<br /> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="fetch_test.js"></script> </body> </html>

React で JSON をテーブルで表示してみます。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>React Elements</title> </head> <body> <div id="root"></div> <br /> Mar/03/2022<br /> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel" src="fetch_test.jsx" defer></script> </body> </html> fetch_test.jsx // ----------------------------------------------------------------------- // // fetch_test.jsx // // Mar/03/2022 // ----------------------------------------------------------------------- const getCities = async() => { // const url = 'http://localhost/tmp/json/tochigi.json' const url = './tochigi.json' const response = await fetch(url) let text = await response.text() // console.log(text) const dict_aa = JSON.parse(text) const Example = () => <table id='table_aa'> <thead> <tr><th>key</th> <th>name</th> <th>population</th> <th>date_mod</th> </tr> </thead> <tbody> { Object.entries(dict_aa) .map( ([key, value]) => <tr key={key}><td>{key}</td> <td>{value["name"]}</td> <td>{value["population"]}</td> <td>{value["date_mod"]}</td> </tr> ) } </tbody></table> ReactDOM.render(<Example />, document.getElementById('root')); } // ----------------------------------------------------------------------- console.log("*** start ***") getCities() console.log("*** end ***") // ----------------------------------------------------------------------- tochigi.json { "t0921": { "name": "宇都宮", "population": "34569", "date_mod": "2009-8-4" }, "t0922": { "name": "小山", "population": "17952", "date_mod": "2009-5-19" }, "t0923": { "name": "佐野", "population": "26929", "date_mod": "2009-3-28" }, "t0924": { "name": "足利", "population": "25197", "date_mod": "2009-12-21" }, "t0925": { "name": "日光", "population": "24976", "date_mod": "2009-11-25" }, "t0926": { "name": "下野", "population": "28945", "date_mod": "2009-1-26" } } ブラウザーで表示 本番で使う時は、コンパイルをする必要があります。 You are using the in-browser Babel transformer. Be sure to precompile your scripts for production

この記事は Zenn に移行しました。 https://zenn.dev/riemonyamada/articles/0fcd94cd55b33f

TypeScript Import Sorterの使い方 目次 はじめに 使い方 【手動】 ファイル単体をソートする 【手動】 フォルダを指定し、内部の対象ファイルをソートする 【自動】 保存時にソートするようにsetting.jsonに設定を保存する はじめに こちらの記事は、VSCodeの拡張機能TypeScript Import Sorterの使い方を説明したものになります。 詳しくは下記サイトを参照してください TypeScript Import Sorter 使い方 下記の方法があります 【手動】 ファイル単体をソートする 【手動】 フォルダを指定し、内部の対象ファイルをソートする 【自動】 保存時にソートするようにsetting.jsonに設定を保存する 【手動】 ファイル単体をソートする 対象のファイルをVSCodeで開く VSCodeのコマンドパレットを開く TSI: Sort Importsを選択 選択中のファイルがソートされる 【手動】 フォルダを指定し、内部の対象ファイルをソートする サイドメニューにて対象のフォルダを右クリック Sort Imports (Directory deep)を選択 ※ フォルダ内にサブモジュールファイルなどがあるとそちらもソートしてしまうので注意！ 【自動】 保存時にソートするようにsetting.jsonに設定を保存する VSCodeのコマンドパレットを開く 基本設定: 設定(JSON)を開くと入力しsetting.jsonを開く 下記をsetting.jsonに記載し保存する { // ...その他拡張機能 // TypeScriptインポートソーターの自動ソート "importSorter.generalConfiguration.sortOnBeforeSave": true } VSCodeを再起動する 対象のファイルを保存しソートできていることを確認する

前準備 環境：mac とりあえずexpo + react native でアプリ作成 EAS CLI　入れる eas-cliをinstall expoの設定を色々やってくれる $npm install -g eas-cli *Pathを通したりはいる $npm root -g /Users/****/.nvm/versions/node/v15.5.1/lib/node_modules $ls /Users/****/.nvm/versions/node/v15.5.1/lib/node_modules eas-cli expo-cli ... $echo 'export PATH=$HOME/.nvm/versions/node/v15.5.1/lib/node_modules/eas-cli/bin:$PATH' >> ~/.bash_profile $source ~/.bash_profile $eas -v eas-cli/0.46.0 darwin-x64 node-v15.5.1 OK EAS CLI 準備 ログイン $eas login ? Email or username > [expoで作成したアカウント名] ? Passwod > [パスワード] Logged in 設定ファイル作成 試しにiOSだけ $cd [projectのフォルダ] $eas build:configure ? Which platforms would you like to configure for EAS Build? › - Use arrow-keys. Return to submit. All ❯ iOS Android ✔ Generated eas.json ? Your project is ready to build. - Run eas build when you are ready to create your first build. - Once the build is completed, run eas submit to upload the app to app stores. - Learn more about other capabilities of EAS Build: https://docs.expo.dev/build/introduction 環境変数を設定していく $eas secret:create ★ eas-cli@0.47.0 is now available, please upgrade. Proceeding with outdated version ✔ Linked to project @*****/***** (​https://expo.dev/accounts/******/projects/******​) ✔ Secret name: …[環境変数] ✔ Secret value: … [.envの値] これを必要分だけ $eas secret:listで登録結果を確認できる。 これしとかないと審査時にクラッシュでリジェクトされた（１敗） build　 yesでどんどん進めてく eas build --platform ios ✔ Linked to project @****/**** ✔ Using remote iOS credentials (Expo server) If you provide your Apple account credentials we will be able to generate all necessary build credentials and fully validate them. This is optional, but without Apple account access you will need to provide all the values manually and we can only run minimal validation on them. ? Do you want to log in to your Apple account? › (Y/n) › The password is only used to authenticate with Apple and never stored on EAS servers Learn more: https://bit.ly/2VtGWhU ? Password (for ********): › › Saving Apple ID password to the local Keychain Learn more: https://docs.expo.dev/distribution/security#keychain ✔ Logged in, verify your Apple account to continue Two-factor Authentication (6 digit code) is enabled for *********. Learn more: https://support.apple.com/en-us/HT204915 ? How do you want to validate your account? › device / sms ? Please enter the 6 digit code › **** ✔ Logged in Local session ✔ Bundle identifier registered **** ✔ Synced capabilities: Enabled: Push Notifications ✔ Synced capability identifiers: No updates ✔ Fetched Apple distribution certificates ? Generate a new Apple Distribution Certificate? … yes ✔ Created Apple distribution certificate ✔ Created distribution certificate ✔ Generate a new Apple Provisioning Profile? … yes ? Created Apple provisioning profile ✔ Created provisioning profile Project Credentials Configuration Project ***** Bundle Identifier ***** App Store Configuration Distribution Certificate Serial Number **** Expiration Date Mon, 16 Jan 2023 21:28:19 GMT+0900 Apple Team ***** Updated 11 seconds ago Provisioning Profile Developer Portal ID **** Status active Expiration Mon, 16 Jan 2023 21:28:19 GMT+0900 Apple Team **** Updated 3 seconds ago All credentials are ready to build **** ? Would you like to set up Push Notifications for your project? › (Y/n) ? Generate a new Apple Push Notifications service key? … yes ✔ Created Apple push key ✔ Created push key ✔ Push Key assigned to **** ✔ Uploaded to EAS 6s Learn more: https://expo.fyi/eas-build-archive Build details: https://expo.dev/accounts/****/builds/****** Waiting for build to complete. You can press Ctrl+C to exit. ⠙ Build in progress... ここまで来ると順番待ちが発生するみたい　３０分くらいかかる？ ✖ Build failed ? iOS build failed: Unknown error. Please see logs. と思ったらエラーが・・・ログを見ろとのこと ✔ Build finished ? iOS app: https://expo.dev/artifacts/eas/*******.ipa ログ見て修正して再度ビルドで通ったらipaファイルってのができた （環境変数も .env読み込んで勝手にやってくれた） APP STORE CONNECT 準備 次にhttps://appstoreconnect.apple.com/に接続し マイAppから＋ボタンで新規App　でモーダルが開くので以下を入力していく ・プラットフォーム　iOS ・名前　（他で使われてたら怒られる） ・プライマリ言語　日本語 ・バンドルID　さっきのビルドで一緒に作られたIDが選択できる ・SKU アプリを識別できる名前を自分で決定する ・ユーザーアクセス　制限　なし 登録するとアプリの詳細設定画面？が開く TRANS PORTER 先にMACのapp storeを開き、TransPoterというアプリをインストールする アプリを開いてIPAファイルをドラッグすると読み込まれてデリバリボタンが表示されるのでクリックする 終わったらデリバリ済みとなった。 再度 APP　STORE　CONNECT やったこと サポートURLとしてGatsbyでブログサイト立ち上げ（Vercel) プライバシーポリシーページも作成 ここを使った　https://app-privacy-policy-generator.firebaseapp.com/ スクリーンショットが４サイズ画面＊３＝１２枚ひつようだった　（最低で） あと、広告映ってるスクリーンショットはあかんかった https://help.apple.com/app-store-connect/#/devd274dd925 著作権 使用許諾契約、年齢制限して、コンテンツ配信権、なども設定 リジェクトをくらいまくる 申請後、いろいろな理由で差し戻しされた。 モーダルの言語が統一されてないよ 日本語設定なのに英語のモーダルがでてくる→日本語に統一 広告を許可してもらうモーダルの設定でめちゃレスバした { "expo": { ... "ios": { ... "infoPlist": { "NSUserTrackingUsageDescription": "アプリのバグ修正および体験向上のため、ユーザー行動データを利用します。" } } } この設定だけで実機では日本語オンリーでいけてたけど、レビュー者からは日本語と英語が混じってると返信。 どのようにテストしたか聞くも、返信はいつも同じで帰ってこず。 仕方なく、info.plistを追加した。（結果は一緒のはずだが） <key>NSUserTrackingUsageDescription</key> <string>アプリのバグ修正および体験向上のため、ユーザー行動データを利用します。</string> これで通った。 あとは、 スクリーンショットに広告が入っとる→広告なしのスクリーンショットに差し替え 最新OSのiPadで起動するとクラッシュした こっちで試したけど問題なかった　→ そのことを英語で返信 →　なぜか通った 参考にさせていただいたサイト https://note.com/umotion/n/n457b371c731f https://zenn.dev/kazushige/articles/9afa10b36d6828

はじめに 　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。 　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。 　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。 axiosによるHTTPリクエスト Client.js // axios-case-converterは、snake_case / camelCaseを変換するため利用 import applyCaseMiddleware from "axios-case-converter"; // axiosをインポート import axios from "axios"; // ヘッダーはケバブケースのままにする const options = { ignoreHeaders: true, }; // URLの共通部分を設定 const client = applyCaseMiddleware(axios.create({ baseURL: "http://localhost:3001/" }), options) export default client; Auth.js import client from './Client' import Cookies from 'js-cookie' // サインアップ export const signUp = (params) => { return client.post("auth", params) } // サインイン export const signIn = (params) => { return client.post("auth/sign_in", params) } // サインアウト export const signOut = () => { return (client.delete( "auth/sign_out", { headers: { "access-token": Cookies.get("_access_token"), "client": Cookies.get("_client"), "uid": Cookies.get("_uid") } } )) } // 認証済みのユーザーを取得 export const getCurrentUser = () => { if (!Cookies.get("_access_token") || !Cookies.get("_client") || !Cookies.get("_uid")) return (client.get( "/auth/sessions",{headers: { "access-token": Cookies.get("_access_token"), "client": Cookies.get("_client"), "uid": Cookies.get("_uid") }} )) }

はじめに こんにちは、家業を飛び出したヤメツギフリーランスの笠原大瑚(@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をインストール 作業用フォルダを作成する ・使いたい場所に作業用フォルダを作成 ・フォルダの名前は事前準備で決めた名前にする ・今回はdocker-react-appとする 【現時点の作業用フォルダの構成】 docker-react-app 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 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 Dockerイメージをビルドする Dockerへnode.jsをベースとしたイメージのビルドを行う。 作成したディレクトリ（Dockerfileが入っているところ）をTerminalで開き、以下のコマンドを打ち込むことでdockerfileに基づいたイメージがビルドされる。 docker-compose build 以下のような画面にFINISHEDという文言が表示されていたらビルド完了 【豆知識】Reactプロジェクト作成場所にしたいフォルダをターミナルで開く方法 方法１：ターミナルからcd(チェンジディレクトリ)コマンドで移動 ・ターミナルを起動 ・コマンドによって階層を移動 ・ターミナルでプロジェクト作成予定のフォルダが参照される 良く使うターミナルのコマンド（これだけは最低でも覚える） .. 　　　　　　　　　　　　　　：階層を一つ上がる cd {同じ階層にあるフォルダ名}　：同じ階層にある指定のフォルダへ移動 ls -l　　　　　　　　　　　　　：現在の階層にあるフォルダをリスト形式で縦表示 方法２：フォルダを作成したあとに、右クリックから開く ・フォルダを新規作成 ・フォルダ内の空白を右クリック ・「Windowsターミナルで開く」をクリック ・ターミナルでプロジェクト作成予定のフォルダが参照される 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を起動する手順を解説 Dockerを起動する ・まずはDockerを起動 ・クジラのマークのアレ? コンテナを起動し、Reactを実行する ・Docker上でイメージを選択し、Runを押す ・「Optional Settings」を設定可能なので、コンテナ名をわかりやすい名前（プロジェクト名など）に設定する ・Runを押す ・コンテナが作成される ・コンテナを起動　※起動している状態（緑色）になっていたらここはスキップ ・ターミナルを起動して、作業用フォルダを参照 ※docker上から開くのではなく、PC上からそのままターミナルで開く →ターミナル上で移動するか、フォルダを開いて右クリで起動するかのどちらか。 ・以下のコマンドを実行すると、docker-compose.ymlが実行される docker-compose up ・以下のような文言がターミナルに表示されていたら起動成功 Reactプロジェクト画面が立ち上がるか確認 ・Webブラウザを開く ・アドレスバーに http://localhost:3000 と入力して開く →ここの3000とはdocker-compose.ymlファイル内に記載したポート番号3000のこと →変えたい場合は、ymlファイルのポート番号記載を修正してやり直し ・次のような画面が出ればプロジェクト作成成功

はじめに こんにちは、家業を飛び出したヤメツギフリーランスの笠原大瑚(@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ファイルのポート番号記載を修正してやり直し ・次のような画面が出ればプロジェクト作成成功