@takepo です。
昨日01/21に【サポーターズ】React×ReduxにおけるTypeScript入門 というイベントで登壇させていただきました。その登壇の際の発表スライドをあげさせていただきます。
内容はTypeScriptの基本的な部分とReactやReduxの経験者向けのTypeScriptでの書き方の説明をサンプルコード付きでさせていただきました。
サンプルコードを載せたリポジトリはこちら
ちなみに前回は「初心者のためのReact入門」というタイトルで登壇して、Reactの基本的なところを説明させていただきました。その際の記事はこちらなのでReactも合わせて抑えたい方はぜひご覧ください！
@takepo です。
昨日09/25に【サポーターズCoLab勉強会】初心者のためのReact入門 というイベントで再度登壇させていただきました。その登壇の際の発表スライドをあげさせていただきます。
内容はReact初心者向けのものになっていて、コードサンプル付きで説明させていただきました。
実はこのReact入門という形で登壇させていただくのは3回目になりますが、
前回の資料から最新情報をプラスしたり、より初心者向けにパワーアップしている部分もあるため、
あらためて資料をあげさせていただきました。
ちなみに前回登壇した際の記事はこちら！
スライド中にのせたこちらもぜひ！
ランサーズ流 React.js/redux アプリ開発入門
React Redux を用いた SPA 新規サービスを運用して得た知見と実装例
JavaScript初心者の私が、React×ReduxによるSPA開発の一員になるまで
@takepo です。
先日、【サポーターズ勉強会】React入門 というイベントで再度登壇させていただきました。
その登壇の際のスライドをあげさせていただきます。
内容はReact初心者向けのものになっていて、コードサンプル付きで説明させていただきました。
実はこのReact入門という形で登壇させていただくのは２回目になりますが、
前回の資料からパワーアップしている部分もあるため。あらためて資料をあげさせていただきました。
ちなみに前回登壇した際の記事はこちら！
スライド中にのせたこちらもぜひ！
ランサーズ流 React.js/redux アプリ開発入門
React Redux を用いた SPA 新規サービスを運用して得た知見と実装例
JavaScript初心者の私が、React×ReduxによるSPA開発の一員になるまで
@takepo です。
先日、【サポーターズ勉強会】React入門 というイベントで登壇させていただきました。
その登壇の際のスライドをあげさせていただきます。
内容はReact初心者向けのものになっていてコードサンプル付きで説明させていただきました。
スライド中にのせたこちらもぜひ！
ランサーズ流 React.js/redux アプリ開発入門
React Redux を用いた SPA 新規サービスを運用して得た知見と実装例
JavaScript初心者の私が、React×ReduxによるSPA開発の一員になるまで
同じReact入門という内容で再度4/23に登壇させていただきました。
この資料からパワーアップしている部分もあるのでぜひこちらもご覧ください！
ランサーズ Advent Calendar 2017 23日目の記事です。
新卒2年目エンジニアでpookのフロントエンドの開発を担当をしているtakepo(@takepo0928)です。
私は新卒として入社をする前１年間インターンをしていました。その頃にReactを触り始めて、今はもう2年ほど経ちます。もともとはWebの知識すらあやふやで、JavaScript自体あまり書いたことないレベルでした。
今回はそんなJavaScript初心者だった私が、React×ReduxによるSPA開発チームの一員になるまでにやってきたことについて書きたいと思います。
主にキャッチアップ時のこと&React周りが多いです。
最初にReactの概要を読みつつ、公式のチュートリアルをやりました。 ちょっと自分で改変してみたりしてなんとなーくReactこんな感じ？みたいな雰囲気をつかみました。
その後にReduxの公式チュートリアルをやりました。 そもそもFluxとはなんぞや？状態だったのでそこから調べつつ進めました。チュートリアルをやった後もう一度振り返ってデータの流れ方を図とコードを合わせてみながら確認をしていた記憶があります。
当時の開発チームみんなほぼ React初心者だったので、解説する人を回しながら毎日30分間、通称サムライ本と呼ばれている(?)O’Reillyの入門Reactを使用しました。
今だとReactもかなりバージョンアップしているので情報が古くなってしまっている部分もあるかと思いますが、とてもお世話になった本です。
ちなみにこの頃はリモートでインターンをしていたときだったので毎日skypeで参加していました。チームみんなで読むことで、チーム間の知識共有や目線を合わせることができたのでとても良かったです。
＠koba04さんが書かれた一人React.js Advent Calendar 2014を読みました。Reactの基本的なことをまとめてくださっていて初心者にはとても分かりやすく、また簡潔にまとまっているため、あとで調べる時も役立ちました。
初めの頃は、componentのライフサイクルの記事や一人アドベントカレンダーでいつでも調べれるように常にブラウザの固定タブで開いたりもしてました。
社内で開発してオープンソース化したパッケージに機能追加するためにコミットを試みました。
残念ながらマージまで至ってないですが、初めて外に自分のコードやプルリクを公開する機会だったので良いチャレンジになりました。
今度は自分で１から作って上げたいし、もっとオープンソースも読んでいこうと思っています。
今まで何かプログラミング言語を学ぶときは、本を読んだり公式ドキュメントを読んで習得することがほとんどでした。しかし、Reactをはじめ、フロントエンド周りは進化のスピードがとても早いです。常に新しい情報をキャッチアップしていく必要があります。
そのため、はてぶ・qiita・SNSなどを毎日チェックしてキャッチアップしていけるようにしています。
ここまでいろいろ紹介してきましたが、なんだかんだで実務で開発していきながら学んでいったことが一番多いです。
つまづくたびにググったり、パッケージのコードも読んだりしながらなんとか開発し続けてきました。
あと、先輩にレビューで良い指摘をたくさんもらい鍛えていただいたり、つまづいても聞ける環境だったのが大きいです。
このように色々やってきましたが、最初触れたときは全然分からなくて、覚えることも多すぎて蕁麻疹を発症したこともありました。また、思ったより自分の開発スピードが全然上がらなくて苦労しましたが、今となってはいい思い出、いい経験です。
ちなみにES6自体はもともとJavaScriptの知識が自分にあまりなかったため、「こんな感じなのね！classとか使えて良いじゃん！」と意外とすんなり抵抗なくいけました。
今なら日本語でも情報たくさん出ているので、もっと楽に習得できるのでは？と思いますが、誰かのお役に立てれば幸いです。
React楽しい?✨
pookチームのtakepoです。
今回は、React × Redux でstateを変更する時にダイアログ等で確認表示を挟みたいときの良い方法をご紹介します。
その場合の例として、「ユーザーの情報を更新するとき、更新しても良いかを一度確認するダイアログ表示する」といったことが挙げられます。
この方法を一言で言うと、
「Container側では変更処理をするactionのみ呼び出すようにする」
です。
サンプルを交えてご紹介します。
データを更新する際に確認用のダイアログを表示し、「OK」を選択した場合に更新処理を行います。
ダイアログのcomponentはこのような形で作成しておきます。
※今回はMaterial-UIを使用し、シンプルな作りにしています。
class Dialog extends Component {
props: {
openFlag: boolean;
message: string;
title: string;
okClickHandler: Function;
};
renderDialogButtons(): React.Element<*> {
return (
<div>
<RaisedButton
label="キャンセル"
onClick={/* ダイアログを閉じる処理 */}
/>
<RaisedButton
label="OK"
onClick={this.props.okClickHandler}
/>
</div>
);
}
render() {
return (
<Dialog
title={this.props.title}
open={this.props.openFlag}
actions={this.renderDialogButtons()}
>
{this.props.message}
</Dialog>
);
}
}
export default Dialog;
変更処理をかけるactionを呼ぶ箇所はこのように書きます。
ここで注目したいポイントは、更新処理をするactionの第2引数にmeta情報としてダイアログのpropsに渡すmessageとtitleを入れておくことです。
const payload = {
// 更新する情報
}
const meta = {
dialogInfo: {
title: '更新',
message: '情報を更新しますがよろしいですか？',
},
}
// 更新処理をかけるaction
this.props.actions.update(payload, meta);
更新処理をするactionでmetaとして入れ込んだダイアログの情報を元に、ダイアログを開くときに必要なpayloadを作成します。そして、ダイアログを開くためのactionをnext()に渡します。
ここで注目したいポイントは、payloadのokClickHandlerに本来の変更処理を行うactionを入れ込むことです。
export default (store: any) => (next: any) => (action: any) => {
if (action.meta && action.meta.dialogInfo) {
const payload = {
...action.meta.dialogInfo,
okClickHandler: () => {
// このままactionを渡すとまた確認ダイアログを挟んでしまうので、dialogInfoを削除しておく
delete action.meta.dialogInfo;
next(action);
},
};
// open() はダイアログを開くaction
return next(open(payload));
}
return next(action);
};
省いてしまっている部分もありますが、流れとしてはこのようになります。
middlewareをうまく利用することで
「Container側では変更処理をするactionのみ呼び出すようにする」
ことができました。
これで更新処理を呼ぶ側をすっきり書くことができます！
初めまして！
16年新卒でキラキラReact女子目指して頑張っている takepo です。
普段は主にReact/Reduxを使ったフロントエンド開発を主に行っているのですが、
今回は、9月〜3ヶ月の期間に地獄めぐりをさせていただいたので
そのお話しをさせていただければと思います。
地獄めぐりとは、開発部のインフラやデザインのチームも含めた全チームを
期間を区切って全てめぐることで、CTOによって名付けられました。
という目的のもと行わせていただきました。
行く先行く先で新しいことばかりなので、
『やりきること』『少し調べてもわからないことはすぐに聞くこと』を心がけてめぐりました。
短いターンで様々なチームを次々にめぐり、そのチームに行くまで
何をやるかわからないことがほとんどだったのでワクワクドキドキの3ヶ月でした。
また人やサービスが増えてきたことで開発部のチームも細分化されて
他のチームがどんなことをどんな風にやっているのかが見えにくくなっていたので知ることができました。
私は今までやったことあることの範囲内でしかなかなか物事を考えることができなかったのですが、
今回いろんなチームでいろんなことを経験させていただいて、
前より広い視野で物事を考えられるようになった気がします。
少なくとも意識は変わったので良かったと思っています。
技術的なことはもちろんのことなので今回は割愛しますが、
短期間で与えられたミッションをこなすため
『どうやったらミッションをこなせるか考えて工夫すること』を学びました。
その中でもポイントでまとめると
があげられます。
実装をどうやったらスムーズに行えるか悩んでいる時に教えていただきました。
何もエラーなくスムーズに実装できれば良いですが、慣れないうちはそんなにスムーズにいきません。
なので、本当にデバックしたい部分だけを見るにはどうしたら良いか工夫し、
他の人にパッとlpページなど簡単なものを確認してもらうため、
ローカルサーバーをさくっと立ち上げる等の小技の組み合わせて、
try and errorをいかに早く回すかが大事だと学びました。
今まではググれば答えがわかるようなものを実装していたのですが、
良さそうな設計を探してそれを元に実装する必要が出来てきました。
そこで教えていただいたのが、githubのスターが数が多いものや
調べたいことに関連する著名な人がスターを付けているオープンソースを読むことでした。
オープンソースといってもたくさんあるのでどう探せば良いかあまりわかっていなかったので
とても参考になり、実装もスムーズに進めることができました。
プルリクの作成時には作成した目的や背景をきちんと分かるようにすることはもちろんなのですが、
レビューをたくさんしていただかないといけない状況でもスムーズに見ていただけるようにするため、
ことに気をつけるということを学びました。
私は去年一年間リモートでインターンをしていて、
リモートだと文字とのやりとりが重要なのでここは意識していたところではあったのですが
今までは仕様をすでに把握している同じチーム内で見ていただくものばかりだったので
また新たな学びがありました。
チームによってやっていることや言語が全く違ったりしましたが、
仕事の進め方等の共通部分があったり、前のチームで学んだことがその次のチームで役立ったりと
繋がる部分を見つけたり、視野を広げるきっかけになりました。
良いですよ、地獄めぐり。ぜひ。
今回学んだことは絶対どこかで生かせる時がくると思うので
地獄めぐりが終わっても頑張っていきたいと思います！
