## 話題の React って何？出身は？年収は？彼女はいるの？ slide: https://hackmd.io/@kt-party/HJy-8jZvu --- ## 目次 - 近況 - React って何？ - 他の UI ライブラリと何が違うのか？ - TypeScript とは - React x TypeScript - Hello React - いかがでしたでしょうか？ --- ## 近況 - プチ昇進、給料プチアップ - 自分の portfolio サイト作った - Gatsby x Netlify CMS - [サイト作成に関する記事](https://kuriyosh.net/blog/contents/2021-04-18-gatsby-netlify-cms-%E3%81%A7%E3%83%96%E3%83%AD%E3%82%B0%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%9F/)書いた - nosh 始めてみた - 食事のサブスクサービス - 感想 - 個人的には満足 - おいしい - 量は少なめ、ご飯は自分で炊かないと - 容器は適当に水で流してゴミ箱に入れれば良い - 冷凍庫を大圧迫してくるのが辛い - アフィ → https://hackmd.io/@kt-party/S1V3W5GwO --- ## React って何？ - JavaScript 製の UI ライブラリ - 従来の開発方法 → HTML/CSS/JS で開発 - React → ほぼ JS のみでコーディング --- ## なんで React を使うのか - component 単位での開発によるコードがシンプル - 例) ボタンやヘッダー単位 - 保守性が高くなりそう - 色んなプラットフォームで利用できる - React Native → Native API 利用のスマホアプリ開発 - Electron → Desktop アプリ開発 - ただ、最近色んな環境でクロスプラットフォーム開発できるようになっている気もする --- ## React を覗いてみる - component 単位の開発 - props/state とは？ 軽いサンプルアプリ用意した https://github.com/yosyos36/kt16-react-sample --- ## 他の UI ライブラリよりも良いなーと思うところ (私見) Vue 慣れしている人が多いと思うから、主に Vue と違う点 - TypeScript サポートが手厚い - TypeScript については後述 - 大規模なアプリケーション開発に向いている - Vue は Single File Component 思想 - React はより細かい単位で分割しやすい - コミュニティが盛んでライブラリが多い - Vue も当然多いけど、UI テンプレートがより多い気がする - Cross Platform 対応が進んでる - 前述の通り --- ## 他の UI ライブラリよりも辛いところ (私見) - 不安定 - すぐ既存の記法を非推奨にしたりする - 学習コストが高い - 抽象的な概念が多くて容易に理解できない点が多い --- ## TypeScript とは - JavaScript で型定義ができるようになる ```typescript const a: number = 1; const sampleFunc: (arg: number) => string = (arg) => { if (arg > 100) return "100 以上！"; else return "100 以下"; }; ``` 正直それだけ --- ## TypeScript のメリット - 型安全になる - Null バグが発生しにくくなる - Editor の補完が効きやすくなる - 開発が楽になる --- ## React x TypeScript デモアプリから軽く触る --- ## Hello React - vue-cli 的なツールとして create-react-app がある - --tempalte 引数でテンプレートを指定できる ```shell= $ create-react-app hello-world --template typescript ``` babel とか webpack の設定を勝手にしてくれる --- ## いかがでしたでしょうか。 現在 React さんの年収、彼女についてはわかりませんでした --- ## recap - 大規模アプリ向け JS UI ライブラリ - なんとなく記法を説明 - component - props/state - TypeScript について - React プロジェクトの作り方