フロイドの狂気日記

時は流れ、曲も終わった。もっと何か言えたのに。

PR

jqueryおじさんがreactの勉強で調べた単語

PR

reactとはブラウザに表示するためのライブラリである。reactを使うために関連する知識が必要とする点でjqueryおじさんにはハードルが高い。自分用としても極めて簡略化してメモっておく。デファクトっぽいのは赤文字にしてみた。

 

Babel

javascriptの仕様は進歩しつづけていて便利になっている(新機能をまとめてES6とかES7と呼ぶ)。js仕様が進歩するとブラウザが対応しないといけないが、対応が間に合っていない機能がある。Babelを簡単に言うならば、古いブラウザでjsの新機能を使うために頑張ってくれる変換機能である。トランスパイラ。最近ではBabelからTypescriptへ移行する例があるらしく、TypeScript導入しとけばいいんじゃね、って感じではありそうだ。

 

TypeScript

AltJs(代替js)。javascriptの記述方法があまりにもクソなので、今風な書き方したいよね、って人々が作り出したのがAltJsであり、その代表格というか2020年には覇者となっているjs。これによりブラウザが対応していないES6以降の機能も使えるよ、っていう。文法が違うjsとでも認識していればいいかもしれない。静的型付けができる。厳格なコーディング運用ができるので大規模開発で好ましい。

 

NodeJs

サーバサイドjavascript。サーバサイドで動くjsというが実はなんでも屋さんが故にいたるところで存在するようになった。正確にはサーバでjsを動かすことができるようになるプラットフォームということらしい。NodeJsでアプリも作れるし、サーバ構築もできる。リアルタイム性のある機能(LINEとかTwitterみたいな)の実装が得意な言語。

 

npm

reactを使い始めるとしょっちゅう使うコマンドがnpmだ。Node Package Managerの略。開発環境にreactを使うために必要なライブラリをinstallしたりするために必要。babelもreactもこのコマンドでinstallする。

 

Redux

jsで処理したstate(状態)の管理を行う独立したフレームワーク。reactと相性が良いそうな。これを使うとブラウザに表示されているデータなどを管理したり、テストしたりするのが楽になるらしい。そのためブラウザ上で複雑な状態変化があるような大規模開発だと重宝すると評判。一昔前の鉄板だったがreactにhooksという機能が出たから衰退するという話を見かける。

 

Webpack

js、cssのファイルをbundle(ひとまとめ)するためのモジュール。bundleを画像検索するとイメージがつかみやすい。なぜ必要かというと、開発効率的には役割ごとに複数のjsファイルやcssファイルを作るけれど、読み込む際には1つのファイルで読み込むほうがリクエスト1回だけで済むので効率がいい。そんなわけでたくさんできたjsとcssをひとまとめにしてくれたら嬉しいよねってな願望を叶えてくれるやつ。

 

GraphQL

facebook製。QLはクエリのこと。データ取得屋さんAPIjqueryおじさんに馴染みが深いのはurlでデータ取得リクエストを行うREST APIだろうが、それとは全く別の方法でデータを取得するAPIREST APIと共通点もある。違いは必要なデータのみをフロントエンドで定義しリクエストするため通信量が少ない。バックエンドでは名前とIDと住所を取得できますよ、と定義していたならば、フロントエンド側では名前だけ取得する、3つとも取得する、などとリクエストの定義を変えられるということのようだ。データ取得の定義を決めることでデータフローの明確化ができることもメリット。

 

Next.js

reactはブラウザで見える部分の実装を行うライブラリであってフレームワークではない。サーバーサイドレンダリング(SSR)を行いたいときにこいつを使うということみたいだ。reactで完全SPAを作ると、読み込みが遅い、SEOで不利なのでは、という悩みを解決するためjsの処理をサーバーサイドでやっちゃうぞ、ってなもん。ところが2020年においてはGoogleの巡回botがjsを解釈するらしいということになっていて、SSR自体いらんのではないか、という意見が見かけられる。

 

Gatsby

reactベースの静的サイトジェネレーター。react公式ページで採用されている。そもそも静的サイトジェネレータ自体何やねんって話だが、サーバサイドとDBを省略してwebコンテンツを作り出す仕組み、ぐらいの認識で良さそうだ。これを採用するということはPHPMysqlを使わないweb appを作るということのようだ。それで目的を達成できるならOKといったところか。Next.jsと比較されがち。

 

 

==========

 

とりあえずreact hooks + typescript + webpack + graphQL + Gatsbyでなんか作るぐらいのことはしてもいいもしれない。

 

 

いろいろ調べましたね。

jqueryおじさん「jqueryで良くね?」

 

www.byosoku100.com