React - チートシート

useState

import React, { useState } from 'react';
function Example() {
// カウントステートを宣言します
const [count, setCount] = useState(0);
return (
<div>
<p> {count} 回クリックしました</p>
<button onClick={() => setCount(count + 1)}>
クリックする
</button>
</div>
);
}

関数コンポーネントでstateを管理(stateの保持と更新)するためのReactフック

複数の state 変数を使う

import React, { useState } from 'react';
function ExampleWithManyStates() {
// 複数のステートを宣言
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'テスト' }]);
// ...
}

useEffect / useLayoutEffect

useEffect(() => {
applyEffect(dependencies);
return () => cleanupEffect();
}, [dependencies]);

useLayoutEffect(() => {
applyBlockingEffect(dependencies);
return cleanupEffect();
}, [dependencies]);

import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// componentDidMount や componentDidUpdateと似ています
useEffect(() => {
//APIを使ってドキュメントタイトルを更新
document.title = ` ${count} 回クリックしました`;
});
return (
<div>
<p> {count} 回クリックしました</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

副作用の処理(DOM操作、変数代入、API通信などUI構築以外の処理)を関数コンポーネントで扱うフック

useReducer

function init(initialCount) {
return {count: initialCount};
}
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
case 'reset':
return init(action.payload);
default:
throw new Error();
}
}
function Counter({initialCount}) {
const [state, dispatch] = useReducer(reducer, initialCount, init);
return (
<>
Count: {state.count}
<button
onClick={() => dispatch({type: 'reset', payload: initialCount})}>
Reset
</button>
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
);
}

状態管理のためのフック(useStateと似ている)

useRef

const ref = useRef();

import { useRef } from "react";
function TextInput() {
const inputRef = useRef(null);
const onBtnClick = () => inputRef.current.focus();
return (
<>
<input ref={ref} />
<button onClick={onBtnClick}>Focus the text input</button>
</>
)
}

要素への参照を行うフック

useCallback

const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);

function RandomColoredLetter(props) {
const [color, setColor] = useState('#fff')
const [letter, setLetter] = useState('a')
const handleColorChange = useCallback(() => setColor(randomColor()), []);
const handleLetterChange = useCallback(() => setLetter(randomColor()), []);
return (
<div>
<ColorPicker handleChange={handleColorChange} color={color} />
<LetterPicker handleChange={handleLetterChange} letter={letter} />
<hr />
<h1 style={{color}}>{letter}</h1>
</div>
)
}

パフォーマンス向上のためのフックで、メモ化したコールバック関数を返します

useMemo

const memoizedValue = useMemo(
() => expensiveFn(dependencies),
[dependencies]
);

function RandomColoredLetter(props) {
const [color, setColor] = useState('#fff')
const [letter, setLetter] = useState('a')
const handleColorChange = useMemo(() => () => setColor(randomColor()), []);
const handleLetterChange = useMemo(() => () => setLetter(randomColor()), []);
return (
<div>
<ColorPicker handleChange={handleColorChange} color={color} />
<LetterPicker handleChange={handleLetterChange} letter={letter} />
<hr />
<h1 style={{color}}>{letter}</h1>
</div>
)
}

関数の結果を保持するフック。結果が同じ場合の値などを保存(メモ化)し、そこから値を再取得

カスタムフック

import { useState, useEffect } from 'react';
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}

function FriendStatus(props) {
const isOnline = useFriendStatus(props.friend.id);
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}

React案件


フリーランスフルリモート20代活躍30代活躍リモートあり週5〜フリーランス多数実務経験なしNG長期案件安定稼働週3〜週4〜
【React.js / リモート可】資金調達1億円・2019年創業のシード期ベンチャー!代理店営業管理クラウド「PartnerSuccess」開発に関わるフロントエンドエンジニア

