はじめてのふれーむわーく(React)
色々あって(書いてたら自己紹介になったので割愛)某箱庭をフルスクラッチした記事を見た。
正直何を言ってるのかよくわからなかった。でも今後自分のサイトを大規模改修をする予定がある関係で避けては通れなさそうだったので、ちょっと1回ここでふれーむわーくとやらを調べてみるか。
jQueryってフレームワークの1つだったの!?ReactとかVueとかなんか色々ある!!
CSSにもフレームワークあるの!?BootStrapとかTileWindCSSとか初めて聞いた!!
非エンジニアなのでそんなレベル。
とはいえ今更1から効率よく作るならフレームワークの導入は不可欠なのは直感でわかる。
そして大変運がいいことに箱庭で知り合った人に最近フロントエンドの仕事をやってる人がいたので話を聞いた。
「Vueは抽象化しづらいから多少難しくてもReactの方が好き」とのことらしい。へぇじゃあReactで(素人並感
というわけで今回はReactを導入してみて動かすまでにやったことをまとめた日記です。
1.新時代の環境を手に入れる
今回参考にさせていただいた動画。これ大人ののびた君基準だろ
今はこれを入れた。既存の記事見てやろうとした時少しでもUI変わってると戸惑うのは私だけ？
ポチポチ進める。
よくわからんエラーが出た。Cドライブじゃないとこにインストールしたせいかもしれない。
のでGPT-4oに聞いてnpm install -g npm@latest実行したら動いた。いい時代だ。
動いたうおおおおおおお(素人並感
プログラミングにおける数少ないテンション上がるポイント(これ以外ほとんどない気がする
2 ゆきだるまつくーろーエディタを開けてー
ゆきだるまは全く関係ない。
動画の内容通りにやっていくだけなのでそこまで書くことはない。
・ブロック消したらすぐ反応した！Live Serverと同じことできんのか！
・ヒアドキュメント数ヶ月前に覚えてといてよかったぜ！
(IE考慮してた時代に勉強してからほぼ無勉強だったので、AIに提案されるまで知らなかった)
・classは未だによくわかってないので使ってないな…
くらいが動画見ながらの実況的感想。
今島名とかを更新した時、島名に専用のclass名をperl側で手動でつけてて、querySelectorAllで順繰り更新する手段を取ってる。
この辺をuseState,useEffectをちゃんと理解して書けるようになれば、簡潔で管理しやすくなるのかな？と思った。資金減らしたりログの資金増減も更新してるし。
特にこの収支ログはHTMLそのままなので、専用のidを検索→正規表現で数値抽出→計算して数値を更新→一度classを初期化→±調べて各種フォントのclassを再セットという超力技。動けばいいんだよ
useEffectがいまいちピンとこなかったので違う関連動画も1本見た。mutationobserverにちょっと似てるのかな？実際はレンダリングのタイミングだけど。
しかしいきなりReactに手を出してたら諦めてた気がする。素のjavascript書き続けてきたおかげでぎりぎり理解が追いついてる感じ。
途切れ途切れやりながらここまでおおよそ3,4時間くらい。まあぼんやりとは理解した。
3 じゃあ早速導入しよう
でもこれどうやって自サイトに導入すんのさ？さっぱりわからん。
とりあえず設置する物を作っておく。
サイト画像と文字配置して、文字送りして、文字が全部出て少ししてからフェードアウト。
これはうちのサイトの最初の画面(PC版)。ひとまずこれをReactを使って再現する。
できた。
コード的に言うとこの辺。前のやつはフェードアウトしてからフェードインしてるのでもうちょっとだけ減る。
5年前に書いたやつ。箱庭は脱jqueryしたけどこっち使ってるの忘れてた
↓
GPT-4oで99%生成してもらったReactでのコード。動けば(ry
デバッグしながら少しずつ慣れていくのが箱庭運営でやってきた勉強法なので今はAIに感謝することとする。
classを付与するタイミングとかもuseStateでフラグ制御できるのか。使いこなすには時間がかかりそう。
あとcharIndexを-1にしないとなぜかLかeの文字が抜ける。なんでかさっぱりわからない。
物は作ったのでこれをいつものサーバーに設置したい。
もちろん困った時のGPT-4o。聞いてその手順通りに試す。
動いた！！
と思いきや画像が出ない。どうもtestフォルダを作ってその下に入れたのが悪いっぽい。
調べてみたら画像ファイルはpublicの方にimageフォルダ作ってそっちからpathを通すといいらしい。何個か同じ内容記事あったからよくあるミス系かな。
(最初のimportでもいいらしいけどメリット・デメリットがそれぞれあるそう。多分こっちが楽)
Reactで書いたjsファイルがAN HTTPDとかいう化石ローカルサーバーで動いた～～～～～
やったぜ
まとめるとこう。
1.作業してたフォルダでnpm run buildする。待つ。一発目は長め。
2-1.buildフォルダが出来る。中のstaticの下にjs,cssフォルダがそれぞれ作られてる。
2-2.publicにimageフォルダ作ってたらそのままimageフォルダがある。importしてた場合はstaticの下にmediaフォルダが出来てる。
3.動かすだけならとりあえずstaticフォルダを丸ごとコピーして既存のhtmlファイルと同じ階層に置く。
4.既存のhtmlファイルからjsファイルとcssファイルのパスを設定する
※bodyに<div id="root"></div>がないと動かないっぽい
これでずっと使ってるサーバーに今までのファイルと同じように設置、実行することができた。
ビルドするの手間だけどこれはもうｼｶﾀﾅｲﾝﾀﾞﾛｳﾈ…
実際はpublicのindex.htmlの方をいじって、buildの中身を移動するのが普通なんだろう。
(ファイル名がハッシュになるの見づらいけど、publicのやつ置けば気にならないし、アプデ時のファイルキャッシュ周り考慮する必要ないのは良いかもしれない)
とまあ初めてReactを触って動かすところまで出来たのでひとまず満足。
現代の技術に追いつくのが大変だ()
Discussion