はじめに React(またはReact Native)のデザインパターンを勉強中ということで、今回はスタイル作成のコツについてまとめました。 前回まとめたContainer Componentパターンの記事は以下になりますので、もし興味があればあわせてご覧ください。 スタイル作成のコツ React Nativeのプロジェクトでスタイルを作成するにあたり、以下のことを意識するのがとても大事です。 どのスタイルが適用されているかわかりやすくする 新しいスタイルを作成する際にはベースのデザインを拡張する スケールしやすいように柔軟性を意識する(スタイルの責務ごとにファイルを分割する) 1については、作成するプロジェクトの規模によって適用する方法が変わってきます。 小規模；インラインスタイルを適用する(コンポーネントに直書きでOK) 中規模；コンポーネントと同じファイル内にStyleSheetとしてまとめる 大規模；StyleSheet単体でjsファイルを作成する また2については、以下のボタンのスタイルを例に考えます。 fancyButtonやloginButtonのスタイルを作成するにあたり、共通部分をcommonButtonとしてまとめており、スプレッド...でオブジェクトを展開することでそれぞれのスタイルに適用しています。 複雑なスタイルを作成する際にも、このようにベースのスタイルを拡張していく方法をとることで、コードが格段に読みやすくなります。 const commonButton = { width, marginTop: 10, borderBottomRightRadius: 4, borderWidth: 1, borderBottomLeftRadius: 4 }; fancyButton: { ...commonButton, backgroundColor: Colors.buttonColor, borderColor: Colors.commonBorderColor } loginButton: { ...commonButton, backgroundColor: 'gray', borderColor: 'lightblue' } 大規模プロジェクトにおけるスタイル作成のコツ 前項で、大規模プロジェクトにおいてはStyleSheet単体でjsファイルを作成したほうがよいと記載しました。 これを実際に実装すると以下のようなディレクトリ構成になります。 App.jsのコンポーネントに適用するスタイルをAppStyle.jsにひとまとめしており、共通のスタイル(Buttons, Colorsなど)についてはstylesディレクトリのindex.jsから読み込んでいます。 AppStyle.js import { StyleSheet } from 'react-native'; import { Buttons, Colors, Metrics } from './styles'; export default StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'flex-start', backgroundColor: Colors.background }, label: { fontSize: 20, alignItems: 'center', textAlign: 'center', margin: 10 }, input: { borderColor: Colors.commonBorderColor, borderWidth: 1, width: Metrics.screenWidth, height: 45 }, fancyButton: { ...Buttons.commonButton, backgroundColor: Colors.buttonColor, borderColor: Colors.commonBorderColor }, loginButton: { ...Buttons.commonButton, backgroundColor: 'gray', borderColor: 'lightblue' } }); 共通スタイルは責務ごとにファイルを分割して作成し、index.jsで読み込みます。 このような設計にすることで、新しいスタイルが必要になったときにも追加しやすいなどといった、柔軟性の高さ(スケーラブル)を得ることができます。 index.js import Buttons from './buttons' import Colors from './colors'; import Metrics from './metrics'; import Typography from './typography'; export { Typography, Metrics, Colors, Buttons }; colors.js const Colors = { background: '#F5FCFF', commonBorderColor: 'gray', buttonColor: 'lightblue' }; export default Colors; 参考資料

