Reactの勉強会に行ってきた話。💻 - 頑張らないように頑張る。

React触った事も見た事もなかったので、行ってきた。

備忘録的なところと、こういう便利ツールあるんだってーっていう情報共有も兼ねて。

ライブコーディングほんとうしゅごい。

🔍事前に調べた内容

https://www.sejuku.net/blog/10812 https://www.to-r.net/media/react-tutorial01/ https://employment.en-japan.com/engineerhub/entry/2018/04/13/110000 https://qiita.com/rgbkids/items/8ec309d1bf5e203d2b19 https://qiita.com/naruto/items/fdb61bc743395f8d8faf http://iwasiman.hatenablog.com/entry/2018/04/23/200000

特徴

Facebookが開発したのOSSのJavaScriptライブラリ
- PHPを使ってたが、XSSやCSRFなどの脆弱性問題から「いっその事仮想DOM（VirtualDOM。以下に説明あり）を自分達で操ればえんじゃね？」ってところから開発された
開発途中からでも使える事が念頭に置かれてるので、既存コードに影響を与えることなく利用可能
コンポーネント指向でUI作成に最適
SPAに最適

VisualDOM

レンダリング機構の一つ。ざっくりとした手順は以下の通り。
- １．Virtual DOMに反映
- ２．Virtual DOMと現在のHTMLの内容の比較
- ３．差分のみをHTMLに反映させてブラウザの再描画
Webページを表示する一連の処理の流れの中で"描画コスト"が非常に高いため、描画コストを最小限に抑えられるReactは、表示のパフォーマンスを向上させることが可能
Reactだけでなく、AngularやVue.jsでも採用されている

メリット

SPAでの利用には有効に機能する

デメリット

jQueryなど、HTMLを直接書き換えるライブラリとは相性が悪い（VisualDOMとの比較に影響が出る）

※これらのメリット･デメリットは、VisualDOMを使っているライブラリでは全て同じ。

⌨️ライブコーディングしながら教えてもらった事

簡単に試すなら『Create React App』

https://github.com/facebook/create-react-app

上記のGithubからcloneで落としてきて、initして、startしたら使える。後は~/src/App.jsあたりのがちゃがちゃイジっていけばOK。

私見：
必要なライブラリをよろしく落としてきてくれるので手間がかからない反面、一から構築するための知見は得られにくい。一から構築したい場合は、npm init react-app my-appとした後に、リバースエンジニアリングすると良い？

『Atom』のおすすめパッケージ

https://atom.io/packages/prettier-atom

『Prettier』というパッケージ。 Ctrl+Cでの保存時に、HTML整形・引用符の統一・セミコロンの強制付与などのフォーマットを自動でしてくれる。

『ServiceWorker』

https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja

オフライン利用のためにキャッシュしたり、プッシュ通知したり、バックグラウンド同期したり、色々してくれる基盤技術。 Reactでも採用されており、~/src/index.jsに以下のコードがある。

...
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
...

『State』と『Props』

https://qiita.com/kyrieleison/items/78b3295ff3f37969ab50

データの扱いの話（State=状態を持つ、Props=親からプロパティを受取る）。 jQueryだと「このDOMのこの要素にはこの値だね」というように、毎回フルで読みに行ってフルで描画する＝描画コストがかかる。それをしないように変数のような領域で持っておく...みたいな感じで、部分的に読み書きする事で描画コストを抑える。（前述したVisualDOMの話の類似）

『スプレッド構文』と『BABEL』

var data = [1,2,3];
var hoge = [...data, 4];  // 三点リーダを置く事で、指定された配列をconcatで繋げてから、新しい配列を追加する

// ちなみに実態はこれ
var data = [1, 2, 3];
var hoge = [].concat(data, [4]);  // 新しい配列に対して、data[]と[4]をconcatしてる事が分かる

こういったコードの実態(展開式)を確認するには『BABEL』が使える。

『LiceCap』

https://www.gigafree.net/media/recording/licecap.html

操作をGIF保存できる便利ツール。

Githubなどでは動画は貼付できないが、GIFなら貼付できる事が多々ある。(hatenaブログでも同じだが) そのため、操作内容を一発でGIFに録画できるのは便利。

APIが簡単に作れる『Google Apps Script』

https://www.casleyconsulting.co.jp/blog/engineer/177/

ExcelやWordなどで使えるVisualBasicのGoogle版みたいなもの。 Google スプレッドシートをDB代わりにしつつ、GoogleAppsScriptでAPIを作成していける。もちろん、GoogleドキュメントやGoogleDrive、Gmailに対する操作も可能。

ただし、ドメインが異なるのでCSRFの問題が出てきてPOSTはできない（できるけど弾かれるはず）。抜け道としては、GETパラメータでデータを与えてぶち込む（設計上良くないけど）。

JavaScriptで非同期でデータ取ってきてくれる『Axios』

https://github.com/axios/axios

Promise based HTTP client for the browser and node.js.

ブラウザやnode.jsで動くPromiseベースのHTTPクライアント。自分でPromise使って実装するより、こいつ使ってthen()で繋げていった方が楽。

デザイン周りは『MATERIAL-UI』

https://material-ui.com/

『MaterialDesign』のReact特化型版。

使いたいコンポーネントを探して、コードを見て、コピペ(importと<tag>)してくれば使える。フォントだとかのアプリ全体を制御する<link ... />は~/public/index.htmlに追加する。

`git stash`

https://qiita.com/chihiro/items/f373873d5c2dfbd03250

一旦待避させられるらしい。初めて知った。「作業中だったけど別作業が入った。今の作業はコミットしたくないし、かといって消したくもない」といった時に使える。

git stashで、待避させる
git stash applyで、待避所から取ってくる
git stash popで、待避所から取ってくると同時に消す
git stash dropで、待避所から消す
git stash listで、一覧表示

『式の展開』を応用

...
import CircularProgress from '@material-ui/core/CircularProgress';
...
class App extends Component {
  ...
  render() {
    return (
      <div>
        ...
      </div>
      {flg && <CircularProgress />}
      ...
    );
  }
  ...
}

中括弧{}の中は展開されるが、このような書き方をすると、flgがtrueの時だけ、<CircularProgress />を表示してくれる。

プログレスバーなど、処理中にのみ表示させたい時などに便利。