【パートナーサクセスに入ると「何ができるのか」】 ①パートナーサクセス を「作る側」として楽しめる 現在弊社はスタートアップシリーズでいう「シード期」の真っ只中。まさに会社/事業/組織を「作っている」最中です。 会社の成長/成功のために、とにかくやることが多くあるのですが、人員が豊富とは決して言えない状態です。そのため、各メンバーが自身の業務のみではなく会社を運営する上で様々な業務を巻き取りながら少しずつ進んでいるという実態があります。 ただ、このフェーズだからこそ楽しめる仕事も多くあることは事実です。会社が用意した制度やキャリアを「享受する側」ではなく、「作る側」に回れる今を楽しんで頂けると考えています。 ②代表の永田をはじめ、実績/実力と熱量を持ったメンバーが揃っています。 10年以上、様々な顧客の事業開発サポートをしていたメンバーや、実務経験はそこまで無かったけれど綺麗なコードを書くエンジニアなど、様々なバックボーンを持った方が集まっています。 全員が「PartnerSuccess」の成長に向け熱量を持って日々業務に取り組んでいるチームの一員になっていただける方を探しています。 ▼エンジニアとして勤務されている方へ ・「作って終わり、次のプロジェクト」のサイクルから脱したい。 ・自社プロダクトの開発をしてみたい と現在考えられている方には、パートナーサクセスにご興味をお持ちいただけるかもしれません。 先述した2つはパートナーサクセスであれば叶えられます。 まだ世の中に出たばかりのプロダクトであるからこそ、お任せしたい部分は多くあります。 今後作りたいプロダクトもあるため、ご面談の際にはお伝えできる限りのことをお話しできればと考えています。 ▼具体的な業務内容 ・フロントエンドの開発、修正作業 ・UIUXの改善 ・細かいエラーなどのバグ改修 ・新規プロダクト開発 ・既存サービスリニューアル ▼可能であればお任せしたいこと ・開発フロー及びプロセスの改善 ・他サービスとの連携や統合 ・他サービスや他社サービスとの統合や機能連携 【こんな人と働きたい!】 ・情報、価値観、経験が違うメンバーを思いやり、スムーズにコミュニケーションが取れること ・フットワークが軽く、周囲と積極的にコミュニケーションを図ることができる方 ・成長意欲が高く、優秀な経営メンバーと切磋琢磨したい方 ・事業/組織のカオスを楽しめる方 ・自らの経験に捉われない吸収力と、領域を制限しない向上心を持っていること ・自ら意思決定をしながら、PDCAを回せる地頭と行動力の自信がある方 ・ミッション・ビジョン・バリューに共感できる方 ・素直さ・謙虚さを持ち、自ら考えて行動できる方

7085万円/月
業務委託契約
中目黒駅
RubyRuby on RailsJavaScriptReact
フリーランスフルリモート20代活躍30代活躍リモートあり週5〜フリーランス多数実務経験なしNG長期案件安定稼働週3〜週4〜
【React.js / 副業からOK・リモート可】資金調達1億円・2019年創業のシード期ベンチャー!代理店営業管理クラウド「PartnerSuccess」開発に関わるフロントエンドエンジニア

【パートナーサクセスに入ると「何ができるのか」】 ①パートナーサクセス を「作る側」として楽しめる 現在弊社はスタートアップシリーズでいう「シード期」の真っ只中。まさに会社/事業/組織を「作っている」最中です。 会社の成長/成功のために、とにかくやることが多くあるのですが、人員が豊富とは決して言えない状態です。そのため、各メンバーが自身の業務のみではなく会社を運営する上で様々な業務を巻き取りながら少しずつ進んでいるという実態があります。 ただ、このフェーズだからこそ楽しめる仕事も多くあることは事実です。会社が用意した制度やキャリアを「享受する側」ではなく、「作る側」に回れる今を楽しんで頂けると考えています。 ②代表の永田をはじめ、実績/実力と熱量を持ったメンバーが揃っています。 10年以上、様々な顧客の事業開発サポートをしていたメンバーや、実務経験はそこまで無かったけれど綺麗なコードを書くエンジニアなど、様々なバックボーンを持った方が集まっています。 全員が「PartnerSuccess」の成長に向け熱量を持って日々業務に取り組んでいるチームの一員になっていただける方を探しています。 ▼エンジニアとして勤務されている方へ ・「作って終わり、次のプロジェクト」のサイクルから脱したい。 ・自社プロダクトの開発をしてみたい と現在考えられている方には、パートナーサクセスにご興味をお持ちいただけるかもしれません。 先述した2つはパートナーサクセスであれば叶えられます。 まだ世の中に出たばかりのプロダクトであるからこそ、お任せしたい部分は多くあります。 今後作りたいプロダクトもあるため、ご面談の際にはお伝えできる限りのことをお話しできればと考えています。 ▼具体的な業務内容 ・フロントエンドの開発、修正作業 ・UIUXの改善 ・細かいエラーなどのバグ改修 ・新規プロダクト開発 ・既存サービスリニューアル ▼可能であればお任せしたいこと ・開発フロー及びプロセスの改善 ・他サービスとの連携や統合 ・他サービスや他社サービスとの統合や機能連携 【こんな人と働きたい!】 ・情報、価値観、経験が違うメンバーを思いやり、スムーズにコミュニケーションが取れること ・フットワークが軽く、周囲と積極的にコミュニケーションを図ることができる方 ・成長意欲が高く、優秀な経営メンバーと切磋琢磨したい方 ・事業/組織のカオスを楽しめる方 ・自らの経験に捉われない吸収力と、領域を制限しない向上心を持っていること ・自ら意思決定をしながら、PDCAを回せる地頭と行動力の自信がある方 ・ミッション・ビジョン・バリューに共感できる方 ・素直さ・謙虚さを持ち、自ら考えて行動できる方