Dockerでrails api×react×MySQLの開発環境を構築する 1. 各種ファイルの準備 ディレクトリ構成 rails_react ├── api/ │ ├── Dockerfile │ ├── entrypoint.sh │ ├── Gemfile │ └── Gemfile.lock ├── front/ │ └── Dockerfile └── docker-compose.yml docker-compose.yml version: "3" services: api: build: context: ./api/ dockerfile: Dockerfile ports: - "3333:3333" volumes: - ./api:/var/www/api - gem_data:/usr/local/bundle command: /bin/sh -c "rm -f /var/www/api/tmp/pids/server.pid && bundle exec rails s -p 3333 -b '0.0.0.0'" my-database: image: mysql:5.7 environment: - MYSQL_ALLOW_EMPTY_PASSWORD=yes phpmyadmin: image: phpmyadmin ports: - "1080:80" environment: - PMA_ARBITRARY=1 - PMA_HOST=my-database - PMA_USER=root front: build: context: ./front/ dockerfile: Dockerfile volumes: - ./front:/var/www/front command: sh -c "cd react-app && yarn start" ports: - "3000:3000" volumes: gem_data: api/Dockerfile FROM ruby:2.7.1 ARG WORKDIR=/var/www/api # デフォルトの locale `C` を `C.UTF-8` に変更する ENV LANG C.UTF-8 ENV LC_ALL C.UTF-8 # タイムゾーンを日本時間に変更 ENV TZ Asia/Tokyo RUN apt-get update && apt-get install -y nodejs npm mariadb-client RUN npm install -g yarn@1 RUN mkdir -p $WORKDIR WORKDIR $WORKDIR COPY Gemfile $WORKDIR/Gemfile COPY Gemfile.lock $WORKDIR/Gemfile.lock RUN bundle install # Add a script to be executed every time the container starts. COPY entrypoint.sh /usr/bin/ RUN chmod +x /usr/bin/entrypoint.sh ENTRYPOINT ["entrypoint.sh"] EXPOSE 3333 # Start the main process CMD ["rails", "server", "-p", "3333", "-b", "0.0.0.0"] api/Gemfile source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '2.7.1' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 6.0.3', '>= 6.0.3.6' api/entrypoint.sh #!/bin/bash set -e # Remove a potentially pre-existing server.pid for Rails. rm -f /myapp/tmp/pids/server.pid # Then exec the container's main process (what's set as CMD in the Dockerfile). exec "$@" front/Dockerfile FROM node:12.18.2-alpine ARG WORKDIR=/var/www/front RUN mkdir -p $WORKDIR WORKDIR $WORKDIR 2. コマンド実行 $ docker-compose run api rails new . --force --no-deps --database=mysql --api $ docker-compose build $ docker-compose run --rm front sh -c "npm install -g create-react-app && create-react-app react-app" api/config/database.ymlの書き換え default: &default adapter: mysql2 encoding: utf8mb4 pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %> username: root password: host: my-database development: <<: *default database: api_development # Warning: The database defined as "test" will be erased and # re-generated from your development database when you run "rake". # Do not set this db to the same as development or production. test: <<: *default database: api_test $ docker-compose up -d $ docker-compose run api rake db:create 以上で環境構築完了

Reactの勉強をしている私の個人メモなので、 記事としてはわかりづらくなっています。 FBは歓迎しておりますが、温かい目で見守って頂けると幸いです。 react-routerとreact-router-domの違い とりあえずreact-router-domを使えばOK 基本的な遷移 sample.jsx import { BrowserRouter, Link, Switch, Route } from "react-router-dom"; <BrowserRouter> <div className="App"> <Link to="/">HOME</Link> </div> <Switch> <Route exact path="/"> <Home /> </Route> </Switch> </BrowserRouter> ①全てをBrowserRouterで囲む ②Linkで遷移させるためのボタンやlinkを作る ③遷移先をSwitchで囲む ④RouteのpathにLinkのパスを指定 ⑤Routeで指定したパスに合う遷移先を囲む ⑥遷移先の元にはexactを指定 ネストされた遷移先 sample.jsx <Route path="/" render={({ match: { url } }) => ( <Switch> <Route exact path={url}> <Home /> </Route> <Route path={`${url}/sample1`}> <HomeSample1 /> </Route> <Route path={`${url}/sample2`}> <HomeSample2 /> </Route> </Switch> )} ></Route> ①1つのRouteの中でrenderを行う ②render内で同じことを行う ③確実にネストされた場所を指定するため renderは関数を受け取りデフォルトの引数でpropsを持っているので その中のmatchの中のurlを引数に指定 以上

　はじめに デフォルトのままだと、データがない場合に、 なぜか縦軸が小数点表示されてしまう現象が発生しました。 縦軸が[人]なのに、小数点付くとおかしいので、修正しました。 やり方 以下付け足すだけです。 yAxes: [ { ticks: { beginAtZero: true, userCallback: function (label: any) { if (Math.floor(label) === label) { return label; } }, }, }, ], 参考

はじめに React + TypeScript + FirebaseでWebアプリを開発中、Firebaseエラーの型定義に悩んでしまいました。 その解決ができたので、メモとして残したいと思います。 間違ったコード const login = async(email: string, password: string) => { try{ await firebase.auth().createUserWithEmailAndPassword(email, password) }catch(e: any){ console.log(e.code) } } こちらはFirebaseAuthを使用したログイン機能です。 エラーの型定義が必要ですが、catchの()内にはanyでしか定義できません。 解決したコード const login = async(email: string, password: string) => { try{ await firebase.auth().createUserWithEmailAndPassword(email, password) }catch(e){ const error = e as firebase.FirebaseError console.log(error.code) } } catch句内で最初にfirebase.FirebaseErrorで型変換する。

