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〜フルリモート安定稼働フリーランス
【JavaScript/Vue.js】スタートアップ!中古スマートフォンECサイトなどのフロントエンドエンジニア

フロントエンドエンジニアには社内・外で利用される Web UI の設計・開発からテスト、運用まで各々がリーダーシップを持ち主体的に取り組む事が期待されています。 社内ではプロジェクトによって React または Vue が利用されています。これらに関してベストプラクティスに乗っ取り可読性や再利用性の高いコードの開発や、バックエンドのエンジニアと連携して API の設計に関わることが求められます。 ▼具体的なプロジェクトとしては下記になります。 ・在庫管理システムや社内ツールの管理画面構築 ・社外で利用される EC や買取アプリ等の画面構築 ・共有ライブラリの作成 ・Shopifyのカスタマイズやアプリ作成、管理画面改善 【業務内容】 ・ECサイト・在庫管理や社内ツールの Web UI 設計・開発・テスト・運用 ・アウトプットの品質の高さを保つためのコードレビュー・CI/CD・継続的テストの実現 ・Web サイトのパフォーマンス・チューニングや UI/UX・デザインの改善 ・ジュニアメンバーのメンタリング

6579万円/月
業務委託契約
代々木駅
JavaScriptReactVue.js
20代活躍30代活躍40代活躍週5〜社内イベント参加OKフリーランス
【PHP/CakePHP・Laravel】東証マザーズ上場・100%自社内開発◎月間350万UUの旅行サイトのサーバーサイドエンジニア

当社は、格安航空券予約販売サービスを中心として「スカイチケット」としてサイトを運営しております。 ネット上で宿泊・交通手段からアクティビティーに至るまで旅行に関連するすべてのサービスが誰でも簡単に予約できることを目指しております。 「スカイチケット」は旅行総合サイトに向けて、お客様にとって価値のあるサービスであり続けるために、新機能の開発、安定性、より多くのサービスを常に提供し続けています。 事業のさらなる成長のため、現在、システムの大規模なリプレイスを行っております。「スカイチケット」の新しい未来を一緒に作っていきませんか? 新しい技術や新しい取り組みにチャレンジしていただける方も歓迎します。 【具体的な業務内容】 ・「スカイチケット」のバックエンドAPI開発業務 ・PHP, Go言語を用いたサービスの保守運用/機能追加 ・リプレイスに伴う開発、設計 ・リファクタリングなど エンジニアとしてユーザーの生活を豊かにするプロダクトを作りたい、またはそのプロダクトの提案から参戦したいという方、大歓迎です!チャンスはいくらでもあります。 是非、カジュアル面談で当社の紹介をさせて頂ければと思います! 今回、広い職種で採用活動を行っております。 テックリード、VPoE、CTO候補としてご活躍いただける方についてもお待ちしております! 募集背景 「旅」をテーマにしたサービスを運営し、急成長を遂げている当社。航空券予約サイト『skyticket』を中心に自社でサービスを開発しています。今後も海外から国内への旅客増加に向けてサービスを提供すると同時に、レストランなどあらゆる商品が予約できるプラットフォームの実現を目指しています。今回は、事業拡大に伴い、新メンバーを募集することになりました。

6583万円/月
業務委託契約
恵比寿駅
PHPGoCakePHPLaravelReactVue.js
20代活躍30代活躍週5〜フルリモート安定稼働
【JavaScript/React】中古スマートフォンECサイトのフロントエンドエンジニア

フロントエンドエンジニアには社内・外で利用される Web UI の設計・開発からテスト、運用まで各々がリーダーシップを持ち主体的に取り組む事が期待されています。 社内ではプロジェクトによって React または Vue が利用されています。これらに関してベストプラクティスに乗っ取り可読性や再利用性の高いコードの開発や、バックエンドのエンジニアと連携して API の設計に関わることが求められます。 ▼具体的なプロジェクトとしては下記になります。 ・在庫管理システムや社内ツールの管理画面構築 ・社外で利用される EC や買取アプリ等の画面構築 ・共有ライブラリの作成 ・Shopifyのカスタマイズやアプリ作成、管理画面改善 【業務内容】 ・ECサイト・在庫管理や社内ツールの Web UI 設計・開発・テスト・運用 ・アウトプットの品質の高さを保つためのコードレビュー・CI/CD・継続的テストの実現 ・Web サイトのパフォーマンス・チューニングや UI/UX・デザインの改善 ・ジュニアメンバーのメンタリング