47505500円/時
業務委託契約
中目黒駅
RubyRuby on RailsJavaScriptReact
フリーランス20代活躍30代活躍リモートあり長期案件実務経験なしNG週5〜
【Ruby】飲食店の業務の簡略化を目指すVertical SaaSを自社開発!レストラン専用グルメサイトコントローラー「レスラク」のWebアプリケーションエンジニア

■業務内容 ・飲食店向けの業務支援アプリケーションの設計・実装(Rails/React + TypeScript による Single Page Application) ・社内向けの業務管理画面の設計・実装(Rails) ・複数の API/クローラを連動して実行するバックグラウンドジョブの開発(Ruby,Go 等) ■開発の進め方 ・経営の計画に影響のある機能についてはProductOwnerと相談して、いつくらいの時期に必要か、どのような要件かを相談してタスクを登録します。それ以外のユーザーから上がる要望やリファクタリング、障害対応といったものは随時登録します。 ・タスクはすべてGitHubのIssueで管理しており、タスク外の業務・運用知識はGitHubのWikiに整理をしています。 ・開発サイクルはゆるいアジャイルでまわしていて2週間を1イテレーションとして、イテレーションの切り替わるタイミングで前イテレーションの振り返りと次のイテレーションのタスクを登録します。タスクの見積もりは個々人の裁量に委ねています。 ・開発はGItHub + CircleCI ベースで行い、レビューを行いマージした後はCapistrano でデプロイします。 ■開発環境 -フロントエンド ・React/TypeScriptなSPA ・デザインシステムはMaterialDesignベース ・テストランナーにはJestを採用。ViewのテストはStoryShotで差分チェック。 ・Sentryで障害検知 -バックエンド ・アプリケーションサーバはRubyOnRails ・クローラーその他スクリプトはRuby / Goなど -インフラ ・AWS ・DBはMySQL、Redisなど用途に応じて使用

7085万円/月
業務委託契約
表参道駅
RubyGo言語SQLTypeScriptRuby on RailsReactMySQLRedisGitGithub
フリーランス20代活躍30代活躍リモートあり長期案件実務経験なしNG週5〜
【React】飲食店の業務の簡略化を目指すVertical SaaSを自社開発!レストラン専用グルメサイトコントローラー「レスラク」のWebアプリケーションエンジニア

■業務内容 ・飲食店向けの業務支援アプリケーションの設計・実装(Rails/React + TypeScript による Single Page Application) ・社内向けの業務管理画面の設計・実装(Rails) ・複数の API/クローラを連動して実行するバックグラウンドジョブの開発(Ruby,Go 等) ■開発の進め方 ・経営の計画に影響のある機能についてはProductOwnerと相談して、いつくらいの時期に必要か、どのような要件かを相談してタスクを登録します。それ以外のユーザーから上がる要望やリファクタリング、障害対応といったものは随時登録します。 ・タスクはすべてGitHubのIssueで管理しており、タスク外の業務・運用知識はGitHubのWikiに整理をしています。 ・開発サイクルはゆるいアジャイルでまわしていて2週間を1イテレーションとして、イテレーションの切り替わるタイミングで前イテレーションの振り返りと次のイテレーションのタスクを登録します。タスクの見積もりは個々人の裁量に委ねています。 ・開発はGItHub + CircleCI ベースで行い、レビューを行いマージした後はCapistrano でデプロイします。 ■開発環境 -フロントエンド ・React/TypeScriptなSPA ・デザインシステムはMaterialDesignベース ・テストランナーにはJestを採用。ViewのテストはStoryShotで差分チェック。 ・Sentryで障害検知 -バックエンド ・アプリケーションサーバはRubyOnRails ・クローラーその他スクリプトはRuby / Goなど -インフラ ・AWS ・DBはMySQL、Redisなど用途に応じて使用

