Reactをいじり続けてる間に色々知った英単語たちまとめ
新同盟掲示板のためにReactを2ヶ月ほどいじり続けながら某箱庭民に並行して色々と教わってる状態なのだが、
ここまでに見聞きした謎の英単語たち、名前しか知らない英単語たちが多すぎて頭がパンクしかけているので感想メインで簡単にまとめる。
思い出せた単語を次出しているので基本順不同。
たまに色んな人の備忘録ブログを読んでもなんか状況が違くて解決できないことがある。windowsで開発してるのが若干デメリットに感じるレベル。
tailwindCSS
箱庭諸島でスマホ対応してるやつは今scssを利用して書いているけど、一部汎用性が欲しいクラスが欲しくて、そこは画像のように書いてる
tailwind調べたらまさにやりたいことがフレームワークとしてあったのでもうこれでいいじゃん！ということで導入。クラス名が統一されただけでもよろしい。
実際複数の箱庭を跨いでいると、red,disaster,attention,command3,lbbsOWと色んなクラス名があるけど全て#FF0000だけが設定されている。それが今の日常。カオス。
なお本当に使いたいのはUnoCSSだけど新しすぎるせいで情報が少なくまだ様子見。
tailwindに一通り慣れたところで来年導入をしてみたい
vite
バイトじゃなくてヴィートらしい。公式に貼ってある発音聞くとヴィフィッツって聞こえる。
node.jsを入れたあとにしばらくそのままnpm startして開発していたが、起動遅いなとは思ってた。
npmさえ使えれば簡単に導入できる。環境構築？もポチポチして入れるだけ。
起動も1秒かからない超高速。早く入れろと何回か言われてたけど1週間React触って慣れたら確かにさっさと導入すべき便利なやつ。
ただ新しく作ったプロジェクト？に元々作ってたコードをそのまま移すと初期設定が微妙に違うようで動かないので注意しないといけない。
ESlint
npmコマンド使ってインストールしたやつと、Cursorの拡張機能として両方導入した。
結局どっちかで良かったのか両方しなきゃいけなかったのかわからないまま()
エラーが出たらどこが問題かをエディタ上で出してくれるので、凡ミスが多い私には地味だけど助けられている。
細かい環境設定はわからないがまあ今は個人で使っているのでﾖｼとする。
viteで構築した方に既存のコードぶちこんだらReactのimport方法とかが微妙に違ってて、
propTypes書けとか言われたけど、いじくってたらエラーが消えたのでよくわからんがヨシ!!
Prettier
見た目がTwitterぽいからプリッターと読んでたけどプリティアらしい。魔法つかいかな？
こちらもnpmコマンド使ったやつとCursorの拡張機能として両方導入してごにょごにょしてた。
ただ効果あるのかわからないなと調べたら、保存時に整形するけど常に自動保存だと整形されないらしい。
のでコマンドパレットから直接実行してみた。
これは…凄い…！
"と'はよくばらばらになるし、見やすくする半角スペースの入れ具合もばらばらだったけど、これ使うだけで一気に統一される。
今回の中で一番早く知りたかったやつの1つ。
tailWindCSSでクラス名の順序も揃えられるらしいがなんかうまく反映させられないのでまた今度。。
@ts-check
js(jsx)ファイルの先頭にコメントアウトでこれ入れておくだけで擬似TypeScriptになる。あくまでjsのまま。
最初からTypeScriptでいいじゃんとは思うがいきなり覚えることが大量すぎて頭が追いつかないので、一旦これで様子見をしている。
でもなんとなく良さそうな気配しているので、面倒だけどTypeScriptも導入してみようかなとぼんやり考えている。
なんで同じ1なのにtrueじゃねえんだよ！と10分調べたら単にstringとnumberを===で比較して不一致だったから、、とか未だにやってる素人。
Redux
JavaScriptアプリケーション全体の状態管理をするためのライブラリ、だそう。
ただのグローバル変数じゃなく、セキュアなグローバル変数のほうが近い。コンポーネントがあるごとにpropsで何度も引き継ぎしなくてよくなる。
ちなみにReact以外でも使える。もちろん素のjavascriptでも使える。
細かいことは多分他で調べたほうが早いと思うので、ここではこれだけ。
axios、fetch
サーバーと通信できるやつ。
Axiosはライブラリなのでインストールが必要だが、API通信で利用する際に機能が充実してるのでちゃんと設計しているならこちらが便利そう。
fetchはブラウザに内蔵されているので手軽。Service Workerの統合もしやすいとのこと。
代わりに自動でjsonにしてくれなかったり、エラーハンドリングがちょっと難しくなるなど機能性が落ちるのでちゃんと考えて使い分けないといけなさそう
Apache、Nginx
Apache
箱庭諸島やってるので度々聞いてたけど結局わかってなかったのでこれを機にちゃんと調べた。
要はWebサーバーとして動かすためのソフトウェアの1つ。これのおかげでただのPCをwebサーバーとして役割をもたせられるようになる。へぇ…
Nginx
えぬじーあいえぬえっくすで読んでたらエンジンエックスと読むらしい。Apacheより9年遅く出たやつ。
並行処理性能を高くしてメモリ使用量も節約できるので、何度も細かい通信しても問題なく捌けるまさに現代向けのwebサーバー。
ただ設定が少し難しいらしく、用途を明確にしたうえで採用するものらしいので一長一短という感じ。
あとIISというMicroSoft提供のwebサーバーもあるそう。主流ではないのでここではメモ程度に名前を残しておく。
CSR、SSR、SSG、ISR
ソシャゲのカードのレアリティっぽい名前たち。
CSR(Client Side Rendering)
ページのソース見ると何も無さそうに見えるけど、クライアントで色々生成してページを表示している。Reactはこれ。
サーバー負荷を軽くできる代わりに閲覧者のPCやスマホに処理を押し付けるので、ちゃんと作らないと人によってはページが重すぎてどんなサイトかよくわからないままお帰りになられる。
SSR(Server Side Rendering)
CSRとは逆にサーバーで色々生成してから出来上がったやつをクライアントに送ってページを表示している。
サーバーで生成してるので表示さえ出来れば低スペックのスマホでも安定して表示される。
ただ所詮サーバーなのでiPhoneみたいな高性能CPUよりは遅い、生成するためにnode.jsを導入しないといけない、とちょっと面倒くさそう。SEO的にはこれがいいらしいが。。
ただCSR、SSRは同時に採用することができるみたいなので使い分けすることも可能
SSG(Static Site Generation)
CSR、SSRは閲覧者が来てから都度ページを生成するので表示されるまで遅い。
じゃあただのhtmlファイルみたく事前に生成しておいて閲覧者来たらそれ送りつければいいのでは？
というのがSSG。多分。
これは完璧な解答…思いきやページ更新があまりないブログみたいな静的ページじゃないと相性が悪い。
デプロイ(アップデート)しないとビルドされないのでページは更新はされない。
デプロイするということは再ビルドするので全ページを再生成することになる。なのでページが多くなるほど再生成の時間も増えていってしまう。
APIも絡んでくると下手な作りだとページ全部再生成みたいなことになりかねないらしい。
ISR(Incremental Static Regeneration)
SSGってちょっと内容更新するだけで全部ビルドしなきゃいけないの面倒だよね～
でも記事表示するだけに速度は犠牲にしたくないしな～別に最新情報乗せてるわけじゃないし～
そんな人のためにちょうどその間に位置するのがISRらしい。多分。
最初はSSRと同じなのでページ表示が重いが、
一度生成したらそれを指定した時間の間キャッシュとして保持することができるので、2回目以降はSSGと同様に生成物を返すだけなので高速で表示される。
もちろんキャッシュが効いてる間はSSG同様に更新がされない。キャッシュが切れたタイミングで裏で再生成されて最新状態になる(のでこの時はまだキャッシュにある古い生成物が返される)
難しそうだけど扱えるならちょっと良さそうな感じ。
とはいえ結局どれもこれも一長一短。便利なものが増える故に技術選定が面倒になる
SPA、MPA
上の4種類に関連したやつ
SPA(Single Page Application)
スパ温泉でもなく、雑誌名でもなく、製造小売業でもない。
Gmailとかnoteとか𝕏とか。ページが丸ごと更新されずに一部だけ更新されるアプリっぽいような形式になる。
SPAということは基本CSRになるので動作はちょっと重くなる。が、アプリに近い高度な動きなどもできるようになる。
MPA(Multi Page Application)
水圧に使う単位でもなく日本音楽出版社協会ではない。
シングルに対してマルチ。難しそうに見えるが実は昔からあるwebサイトの形式がこれ。
箱庭諸島もそう。阿部寛のホームページもそう。
阿部寛の方はHTML4のフレームタグを使ってるのでシングルページっぽく見えるけど。
サーバー側で生成してページを表示してることになるのでこちらはSSRになる。
ってことはMPA = SSR…ってｺﾄ??という考えになったのだが、厳密には違うよう。
SPAは基本CSRだが、SEO対策等々のためにSSRもできるようにしたぜ！ということらしい。なのでSPAを基準にしてCSR,SSRがある。
MPAはどっちなの？と言われたらSSRじゃない？程度の扱い。
わかりやすく区別するためにMPAはSR(Server Rendering)と呼ぶこともあるらしい。レアリティが落ちるがある意味こっちのほうが理解はしやすそう。
git、github
これ知らないってマジ？と思われるだろうが実はこの記事のためにようやく導入した初心者なのだ。githubは仕事で閲覧用で少し使ってるけど
git
ファイルをバージョン管理するやつ。私はずっと複数フォルダに分けて手動で管理してたけど、それをコマンド使っていい感じにしてくれる。
昔々、スクリプトをうっかり違う文字コードで保存しちゃって日本語が全部文字化けして元に戻せなくなって本番から復元しよ…という地獄展開が実はあったり。。
gitを導入していたらそういう時に過去のバージョンからｼｭｯと復活できたかもしれない。
便利ではあるけど箱庭を設置して動けばいいレベルの頃は必要なかったしな。。
github
いい感じにしてくれるgitをネットでいい感じに使えるようにしたやつ(語彙力)
複数人でコードいじるには不便なのでそれを解消するためにgithubがある。
どんなコード書いてるか、どのくらい書いてるを見せられるので実績公開に使えるそう。というかgithub前提の開発が多くて使えないやつお断りする企業もあるとかなんとか。
gitとgithubは違うという記事もどこかで見た気がするが、javaとjavascriptほどは違わない。ただgithubだけ用意しても意味がない
VPS、AWS
VPS(Virtual Private Server)
サーバーを仮想化してCPUやメモリを割り当てて複数サーバーとして見立てて使う。
性能に限りがあるが個別に割り当ててるので他にはほとんど迷惑はかからない。1つのPCに擬似的に複数のPCが入ってる感じ。
擬似的とはいえPCなので、OSの種類から何から全て自分で設定しないといけない。逆に言えばほぼPCと同じなので、自由にカスタマイズができる。
似たやつのレンタルサーバーは1つのサーバーを複数人で使う。なので誰かがCPU使いまくると他の人に迷惑がかかる。
箱庭諸島は処理が重いからレンタルサーバーに置くなと名指しされてた1つだった
その代わり細かい設定など管理は全部お任せができるのでとても楽
AWS(Amazon Web Services)
せっかくなのでこちらも一緒に調べた。ソシャゲでよく利用されている。
VPSと併記してるのは私が似たようなものだと思っていたから。ちゃんと調べたらクラウドサービスの総称がAWSだった。
AWSにあるEC2(Amazon Elastic Compute Cloud)がVPSみたいな立ち位置。
VPSだとスペックが固定されているが、柔軟に性能を変えられること。これが強くて人気らしい。
ちなみに海外のサービスになのでドル円の影響をもろに受けてしまうのだけは気をつけたほうが良さそう
UUID
Universally Unique Identifier。あれDは？と思ったけどidentifierでID
よくあるIDは1,2,3...という簡単な数字。これを重複がないようにしたのがUUID。
123e4567-e89b-12d3-a456-426614174000みたいなやつ。被る気がしない。
上記のがv4で、v7になるとタイムスタンプを含んで作られるのでソートができるようになるそう。
さらにULIDというのがあり、01ARZ3NDEKTSV4RRFFQ69G5FAVと少し短くなる。タイムスタンプも入ってる。
UUIDとULIDは互換性もあるとのこと(v4→ULIDはタイムスタンプがないので時間はおかしくなるけど)
OAuth、JWT
OAuth
オーアースじゃなくてオーオース。
超ざっくりいうと、認可の仕組みを標準化したものらしい。「ユーザー→アプリA←→アプリB」のアプリ間の認証がそう。
一番わかりやすいのは𝕏のアプリ連携。「このアプリはあなたのアカウントを利用を許可しますか？」と出て、承諾すると連携取れるやつ。それでスパム化してる人がいるのもしばしば
JWT
JSON Web Tokenの略。「ユーザー←→アプリA」とログイン関連の仕組みの1つ。
よくあるのはユーザーIDとパスワードを入力してログイン。箱庭諸島もそう。だがそれだと通常はログインするために都度入力の必要がある。
そこでJWTを導入していると認証時にトークンが発行される。そのトークンを照らし合わせるだけで本人と証明されるので、都度入力しなくてもログインしている状態を維持することができるようになる。
もちろんそのトークンは有効期限内があるので、どこまでやるか等々はセキュリティや利便性との兼ね合い。
cookieにユーザーIDとパスワードを保持してログイン維持するよりかはいいかな…という印象
WSL2
windowsを使いながらLinuxをいじれるという説明だけだとよくわからないやつ。
2だから1もあるわけだが、おおよそ上位互換と見てよさそう。2020年のwindowsアップデートで入ったらしいので意外と最近。
完全なローカル環境という点を除いては仕組みはVPSに似ている。
サーバーはほぼLinuxなので、同じOSで開発することで環境の違いによる不具合が起きづらくなるので開発者がよく使うらしい。windowsアップデートは大体迷惑しか起こさないし。
どうりでLinux基準の記事が多いわけですよ。しかもwindowsよりmacOSの記事のほうが多い気もする。
アンインストールは相当厄介っぽい記事を見たので闇雲に入れるのは気をつけたほうが良さそう。
MIME
レアなエラーに遭遇してしまったため記載せざるをえなかった単語。
要はファイルのタイプ。これが設定されてないと知らない拡張子があった時ファイルが判別できない。
Reactの開発でjsonファイルを使用していたが、ある程度開発が落ち着いてビルドして試そうとしたらエラーで動かないことがあった。
その原因がMIME。そこで引っかかるか？と思われるだろうがうちはまだ化石サーバー。
おわかりいただけただろうか。
拡張子にjsonがないのである。ちなみに動いてはいたがjsもなかったので追加した(.jsと変な書き方になっているが修正済み)
ちゃんと調べるとAN HTTPDはWin Vista(2006年ﾘﾘｰｽ)をサポートしてない、かつjsonが出たのが2006年頃。そりゃ初期設定にあるわけないよねという感想になる。
こういうこともあったぞという完全に個人的な記録。むしろ設定すればWin11で動くだけえらい
Discussion