https://tech.yyh-gl.dev/categories/react/Recent content in React on Indexing my brainHugo -- gohugo.iojaMon, 02 Dec 2019 09:00:00 +0900https://tech.yyh-gl.dev/blog/react_typescript_sample/Mon, 02 Dec 2019 09:00:00 +0900https://tech.yyh-gl.dev/blog/react_typescript_sample/<h1 id="typescript-advent-calendar-2019">TypeScript Advent Calendar 2019</h1> <img src="https://tech.yyh-gl.dev/img/2019/12/react_typescript_sample/qiita_advent_calendar_2019.png" width="700"> <p>本記事は <a href="https://qiita.com/advent-calendar/2019/typescript" target="_blank" rel="noopener noreferrer">TypeScript Advent Calendar 2019</a> の 2 日目の記事です。</p> <p>内容としては、TypeScript 初級者のための TypeScript 入門です。</p> <p>基礎的な内容から入り、<br> 最終的には、企業や個人の技術ブログを参考に、<br> React の実プロジェクトにおいて、<br> どのように TypeScript が使われているのか紹介できればと思います。<br> （APIリクエスト周りのTypeScript活用事例を紹介）</p> <p>今日の記事を読んで TypeScript に入門し、<br> 今後の TypeScript Advent Calendar をお楽しみいただけると幸いです！</p> <h1 id="基礎編">基礎編</h1> <h2 id="typescript-とは">TypeScript とは</h2> <img src="https://tech.yyh-gl.dev/img/2019/12/react_typescript_sample/ts.png" width="200"> <p><a href="https://www.typescriptlang.org/index.html" target="_blank" rel="noopener noreferrer">TypeScript</a> は Microsoft 社によって開発され、 現在は <a href="https://github.com/microsoft/TypeScript" target="_blank" rel="noopener noreferrer">OSS</a> として開発が進められています。</p> <p>「TypeScript とは何か」を簡単に説明すると、<br> <u>JavaScript に対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えたスーパーセット</u> です。</p> <p><a href="https://www.typescriptlang.org/" target="_blank" rel="noopener noreferrer">公式サイト</a> はこちらで、<br> 2019年12月2日現在、最新版は 3.7.2 となっています。</p> <p>では、実際にコードを交えながら基礎的な部分を説明していきます。<br> ただし、実践編で使用する内容に絞って説明していきますので、<br> その点はご了承ください🙇‍<br> （足りない情報は<a href="https://www.typescriptlang.org/docs/home.html" target="_blank" rel="noopener noreferrer">公式ドキュメント</a> を参考にしてください）</p> <h2 id="型">型</h2> <p>では、早速、TypeScript の型に触れていきましょう。<br> TypeScript で使用できる基本的な型として以下のものがあります。</p> <ul> <li>Boolean</li> <li>Number</li> <li>String</li> <li>Array</li> <li>Tuple</li> <li>Enum</li> <li>Any</li> <li>Void</li> <li>Null and Undefined</li> <li>Never</li> <li>Object</li> </ul> <p>だいたいの型は他言語でも用意されているので、<br> 説明がなくても理解できると思います。</p>https://tech.yyh-gl.dev/blog/react_memo/Wed, 18 Sep 2019 09:00:00 +0900https://tech.yyh-gl.dev/blog/react_memo/<h1 id="reactmemo-とは">React.memo とは</h1> <p><a href="https://ja.reactjs.org/docs/react-api.html#reactmemo" target="_blank" rel="noopener noreferrer">公式ドキュメント</a> を見ると、</p> <blockquote> <p>これは React.PureComponent に似ていますが、クラスではなく関数コンポーネント用です。</p></blockquote> <p>とあります。</p> <p>つまり、 React.PureComponent を関数コンポーネントで実現するための手段らしいです。</p> <h1 id="reactpurecomponent-とは">React.PureComponent とは</h1> <p><a href="https://ja.reactjs.org/docs/react-api.html#reactpurecomponent" target="_blank" rel="noopener noreferrer">公式ドキュメント</a> を見ると、</p> <blockquote> <p>React.PureComponent は React.Component と似ています。 両者の違いは React.Component が shouldComponentUpdate() を実装していないことに対し、 React.PureComponent は props と state を浅く (shallow) 比較することでそれを実装していることです。</p></blockquote> <p>とあります。</p> <p><u>shouldComponentUpdate() によって、どういった変更があれば再描画するかを定義する</u>ようです。</p> <br> <p>追加でこの<a href="https://the2g.com/2814" target="_blank" rel="noopener noreferrer">参考記事</a> を読んでみると、</p> <blockquote> <p>PureComonentはprops及びstateの変更を検出した場合のみレンダリングを行います。 Messageコンポーネントではmessage propsの変更を察知し、必要分の更新を行うようになります。</p></blockquote> <p>とあります。</p> <p>自分で再描画条件を定義できるので、無駄な再描画を省くことができ、パフォーマンス向上を期待できるんですね。</p> <p>→ React.PureComponent を用いることでパフォーマンスを向上させることができるようです。<br> （参考記事内にもあるとおり銀の弾丸ではないようですが…）</p> <h1 id="浅い比較-とは">浅い比較 とは</h1> <blockquote> <p>shouldComponentUpdate() は浅い比較によって変更検知を行う。</p></blockquote> <p>とありましたが、浅い比較とはなんでしょうか。<br> （shouldComponentUpdate() のデフォルトが浅い比較というだけで、オリジナルの比較方法を実装可能なようです）</p> <p>さきほどの<a href="https://the2g.com/2814" target="_blank" rel="noopener noreferrer">参考記事</a> にて説明されていました。</p> <blockquote> <p>浅い比較というのは、簡潔に述べるとオブジェクトの参照先が同じであれば等しいと見なすことです。</p></blockquote> <p>参照先しか見ていないので、中身は見ていないということですね。<br> （このような実装なのは、React の思想として、props や state といったデータは immutable であるべきだとしているからだと思います）</p>