7085万円/月
業務委託契約
表参道駅
RubyGo言語SQLTypeScriptRuby on RailsReactMySQLRedisGitGithub
フリーランス20代活躍30代活躍リモートあり長期案件実務経験なしNG週5〜
【TypeScript】飲食店のネット予約に関わる課題をテクノロジーで解決!飲食店専用グルメサイトコントローラー「レスラク」のWebアプリケーションエンジニア

■業務内容 ・飲食店向けの業務支援アプリケーションの設計・実装(Rails/React + TypeScript による Single Page Application) ・社内向けの業務管理画面の設計・実装(Rails) ・複数の API/クローラを連動して実行するバックグラウンドジョブの開発(Ruby,Go 等) ■開発の進め方 ・経営の計画に影響のある機能についてはProductOwnerと相談して、いつくらいの時期に必要か、どのような要件かを相談してタスクを登録します。それ以外のユーザーから上がる要望やリファクタリング、障害対応といったものは随時登録します。 ・タスクはすべてGitHubのIssueで管理しており、タスク外の業務・運用知識はGitHubのWikiに整理をしています。 ・開発サイクルはゆるいアジャイルでまわしていて2週間を1イテレーションとして、イテレーションの切り替わるタイミングで前イテレーションの振り返りと次のイテレーションのタスクを登録します。タスクの見積もりは個々人の裁量に委ねています。 ・開発はGItHub + CircleCI ベースで行い、レビューを行いマージした後はCapistrano でデプロイします。 ■開発環境 -フロントエンド ・React/TypeScriptなSPA ・デザインシステムはMaterialDesignベース ・テストランナーにはJestを採用。ViewのテストはStoryShotで差分チェック。 ・Sentryで障害検知 -バックエンド ・アプリケーションサーバはRubyOnRails ・クローラーその他スクリプトはRuby / Goなど -インフラ ・AWS ・DBはMySQL、Redisなど用途に応じて使用

7085万円/月
業務委託契約
表参道駅
RubyGo言語SQLTypeScriptRuby on RailsReactMySQLRedisGitGithub
フリーランス20代活躍30代活躍リモートあり長期案件実務経験なしNG週5〜
【Ruby on Rails】飲食店のネット予約に関わる課題をテクノロジーで解決!飲食店専用グルメサイトコントローラー「レスラク」のWebアプリケーションエンジニア

■業務内容 ・飲食店向けの業務支援アプリケーションの設計・実装(Rails/React + TypeScript による Single Page Application) ・社内向けの業務管理画面の設計・実装(Rails) ・複数の API/クローラを連動して実行するバックグラウンドジョブの開発(Ruby,Go 等) ■開発の進め方 ・経営の計画に影響のある機能についてはProductOwnerと相談して、いつくらいの時期に必要か、どのような要件かを相談してタスクを登録します。それ以外のユーザーから上がる要望やリファクタリング、障害対応といったものは随時登録します。 ・タスクはすべてGitHubのIssueで管理しており、タスク外の業務・運用知識はGitHubのWikiに整理をしています。 ・開発サイクルはゆるいアジャイルでまわしていて2週間を1イテレーションとして、イテレーションの切り替わるタイミングで前イテレーションの振り返りと次のイテレーションのタスクを登録します。タスクの見積もりは個々人の裁量に委ねています。 ・開発はGItHub + CircleCI ベースで行い、レビューを行いマージした後はCapistrano でデプロイします。 ■開発環境 -フロントエンド ・React/TypeScriptなSPA ・デザインシステムはMaterialDesignベース ・テストランナーにはJestを採用。ViewのテストはStoryShotで差分チェック。 ・Sentryで障害検知 -バックエンド ・アプリケーションサーバはRubyOnRails ・クローラーその他スクリプトはRuby / Goなど -インフラ ・AWS ・DBはMySQL、Redisなど用途に応じて使用

7085万円/月
業務委託契約
表参道駅
RubyGo言語SQLTypeScriptRuby on RailsReactMySQLRedisGitGithub