Next.js プロジェクトの作成 まず Next.js でプロジェクトを作成します。 Vercel & Next.js がとても楽なので最近はこの構成でやってます。 % npx create-next-app --typescript Tailwind CSS の導入 次に Tailwind CSS を入れます。 Tailwind CSS を使うと、class周りがゴチャっとしますが class名を考えたりとかを、しなくてもいいのでダル〜っとやりたいととても良いです。 ここを見て、さっきの Next.js プロジェクトに Tailwind CSS を跡付けします。 Creating your project だとJSでプロジェクトができちゃったので Setting up Tailwind CSS のステップのほうがおすすめです。 下書き ざっくり配置します。 import type { NextPage } from 'next' import Head from 'next/head' import Link from 'next/link' const Home: NextPage = () => { return ( <div> <Head> <title>よね研3rd</title> <meta name="description" content="Generated by create next app" /> <link rel="icon" href="/favicon.ico" /> </Head> <div> <div> <div> よね研3rd </div> </div> <br /> <br /> <div> 米本剛士<br /> 徳島出身・東京在住の起業経験ありiPhoneアプリのクリエイターです。<br /> 主にiOS & Firebase & React.jsを扱います。<br /> </div> <br /> <br /> <br /> <div> 私が主催しておりますプライベートなSlackコミュニティにご招待致します。<br /> チャット形式で、SwiftやNext.js(React) & Firebaseなどのアドバイスや質問の回答が行えます。<br /> <br /> 回答はアドバイス的でかつ、ベストエフォートなので<br /> 確実にサクッと答えが得たい場合は他のプランが最適です。<br /> （と言いつつ、お役に立てるようにしっかりがんばりますよっ！）<br /> <br /> 【おすすめな方】<br /> ・アドバイスを得て効率よく学習を進めたい<br /> ・気軽に質問がしたい<br /> ・コミュニティでワイワイ開発したい<br /> <br /> 【非推奨】<br /> ・相談などが他のコミュニティメンバーに見られたくない<br /> ・すぐに答えが知りたい方<br /> ・作業を丸投げしたい方<br /> </div> <Link href="https://buy.stripe.com/00gdSk7o6h158Sc28b"> <a target="_blank">参加する</a> </Link> </div> </div> ) } export default Home こんな感じです。 仕上げ import type { NextPage } from 'next' import Head from 'next/head' import Link from 'next/link' import Image from 'next/image' import icon from '../public/icon.jpg' const Home: NextPage = () => { return ( <div className="flex-col justify-center m-auto max-w-screen-md"> <Head> <title>よね研3rd</title> <meta name="description" content="Generated by create next app" /> <link rel="icon" href="/favicon.ico" /> </Head> <div className="mt-20"> <div className="text-center"> <h1 className="text-4xl font-bold"> よね研3rd </h1> <div className="mt-2"> プログラミング活動Slackコミュニティ </div> </div> <h2 className="text-xl mt-10 ml-5">1️⃣ コミュニティ主催者の紹介</h2> <div className="mt-5 mx-5 rounded leading-relaxed flex block"> <div className="flex-shrink-0"> <Image src={icon} width={140} height={140} alt="yoneapp" className="mx-auto rounded-full" /> </div> <div className="flex-row ml-5 mt-5"> <div className="font-bold text-xl"> 米本剛士 </div> <div className="mt-2"> 徳島出身・東京在住の起業経験あり34歳のiPhoneアプリのクリエイターです。 主にiOS & Firebase & React.jsを扱います。 </div> </div> </div> <div className="mt-10 p-5 bg-gray-100 lg:rounded leading-relaxed"> <h2 className="text-xl mb-5">2️⃣ コンテンツ内容</h2> プライベートなSlackコミュニティにご招待致します。<br /> <br /> チャット形式で、SwiftやNext.js(React) & Firebaseなどの相談が行えます。<br /> 回答はアドバイス的でかつ、ベストエフォートとなります。<br /> （と言いつつ、お役に立てるようにしっかりがんばりますよっ！）<br /> <br /> 【おすすめな方】<br /> ・アドバイスを得て効率よく学習を進めたい<br /> ・気軽に質問がしたい<br /> ・コミュニティでワイワイ開発したい<br /> <br /> 【非推奨な方】<br /> ・相談などが他のコミュニティメンバーに見られたくない<br /> ・答えだけ知りたい方<br /> ・作業を丸投げしたい方<br /> </div> <Link href="https://buy.stripe.com/00gdSk7o6h158Sc28b"> <a target="_blank" className="mt-10 p-5 bg-green-500 md:rounded leading-relaxed text-white font-bold block text-center text-2xl"> 参加する 2980円/月 </a> </Link> </div> </div> ) } export default Home 課金部分は力尽きました。 StripeがURL式の課金システム持ってるので それをぶち込みましょう、完成です。 Tailwind CSSの flex-col justify-center m-auto max-w-screen-md この辺が特徴的ですよね。 横にすごく長くなっちゃう感じはありますが CSSに触れたことがあればなんとなく直感的に書けそうな感じです。 これをVercelにアップロードして完成です。 というわけでプログラミング活動Slackコミュニティ「よね研3rd」の紹介課金ページができました✌️ 立ち上げということで、はりきって回答しますので良かったら参加してくださいませ?‍♂️

