Author Archives: takepo

React×ReduxにおけるTypeScript入門

takepo|2019年01月22日
JavaScript

@takepo です。
昨日01/21に【サポーターズ】React×ReduxにおけるTypeScript入門 というイベントで登壇させていただきました。その登壇の際の発表スライドをあげさせていただきます。

内容はTypeScriptの基本的な部分とReactやReduxの経験者向けのTypeScriptでの書き方の説明をサンプルコード付きでさせていただきました。

  • Typescriptとは
  • TypeScriptをはじめる方法
  • TypeScriptの型について
  • 一緒に入れると良いライブラリ
  • ReactのComponentを書く
  • Reduxのフローを書く
  • TypeScriptを導入してみて

サンプルコードを載せたリポジトリはこちら

ちなみに前回は「初心者のためのReact入門」というタイトルで登壇して、Reactの基本的なところを説明させていただきました。その際の記事はこちらなのでReactも合わせて抑えたい方はぜひご覧ください!

初心者のためのReact入門と勉強法について

takepo|2018年09月26日
JavaScript

@takepo です。
昨日09/25に【サポーターズCoLab勉強会】初心者のためのReact入門 というイベントで再度登壇させていただきました。その登壇の際の発表スライドをあげさせていただきます。

内容はReact初心者向けのものになっていて、コードサンプル付きで説明させていただきました。

  • React とは
    • React
    • ES6おさらい
    • Component
    • JSX
    • props と state
    • Componentライフサイクル
  • よくReactと一緒に聞くRedux, yarn, webpackなどの概要説明
  • React勉強方法
    • JavaScript初心者の私が、React×ReduxによるSPA開発の一員になるまでの勉強法
    • 今から始めるための勉強法

実はこのReact入門という形で登壇させていただくのは3回目になりますが、
前回の資料から最新情報をプラスしたり、より初心者向けにパワーアップしている部分もあるため、
あらためて資料をあげさせていただきました。
ちなみに前回登壇した際の記事はこちら

スライド中にのせたこちらもぜひ!
ランサーズ流 React.js/redux アプリ開発入門
React Redux を用いた SPA 新規サービスを運用して得た知見と実装例
JavaScript初心者の私が、React×ReduxによるSPA開発の一員になるまで

初心者に向けたサンプル付きReact入門と勉強法について

takepo|2018年04月25日
JavaScript

@takepo です。
先日、【サポーターズ勉強会】React入門 というイベントで再度登壇させていただきました。
その登壇の際のスライドをあげさせていただきます。

内容はReact初心者向けのものになっていて、コードサンプル付きで説明させていただきました。

  • React とは
    • React
    • Component
    • JSX
    • props と state
    • Componentライフサイクル
  • よくReactと一緒に聞くRedux, yarn, webpackなどの概要説明
  • JavaScript初心者の私が、React×ReduxによるSPA開発の一員になるまでの勉強法

実はこのReact入門という形で登壇させていただくのは2回目になりますが、
前回の資料からパワーアップしている部分もあるため。あらためて資料をあげさせていただきました。
ちなみに前回登壇した際の記事はこちら

スライド中にのせたこちらもぜひ!
ランサーズ流 React.js/redux アプリ開発入門
React Redux を用いた SPA 新規サービスを運用して得た知見と実装例
JavaScript初心者の私が、React×ReduxによるSPA開発の一員になるまで

React入門 2018

takepo|2018年01月25日
JavaScript

@takepo です。
先日、【サポーターズ勉強会】React入門 というイベントで登壇させていただきました。
その登壇の際のスライドをあげさせていただきます。

内容はReact初心者向けのものになっていてコードサンプル付きで説明させていただきました。

  • React とは
    • React
    • Component
    • JSX
    • props と state
    • Componentライフサイクル
  • よくReactと一緒に聞くRedux, yarn, webpackなどの概要説明
  • JavaScript初心者の私が、React×ReduxによるSPA開発の一員になるまでの勉強法

スライド中にのせたこちらもぜひ!
ランサーズ流 React.js/redux アプリ開発入門
React Redux を用いた SPA 新規サービスを運用して得た知見と実装例
JavaScript初心者の私が、React×ReduxによるSPA開発の一員になるまで

同じReact入門という内容で再度4/23に登壇させていただきました。
この資料からパワーアップしている部分もあるのでぜひこちらもご覧ください!

JavaScript初心者の私が、React×ReduxによるSPA開発の一員になるまで

takepo|2017年12月23日
JavaScript

ランサーズ Advent Calendar 2017 23日目の記事です。

