- 投稿日：2021-05-07T19:54:44+09:00
【環境構築】LaravelでReactとTypescriptを使う方法
今回はLaravelでreactとTypescriptを使えるように開発環境を構築していきます。 初学者なので2週間ぐらいかかってしまいましたが誰かの参考になれば幸いです。 開発環境 Docker 20.10.5 docker-compose 1.28.5 php 7.3 laravel 6.20.26 Composer 2.0.8 MySQL 8.0 nginx 1.15.12-alpine Dockerを使っていますがDockerの環境構築は省略させていただいてコンテナ内でlaravelをインストールするところから始めます。 Laravel＆Reactの環境を整える はじめにappコンテナに入りLaravelをインストールします。 # composer create-project --prefer-dist "laravel/laravel=6.*" 続いてLaravel/uiをインストール。 最新版のLaravel/uiをインストールするとLaravel6ではエラーが出るのでバージョン指定をしています。 # composer require laravel/ui:^1.0 --dev Reactのスカフォールドをインストール。ついでに認証機能も追加しました。 # php artisan ui react --auth webコンテナに入りnpmでインストールとビルドをします。(Dockerfileでnodeの設定済み) # npm install & npm run dev ここまででローカルサーバーにアクセスしたらちゃんとLaravelのwelcome.blade.phpのビューが表示されていたら成功です。 Laravel Mixを用いてTypescriptの環境を構築する webコンテナに入りnpmコマンドでTypescriptで必要なパッケージをインストールします。 ついでにreact-router-domもこのタイミングでインストール。 # npm install ts-loader typescript react-router-dom @types/react @types/react-dom @types/react-router-dom --save-dev webpack.mix.jsを編集 TypeScriptとSCSSでビルドできるようにwebpack.mix.jsを編集します。 webpack.mix.js const mix = require('laravel-mix'); /* |-------------------------------------------------------------------------- | Mix Asset Management |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel application. By default, we are compiling the Sass | file for the application as well as bundling up all the JS files. | */ mix.ts('resources/ts/index.tsx', 'public/js') .sass('resources/sass/app.scss', 'public/css') .version(); おそらくreactをインストールしているのでデフォルトではmix.react()になっていると思いますがtypescriptをビルドするのでmix.ts()に変更します。 また、.version()を追加しておかないとnpm run devをしてもキャッシュが残っていて変更が反映されないことがあるので一応記述します。 tsconfig.jsonを作成 webコンテナ内で以下のコマンドを実行してtsconfig.jsonを作成します。 ./node_modules/.bin/tsc --init オプションが多いので適宜確認するしかないかと... 地味にエラーがよく出るのでエラー内容確認して適宜修正しました。 tsconfig.json { "compilerOptions": { "outDir": "./built/", "sourceMap": true, "strict": true, "noImplicitReturns": true, "noImplicitAny": true, "module": "es2015", //フロント使用予定なのでcommonjsは使用しません "jsx": "react", // tsxファイルをjsxやjsにコンパイルする際の出力の形式を指定する "experimentalDecorators": true, "emitDecoratorMetadata": true, "moduleResolution": "node", "target": "es6", "lib": [ "es2016", "dom" ], "allowSyntheticDefaultImports": true // エクスポートしないモジュールからのインポートを許可する。これでtypescriptでreactをインポートするときにimport React from 'react';を使えるようになる }, "include": [ "resources/ts/**/*" // TypeScriptのソース配置場所 ] } tsxファイルを作成して表示されるか確認 tsxファイルが正しく表示されるか確認します。 まず、welcome.blade.phpを以下のように編集します。 resouces/views/welcome.blade.php <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <link rel="stylesheet" href="{{ mix('css/app.css') }}" /> </head> <body> <div id="app"></div> </body> <script src="{{ mix('/js/index.js') }}"></script> </html> 次にresources配下にtsフォルダを作成し、その中にindex.tsxを作成します。 index.tsxは以下のように記述してください。 index.tsx import React from 'react'; import ReactDOM from 'react-dom'; const App: React.FC = () => { return ( <div> <p>こんにちは</p> </div> ) } if (document.getElementById('app')) { ReactDOM.render(<App />, document.getElementById('app')); } そしてもう一度npm run devを実行しましょう。 # npm run dev このままローカルサーバーで.index.tsxが表示されればいいのですが、僕の場合はTypeError: loaderContext.getOptions is not a functionというエラーが出ていました。 これはlaravelのバージョン(今回は6系を使用)に対してts-loaderのバージョンが新しすぎるために出るエラーのようです。 ts-loaderを一度アンインストールして古いバージョンを入れましょう。 # npm uninstall ts-loader # npm install ts-loader@8.2.0 --save-dev これで最後にもう一度npm run devを実行しましょう。 # npm run dev
- 投稿日：2021-05-07T19:54:44+09:00
【環境構築】LaravelでReactとTypescriptを使う準備
今回はLaravelでreactとTypescriptを使えるように開発環境を構築していきます。 初学者なので2週間ぐらいかかってしまいましたが誰かの参考になれば幸いです。 開発環境 Docker 20.10.5 docker-compose 1.28.5 php 7.3 laravel 6.20.26 Composer 2.0.8 MySQL 8.0 nginx 1.15.12-alpine Dockerを使っていますがDockerの環境構築は省略させていただいてコンテナ内でlaravelをインストールするところから始めます。 Laravel＆Reactの環境を整える はじめにappコンテナに入りLaravelをインストールします。 # composer create-project --prefer-dist "laravel/laravel=6.*" 続いてLaravel/uiをインストール。 最新版のLaravel/uiをインストールするとLaravel6ではエラーが出るのでバージョン指定をしています。 # composer require laravel/ui:^1.0 --dev Reactのスカフォールドをインストール。ついでに認証機能も追加しました。 # php artisan ui react --auth webコンテナに入りnpmでインストールとビルドをします。(Dockerfileでnodeの設定済み) # npm install & npm run dev ここまででローカルサーバーにアクセスしたらちゃんとLaravelのwelcome.blade.phpのビューが表示されていたら成功です。 Laravel mixとTypescriptの環境を構築する webコンテナに入りnpmコマンドでTypescriptで必要なパッケージをインストールします。 ついでにreact-router-domもこのタイミングでインストール。 # npm install ts-loader typescript react-router-dom @types/react @types/react-dom @types/react-router-dom --save-dev webpack.mix.jsを編集 TypeScriptとSCSSでビルドできるようにwebpack.mix.jsを編集します。 webpack.mix.js const mix = require('laravel-mix'); /* |-------------------------------------------------------------------------- | Mix Asset Management |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel application. By default, we are compiling the Sass | file for the application as well as bundling up all the JS files. | */ mix.ts('resources/ts/index.tsx', 'public/js') .sass('resources/sass/app.scss', 'public/css') .version(); おそらくreactをインストールしているのでデフォルトではmix.react()になっていると思いますがtypescriptをビルドするのでmix.ts()に変更します。 また、.version()を追加しておかないとnpm run devをしてもキャッシュが残っていて変更が反映されないことがあるので一応記述します。 tsconfig.jsonを作成 webコンテナ内で以下のコマンドを実行してtsconfig.jsonを作成します。 ./node_modules/.bin/tsc --init オプションが多いので適宜確認するしかないかと... 地味にエラーがよく出るのでエラー内容確認して適宜修正しました。 tsconfig.json { "compilerOptions": { "outDir": "./built/", "sourceMap": true, "strict": true, "noImplicitReturns": true, "noImplicitAny": true, "module": "es2015", //フロント使用予定なのでcommonjsは使用しません "jsx": "react", // tsxファイルをjsxやjsにコンパイルする際の出力の形式を指定する "experimentalDecorators": true, "emitDecoratorMetadata": true, "moduleResolution": "node", "target": "es6", "lib": [ "es2016", "dom" ], "allowSyntheticDefaultImports": true // エクスポートしないモジュールからのインポートを許可する。これでtypescriptでreactをインポートするときにimport React from 'react';を使えるようになる }, "include": [ "resources/ts/**/*" // TypeScriptのソース配置場所 ] } tsxファイルを作成して表示されるか確認 tsxファイルが正しく表示されるか確認します。 まず、welcome.blade.phpを以下のように編集します。 resouces/views/welcome.blade.php <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <link rel="stylesheet" href="{{ mix('css/app.css') }}" /> </head> <body> <div id="app"></div> </body> <script src="{{ mix('/js/index.js') }}"></script> </html> 次にresources配下にtsフォルダを作成し、その中にindex.tsxを作成します。 index.tsxは以下のように記述してください。 index.tsx import React from 'react'; import ReactDOM from 'react-dom'; const App: React.FC = () => { return ( <div> <p>こんにちは</p> </div> ) } if (document.getElementById('app')) { ReactDOM.render(<App />, document.getElementById('app')); } そしてもう一度npm run devを実行しましょう。 # npm run dev このままローカルサーバーで.index.tsxが表示されればいいのですが、僕の場合はTypeError: loaderContext.getOptions is not a functionというエラーが出ていました。 これはlaravelのバージョン(今回は6系を使用)に対してts-loaderのバージョンが新しすぎるために出るエラーのようです。 ts-loaderを一度アンインストールして古いバージョンを入れましょう。 # npm uninstall ts-loader # npm install ts-loader@8.2.0 --save-dev これで最後にもう一度npm run devを実行しましょう。 # npm run dev
- 投稿日：2021-05-07T17:15:43+09:00
React + OpenWeatherMap API で現在の気象を表示する
はじめに React-Leafletでマップを表示で地図を表示させ、マーカーを置いた。この記事では、OpenWeatherMap の API である Weather maps 1.0 を用いて、気象データを地図に重ね合わせる。React Leaflet、Weather maps 1.0 を参考にした。また leaflet や react-leaflet はインストール済みという前提で進める。インストールをしていない場合はReact-Leafletでマップを表示を参照。 API キーの取得 OpenWeatherMap の API から気象海象データを取得するには、API キーを取得する必要がある。Create New Account にてアカウントを作成すればキーを取得できる。いくつか制限はあるが、無料版で十分すぎる機能が使える。 コンポーネントの作成 地図を表示させ、さらに気象データを重ねるコンポーネントのコードを以下に示す。このコンポーネントでは現在の雲、降水量、海面気圧、風速、気温の5つの気象データを重ねることができる。 Weather.js import React from "react"; import "leaflet/dist/leaflet.css"; import { LayersControl, MapContainer, TileLayer, WMSTileLayer } from "react-leaflet"; const APIKey = "取得した API キーを書く"; const SimpleLeaflet = () => { const position = [35.685175, 139.7528]; return ( <div> <MapContainer center={position} zoom={13} style={{ height: "100vh" }} > <TileLayer attribution='&copy <a href="http://osm.org/copyright";>OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <LayersControl position="topright" > <LayersControl.Overlay name="Cloud" checked> <WMSTileLayer url={`https://tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid=${APIKey}`} /> </LayersControl.Overlay> <LayersControl.Overlay name="Precipitation"> <WMSTileLayer url={`https://tile.openweathermap.org/map/precipitation_new/{z}/{x}/{y}.png?appid=${APIKey}`} /> </LayersControl.Overlay> <LayersControl.Overlay name="Sea Level Pressure"> <WMSTileLayer url={`https://tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=${APIKey}`} /> </LayersControl.Overlay> <LayersControl.Overlay name="Wind Speed"> <WMSTileLayer url={`https://tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=${APIKey}`} /> </LayersControl.Overlay> <LayersControl.Overlay name="Temperature"> <WMSTileLayer url={`https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=${APIKey}`} /> </LayersControl.Overlay> </LayersControl> </MapContainer> </div> ) } export default SimpleLeaflet; 上記コンポーネントを読み込んで、開発用サーバーで実行した結果を以下に示す。 LayersControl を使用することで、上記 GIF のようにどの Layer を重ねるか選択できるようにしている。また LayersControl.Overlay タグ内に 'checked' と追記することで、デフォルトで選択状態にできる。 Layers control | React Leaflet に Layer のグループ分けなど細かい編集の例なども載っている。 おわりに 今回は Weather maps 1.0 を試してみた。現在は Weather maps 2.0 がローンチしており、そこでは予報データや過去のデータも取得できるとのことだったが、試したところ結果がうまく反映されなかったので、うまく扱える人がいたら教えて下さい。 （2021/5/7 追記） 直接 OpenWeatherMap に問い合わせたところ、無料版では対応していないとのこと。Detailed price - OpenWeatherMap にたしかにそう書いてある。試せなくて残念。
- 投稿日：2021-05-07T13:39:27+09:00
Reactを使ったお天気アプリを作成してみた
はじめに Reactを学習していくにあたり、REST APIの勉強を兼ねてお天気アプリを作成してみました。 ソースコードのビルドにはOpenWeather APIのAPIキーとGoogle Maps APIのキーが必要となります。 仕様について 今回、天気アプリ作成にあたり、まず仕様について下記のように項目出しを行いました。 あらかじめおおざっぱながらも機能を書き出すことで自分が何から手をつけていくのがよいか、また途中で迷子にならないよう進行することができたと思います。 ページを表示した時に、WebAPIのgeolocationAPI（位置情報API）を利用して現在地の緯度経度を取得する 取得した緯度経度を使ってOpenWeatherAPI経由で天気情報を取得する 取得した天気情報を使って現在地付近の情報を表示する 取得日時を表示する 天気アイコンを表示する 現在の気温を表示する 体感温度を表示する 最高気温を表示する 最低気温を表示する 風向きを表示する 風速を表示する 気圧を表示する 湿度を表示する 7日間予報を表示する 1時間ごとの予想気温をグラフで表示する 地名から検索ができる 利用サービス・利用技術 位置情報API … 現在地の取得 Open Weather API … 天気情報の取得 Google Maps API … 地図情報、住所から経度緯度の取得 SNAZZY MAPS … Googleマップのデザインスタイル Chart.js … グラフ描画 突然のテスト駆動開発へ挑戦 前回ポートフォリオサイトを作ったときにはStorybookへ挑戦したのですが、今回はテストを書いてみるというテーマで開発を開始しました。 テストについて色々と調べていくと気になったのがテスト駆動開発という言葉。前々から言葉だけは聞いたことがあったのですが、実際にはどういった手法になっているのかまったく知らなかったため和田卓人氏の下記講演の視聴から勉強してみました。 さらに上記講演をReactのフロントエンド開発に置き換えた解説記事も参考にしながら、手を動かしていきます。 が、すぐに車輪は止まりました笑 自分にはまだ早かったのか、タスクの粒度を細かくしていくことができず複雑怪奇になってしまい、結局部分的なテストコードしか書いていくことができませんでした。。。 テストを書くということ自体にはとても感銘を受けたので、今後もテストについては勉強を続けながら書いていこうと思います。 emotionを試す 今回スタイルにつていはemotionのcss Propを使ってみました。 Create React App、TypeScript環境で利用するにはひと手間必要で、 ソースの先頭に下記1行を追記する必要があります。 /** @jsxImportSource @emotion/react */ 一例として今回ローディング画面で利用したスケルトンコンポーネントは下記のようになっています。 /src/components/atoms/Button/index.tsx /** @jsxImportSource @emotion/react */ import React from 'react'; import { css, keyframes } from '@emotion/react'; export type Props = { height?: string; width?: string; radius?: string; }; const Skelton: React.VFC<Props> = (props) => { const { height = '1.5rem', width = '100%', radius = '0' } = props; return ( <div css={skeltonStyle} style={{ width: `${width}`, height: `${height}`, borderRadius: `${radius}` }} /> ); }; export default Skelton; const skeltonAnimation = keyframes` 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } `; const skeltonStyle = css` width: 100%; height: 1.5rem; line-height: 2; background: #d9d9d9; position: relative; overflow: hidden; margin: 0.5rem 0; &::before { content: ''; display: block; height: 100%; width: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); position: absolute; top: 0; left: 0; z-index: 100; animation: ${skeltonAnimation} 1.2s linear infinite; } `; 私のVS Code環境だとcss Propを利用すると css`` を利用したあとのシンタックスハイライトがなんだかおかしくなるので下の方に追いやっています。個人的なイメージとしてはvue.jsの<style>ブロックみたいな雰囲気に感じました。 苦労した点 位置情報APIの取得、そこからOpenWeatherAPIの取得、Googleマップの表示と非同期処理の完了を待って、また次の非同期処理へという流れが続く部分でかなり混乱してしまいました。 上記にあわせてuseStateが変数を格納するタイミング、useEffectの実行タイミングの理解も曖昧だったため、さらに悪循環にはまっていきましたが、ひとつずつconsole.logで動きを確かめながら解消していきました。 さいごに 今回はテストコードの記載に挑戦しながらアプリを作成してみましたのですが、テストコードを書くことを通じて根本的なロジックというかプログラムの考え方を少しだけ知ることができました。このアプリのテストコードをもう少し書き進めながら、次の制作物でも引き続きテストコードに挑戦していこうと思います。 関連記事 参考サイト 位置情報API（geolocation API） Google Maps API TDD、jest、React Testing Library Chart.js emotion css prop
- 投稿日：2021-05-07T13:29:31+09:00
Reactで画像アップロード機能を実装してローカルファイルを読み込ませる
FileReaderを使ってローカルにある画像をアップロードさせる機能の作り方を実装します。 この記事をベースにした別記事も用意しています 準備中：Firebaseを使わずにブラウザ上でローカル画像のサイズをリサイズする new Image() のcanvasを利用した方法 完成品 ソースコード：https://codesandbox.io/s/react-img-upload-e4q8s?file=/src/App.js 無駄な要素は極力はぶいた簡素なアップローダーにしました。 FileReaderを使って実装 imgUploader.jsx import { useState } from "react"; import "./styles.css"; const App = () => { const [uploadImg, setUploadImg] = useState(""); const handleUploadImg = (e) => { if (!e.currentTarget.files || e.currentTarget.files.length === 0) return; const fileReader = new FileReader(); const file = e.currentTarget.files[0]; if (file.type !== "image/jpeg" && file.type !== "image/png") return; fileReader.onloadend = () => { setUploadImg(fileReader.result); }; fileReader.readAsDataURL(file); }; return ( <div className="App"> <h1>React画像アップロード</h1> <input type="file" onChange={(e) => handleUploadImg(e)} /> <div style={{ margin: "10px" }}> <img src={uploadImg} alt="アップロード画像" style={{ maxWidth: "200px" }} /> </div> </div> ); }; export default App; JSXエレメントの解説 省略 <input type="file" onChange={(e) => handleUploadImg(e)} /> 省略 上記のように input の属性 file に指定して onChange で画像を選ばれた後に関数が走るようにしておきます。 省略 <img src={uploadImg} alt="アップロード画像" style={{ maxWidth: "200px" }} /> 省略 src={} の中身には uploadImg の state を入れておきます。 state は onChange の中の関数（handleUploadImg）で変化させます。 handleUploadImgの解説 handleUploadImg.jsx const handleUploadImg = (e) => { if (!e.currentTarget.files || e.currentTarget.files.length === 0) return; //ファイルが存在しない状態ならそのまま離脱 const fileReader = new FileReader(); const file = e.currentTarget.files[0]; if (file.type !== "image/jpeg" && file.type !== "image/png") return; //ファイル形式が jpeg, png 以外なら離脱 fileReader.onloadend = () => { setUploadImg(fileReader.result); //resultの中にblob形式の画像データとして画像が格納されているのでそれをイメージ画像として読み込む }; fileReader.readAsDataURL(file); //new FileReader()インスタンスの readAsDataURL() メソッドを使ってアップロードしたファイルをそのまま読み込ませて fireReader.onloadend を走らせ fileReader.result の中身を取り出す }; 以上のように簡単に実装することができます。
- 投稿日：2021-05-07T10:12:05+09:00
Docker + Rails6 + React + TypeScript の環境構築
streampack の endo です。 ローカルで、Docker + Rails6 + React(react-rails) + TypeScript の環境を作る機会があり、ちょっと苦労したので備忘録になります。 Docker 上に Rails プロジェクトを作成する まずは Docker 上に Rails プロジェクトを作成。DB は MySQL5.7。 適当なディレクトリを作り、 Gemfile Gemfile.lock Dockerfile docker-compose.yml の 4 ファイルを作成する。 Gemfile source "https://rubygems.org" git_source(:github) {|repo_name| "https://github.com/#{repo_name}" } gem "rails" Gemfile.lock(空ファイル) Dockerfile FROM ruby:2.7.2 RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \ && apt-get update \ && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list RUN apt-get update -qq && apt-get install -y build-essential \ libpq-dev \ nodejs \ yarn RUN mkdir /myapp ENV APP_ROOT /myapp WORKDIR $APP_ROOT ADD ./Gemfile $APP_ROOT/Gemfile ADD ./Gemfile.lock $APP_ROOT/Gemfile.lock RUN bundle install ADD . $APP_ROOT docker-compose.yml version: "3" services: db: image: mysql:5.7 environment: MYSQL_ROOT_PASSWORD: password MYSQL_DATABASE: demo-db ports: - "3306:3306" volumes: - demo-db:/var/lib/mysql web: build: . command: rails s -p 3000 -b '0.0.0.0' volumes: - .:/myapp ports: - "3000:3000" links: - db volumes: demo-db: docker-compose run コマンドで Rails プロジェクトの作成。 shell $ docker-compose run web rails new . --force --no-deps --database=mysql Rails プロジェクトを作成できたら、build する。 shell $ docker-compose build データベースの作成 config/database.yml を編集する。 config/database.yml ## 編集した箇所のみ抜粋 default: &default password: password # docker-compose.yml の MYSQL_ROOT_PASSWORD: で設定したパスワード host: db # localhost → db に変更 データベースを作成する。 shell $ docker-compose run web rake db:create Docker の起動 Docker を起動する。 shell $ docker-compose up http://0.0.0.0:3000 にアクセスすると、Rails の初期画面が表示される。 この時 shell に以下のようなエラーが出るときは、 shell Cannot render console from 172.20.0.1! Allowed networks: 127.0.0.0/127.255.255.255, ::1 config/environments/development.rb に config/environments/development.rb Rails.application.configure do config.web_console.permissions = '0.0.0.0/0' end を追加すればエラーログが消える。 React の導入 react-rail を使って react を rails プロジェクトに導入する。 Gemfile gem 'react-rails' 再度 build を実行する。 shell $ docker-compose build 下記コマンドを実行する。 shell $ docker-compose run web rails webpacker:install # OR (on rails version < 5.0) rake webpacker:install $ docker-compose run web rails webpacker:install:react # OR (on rails version < 5.0) rake webpacker:install:react $ docker-compose run web rails generate react:install 実際に React が導入されているか確認する。 controller の作成。 shell $ docker-compose run web rails g controller sample index 以下のファイルが作成されていれば OK。 app/controllers/sample_controller.rb class SampleController < ApplicationController def index end end react コンポーネントファイルの作成。 shell $ docker-compose run web rails g react:component Sample app/javascript/components/Sample.tsx が作成されるので、以下のように修正する。 app/javascript/components/Sample.jsx import React from "react"; const Sample = () => { return <>this is react sample.</>; }; export default Sample; view の作成。 app/views/sample/index.html.erb を作成し react コンポーネントを読み込む。 app/views/sample/index.html.erb <%= react_component 'Sample' %> ルーティングを追加する。 config/routes.rb Rails.application.routes.draw do get "sample", to: "sample#index" end Docker を起動し、http://0.0.0.0:3000/sample にアクセスする。「this is react sample.」の文字が表示されていれば OK。 TypeScript の導入 React が導入できたので、以下コマンドで TypeScript 導入する。 shell $ docker-compose run web bundle exec rails webpacker:install:typescript $ docker-compose run web yarn add @types/react @types/react-dom 無事インスールが追えたら sample.jsx の拡張子を sample.tsx に修正する。 app/javascript/components/Sample.tsx import React from "react"; const Sample: React.FC = () => { return <>this is typescript sample.</>; }; export default Sample; ここまで修正したら再度 http://0.0.0.0:3000/sample にアクセスし、「this is typescript sample.」の文字が表示されていることを確認する。 JS の修正時にホットリロードさせる Docker の場合は $ bin/webpack-dev-server のコマンドを直接叩くとエラーがでるっぽいので docker-compose.yml を修正した。 version: "3" services: db: image: mysql:5.7 environment: MYSQL_ROOT_PASSWORD: password MYSQL_DATABASE: rails-front-demo-db ports: - "3306:3306" volumes: - rails-db:/var/lib/mysql web: &web build: . command: rails s -p 3000 -b '0.0.0.0' environment: WEBPACKER_DEV_SERVER_HOST: webpacker volumes: - .:/app_name ports: - "3000:3000" links: - db webpacker: <<: *web command: bundle exec bin/webpack-dev-server depends_on: [] environment: WEBPACKER_DEV_SERVER_HMR: "true" WEBPACKER_DEV_SERVER_HOST: 0.0.0.0 ports: - "3035:3035" volumes: rails-db: webpacker の service を追加。それに伴い web の service も修正。 $ docker-compose up で Docker を起動し、http://0.0.0.0:3000/sample にアクセスする。app/javascript/components/Sample.tsx のファイルを適当に書き換えて保存するとホットリロードすることがわかる。 まとめ 以上で Docker + Rails6 + React(react-rails) + TypeScript の環境構築ができました。Docker は初心者なので（間違っていたらご指摘ください）、諸々調べながら記述しております。react-railsとRails6、TypeScript を使ってる情報は（特に最近では）意外と少なく感じたので、やはり Rails は API モードで使うのが主流なのだと思いました。react-rails を使用している方の参考になれば幸いです。 参考 Docker を使って Rails6 環境の構築をしてみる - Qiita 【Rails, React】Webpacker と TypeScript のセットアップ - Qiita docker で webpacker が遅い問題を改善する - Qiita GitHub - reactjs/react-rails: Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker. GitHub - rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails
- 投稿日：2021-05-07T00:00:12+09:00
おうちハッカソン2に出場して3日間でReact/Djangoで計算ゲームを作った話
外出出来ないGWなので、ハッカソンデビューしてみました。 3日間で作り切ることで自身の成長にもなり、 参加者の皆さんの開発への姿勢やプロダクト、技術のレベルの高さを体感でき非常に勉強になりました。 自分@tanosugi の簡単なプロフィールは 昔Visual C++使ってバイトしてたが暫くプログラミングを離れていた 個人開発をしてみたくなり、1年前からUdemyでReact、Django、AWS等を勉強 ポートフォリオを一つ作成中で8割出来たところ という感じです。 おうちハッカソン2 期間は3日間で、チームで作るもよし、個人で作るもよし、勉強会するもよし、最後の発表会で各自10分間で成果を共有しました。昨年に続き二回目の開催なのでおうちハッカソン2です。 テーマ：みんなで楽しめる何か スケジュール： 5/3 10:00 自由に開発開始、発表会まではSlackで開発状況を自由につぶやく 5/5 17:00 発表会、投票して賞を発表 5/5 20:00 懇親会 作成したもの：計算ゲーム 足し算、引き算、掛け算、割り算のどれかを選び、10問回答するという非常に単純なゲームです。 Webアプリですが、スマホのサイズに合うように作ってあり、PCでもスマホでもブラウザで遊べます。 対戦ありを選ぶと登録、対戦IDの共有を経て対戦が始まります。対戦中は相手の進捗(何問終わったか)も表示されます。 Demo（音が出ます）: http://calcgame.s3-website-ap-northeast-1.amazonaws.com/ Github：https://github.com/tanosugi/calcgame 作成目的 楽しみながら子供が勉強できるものを作成したい プログラミングを勉強すれば何が作れるかを子供に理解してもらう 計算ゲームで対戦できるものが少ないので、自分で作ろう 公園や友達とのLine ビデオ通話でも子供同士が対戦できるのでは 1台のスマホを2人で操作する対戦アプリ、コンピューターと対戦するアプリはあるが通信対戦するアプリは見当たらない 使用技術 FrontendはReact/Typescript, Material UI, react router等を使いました。 BackendはDjango、仮想環境はpoetry、データベースはdocker上でPostgreSQLを使いました。 FrontendとBackendの間はGraphqlで通信しています。 デプロイはAWS CLI経由、S3とEC2に置きました。EC2上で開発しコード管理はGithubです。 CIは開発期間3日間なので無しです。簡単なシェルスクリプトを走らせるとデプロイできるようにしました。 作成スケジュール 3日間ずっと作っていた感じです。 期限が区切らた環境で必死に目指したものを作り切ったので3日間で成長した実感があります。去年は5日間だったようですが、自分としては3日間がちょうどよい期間でした。 1日目 午前：大まかなデザインとデータ構造を設計 1日目 午後-夜：バックエンドを作成 2日目 午前-夜：フロントエンド 3日目 午前-16:00：フロントエンドとバックエンドの繋ぎこみ 3日目 16:00-17:00：発表原稿準備 3日目 17:00 発表会、投票して賞を発表 3日目 20:00 懇親会 1日目午前を終えて大会参加者つぶやき用のSlackに投稿したデザインとデータ構造 参加して得られたもの 参加者の皆さんの発表を聞き自分もまだまだ勉強しなくてはと思いました。 私はこの1年で学んだ一番得意分野の言語のみを使ったのですが、普段と違う技術に挑戦しながら3日間でプロダクトまでもっていったグループも多かったのは驚きでした。 音声入力チャット、自然言語処理、ブラックジョークの入ったゲーム、2年かけて制作中の本格ゲームアプリ、と非常に幅広いテーマ、様々な技術で面白かったです。 私が作成した計算ゲームの相手の進捗(今何問終わったか)の表示は「Graphql経由、Django経由、SQLに自分の進捗を置きに行って、それをゲーム番号をキーに相手の進捗を取り出す」という方法を取りました。 永続化する必要もなく短時間で通信するので、少し邪道だったようです。 一般的には「WebSocket使うかWebRTCでP2P」を使うというのを発表時に教えていただきました。 懇親会では、「宣言的UIでないUIとは何か」、「ハッカソンでテストを書くべきか」、「コードフォーマッタはローカルとCIのどちらで走らせるか」、「ホームページ作成を請け負うなら適正な単価は」等を話せたのも、普段独学で進めている自分としては非常に楽しい時間でした。 ご一緒させていただいた皆様、ありがとうございました。