React Hooksを基礎から理解する 5-1 useState 参考 - 基礎から学ぶReact/React Hooks useState インポートする import React, { useState} from 'react' useStateの基本構文 const [状態変数, 状態を変更するための変数] = useState(状態の初期値) Counter.js import "./styles.css"; export const Counter = ({ count, countIncrement, countDecrement, countReset, initialCount }) => { return ( <div> <p> 現在のカウント数：{count} <br /> countの初期値：{initialCount} </p> <button onClick={countIncrement}>Increment</button> <button onClick={countDecrement}>Decrement</button> <button onClick={countReset}>Reset</button> </div> ); }; Hello.js import "./styles.css"; export const Hello = ({ name, handleChangeName, initialName }) => { return ( <div> <p> Hello, <b>{name} !!</b> <br /> nameの初期値： <b>{initialName}</b> </p> <input type="text" onChange={handleChangeName} /> </div> ); }; App.js import React, { useState } from "react"; // 名前付きインポート import { Hello } from "./Hello"; import { Counter } from "./Counter"; const INITIAL_COUNT = 0; const INITIAL_NAME = "JavaScript"; export default function App() { // useState初期化 const [count, setCount] = useState(INITIAL_COUNT); const [name, setName] = useState(INITIAL_NAME); // countボタンのイベントハンドラ　setCount((c) => c+1) で引数に現在の値が入ってくる const countIncrement = () => setCount((prevCount) => prevCount + 1); const countDecrement = () => setCount((prevCount) => prevCount - 1); const countReset = () => setCount(INITIAL_COUNT); // テキストボックスのイベントハンドラ const handleChangeName = (e) => { setName(e.target.value); }; return ( <> <Counter count={count} countIncrement={countIncrement} countDecrement={countDecrement} countReset={countReset} initialCount={INITIAL_COUNT} /> <Hello name={name} handleChangeName={handleChangeName} initialName={INITIAL_NAME} /> </> ); }

react-scrollのインストール https://www.npmjs.com/package/react-scroll npm install --save-dev react-scroll [使用例] //test.tsx import {Link as Scroll} from "react-scroll" export default function Layout():JSX.Element { return ( <div> <header> <nav> <Scroll to="skills" smooth={true} duration={600} offset={-30}>skills</Scroll> </nav> </header> <main> <div id="about">ここにコンテンツを書く</div> <div id="skills">ここにコンテンツを書く</div> <div id="values">ここにコンテンツを書く</div> <div id="future">ここにコンテンツを書く</div> </main> </div> )} option解説 to="遷移先のid名" smoothをつけるとスムーズに移動するようになる。 durationは移動時間 offsetで到着位置をずらせる //[応用例] export default function Layout() { {/* map関数で取り出してタグを生成する。 */} const navItem = ["about", 'skills', 'values', 'future'] return ( <div> <header> <nav> {/* map関数で取り出してタグを生成する。 */} <div className="space-x-6 md:space-x-8"> {navItem.map((item, index) => { return (<Scroll to={`${item}`} className=" uppercase" smooth={true} duration={600} key={index} offset={-30}>{item}</Scroll>) })} </div> </nav> </header> <main> <div id="about">ここにコンテンツを書く</div> <div id="skills">ここにコンテンツを書く</div> <div id="values">ここにコンテンツを書く</div> <div id="future">ここにコンテンツを書く</div> </main> </div> )}

react-scrollのインストール https://www.npmjs.com/package/react-scroll npm install --save-dev react-scroll [使用例] //test.tsx import {Link as Scroll} from "react-scroll" export default function Layout():JSX.Element { return ( <div> <header> <nav> <Scroll to="skills" smooth={true} duration={600} offset={-30}>skills</Scroll> </nav> </header> <main> <div id="about">ここにコンテンツを書く</div> <div id="skills">ここにコンテンツを書く</div> <div id="values">ここにコンテンツを書く</div> <div id="future">ここにコンテンツを書く</div> </main> </div> )} option解説 to="遷移先のid名" smoothをつけるとスムーズに移動するようになる。 durationは移動時間 offsetで到着位置をずらせる [応用例] //test.tsx export default function Layout():JSX.Element { //ここでnavバーのコンテンツを定義する。 const navItem = ["about", 'skills', 'values', 'future'] return ( <div> <header> <nav> //map関数で取り出してタグを生成する。 <div className="space-x-6 md:space-x-8"> {navItem.map((item, index) => { return (<Scroll to={`${item}`} className=" uppercase" smooth={true} duration={600} key={index} offset={-30}>{item}</Scroll>) })} </div> </nav> </header> <main> <div id="about">ここにコンテンツを書く</div> <div id="skills">ここにコンテンツを書く</div> <div id="values">ここにコンテンツを書く</div> <div id="future">ここにコンテンツを書く</div> </main> </div> )}