新卒2年目エンジニアでpookのフロントエンドの開発を担当をしているtakepo(@takepo0928)です。
私は新卒として入社をする前1年間インターンをしていました。その頃にReactを触り始めて、今はもう2年ほど経ちます。もともとはWebの知識すらあやふやで、JavaScript自体あまり書いたことないレベルでした。

今回はそんなJavaScript初心者だった私が、React×ReduxによるSPA開発チームの一員になるまでにやってきたことについて書きたいと思います。

やってきたこと?

主にキャッチアップ時のこと&React周りが多いです。

React, Reduxの公式のチュートリアル

最初にReactの概要を読みつつ、公式のチュートリアルをやりました。 ちょっと自分で改変してみたりしてなんとなーくReactこんな感じ?みたいな雰囲気をつかみました。

その後にReduxの公式チュートリアルをやりました。 そもそもFluxとはなんぞや?状態だったのでそこから調べつつ進めました。チュートリアルをやった後もう一度振り返ってデータの流れ方を図とコードを合わせてみながら確認をしていた記憶があります。

チームで輪読会                   

当時の開発チームみんなほぼ React初心者だったので、解説する人を回しながら毎日30分間、通称サムライ本と呼ばれている(?)O’Reillyの入門Reactを使用しました。
今だとReactもかなりバージョンアップしているので情報が古くなってしまっている部分もあるかと思いますが、とてもお世話になった本です。

ちなみにこの頃はリモートでインターンをしていたときだったので毎日skypeで参加していました。チームみんなで読むことで、チーム間の知識共有や目線を合わせることができたのでとても良かったです。

一人React.js Advent Calendar

@koba04さんが書かれた一人React.js Advent Calendar 2014を読みました。Reactの基本的なことをまとめてくださっていて初心者にはとても分かりやすく、また簡潔にまとまっているため、あとで調べる時も役立ちました。
初めの頃は、componentのライフサイクルの記事や一人アドベントカレンダーでいつでも調べれるように常にブラウザの固定タブで開いたりもしてました。  

オープンソースにコミット

社内で開発してオープンソース化したパッケージに機能追加するためにコミットを試みました。
残念ながらマージまで至ってないですが、初めて外に自分のコードやプルリクを公開する機会だったので良いチャレンジになりました。
今度は自分で1から作って上げたいし、もっとオープンソースも読んでいこうと思っています。  

最新情報のキャッチアップ

今まで何かプログラミング言語を学ぶときは、本を読んだり公式ドキュメントを読んで習得することがほとんどでした。しかし、Reactをはじめ、フロントエンド周りは進化のスピードがとても早いです。常に新しい情報をキャッチアップしていく必要があります。
そのため、はてぶ・qiita・SNSなどを毎日チェックしてキャッチアップしていけるようにしています。

実務での開発

ここまでいろいろ紹介してきましたが、なんだかんだで実務で開発していきながら学んでいったことが一番多いです。
つまづくたびにググったり、パッケージのコードも読んだりしながらなんとか開発し続けてきました。
あと、先輩にレビューで良い指摘をたくさんもらい鍛えていただいたり、つまづいても聞ける環境だったのが大きいです。   

まとめ?

このように色々やってきましたが、最初触れたときは全然分からなくて、覚えることも多すぎて蕁麻疹を発症したこともありました。また、思ったより自分の開発スピードが全然上がらなくて苦労しましたが、今となってはいい思い出、いい経験です。
ちなみにES6自体はもともとJavaScriptの知識が自分にあまりなかったため、「こんな感じなのね!classとか使えて良いじゃん!」と意外とすんなり抵抗なくいけました。
今なら日本語でも情報たくさん出ているので、もっと楽に習得できるのでは?と思いますが、誰かのお役に立てれば幸いです。

React楽しい?✨

React × Redux で action 発行時に確認ダイアログを挟む middleware の実装例

takepo|2017年07月14日
JavaScript

pookチームのtakepoです。
今回は、React × Redux でstateを変更する時にダイアログ等で確認表示を挟みたいときの良い方法をご紹介します。
その場合の例として、「ユーザーの情報を更新するとき、更新しても良いかを一度確認するダイアログ表示する」といったことが挙げられます。

この方法を一言で言うと、
「Container側では変更処理をするactionのみ呼び出すようにする」
です。
サンプルを交えてご紹介します。

サンプル

データを更新する際に確認用のダイアログを表示し、「OK」を選択した場合に更新処理を行います。

Dialog Component

ダイアログの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を呼ぶContainer

変更処理をかけるactionを呼ぶ箇所はこのように書きます。
ここで注目したいポイントは、更新処理をするactionの第2引数にmeta情報としてダイアログのpropsに渡すmessageとtitleを入れておくことです。