6580万円/月
業務委託契約
代々木駅
JavaScriptReact
20代活躍30代活躍40代活躍週5〜安定稼働社内イベント参加OK
東証マザーズ上場の急成長ベンチャー!月間300万ユーザーが利用する、世界28か国に対応の航空券販売サイトのPM/PL募集

当社は、「旅」に関わる様々な自社サービスを提供しています。徹底したユーザー目線のサイト設計を目指し、月間300万ユーザーのアクセスを誇るサービスまでに成長しました。 さらにサービス向上に向けて、当社サイトのプロジェクトを指揮していただける方を募集しております。 あなたには、代表と共に企画からシステムに関わるプロジェクトを手がけ、開発チームのタスク管理からスケジュール管理、最適な仕様の設計や開発手法の選定より、サイトの高速化はもちろん、グラフィックチームと協同してUI/UXを高めたり、SEO対策も考慮に入れたWebシステムを開発に一役買っていただきたいと考えております。 【具体的な業務内容】 ■自社サービスの運用、新規開発に関わる 1)プロジェクト管理、チームの統率 2)基本仕様の設計や開発方針の選定 3)事業部とのシステム開発における折衝 【仕事の魅力】 ■旅行や予約というサービスで、グローバルに展開するシステムに携わることができます。 ■プロダクトを企画から運用まで、営業や事業部と共に考えに触れることが出来るポジションです。メディア戦略をイチから学ぶことができるため、一気に視野が広がり、ビジネスパーソンとしての成長を実感できるポジションです。 ■裁量が大きく、新しいことにチャレンジする機会がたくさんあります。意欲次第で、自身のアイディアを形にすることもできます。 募集背景 「旅」をテーマにしたサービスを運営し、急成長を遂げている当社。航空券予約サイト『skyticket』を中心に自社でサービスを開発しています。今後も海外から国内への旅客増加に向けてサービスを提供すると同時に、レストランなどあらゆる商品が予約できるプラットフォームの実現を目指しています。今回は、事業拡大に伴い、新メンバーを募集することになりました。

6583万円/月
業務委託契約
恵比寿駅
ReactVue.js
フリーランスフルリモート20代活躍30代活躍40代活躍週3〜フリーランス多数外国籍多数週5〜週4〜実務経験なしNG安定稼働新技術に積極的長期案件リモートあり
【React/テックリード】フロントエンドスキル活かして自由な環境で働きたいエンジニア募集!

