https://seesaawiki.jp/lifewithslackarmzaurus_15_0/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf%a3%b3 の続き。
練習場
https://oldcygwin.web.fc2.com/
ログインしてからftp
https://web.fc2.com/
エディタ(最初はemacsを使っていた。途中からVSCodeを使いだした。がまたEmacsに戻った)
https://vscode.dev/
React.jsの練習からVSCode(ネイティブの方)に戻った。(2023.09)
https://chat.openai.com/auth/login
ググっても分からない事はAIに聞く事にした。(2023.11)
practice300.html～practice399.html：
JavaScriptの練習(フレームワーク編)。フレームワークを練習する。
Angularの基本の基本だけ練習した https://seesaawiki.jp/lifewithslackarmzaurus_15_0/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf%a3%b3
が、どうもReact/Nextの方が使われているらしい。あとTypeScript(Angularではdefだが)。
FWと言うからには、書き方のルールが決まっているという事だろうから、設計パターンがあるのでは?
FWの設計パターンを少し調べた。https://seesaawiki.jp/lifewithslackzaurus_15_0/d/Web%a5%a2%a5%d7%a5%ea%a4%ce%c0%df%b7%d7%a5%d1%a5%bf%a1%bc%a5%f3%a4%f2%c4%b4%a4%d9%a4%bf
やっぱり、基本的なヤツ(MVC、backbone.js)から練習することにした。
/*************************************************************************************/
Backbone.jsで学ぶ MVCフレームワーク[実践]入門：参考書籍８
第１章 クライアントサイドフレームワークが必要な理由
jQueryが行うのはAjaxによるデータのリクエストやDOMの操作によるページの更新だけ。
第２章 モデル実装入門
モデルとは以前に説明したとおり、アプリケーションで扱うデータを構造化したものです。(本文から)
backbone.jsはjquery.js,underscore.jsと一緒に使う。
Backbone.Modelというコンポーネントでモデルを実装する。
http://backbonejs.org/ (google翻訳でちょっと読んでみる。MVの図がある)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules
最新Ver(jquery-3.6.0/underscore-esm-1.13.3/backbone-1.4.1)でやったら、エラーになって
Verが合わないと動かない事に気付かず、久しぶりにこの手のパターンでハマった。
backbone.js Uncaught TypeError: _ is undefined、でググってもヒットしないわけだ。
https://runebook.dev/ja/docs/backbone/
off バインド解除 以前にバインドされたコールバック関数をオブジェクトから削除します。
https://teratail.com/questions/232563
(久しぶりにやるとハマる。ブラウザのキャッシュ削除とかtype合わせ?)
イベントの監視でよくあるケースとして、Backbone.ViewがModelのchangeイベントを監視して表示の
変更を行うというもの。(本文から)
第３章 複数モデルの管理と永続化のしくみ
http://backbonejs.org/ (MVとCollectionの図がある)
underscore.jsについて、本来これらのメソッドは_.each(someArray,function(){…})のように利用
しますが、コレクションに対しては直接呼び出すことができます。(本文から)
https://www.buildinsider.net/web/bookjslib111/88 (backboneJS collection.get、でググった)
https://lealog.hateblo.jp/entry/2014/02/09/130032 (同上)
サーバからデータをfetchする件で、GETはshellでもphpでもやった事があったので、どうするか考え
たがイマイチこれだって感じがしないので、backbone url プロパティ fetch サーバ側動作、でググ
ってみたら、
https://magazine.rubyist.net/articles/0046/0046-RailsAndBackbonejs.html
(なるほどこういうのはRubyの方が情報があるのか?日本では?)
backbone.js php、でググるとPHPでも、
https://mawatari.jp/archives/tag/backbone-js https://shusatoo.net/programming/php/backbone-model-save-postdata-read-php/ https://medium.com/@scottdixon/backbone-js-with-php-mysql-362b07dad844
(よく見たら、参考URLでJS-FWへのサーバ側APIでググった内容 https://seesaawiki.jp/lifewithslackzaurus_15_0/d/HTML/CSS/GoLang%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf と同じだった。これでいこう)
CRUDはPHPとMySQL(MariaDB)で作ろう。
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/HTML/CSS/PHP%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf
DB作成する時にcode(primary,key,index)を付けなくてもDBは作成できる。付けないと気持ち悪い
ので付けたが、GETの時にfetchAllのせいかcodeまで持ってくるがまあいいか。
モデルのidについて参照：http://backbonejs.org/#Collection-get http://backbonejs.org/#Model-idAttribute
deleteできてるのにNGが返る件：https://stackoverflow.com/questions/7305079/backbone-model-destroy-invoking-error-callback-function-even-when-it-works-fin
第４章 ビュー、コントローラの実装
Backbone.Viewは、HTMLテンプレートと組み合わせてモデルが持つデータをブラウザ上に表示する、
そのデータの更新を受けて画面の表示を更新する、そして、DOM上のイベントを受けてモデルを更新
するといった役割を持ちます。(本文から)
MVCの定義と厳密に照らし合わせると、ユーザの操作を捕捉してモデルを更新するのはコントローラ
の役割です。したがって、名前こそBackbone.Viewですが、本来のMVCにおいてはコントローラに近い
存在となります。それなら本来のビューはBackbone.jsのどこにあるかというと、おそらくHTMLがそ
れに相当するのではないかと思います。(本文から)
とはいえ、本特集の主題はBackbone.jsなので、Backbone.Viewを指してビューという表現を使用し
ます。他の書籍や文章を読んで一般的な意味でのMVCという概念に触れる際、Backbone.jsが採用し
ている解釈との違いに戸惑わないために、こうしたことを知っておくこと自体は良いことだと思い
ます。(本文から)
(HTML/CSSはロクに練習してないからHTML/CSS関連が出てくると、とは、からググるという。。
\以前にも調べてたかHTMLテンプレート、そろそろ１回くらいやるか? bootstrap https://seesaawiki.jp/lifewithslackzaurus/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf 、JSlibはこっち https://seesaawiki.jp/lifewithslackzaurus_15_0/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf%a3%b2 で練習)
(今回は書籍通りに、_.templateを使って練習する。Handlebars.jsはそのうち気が向いたら)
$ iconv -f ISO_8859-1 -t UTF8 main.js > mainu.js ; mv mainu.js main.js
(emacsで最初からファイルを作るとISO_8859になってしまう。変換しても日本語は化けてしまった)
(メソッドの入れ子コールやメソッドチェーンて、可読性よりbyte数を減らすためにやってるな)
el(element)プロパティは、Backbone.Viewのインスタンスが管理するDOM要素の最上位である、ルー
ト要素となるものです。$elプロパティはそれをjQueryオブジェクト化したもので、elプロパティが
設定される際に一緒に保持されます。(本文から)
(FirefoxのWeb開発ツールのインスペクターで、自動的に追加された<div>要素が見れた)
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/class (HTMLタグ辞典になかったので、
html タグ グローバル class、でググった)
内部でjQueryの機能を使っているので、コールバックのしくみや対応するイベントの種類もjQuery
と同じです。(本文から)
AbcView.on(‘click’, function(){});は実践編でも同様なのが出てくるみたいだからいいか。
第５章 URLと処理を紐付けるルーティングの基本
ページを遷移させずに処理を切り替える方法 (本文から)
第６章 [実践編]モデルを定義し、メモの一覧を表示する
メモ帳アプリケーションの作成１ (本文から)
Bootstrapはこっち https://seesaawiki.jp/lifewithslackzaurus/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf で練習する。
何故か、class=”text-end” が効かない。他にもBootstrapのVerが古くて動かないが後回しに
する。古いVer https://getbootstrap.com/docs/3.4/getting-started/
で動かすことにしたが、text-rightでも効かない。https://natsukimemo.com/css-text-align
div style= text-align center、でググった：
https://www.tohoho-web.com/css/prop/text-align.htm
text-align: center で、テキストなどのインライン要素を中央寄せすることができますが、テーブルや div などのブロック要素を中央寄せすることはできません。
https://kouhekikyozou.com/css_text_align_center_error http://www.terasol.co.jp/web/4028
text-align td 効かない、でググった：
https://natsukimemo.com/css-text-align https://csshtml.work/table-align/#alignCSS
html5ではtableに限らずalign属性は廃止となっています。それでもalign属性使いたい方は下記を、
CSSを使いたい場合は「align属性の代替CSS」から読んでください。
(色々試したが、width:autoや100%が効かずレスポンシブWebデザインになってない)
width auto 効かない、でググった：
https://yoncoichi.com/html-nested/ https://wunderstand.net/791/
https://csshtml.work/width-bad/#width https://github.com/twbs/bootstrap/tags?after=v3.3.1
(どうやら、Backbone.Viewが生成してる２つ目の<tr>要素がautoになっていないようだ。がtrに
width:100%は効かない。親のtdにstyle=”width:100%”をやるとレスポンシブWebデザインになるが、
titleが縦書きになってしまう。メンドクサくなってきた。title枠=width:100px,ボタン*2枠=
width:820pxにした。navbar-innerはVer.3に無いのでVer.2でやったら%表示もよさげだがボタン
が違うがまあこれでいいか。と思ったが、titleの長さが異なるとバラバラ。やっぱpxにした。
というか、bootstrapのcontainerでpxを決めてるので、これを越えないようにすればいいだろ)
第７章 [実践編]メモの新規作成、削除、編集を行う
メモ帳アプリケーションの作成２ (本文から)
(詳細画面のテンプレートとhrefを変えただけではURLが変わるだけらしいが何故か、どれを押し
ても削除イベントが発生する。１つしか登録してないからか?。dummyイベントを登録すると解消
された)
第８章 [実践編]検索機能を追加する
メモ帳アプリケーションの作成３ (本文から)
bootstrapのrow/colが効いてない。 https://www.tohoho-web.com/bootstrap/grid.html
bootstrap-2.3.2にはcolが無かった。bootstrap-3.1.1にはありそうだがまあいいか。rowの
margin-left: -20px; はコメントアウトした。Firefoxでもメモリーのsnapshotで古いDOMが残
っているのが分かる。
/*************************************************************************************/
React.js&Next.js超入門：参考書籍２
先につまみ食いしてFirebaseを少し調べた。firebase とは、でググった：
https://www.yume-tec.co.jp/column/%E3%81%9D%E3%81%AE%E4%BB%96/3397
https://firebase.google.com/docs/database/rest/start?hl=ja
(以前調べた時、MS-TeamsのDBは日本リージョンがあるがGWorkspaceには無かったはず。海外サーバ。
海外の方が安全か?セキュリティ的には国内指向か?。サーバーレスねぇどうだろねぇ)
と思っていたら、
米グーグル、千葉にデータセンター開設へ－同社としては日本で初めて
https://www.bloomberg.co.jp/news/articles/2022-10-07/RJDCTCDWRGG201
おすすめのFirebase代替サービス7選 (ググった。2023.07)
https://kinsta.com/jp/blog/firebase-alternatives/
Firebaseには便利な機能が多数揃っているものの、オープンソースではありません。これは、アプリケーション開発の管理がほとんど行えないことを意味します。
(2023.09)
やっとReactを学ぶタイミングに来た。書籍のサンプルを動かすとブラウザモニタに、
Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools
とくる。書籍ではreact@17だが公式はreact@18になっていた。Safariだとnpmで入れるらしいが、
$ npm install -g react-devtools
(ページ翻訳もwappalyzerもreact-devtoolsも本家Firefoxバイナリでaddonできなかった。いろいろ
頑張ればできるかもしれないのだろうが、こりゃchromeに移るわけだ。当面Safariと同じ方法でやる)
npmしたくなった。久しぶりに過去 https://seesaawiki.jp/lifewithslackarmzaurus_15_0/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20local%20Web%a5%b5%a1%bc%a5%d0%20Node%2ejs
を参考に、make/installpkgするか。と思ったが、本家バイナリでいくか。以下で入れた。
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/node%2ejs
ReactもNext.jsでフルスタックになっていたのか。
https://react.dev/learn/start-a-new-react-project
$ npx create-react-app react-app
npm ERR! Error: EPERM: operation not permitted, symlink ‘../@babel/parser/bin/babel-parser.js’ -> ‘/myproj/oldcygwin/practice300/practice341/react-app/node_modules/.bin/parser’
(exFat上でやるとリンクが張れないらしい。仕方ないので以降はext3上でnpmでやった)
$ npm init react-app practice341
addonできないFirefoxでもComponentsがちゃんと見えるのは、プロジェクトファイル/react-devtools/npm
start、のパターン。
fontSize(font-size)とかbackgroundColor(background-color)は変数名にマイナスを付ける事は
できないからか?。(2023.10)
$ npm init react-app practice345
$ cd practice345
(ファイルを編集する)
$ npm start
(目的の動きをしているか確認する。またはデバッグする)
$ npm run build
(問題なければこれを実行し、デプロイ用ファイルを得る)
変数や予約変数?にstringを入れる場合、\”\”ではなく\’\’でも行ける。Unix的には\’\’の方が
分かりやすい。
Without a list of dependencies, this can lead to an infinite chain of updates. To fix this, pass [val] as a second argument to the useEffect Hook react-hooks/exhaustive-deps
https://qiita.com/masato5579/items/e6acb3da8fa0051851c3
(react@18だとnpm_startした時に警告が出る)
結局、FirefoxもChromeも使い、EmacsもVSCodeも使うという、なんだかなぁな状態。
Too many re-renders. React limits … infinite loop.
再利用しにくいのでアロー関数は通常関数に代えた。そしたら無限ループした。性能が悪いアロー
関数を使っている理由が分かった。
https://qiita.com/katsuomi/items/5a062dc1e4d0ab64ae21 https://zenn.dev/luvmini511/articles/90ea074c7fafb3
が、Memo.jsはアロー関数でも直らなかった。setMode(‘default’);をコメントアウトした。
let [mode, setMode] にして、mode = ‘default’; でもloopしなくなるが、constやめていいのかっ
てのがあるなあ。bugって上書きすると気付けない。不要そうだしコメントアウトでいいか。
https://qiita.com/SolKul/items/1cb6a4b9febde4a094e8
(再レンダリングするってのは、単に関数を最初から実行するという事だったのか。その中で自分
自身を再実行しないような仕掛けが入っている?。分かりやすいとも言える?。そりゃ１つの関数の
中でもう１個setModeがあったら交互に実行し合うか。あとオマケにもう１回って何だ?)
どっちでも同じなら通常関数で行く。()=>()は、()=>{return ();}でもいい。
\
前にBackbone.jsで作ったメモ帳アプリの方が速くないか？Linuxのローカル環境だと違いが分か
りにくい。Next.jsの練習が終わったら全く同じメモ帳アプリを両方で作ってみるか。bootstrap
をローカルに置いてもBackbone.jsが速く見えるのは、<AddForm />、<FindForm />、<DelForm />、
<Memo />を全部再レンダリングしてしまっているせいかもしれない。部分レンダリングはどう
やるんだ?。Next.jsの練習が終わったら調べるかな。(2023.11)
\
$ npm init next-app practice378
✔ Would you like to use TypeScript? … *No / Yes
✔ Would you like to use ESLint? … No / *Yes
https://qiita.com/mzmz__02/items/63f2624e00c02be2f942
✔ Would you like to use Tailwind CSS? … *No / Yes
https://cloudsmith.co.jp/blog/frontend/2023/02/2301873.html
https://udemy.benesse.co.jp/development/system/ta
✔ Would you like to use `src/` directory? … *No / Yes
✔ Would you like to use App Router? (recommended) … No / *Yes
✔ Would you like to customize the default import alias (@/*)? … *No / Yes
最初はあまり入れないで行くか。srcの下にはappしか無いようなのでsrcは外した。
Angularの時も?だったか500MBくらいDLするし、UQ-Mobileのターボ機能ONしないとDL失敗する
ことあるし、ファイルの流用は必須だな。
本の内容とDLしてきたファイル名が合っていない。どうせVerUpしたんだろう。
pages/index.js(12) -> app/page.js(13)、になってる。変えれるらしいが最初はこれで行くか。
$ npm run dev
\> practice378@0.1.0 dev
\> next dev
\ ▲ Next.js 14.0.0
\ – Local: http://localhost:3000
よく見たら14ってなってるな。
参考情報のデプロイを参考に、package.jsonに”export”: “next export”を追加してみたが、
$ npm next export
The “next export” command has been removed in favor of “output: export” in next.config.js. Learn more: https://nextjs.org/docs/advanced-features/static-html-export
上の通りにやってnpm_run_buildやったらpractice378/outが生成できた。publicの下にあったファイル
へのPATHはindex.htmlを編集した。
Warning: You’re using `next/head` inside the `app` directory, please migrate to the Metadata API. See https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-3-migrating-nexthead for more details.
https://eh-career.com/engineerhub/entry/2023/04/18/093000
<Head>の処理がうまくいかない。<link>はどこに置くんだ?。npm_install_next@13.4.1で入れ替え
てもうまくいかない。やっぱ慣れるまで一旦、これ
✔ Would you like to use App Router? (recommended) … *No / Yes
で行くか。取り直した。
API Routes cannot be used with “output: export”. See more info here: https://nextjs.org/docs/advanced-features/static-html-export
v14.0.0 next exportを支持して削除されました”output”: “export” <- やってもうまくいかず戻した
Do not add stylesheets using next/head (see <link rel=”stylesheet”> tag with href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css”). Use Document instead.
See more info here: https://nextjs.org/docs/messages/no-stylesheets-in-head-component https://nextjs.org/docs/messages/no-document-import-in-page
がこれをやると、Server Error
TypeError: Cannot destructure property ‘styles’ of ‘this.context’ as it is undefined.
となるのでやめた。next/headで行く。https://josipmisko-com.translate.goog/next-js/cannot-destructure-property-styles-of-this-context?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja&_x_tr_pto=sc&_x_tr_hist=true
✓ Generating static pages (3/3)
\> Image Optimization using the default loader is not compatible with export.
Possible solutions:
\- Use `next start` to run a server, which includes the Image Optimization API.
\- Configure `images.unoptimized = true` in `next.config.js` to disable the Image Optimization API.
Read more: https://nextjs.org/docs/messages/export-image-api
Finalizing page optimization. https://github.com/vercel/next.js/discussions/38487
これでnpm_run_buildやったらpractice379/outが生成できた。何とこの間に14.0.1に上がった。
動かなくなってきたらVerを固定しよう。
https://stackoverflow.com/questions/76185502/adding-a-link-tag-to-head-using-next-js13-3-with-appdir-enabled
https://stackoverflow.com/questions/74934561/how-to-add-a-css-file-to-a-pages-head-in-the-app-folder-of-next-js
上の通りやって、<Head>に<link>を置けた。がもうしばらくpagesで行くか?。がしかしこれやると
next/headを使わなくなる。学習初めの今の段階で中身を調べるのはメンドクサ。途中まで見たが。
$ find node_modules/ -name head.js
node_modules/next/head.js
node_modules/next/dist/shared/lib/head.js
node_modules/next/dist/esm/shared/lib/head.js
なので、ChildHeadにすることにした。(結果はパッと見では変わらないようだが。後から書籍でそう
いう使い方を書いていた。Header。今後はコンパイルWarn出た時は書籍を先読みするか)
https://zenn.dev/yukishinonome/articles/c9c8813f89eb80
next.js-13.4.1(npm_install_next@13.4.1でDLし入れ替え)でnpm_run_buildやると以下
\- info Linting and checking validity of types .- error ESLint must be installed in order to run during builds: npm install –save-dev eslint
が出るので入れようとしたが、こんな感じの多数のファイルをmoveしなければならなくなって、
https://stackoverflow.com/questions/71145130/npm-err-code-enotempty-npm-err-syscall-rename
npm_uninstallやnpm_removeも効かず、メンドクサくなって、
https://qiita.com/mamosan/items/6f1cf71ccd82216fe25b
https://www.freecodecamp.org/japanese/news/npm-uninstall-how-to-remove-a-package/
結局、next.js-Latestでnpm_run_buildすることにした。まだmigration不足らしいが。(2023.12)
Warning: You’re using `next/head` inside the `app` directory, please migrate to the Metadata API. See https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-3-migrating-nexthead for more details.
“next” should not be imported directly, imported in /myproj2/oldcygwin/practice300/practice380/.next/server/app/page.js
See more info here: https://nextjs.org/docs/messages/import-next
<link>は素直に<Link>コンポーネントに入れればよかったか(後から書籍でそういう使い方ではない事
が分かった)。あと、hrefにローカルadrを書いたら、
Warning: Do not include stylesheets manually. See: https://nextjs.org/docs/messages/no-css-tags
styled-jsxをやろうとしたら、
‘client-only’ cannot be imported from a Server Component module. It should only be used from a Client Component.
The error was caused by using ‘styled-jsx’ in ‘./app/page.js’. It only works in a Client Component but none of its parents are marked with “use client”, so they’re Server Components by default.
Next.js 13で開発方法はどう変わる？ – https://zenn.dev/andraindrops/articles/a9d2ae3285ceb6
“use client”;をつけたら、
You are attempting to export “metadata” from a component marked with “use client”, which is disallowed. Either remove the export, or the “use client” directive. Read more: https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive
\ ╭─[/myproj2/oldcygwin/practice300/practice382/app/page.js:9:1]
\ 9 │ let message = ‘React Next.js sample page.’;
\ 10 │
\ 11 │ export const metadata = {
\ · ────────
\ 12 │ title: {title},
exportを外したらコンパイルが通った。変数が２重定義?そこはCと同じか。
<Link>を試そうとしたら、
Unhandled Runtime Error
Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.
Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor
aを外した。あとやっぱdir作らないとムリか、mkdir other; mv -i other.js other/page.js
https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-3-migrating-nexthead
layout.jsでLayoot()をやろうとしたら、RootLayout()とかいうやつが居る。
https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required
最上位のレイアウトはルートレイアウトと呼ばれます。この必須のレイアウトは、アプリケーション内のすべてのページで共有されます。ルートレイアウトにはhtmlとbodyタグが含まれている必要があります。
任意のルートセグメントは、オプションで独自のLayoutを定義できます。これらのレイアウトは、そのセグメント内のすべてのページで共有されます。
next.js rootlayout、でググった：
https://reffect.co.jp/react/next-js-13-app
https://qiita.com/yukiji/items/84fd44057f455e7e179d
https://reffect.co.jp/react/next-js-13#Layout
ブラウザ上に表示されたaboutページの画面にはグラデーションが入っていますがpage.tsxファイルにはCSSによるスタイルを設定していません。ではなぜpage.tsxファイルにCSSが設定されていないにも関わらずCSSによるスタイルが設定されているのでしょう。その理由はappディレクトリ下のlayout.tsxファイルの設定が反映されているためです。
<MyImage>がalign:middleで中央に来なかったので、inspectorを見て、display inline、をググった：
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？
https://saruwakakun.com/html-css/basic/display
https://qiita.com/sawadays0118/items/4c329fd05cdff14ffebc
あと、buildすると、
\./app/image.js
21:7 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
21:7 Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text
info – Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
(今回はスキップした。その内やってみよう)
fetch()を試したらエラー。
next.js TypeError: Failed to parse URL from /data.json [cause]: TypeError [ERR_INVALID_URL]: Invalid URL、でググった：
https://stackoverflow.com/questions/76148113/nextjs-server-side-fetch-typeerror-failed-to-parse-url-from-htt%D1%80-localhost
https://qiita.com/Gma_Gama/items/86a68240b70448003fb1
unhandled errors Next.js out of date (learn more)Unhandled Runtime Error TypeError: Failed to fetch、でググった：
https://reffect.co.jp/react/next-js-13
絶対アドレスにしたが、Unhandled Runtime Error でメモリを消費するのを直す方法がググっても分からず、ちゃんと見ることにした。
const res = fetch(url);console.log(res);
next.js console.log promise Prototype PromiseState PromiseResult 見方、でググった：
https://zenn.dev/convers39/articles/bfad06b6697c08
(useState使ってるから、毎回更新して毎回Home()をコールして、どこかで処理タイミングがズレて
resolveが必要になるが、resolve()用意してないので unhandled errors?。ここでuseState使うのやめ。
がそうすると、データ到着前に空表示してしまう) next.js fetch() resolve()、でググった：
https://dev-harry-next.com/frontend/request-api-by-fetch-function-in-nextjs
(response.catch()を追加したところErrorとメモリ消費激増は無くなったが、Firefoxだとメモリ消費は
微増し続けて止まらない。処理速度差?)
npm_install_swrしようとしたら、EslintのVerが合わなくなったので、next.jsを取り直した。
$ npm init next-app practice387
$ npm install swr
あと書籍通りにやるとうまくいかないらしい。https://qiita.com/ryo666-6/items/730526f3e65e0a06ee4d
https://swr.vercel.app/ja/docs/getting-started https://zenn.dev/yodaka/articles/f5f93877b7a19f
今さら気付いたアロー関数使うのは文字数減らすため?。セミコロンも全部付けるとバカにならない。
data.data.map()ってダサいからobj.data.map()ってなるように書き換えたら動かなくなった。マジか。
VSCodeならもっと早く気付けたかもだが、やっぱ慣れてくるとemacsに戻りたくなる。
hello.jsなんでapp/page.jsの方には無いんだ?。
$ cp -i -a ../practice379/pages/api app/ (コピーしただけでは動かなかった)
next.js api、next.js app/page.js api、next.js No HTTP methods exported in ‘route.js’. Export a named export for each HTTP method.、でググった：
https://zenn.dev/kiriyama/articles/87b8911973444d
https://qiita.com/hukuryo/items/56a516d6252326c8e2cf
https://stackoverflow.com/questions/76214029/no-http-methods-exported-in-export-a-named-export-for-each-http-method
３番目のやつでGETだけのコードがシンプルでよいが、書籍のはaxiosを使った２番目のやつに近い?。
$ cp -i -a ../practice379/pages/api/hello.js app/api/hello/route.js
$ emacs app/api/hello/route.js
import { NextResponse } from “next/server”;
export async function GET(req) {
\ //NextResponse.status = 200
\ console.log(NextResponse)
\ return NextResponse.json({ name: ‘John Doe’ })
}
開発ツールのネットワークを見るとstatusが200になってるので、statusCode = 200 がdefで入ってる?。
https://developer.mozilla.org/ja/docs/Web/HTTP/Status/200?utm_source=mozilla&utm_medium=devtools-netmonitor&utm_campaign=default
変わり過ぎだが分かり易いか。GETやPOSTを受けれるって事はAPIもできるって事か。node.jsとlib使って。
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/DB%a4%d8%a4%ceAPI
サーバ側で動いてるからconsole.log()はブラウザのモニタでなく、Linuxのターミナルで見るしかないが、
[class NextResponse extends Response]
ブラウザほど情報が見れないので、またまたemacsからvscodeへ戻った。クラスの継承追うのemacsムリ
(find/grepやタグとかでできるかもだがメンドクサ。こういう時だけvscode使うか?う～む)。
interface Response extends Body {
https://developer.mozilla.org/ja/docs/Web/API/Response/status
デプロイしようとしたら動かない。https://seesaawiki.jp/lifewithslackzaurus_15_0/d/%a5%ed%a1%bc%a5%ab%a5%eb%a5%b5%a1%bc%a5%d0%20apache%a1%dcnode%2ejs
/*************************************************************************************/
Vue.js講座：参考書籍３
結局、AngularもReact.jsもVue.jsもみな同じ様な仮想DOMでデータバインディング。今はReact
が多く使われているらしいが今後もそうだろうか。とりあえず軽そうなVue.jsでjQueryとの違い
だけ体験して、JS-FWはしばし様子見とするか。(その後まだやってない)
Viteとは何なのか
https://qiita.com/inagacky/items/ad424821653067c99253
高速で動作するビルドツール、Vue.js の他、React Preact のビルドもサポートしているらしい。
/*************************************************************************************/
参考書籍９を参考に、PHPの処理をReact.js＋Node.jsへ変換してみる。(2024.09)
以下のPHPで書かれた小規模な、野菜屋のECサイトの商品一覧(shop_list.php)を、フロントエンドをReact.jsに、バックエンドをNode.jsに、変換せよ。(ChatGPT)
(コードのメモは省略)
Node.js バックエンド
まず、Node.jsでMySQLからデータを取得し、それをフロントエンドに提供するAPIを作成します。
1.依存パッケージのインストール:
$ npm init -y
$ npm install express mysql2 cors
2.バックエンドの作成 (server.js):
(コードのメモは省略)
これにより、Node.jsサーバーがMySQLデータベースから商品データを取得し、APIエンドポイント /api/products を通じてフロントエンドに提供します。MySQLサーバーが動作しており、mst_product テーブルにデータがあることを確認してください。
React.js フロントエンド
次に、React.jsを使ってフロントエンドを作成し、バックエンドのAPIから商品データを取得して表示します。
1.フロントエンドの作成: create-react-app を使用してReactプロジェクトを作成します。
$ npx create-react-app shop-frontend
$ cd shop-frontend
2.APIリクエスト用にAxiosをインストール:
$ npm install axios
3.フロントエンドのUI作成 (src/App.js):
(コードのメモは省略)
4.フロントエンドの実行:
$ npm start
このReactアプリケーションは、Node.jsバックエンドから商品データを取得し、一覧として表示します。また、セッションのチェックを行い、ユーザーがログインしているかどうかを確認して表示内容を切り替えます。セッション管理部分は、sessionStorageを使って仮実装していますが、実際の実装ではバックエンドでセッションを管理する必要があります。
最終ステップ
・フロントエンドとバックエンドで、ログイン機能やセッション管理をさらに改善する必要があります。
・Node.jsサーバーとReactアプリケーションの両方が正常に稼働していることを確認します。フロントエンドは http://localhost:3000 で動作し、バックエンドは http://localhost:3001 からデータを提供します。
このようにして、React.jsがUIを管理し、Node.jsがバックエンドでAPIおよびデータベースとの通信を行うシステムに変換しました。
(残りはヒマをみつけて時々実施する)
/*************************************************************************************/
参考書籍９を参考に、PHPの処理をNext.jsへ変換してみる。(2024.09)
上記の shop_list.php をNext.jsに変換せよ。(ChatGPT)
以下に、PHPで作成された shop_list.php を、Next.js に変換する手順を示します。
Next.js プロジェクトの設定
1.Next.js プロジェクトの作成: まず、新しいNext.jsアプリケーションを作成します。
$ npx create-next-app@latest shop-next
$ cd shop-next
2.必要な依存パッケージのインストール: Next.jsではサーバーサイドでデータを取得できるので、axiosは使用せずに直接Node.js内蔵の機能を使います。MySQLとの接続には mysql2 を使用します。
$ npm install mysql2
バックエンドとフロントエンドの統合
Next.jsはフルスタックフレームワークなので、APIルートを使用してサーバーサイドとフロントエンドの両方を同じプロジェクトで扱います。
1.APIエンドポイントを作成する (/pages/api/products.js):
Next.jsでは、/pages/api 以下に配置されたファイルはAPIルートとして機能します。まずは、MySQLから商品データを取得するAPIを作成します。
(コードのメモは省略)
このAPIは、/api/products というエンドポイントで動作し、MySQLデータベースから商品一覧を取得します。
2.フロントエンドのページ作成 (/pages/index.js):
次に、フロントエンドのページを作成します。このページでは、getServerSideProps を使用してサーバーサイドレンダリング時に商品データを取得し、ページに表示します。
(コードのメモは省略)
セッション管理
getServerSideProps でサーバーサイドレンダリング時に、セッションデータ（ユーザーのログイン情報）を確認することができます。ここでは、cookies を使ってセッションを簡単に扱っていますが、実際には認証やセッション管理は別途設定する必要があります。
動作確認
1.アプリケーションの起動:
Next.jsアプリケーションを起動します。
$ npm run dev
ローカルサーバーが http://localhost:3000 で起動します。ブラウザでアクセスすると、商品一覧ページが表示され、各商品の詳細ページへのリンクやカートへのリンクも動作します。
まとめ
・APIルート (/pages/api/products.js) を使用して、MySQLデータベースから商品データを取得するAPIを作成しました。
・サーバーサイドレンダリング を活用して、getServerSideProps でデータを取得し、Reactコンポーネントにデータを渡して表示します。
・セッションの簡易的な実装を通して、ユーザーのログイン状態をフロントエンドに反映させました。
これにより、Next.jsを使ったフルスタックアプリケーションに変換が完了しました。
(残りはヒマをみつけて時々実施する)
/*************************************************************************************/
参考書籍：
作って学ぶ Next.js/React Webサイト構築 2022.7 (持ってない)
https://ebisu.com/next-react-website/
React.js&Next.js超入門 2021.03
https://www.shuwasystem.co.jp/book/9784798063980.html
Software Design 2020年9月号 Vue.js講座
https://gihyo.jp/magazine/SD/archive/2020/202009
Angular超入門 2019.06
https://www.shuwasystem.co.jp/book/9784798057736.html
(設計パターンについては書いてないがMVVMであり、ngModelコマンドでビューとモデルをバインド)
Vue.js&Nuxt.js超入門 2019.02 (持ってない)
https://www.shuwasystem.co.jp/book/9784798056593.html
Angular webアプリ開発 スタートブック 2018.04
http://www.sotechsha.co.jp/pc/html/1197.htm
https://qiita.com/isso_w/items/d5ed993dbafe44870397
Angular アプリケーションプログラミング 2017.08
https://gihyo.jp/book/2017/978-4-7741-9130-0
JavaScriptエンジニア養成読本 2014.10
https://gihyo.jp/book/2014/978-4-7741-6797-8
\
気づけばプロ並みPHP 改訂版 2017.03
https://www.ric.co.jp/book/programming/detail/192
参考情報：
Backbone.js 需要、でググった：
https://zenn.dev/wing3298/articles/5b65db5cc89770
backbone.js elプロパティの設定、でググった：
https://qiita.com/ledsun/items/dde4f415205c888f54b4
イベントオブジェクトとは、でググった：
https://noumenon-th.net/programming/2017/06/24/eventobject/
イベントオブジェクトは、イベントハンドラーおよびイベントリスナーにおいて実行される関数の引数として受け取ることのできるオブジェクトです。 そのイベントオブジェクトから、発生したイベントに関わる様々な情報（プロパティ）を知ることができ、またそのイベントを制御するメソッドを活用することができます。
backbone.localstorage.js download、でググった：
https://books.google.co.jp/books?id=MNfSBAAAQBAJ&pg=PA169&lpg=PA169&dq=backbone.localstorage.js+download&source=bl&ots=PeWFIirhIs&sig=ACfU3U0vjzhGEHNfmI3Qk5atePiZN6pN7Q&hl=ja&sa=X&ved=2ahUKEwjSieOjpe34AhUMBN4KHThiD28Q6AF6BAgcEAM#v=onepage&q=backbone.localstorage.js%20download&f=false
https://qiita.com/kony/items/0952e7e0f15ec023101f
https://github.com/jeromegn/Backbone.localStorage
javascript メソッドチェーン、でググった：
https://qiita.com/sawapi/items/279531c88709700d0ff1
https://note.affi-sapo-sv.com/js-mnethod-chain.php
javascript window.App ={}、でググった：
https://qiita.com/roothybrid7/items/9a357428a00b1838647c
https://tektektech.com/what-is-window-object/
(つまりJSのグローバル領域はwindow以下、windowを省略できないと分かりにくい(使いにくい)わけだ。
<body>～</body>の中であっても<script>～</script>の中のvar abc;は、window.abc;)
\
Prototype JavaScript Frameworkを使ってみた感想
https://qiita.com/tomomoss/items/0112fc9e2b255da52692
Underscore.js + Backbone.js + jQuery = Prototype.js ですか?
https://www.quora.com/Is-Underscore-js-+-Backbone-js-+-jQuery-Prototype-js
\
angular react 共通点、他(忘れた)、でググった：
https://qiita.com/oioigohan/items/e7b98b25dee956f37b37
https://qiita.com/mqtsuo02/items/5701238e666e20416664
(結局、AngularもReactもVue.jsもみな仮想DOMでデータバインディング)
https://dividable.net/sidework/javascript-sidework
Vue.jsは「Angularの良い部分を取り出し、それ以外を削ぎ落としたようなJavaScriptフレームワークを開発したい」との考えから開発されたフレームワーク
\
react typescript、でググった：
https://future-architect.github.io/typescript-guide/react.html
https://typescript-jp.gitbook.io/deep-dive/tsx/react
React.createElement {}、でググった：(2023.09)
https://www.hypertextcandy.com/react-tutorial-02-jsx
<script src=”https://unpkg.com/@babel、でググった：(2023.10)
https://qiita.com/murasuke/items/8dbe350c0c1c1fe269bf
React.js 17 18 違い render()、でググった：(2023.10)
https://ics.media/entry/200310/
https://ja.legacy.reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
https://react.dev/blog/2022/03/08/react-18-upgrade-guide
react 関数コンポーネント クラスコンポーネント どちらが使われている？、でググった：(2023.10)
関数コンポーネントが推奨される理由は「短く書けるから」ではない
https://scrapbox.io/fsubal/%E9%96%A2%E6%95%B0%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%8C%E6%8E%A8%E5%A5%A8%E3%81%95%E3%82%8C%E3%82%8B%E7%90%86%E7%94%B1%E3%81%AF%E3%80%8C%E7%9F%AD%E3%81%8F%E6%9B%B8%E3%81%91%E3%82%8B%E3%81%8B%E3%82%89%E3%80%8D%E3%81%A7%E3%81%AF%E3%81%AA%E3%81%84
next.js 12 13 違い pages、でググった：
https://dev-k.hatenablog.com/entry/nextjs133-explained
https://dev-harry-next.com/frontend/nextjs-13-detail
https://udemy.benesse.co.jp/development/next-js13.html
next.js config デプロイ、でググった：
Next.jsで静的ビルドしたソースコードをサブディレクトリパスにデプロイする方法
https://zenn.dev/chot/articles/99ae6acca1429b
https://qiita.com/hiropy0123/items/02ab91f69dbfa4e2797f
https://qiita.com/pirokichidesu/items/7758f630e25688ad4dc2
https://nextjs-ja-translation-docs.vercel.app/docs/advanced-features/static-html-export
npm install バージョン指定 package.json、でググった：
https://qiita.com/chihiro/items/5826678bc9287fb57a28
https://zenn.dev/tm35/articles/778b9a260d43fc
next.js axiosとは、でググった：
https://apidog.com/jp/blog/axios-introduction/
AxiosはJavaScriptで使えるHTTPクライアントライブラリです。 PromiseベースのAPIを提供しているので非同期処理が扱いやすく、JSONデータの自動変換も行ってくれるためレスポンスデータの処理がしやすくなっています。
\
next.js 題材、でググった：
https://qiita.com/masakinihirota/items/99054b9f9cf428881617
https://zenn.dev/mossan_hoshi/articles/20220327_real_world_nextjs