const payload = {
 // 更新する情報
}
const meta = {
  dialogInfo: {
    title: '更新',
    message: '情報を更新しますがよろしいですか?',
  },
}

// 更新処理をかけるaction
this.props.actions.update(payload, meta);

middleware

更新処理をする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のみ呼び出すようにする」
ことができました。
これで更新処理を呼ぶ側をすっきり書くことができます!

地獄めぐりをしたおはなし

takepo|2016年12月14日
DevOps

初めまして!

16年新卒でキラキラReact女子目指して頑張っている takepo です。

普段は主にReact/Reduxを使ったフロントエンド開発を主に行っているのですが、

今回は、9月〜3ヶ月の期間に地獄めぐりをさせていただいたので

そのお話しをさせていただければと思います。

 

そもそも地獄めぐりって?

地獄めぐりとは、開発部のインフラやデザインのチームも含めた全チームを

期間を区切って全てめぐることで、CTOによって名付けられました。

  • そのチームがどんなことをしているのかを知る
  • チームによってやっていることも様々なので、
    自分の知識や経験を広げよう

という目的のもと行わせていただきました。

 

行く先行く先で新しいことばかりなので、

『やりきること』『少し調べてもわからないことはすぐに聞くこと』を心がけてめぐりました。

 

めぐってみて

短いターンで様々なチームを次々にめぐり、そのチームに行くまで

何をやるかわからないことがほとんどだったのでワクワクドキドキの3ヶ月でした。

 

また人やサービスが増えてきたことで開発部のチームも細分化されて

他のチームがどんなことをどんな風にやっているのかが見えにくくなっていたので知ることができました。

 

私は今までやったことあることの範囲内でしかなかなか物事を考えることができなかったのですが、

今回いろんなチームでいろんなことを経験させていただいて、

前より広い視野で物事を考えられるようになった気がします。

少なくとも意識は変わったので良かったと思っています。

 

学んだこと

技術的なことはもちろんのことなので今回は割愛しますが、

短期間で与えられたミッションをこなすため

『どうやったらミッションをこなせるか考えて工夫すること』を学びました。

その中でもポイントでまとめると

  1. try and errorをいかに早く回すか

  2. 実装の参考になるよさそうなオープンソースの探し方

  3. プルリクの作成・レビューのお願いをする際に気をつけること

があげられます。

 

1.try and errorをいかに早く回すか

実装をどうやったらスムーズに行えるか悩んでいる時に教えていただきました。

何もエラーなくスムーズに実装できれば良いですが、慣れないうちはそんなにスムーズにいきません。

なので、本当にデバックしたい部分だけを見るにはどうしたら良いか工夫し、

他の人にパッとlpページなど簡単なものを確認してもらうため、

ローカルサーバーをさくっと立ち上げる等の小技の組み合わせて、

try and errorをいかに早く回すかが大事だと学びました。

 

2.実装の参考になるよさそうなオープンソースの探し方

今まではググれば答えがわかるようなものを実装していたのですが、

良さそうな設計を探してそれを元に実装する必要が出来てきました。

そこで教えていただいたのが、githubのスターが数が多いものや

調べたいことに関連する著名な人がスターを付けているオープンソースを読むことでした。

オープンソースといってもたくさんあるのでどう探せば良いかあまりわかっていなかったので

とても参考になり、実装もスムーズに進めることができました。

 

3.プルリクの作成・レビューのお願いをする際に気をつけること

プルリクの作成時には作成した目的や背景をきちんと分かるようにすることはもちろんなのですが、

レビューをたくさんしていただかないといけない状況でもスムーズに見ていただけるようにするため、

  •  実装意図がわかりにくいところはプルリクでコメントを
  • どういうテストをしたかちゃんと分かるように項目を書く
  • 他にも関連するプルリクがある場合は、必ずプルリクがどの役割・分割で作成されたものか分かるようにする

ことに気をつけるということを学びました。

私は去年一年間リモートでインターンをしていて、

リモートだと文字とのやりとりが重要なのでここは意識していたところではあったのですが

今までは仕様をすでに把握している同じチーム内で見ていただくものばかりだったので

また新たな学びがありました。

 

まとめ

チームによってやっていることや言語が全く違ったりしましたが、

仕事の進め方等の共通部分があったり、前のチームで学んだことがその次のチームで役立ったりと

繋がる部分を見つけたり、視野を広げるきっかけになりました。

 

良いですよ、地獄めぐり。ぜひ。

 

今回学んだことは絶対どこかで生かせる時がくると思うので

地獄めぐりが終わっても頑張っていきたいと思います!