既存のプロジェクトから、新規のプロジェクト、受託開発から自社開発のプロジェクトまで、 幅広い案件でのプログラミング/コーディングをお願い致します。 指向性や将来に向けてやりたい事等に応じて、ご自身の学びたい言語や技術など、積みたい経験を行うことが出来ます! 【具体的な仕事内容】 ■新規開発プロジェクトのフロントエンドエンジニアリング ■新機能サービスの要件定義・設計・開発 ■プロジェクトメンバーと共にプロジェクトの推進 ■チームプログラマーの技術相談 ■フロントのデザイン全般 指向性や将来に向けてやりたい事等に応じて、ご自身の学びたい言語や技術など、積みたい経験を行うことが出来ます! 【開発環境】 ウォータフォール的な開発から、アジャイル的な開発体制となります。企画と開発者で意思疎通を図りながら、既存や新規アプリケーションの最終リリースまで担当いただきます。言語としてはPHP(Laravel)を用いた開発が多くなるかと思われます。インフラに関してはAWS, EC2,などの先端クラウド技術を積極的に取り入れています。 ■開発言語:React/HTML CSS/JavaScript ■フレームワーク:React native/Vue.js ■OS:Windows/Linux ■DB:MySQL/SQL Server ■インフラ:AWS 募集背景 案件の増加、事業と会社の拡大と共に、プロジェクトに携わりながら成長したいと思って頂ける方を募集しております! ●安定成長を続けるテックビーンズ 無理な急成長を望むことなく、エンジニア、顧客ともに大切にしながらテックビーンズは設立5期目を迎え、安定成長を続けてきました。 ●自社サービス開発も視野に入れ、組織体制の拡充を 現在もたくさんの案件を抱えながら、CEO1名・PM1名・中堅1名・若手5名(男3:女2)+経験豊富なパートナーエンジニア7名という体制で開発を行っています。 今後はさらに自社サービスの開発や、技術研究等に取り組んでいきたい。 そのためにも組織体制を充実させたい、そんな想いで、今回の採用を行っています。 ●主体的に挑戦したい!という方、まずは気軽にお話しましょう ここまでも紹介をしてきましたが、テックビーンズは「エンジニア主体」の働きやすい会社です。 また、素直な若手エンジニアが多く、テックリードにとってもやりやすいメンバーが揃っています。 もっと主体的にやりたい、自由にやりたいという方にはうってつけの環境です。 興味のある方、まずはリモートで気軽にお話ししましょう。

4060万円/月
業務委託契約
新宿駅
PHPJavaScriptHTML5CSS3LaravelReactVue.jsMySQLDocker
フリーランスフルリモート20代活躍30代活躍フリーランス多数週3〜週4〜週5〜長期案件
【Ruby on Rail/週3~OK・フルリモート】働き方の根っこの部分から変える・業務可視化ツール「Qasee」をグロースさせる開発エンジニア

業務可視化ツール『Qasee』の開発をお任せします。 完全自社開発のため、要件を決めるところから、設計・開発・テスト・運用まで、全てを経験できます! また、セールスや顧客サポートとの連携を密に行うことでクライアントの声が近く、改善がスピーディに進む環境です。 【具体的な業務内容】 -Qaseeの機能追加や改善のための要件定義 -機能の設計から、実装、テストまでの一連業務 -サービスで取得しているデータを基に、働き方の傾向や特徴を洗い出すためのデータ分析 まずは、オフィスも見ていただきながら、もっと詳しく当社や新規事業についてお話させていただければと思います。少しでも興味を持っていただけたなら、ご応募ください! 【会社の特徴】 ■経営レイヤーとの近さ メンバーは各々に裁量があたえられた少数精鋭組織です。だからこそ、経営陣との距離はこれ以上ないほど近く、経営目線をもって仕事に携わることができます。同時に、ベンチャーならではのスモールチームでの開発のおもしろさを経験することができます。 ■働きやすいオフィス環境 品川駅徒歩4分の立地にオフィスがあります。働きやすさが生産性を向上させると考え、広々としたオフィスにはHerman Millerのチェア、ウォーターサーバーやDeLonghiの高級コーヒーメーカーが導入されています。 ■メンバー同士の仲がよい 働きやすい職場造りを目的として、PJT(通称:プロジェクトチーム)と呼ばれる任意参加型の有志メンバーが集まり、そこで様々な意見交換を定期的に行い、様々なイベントや催しを企画しています。 【開発環境】 - Ruby (Rails) - Python - JavaScript (React Redux) - DB : MySQL - Webサーバー : Nginx - インフラ: AWS, Docker - VCS : GitHub - 社内コミュニケーション : Slack 募集背景 立ち上げから間もないベンチャーながら、今期の売上は5億を突破した当社。VCの手助けを得ることなく安心できる事業基盤がすでにできあがっています。現在、業務可視化ツール『Qasee』を展開中ですが、よりスピーディに事業をグロースさせていくために、エンジニアを募集しております。

47505500円/時
業務委託契約
品川駅
PythonRubyJavaScriptC#VCTypeScriptRuby on RailsReactMySQLNginx