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 \u306e\u7d9a\u304d\u3002
\n\u7df4\u7fd2\u5834
\nhttps:\/\/oldcygwin.web.fc2.com\/
\n\u30ed\u30b0\u30a4\u30f3\u3057\u3066\u304b\u3089ftp
\nhttps:\/\/web.fc2.com\/
\n\u30a8\u30c7\u30a3\u30bf(\u6700\u521d\u306femacs\u3092\u4f7f\u3063\u3066\u3044\u305f\u3002\u9014\u4e2d\u304b\u3089VSCode\u3092\u4f7f\u3044\u3060\u3057\u305f\u3002\u304c\u307e\u305fEmacs\u306b\u623b\u3063\u305f)
\nhttps:\/\/vscode.dev\/
\nReact.js\u306e\u7df4\u7fd2\u304b\u3089VSCode(\u30cd\u30a4\u30c6\u30a3\u30d6\u306e\u65b9)\u306b\u623b\u3063\u305f\u3002(2023.09)
\nhttps:\/\/chat.openai.com\/auth\/login
\n\u30b0\u30b0\u3063\u3066\u3082\u5206\u304b\u3089\u306a\u3044\u4e8b\u306fAI\u306b\u805e\u304f\u4e8b\u306b\u3057\u305f\u3002(2023.11)<\/p>\n
practice300.html\uff5epractice399.html\uff1a
\nJavaScript\u306e\u7df4\u7fd2(\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u7de8)\u3002\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u7df4\u7fd2\u3059\u308b\u3002
\nAngular\u306e\u57fa\u672c\u306e\u57fa\u672c\u3060\u3051\u7df4\u7fd2\u3057\u305f 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
\n\u304c\u3001\u3069\u3046\u3082React\/Next\u306e\u65b9\u304c\u4f7f\u308f\u308c\u3066\u3044\u308b\u3089\u3057\u3044\u3002\u3042\u3068TypeScript(Angular\u3067\u306fdef\u3060\u304c)\u3002<\/p>\n
FW\u3068\u8a00\u3046\u304b\u3089\u306b\u306f\u3001\u66f8\u304d\u65b9\u306e\u30eb\u30fc\u30eb\u304c\u6c7a\u307e\u3063\u3066\u3044\u308b\u3068\u3044\u3046\u4e8b\u3060\u308d\u3046\u304b\u3089\u3001\u8a2d\u8a08\u30d1\u30bf\u30fc\u30f3\u304c\u3042\u308b\u306e\u3067\u306f?
\nFW\u306e\u8a2d\u8a08\u30d1\u30bf\u30fc\u30f3\u3092\u5c11\u3057\u8abf\u3079\u305f\u3002https:\/\/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
\n\u3084\u3063\u3071\u308a\u3001\u57fa\u672c\u7684\u306a\u30e4\u30c4(MVC\u3001backbone.js)\u304b\u3089\u7df4\u7fd2\u3059\u308b\u3053\u3068\u306b\u3057\u305f\u3002<\/p>\n
\/*************************************************************************************\/
\nBackbone.js\u3067\u5b66\u3076 MVC\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af[\u5b9f\u8df5]\u5165\u9580\uff1a\u53c2\u8003\u66f8\u7c4d\uff18
\n\u7b2c\uff11\u7ae0 \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b5\u30a4\u30c9\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u304c\u5fc5\u8981\u306a\u7406\u7531
\njQuery\u304c\u884c\u3046\u306e\u306fAjax\u306b\u3088\u308b\u30c7\u30fc\u30bf\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u3084DOM\u306e\u64cd\u4f5c\u306b\u3088\u308b\u30da\u30fc\u30b8\u306e\u66f4\u65b0\u3060\u3051\u3002
\n\u7b2c\uff12\u7ae0 \u30e2\u30c7\u30eb\u5b9f\u88c5\u5165\u9580
\n\u30e2\u30c7\u30eb\u3068\u306f\u4ee5\u524d\u306b\u8aac\u660e\u3057\u305f\u3068\u304a\u308a\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u6271\u3046\u30c7\u30fc\u30bf\u3092\u69cb\u9020\u5316\u3057\u305f\u3082\u306e\u3067\u3059\u3002(\u672c\u6587\u304b\u3089)
\nbackbone.js\u306fjquery.js,underscore.js\u3068\u4e00\u7dd2\u306b\u4f7f\u3046\u3002
\nBackbone.Model\u3068\u3044\u3046\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u30e2\u30c7\u30eb\u3092\u5b9f\u88c5\u3059\u308b\u3002
\nhttp:\/\/backbonejs.org\/ (google\u7ffb\u8a33\u3067\u3061\u3087\u3063\u3068\u8aad\u3093\u3067\u307f\u308b\u3002MV\u306e\u56f3\u304c\u3042\u308b)
\nhttps:\/\/developer.mozilla.org\/ja\/docs\/Web\/JavaScript\/Guide\/Modules
\n\u6700\u65b0Ver(jquery-3.6.0\/underscore-esm-1.13.3\/backbone-1.4.1)\u3067\u3084\u3063\u305f\u3089\u3001\u30a8\u30e9\u30fc\u306b\u306a\u3063\u3066
\nVer\u304c\u5408\u308f\u306a\u3044\u3068\u52d5\u304b\u306a\u3044\u4e8b\u306b\u6c17\u4ed8\u304b\u305a\u3001\u4e45\u3057\u3076\u308a\u306b\u3053\u306e\u624b\u306e\u30d1\u30bf\u30fc\u30f3\u3067\u30cf\u30de\u3063\u305f\u3002
\nbackbone.js Uncaught TypeError: _ is undefined\u3001\u3067\u30b0\u30b0\u3063\u3066\u3082\u30d2\u30c3\u30c8\u3057\u306a\u3044\u308f\u3051\u3060\u3002
\nhttps:\/\/runebook.dev\/ja\/docs\/backbone\/
\noff \u30d0\u30a4\u30f3\u30c9\u89e3\u9664 \u4ee5\u524d\u306b\u30d0\u30a4\u30f3\u30c9\u3055\u308c\u305f\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3092\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304b\u3089\u524a\u9664\u3057\u307e\u3059\u3002
\nhttps:\/\/teratail.com\/questions\/232563
\n(\u4e45\u3057\u3076\u308a\u306b\u3084\u308b\u3068\u30cf\u30de\u308b\u3002\u30d6\u30e9\u30a6\u30b6\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u524a\u9664\u3068\u304btype\u5408\u308f\u305b?)
\n\u30a4\u30d9\u30f3\u30c8\u306e\u76e3\u8996\u3067\u3088\u304f\u3042\u308b\u30b1\u30fc\u30b9\u3068\u3057\u3066\u3001Backbone.View\u304cModel\u306echange\u30a4\u30d9\u30f3\u30c8\u3092\u76e3\u8996\u3057\u3066\u8868\u793a\u306e
\n\u5909\u66f4\u3092\u884c\u3046\u3068\u3044\u3046\u3082\u306e\u3002(\u672c\u6587\u304b\u3089)
\n\u7b2c\uff13\u7ae0 \u8907\u6570\u30e2\u30c7\u30eb\u306e\u7ba1\u7406\u3068\u6c38\u7d9a\u5316\u306e\u3057\u304f\u307f
\nhttp:\/\/backbonejs.org\/ (MV\u3068Collection\u306e\u56f3\u304c\u3042\u308b)
\nunderscore.js\u306b\u3064\u3044\u3066\u3001\u672c\u6765\u3053\u308c\u3089\u306e\u30e1\u30bd\u30c3\u30c9\u306f_.each(someArray,function(){…})\u306e\u3088\u3046\u306b\u5229\u7528
\n\u3057\u307e\u3059\u304c\u3001\u30b3\u30ec\u30af\u30b7\u30e7\u30f3\u306b\u5bfe\u3057\u3066\u306f\u76f4\u63a5\u547c\u3073\u51fa\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002(\u672c\u6587\u304b\u3089)
\nhttps:\/\/www.buildinsider.net\/web\/bookjslib111\/88 (backboneJS collection.get\u3001\u3067\u30b0\u30b0\u3063\u305f)
\nhttps:\/\/lealog.hateblo.jp\/entry\/2014\/02\/09\/130032 (\u540c\u4e0a)
\n\u30b5\u30fc\u30d0\u304b\u3089\u30c7\u30fc\u30bf\u3092fetch\u3059\u308b\u4ef6\u3067\u3001GET\u306fshell\u3067\u3082php\u3067\u3082\u3084\u3063\u305f\u4e8b\u304c\u3042\u3063\u305f\u306e\u3067\u3001\u3069\u3046\u3059\u308b\u304b\u8003\u3048
\n\u305f\u304c\u30a4\u30de\u30a4\u30c1\u3053\u308c\u3060\u3063\u3066\u611f\u3058\u304c\u3057\u306a\u3044\u306e\u3067\u3001backbone url \u30d7\u30ed\u30d1\u30c6\u30a3 fetch \u30b5\u30fc\u30d0\u5074\u52d5\u4f5c\u3001\u3067\u30b0\u30b0
\n\u3063\u3066\u307f\u305f\u3089\u3001
\nhttps:\/\/magazine.rubyist.net\/articles\/0046\/0046-RailsAndBackbonejs.html
\n(\u306a\u308b\u307b\u3069\u3053\u3046\u3044\u3046\u306e\u306fRuby\u306e\u65b9\u304c\u60c5\u5831\u304c\u3042\u308b\u306e\u304b?\u65e5\u672c\u3067\u306f?)
\nbackbone.js php\u3001\u3067\u30b0\u30b0\u308b\u3068PHP\u3067\u3082\u3001
\nhttps:\/\/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
\n(\u3088\u304f\u898b\u305f\u3089\u3001\u53c2\u8003URL\u3067JS-FW\u3078\u306e\u30b5\u30fc\u30d0\u5074API\u3067\u30b0\u30b0\u3063\u305f\u5185\u5bb9 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 \u3068\u540c\u3058\u3060\u3063\u305f\u3002\u3053\u308c\u3067\u3044\u3053\u3046)
\nCRUD\u306fPHP\u3068MySQL(MariaDB)\u3067\u4f5c\u308d\u3046\u3002
\nhttps:\/\/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
\nDB\u4f5c\u6210\u3059\u308b\u6642\u306bcode(primary,key,index)\u3092\u4ed8\u3051\u306a\u304f\u3066\u3082DB\u306f\u4f5c\u6210\u3067\u304d\u308b\u3002\u4ed8\u3051\u306a\u3044\u3068\u6c17\u6301\u3061\u60aa\u3044
\n\u306e\u3067\u4ed8\u3051\u305f\u304c\u3001GET\u306e\u6642\u306bfetchAll\u306e\u305b\u3044\u304bcode\u307e\u3067\u6301\u3063\u3066\u304f\u308b\u304c\u307e\u3042\u3044\u3044\u304b\u3002
\n\u30e2\u30c7\u30eb\u306eid\u306b\u3064\u3044\u3066\u53c2\u7167\uff1ahttp:\/\/backbonejs.org\/#Collection-get http:\/\/backbonejs.org\/#Model-idAttribute
\ndelete\u3067\u304d\u3066\u308b\u306e\u306bNG\u304c\u8fd4\u308b\u4ef6\uff1ahttps:\/\/stackoverflow.com\/questions\/7305079\/backbone-model-destroy-invoking-error-callback-function-even-when-it-works-fin
\n\u7b2c\uff14\u7ae0 \u30d3\u30e5\u30fc\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u306e\u5b9f\u88c5
\nBackbone.View\u306f\u3001HTML\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3068\u7d44\u307f\u5408\u308f\u305b\u3066\u30e2\u30c7\u30eb\u304c\u6301\u3064\u30c7\u30fc\u30bf\u3092\u30d6\u30e9\u30a6\u30b6\u4e0a\u306b\u8868\u793a\u3059\u308b\u3001
\n\u305d\u306e\u30c7\u30fc\u30bf\u306e\u66f4\u65b0\u3092\u53d7\u3051\u3066\u753b\u9762\u306e\u8868\u793a\u3092\u66f4\u65b0\u3059\u308b\u3001\u305d\u3057\u3066\u3001DOM\u4e0a\u306e\u30a4\u30d9\u30f3\u30c8\u3092\u53d7\u3051\u3066\u30e2\u30c7\u30eb\u3092\u66f4\u65b0
\n\u3059\u308b\u3068\u3044\u3063\u305f\u5f79\u5272\u3092\u6301\u3061\u307e\u3059\u3002(\u672c\u6587\u304b\u3089)
\nMVC\u306e\u5b9a\u7fa9\u3068\u53b3\u5bc6\u306b\u7167\u3089\u3057\u5408\u308f\u305b\u308b\u3068\u3001\u30e6\u30fc\u30b6\u306e\u64cd\u4f5c\u3092\u6355\u6349\u3057\u3066\u30e2\u30c7\u30eb\u3092\u66f4\u65b0\u3059\u308b\u306e\u306f\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9
\n\u306e\u5f79\u5272\u3067\u3059\u3002\u3057\u305f\u304c\u3063\u3066\u3001\u540d\u524d\u3053\u305dBackbone.View\u3067\u3059\u304c\u3001\u672c\u6765\u306eMVC\u306b\u304a\u3044\u3066\u306f\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u306b\u8fd1\u3044
\n\u5b58\u5728\u3068\u306a\u308a\u307e\u3059\u3002\u305d\u308c\u306a\u3089\u672c\u6765\u306e\u30d3\u30e5\u30fc\u306fBackbone.js\u306e\u3069\u3053\u306b\u3042\u308b\u304b\u3068\u3044\u3046\u3068\u3001\u304a\u305d\u3089\u304fHTML\u304c\u305d
\n\u308c\u306b\u76f8\u5f53\u3059\u308b\u306e\u3067\u306f\u306a\u3044\u304b\u3068\u601d\u3044\u307e\u3059\u3002(\u672c\u6587\u304b\u3089)
\n\u3068\u306f\u3044\u3048\u3001\u672c\u7279\u96c6\u306e\u4e3b\u984c\u306fBackbone.js\u306a\u306e\u3067\u3001Backbone.View\u3092\u6307\u3057\u3066\u30d3\u30e5\u30fc\u3068\u3044\u3046\u8868\u73fe\u3092\u4f7f\u7528\u3057
\n\u307e\u3059\u3002\u4ed6\u306e\u66f8\u7c4d\u3084\u6587\u7ae0\u3092\u8aad\u3093\u3067\u4e00\u822c\u7684\u306a\u610f\u5473\u3067\u306eMVC\u3068\u3044\u3046\u6982\u5ff5\u306b\u89e6\u308c\u308b\u969b\u3001Backbone.js\u304c\u63a1\u7528\u3057
\n\u3066\u3044\u308b\u89e3\u91c8\u3068\u306e\u9055\u3044\u306b\u6238\u60d1\u308f\u306a\u3044\u305f\u3081\u306b\u3001\u3053\u3046\u3057\u305f\u3053\u3068\u3092\u77e5\u3063\u3066\u304a\u304f\u3053\u3068\u81ea\u4f53\u306f\u826f\u3044\u3053\u3068\u3060\u3068\u601d\u3044
\n\u307e\u3059\u3002(\u672c\u6587\u304b\u3089)
\n(HTML\/CSS\u306f\u30ed\u30af\u306b\u7df4\u7fd2\u3057\u3066\u306a\u3044\u304b\u3089HTML\/CSS\u95a2\u9023\u304c\u51fa\u3066\u304f\u308b\u3068\u3001\u3068\u306f\u3001\u304b\u3089\u30b0\u30b0\u308b\u3068\u3044\u3046\u3002\u3002
\n\\\u4ee5\u524d\u306b\u3082\u8abf\u3079\u3066\u305f\u304bHTML\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3001\u305d\u308d\u305d\u308d\uff11\u56de\u304f\u3089\u3044\u3084\u308b\u304b? 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 \u3001JSlib\u306f\u3053\u3063\u3061 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 \u3067\u7df4\u7fd2)
\n(\u4eca\u56de\u306f\u66f8\u7c4d\u901a\u308a\u306b\u3001_.template\u3092\u4f7f\u3063\u3066\u7df4\u7fd2\u3059\u308b\u3002Handlebars.js\u306f\u305d\u306e\u3046\u3061\u6c17\u304c\u5411\u3044\u305f\u3089)
\n$ iconv -f ISO_8859-1 -t UTF8 main.js > mainu.js ; mv mainu.js main.js
\n(emacs\u3067\u6700\u521d\u304b\u3089\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u308b\u3068ISO_8859\u306b\u306a\u3063\u3066\u3057\u307e\u3046\u3002\u5909\u63db\u3057\u3066\u3082\u65e5\u672c\u8a9e\u306f\u5316\u3051\u3066\u3057\u307e\u3063\u305f)
\n(\u30e1\u30bd\u30c3\u30c9\u306e\u5165\u308c\u5b50\u30b3\u30fc\u30eb\u3084\u30e1\u30bd\u30c3\u30c9\u30c1\u30a7\u30fc\u30f3\u3066\u3001\u53ef\u8aad\u6027\u3088\u308abyte\u6570\u3092\u6e1b\u3089\u3059\u305f\u3081\u306b\u3084\u3063\u3066\u308b\u306a)
\nel(element)\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001Backbone.View\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u304c\u7ba1\u7406\u3059\u308bDOM\u8981\u7d20\u306e\u6700\u4e0a\u4f4d\u3067\u3042\u308b\u3001\u30eb\u30fc
\n\u30c8\u8981\u7d20\u3068\u306a\u308b\u3082\u306e\u3067\u3059\u3002$el\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u305d\u308c\u3092jQuery\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u5316\u3057\u305f\u3082\u306e\u3067\u3001el\u30d7\u30ed\u30d1\u30c6\u30a3\u304c
\n\u8a2d\u5b9a\u3055\u308c\u308b\u969b\u306b\u4e00\u7dd2\u306b\u4fdd\u6301\u3055\u308c\u307e\u3059\u3002(\u672c\u6587\u304b\u3089)
\n(Firefox\u306eWeb\u958b\u767a\u30c4\u30fc\u30eb\u306e\u30a4\u30f3\u30b9\u30da\u30af\u30bf\u30fc\u3067\u3001\u81ea\u52d5\u7684\u306b\u8ffd\u52a0\u3055\u308c\u305f<div>\u8981\u7d20\u304c\u898b\u308c\u305f)
\nhttps:\/\/developer.mozilla.org\/ja\/docs\/Web\/HTML\/Global_attributes\/class (HTML\u30bf\u30b0\u8f9e\u5178\u306b\u306a\u304b\u3063\u305f\u306e\u3067\u3001
\nhtml \u30bf\u30b0 \u30b0\u30ed\u30fc\u30d0\u30eb class\u3001\u3067\u30b0\u30b0\u3063\u305f)
\n\u5185\u90e8\u3067jQuery\u306e\u6a5f\u80fd\u3092\u4f7f\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u306e\u3057\u304f\u307f\u3084\u5bfe\u5fdc\u3059\u308b\u30a4\u30d9\u30f3\u30c8\u306e\u7a2e\u985e\u3082jQuery
\n\u3068\u540c\u3058\u3067\u3059\u3002(\u672c\u6587\u304b\u3089)
\nAbcView.on(‘click’, function(){});\u306f\u5b9f\u8df5\u7de8\u3067\u3082\u540c\u69d8\u306a\u306e\u304c\u51fa\u3066\u304f\u308b\u307f\u305f\u3044\u3060\u304b\u3089\u3044\u3044\u304b\u3002
\n\u7b2c\uff15\u7ae0 URL\u3068\u51e6\u7406\u3092\u7d10\u4ed8\u3051\u308b\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u57fa\u672c
\n\u30da\u30fc\u30b8\u3092\u9077\u79fb\u3055\u305b\u305a\u306b\u51e6\u7406\u3092\u5207\u308a\u66ff\u3048\u308b\u65b9\u6cd5 (\u672c\u6587\u304b\u3089)
\n\u7b2c\uff16\u7ae0 [\u5b9f\u8df5\u7de8]\u30e2\u30c7\u30eb\u3092\u5b9a\u7fa9\u3057\u3001\u30e1\u30e2\u306e\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b
\n\u30e1\u30e2\u5e33\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4f5c\u6210\uff11 (\u672c\u6587\u304b\u3089)
\nBootstrap\u306f\u3053\u3063\u3061 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 \u3067\u7df4\u7fd2\u3059\u308b\u3002
\n\u4f55\u6545\u304b\u3001class=”text-end” \u304c\u52b9\u304b\u306a\u3044\u3002\u4ed6\u306b\u3082Bootstrap\u306eVer\u304c\u53e4\u304f\u3066\u52d5\u304b\u306a\u3044\u304c\u5f8c\u56de\u3057\u306b
\n\u3059\u308b\u3002\u53e4\u3044Ver https:\/\/getbootstrap.com\/docs\/3.4\/getting-started\/
\n\u3067\u52d5\u304b\u3059\u3053\u3068\u306b\u3057\u305f\u304c\u3001text-right\u3067\u3082\u52b9\u304b\u306a\u3044\u3002https:\/\/natsukimemo.com\/css-text-align
\ndiv style= text-align center\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/www.tohoho-web.com\/css\/prop\/text-align.htm
\ntext-align: center \u3067\u3001\u30c6\u30ad\u30b9\u30c8\u306a\u3069\u306e\u30a4\u30f3\u30e9\u30a4\u30f3\u8981\u7d20\u3092\u4e2d\u592e\u5bc4\u305b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u304c\u3001\u30c6\u30fc\u30d6\u30eb\u3084 div \u306a\u3069\u306e\u30d6\u30ed\u30c3\u30af\u8981\u7d20\u3092\u4e2d\u592e\u5bc4\u305b\u3059\u308b\u3053\u3068\u306f\u3067\u304d\u307e\u305b\u3093\u3002
\nhttps:\/\/kouhekikyozou.com\/css_text_align_center_error http:\/\/www.terasol.co.jp\/web\/4028
\ntext-align td \u52b9\u304b\u306a\u3044\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/natsukimemo.com\/css-text-align https:\/\/csshtml.work\/table-align\/#alignCSS
\nhtml5\u3067\u306ftable\u306b\u9650\u3089\u305aalign\u5c5e\u6027\u306f\u5ec3\u6b62\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u305d\u308c\u3067\u3082align\u5c5e\u6027\u4f7f\u3044\u305f\u3044\u65b9\u306f\u4e0b\u8a18\u3092\u3001
\nCSS\u3092\u4f7f\u3044\u305f\u3044\u5834\u5408\u306f\u300calign\u5c5e\u6027\u306e\u4ee3\u66ffCSS\u300d\u304b\u3089\u8aad\u3093\u3067\u304f\u3060\u3055\u3044\u3002
\n(\u8272\u3005\u8a66\u3057\u305f\u304c\u3001width:auto\u3084100%\u304c\u52b9\u304b\u305a\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6Web\u30c7\u30b6\u30a4\u30f3\u306b\u306a\u3063\u3066\u306a\u3044)
\nwidth auto \u52b9\u304b\u306a\u3044\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/yoncoichi.com\/html-nested\/ https:\/\/wunderstand.net\/791\/
\nhttps:\/\/csshtml.work\/width-bad\/#width https:\/\/github.com\/twbs\/bootstrap\/tags?after=v3.3.1
\n(\u3069\u3046\u3084\u3089\u3001Backbone.View\u304c\u751f\u6210\u3057\u3066\u308b\uff12\u3064\u76ee\u306e<tr>\u8981\u7d20\u304cauto\u306b\u306a\u3063\u3066\u3044\u306a\u3044\u3088\u3046\u3060\u3002\u304ctr\u306b
\nwidth:100%\u306f\u52b9\u304b\u306a\u3044\u3002\u89aa\u306etd\u306bstyle=”width:100%”\u3092\u3084\u308b\u3068\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6Web\u30c7\u30b6\u30a4\u30f3\u306b\u306a\u308b\u304c\u3001
\ntitle\u304c\u7e26\u66f8\u304d\u306b\u306a\u3063\u3066\u3057\u307e\u3046\u3002\u30e1\u30f3\u30c9\u30af\u30b5\u304f\u306a\u3063\u3066\u304d\u305f\u3002title\u67a0=width:100px,\u30dc\u30bf\u30f3*2\u67a0=
\nwidth:820px\u306b\u3057\u305f\u3002navbar-inner\u306fVer.3\u306b\u7121\u3044\u306e\u3067Ver.2\u3067\u3084\u3063\u305f\u3089%\u8868\u793a\u3082\u3088\u3055\u3052\u3060\u304c\u30dc\u30bf\u30f3
\n\u304c\u9055\u3046\u304c\u307e\u3042\u3053\u308c\u3067\u3044\u3044\u304b\u3002\u3068\u601d\u3063\u305f\u304c\u3001title\u306e\u9577\u3055\u304c\u7570\u306a\u308b\u3068\u30d0\u30e9\u30d0\u30e9\u3002\u3084\u3063\u3071px\u306b\u3057\u305f\u3002
\n\u3068\u3044\u3046\u304b\u3001bootstrap\u306econtainer\u3067px\u3092\u6c7a\u3081\u3066\u308b\u306e\u3067\u3001\u3053\u308c\u3092\u8d8a\u3048\u306a\u3044\u3088\u3046\u306b\u3059\u308c\u3070\u3044\u3044\u3060\u308d)
\n\u7b2c\uff17\u7ae0 [\u5b9f\u8df5\u7de8]\u30e1\u30e2\u306e\u65b0\u898f\u4f5c\u6210\u3001\u524a\u9664\u3001\u7de8\u96c6\u3092\u884c\u3046
\n\u30e1\u30e2\u5e33\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4f5c\u6210\uff12 (\u672c\u6587\u304b\u3089)
\n(\u8a73\u7d30\u753b\u9762\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3068href\u3092\u5909\u3048\u305f\u3060\u3051\u3067\u306fURL\u304c\u5909\u308f\u308b\u3060\u3051\u3089\u3057\u3044\u304c\u4f55\u6545\u304b\u3001\u3069\u308c\u3092\u62bc\u3057
\n\u3066\u3082\u524a\u9664\u30a4\u30d9\u30f3\u30c8\u304c\u767a\u751f\u3059\u308b\u3002\uff11\u3064\u3057\u304b\u767b\u9332\u3057\u3066\u306a\u3044\u304b\u3089\u304b?\u3002dummy\u30a4\u30d9\u30f3\u30c8\u3092\u767b\u9332\u3059\u308b\u3068\u89e3\u6d88
\n\u3055\u308c\u305f)
\n\u7b2c\uff18\u7ae0 [\u5b9f\u8df5\u7de8]\u691c\u7d22\u6a5f\u80fd\u3092\u8ffd\u52a0\u3059\u308b
\n\u30e1\u30e2\u5e33\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4f5c\u6210\uff13 (\u672c\u6587\u304b\u3089)
\nbootstrap\u306erow\/col\u304c\u52b9\u3044\u3066\u306a\u3044\u3002 https:\/\/www.tohoho-web.com\/bootstrap\/grid.html
\nbootstrap-2.3.2\u306b\u306fcol\u304c\u7121\u304b\u3063\u305f\u3002bootstrap-3.1.1\u306b\u306f\u3042\u308a\u305d\u3046\u3060\u304c\u307e\u3042\u3044\u3044\u304b\u3002row\u306e
\nmargin-left: -20px; \u306f\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8\u3057\u305f\u3002Firefox\u3067\u3082\u30e1\u30e2\u30ea\u30fc\u306esnapshot\u3067\u53e4\u3044DOM\u304c\u6b8b
\n\u3063\u3066\u3044\u308b\u306e\u304c\u5206\u304b\u308b\u3002<\/p>\n
\/*************************************************************************************\/ \/*************************************************************************************\/ \/*************************************************************************************\/ (\u6b8b\u308a\u306f\u30d2\u30de\u3092\u307f\u3064\u3051\u3066\u6642\u3005\u5b9f\u65bd\u3059\u308b)<\/p>\n \/*************************************************************************************\/ (\u6b8b\u308a\u306f\u30d2\u30de\u3092\u307f\u3064\u3051\u3066\u6642\u3005\u5b9f\u65bd\u3059\u308b)<\/p>\n \/*************************************************************************************\/<\/p>\n \u53c2\u8003\u66f8\u7c4d\uff1a \u53c2\u8003\u60c5\u5831\uff1a <\/p>\n","protected":false},"excerpt":{"rendered":" https:\/\/seesaawiki.jp\/lifewithslackarmzaurus_15_0\/d\/HTML\/CSS\/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-81","post","type-post","status-publish","format-standard","hentry","category-web-practice"],"_links":{"self":[{"href":"https:\/\/shirakawa.weblike.jp\/blog-page\/wp-json\/wp\/v2\/posts\/81","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shirakawa.weblike.jp\/blog-page\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shirakawa.weblike.jp\/blog-page\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shirakawa.weblike.jp\/blog-page\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/shirakawa.weblike.jp\/blog-page\/wp-json\/wp\/v2\/comments?post=81"}],"version-history":[{"count":7,"href":"https:\/\/shirakawa.weblike.jp\/blog-page\/wp-json\/wp\/v2\/posts\/81\/revisions"}],"predecessor-version":[{"id":428,"href":"https:\/\/shirakawa.weblike.jp\/blog-page\/wp-json\/wp\/v2\/posts\/81\/revisions\/428"}],"wp:attachment":[{"href":"https:\/\/shirakawa.weblike.jp\/blog-page\/wp-json\/wp\/v2\/media?parent=81"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shirakawa.weblike.jp\/blog-page\/wp-json\/wp\/v2\/categories?post=81"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shirakawa.weblike.jp\/blog-page\/wp-json\/wp\/v2\/tags?post=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nReact.js&Next.js\u8d85\u5165\u9580\uff1a\u53c2\u8003\u66f8\u7c4d\uff12
\n\u5148\u306b\u3064\u307e\u307f\u98df\u3044\u3057\u3066Firebase\u3092\u5c11\u3057\u8abf\u3079\u305f\u3002firebase \u3068\u306f\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/www.yume-tec.co.jp\/column\/%E3%81%9D%E3%81%AE%E4%BB%96\/3397
\nhttps:\/\/firebase.google.com\/docs\/database\/rest\/start?hl=ja
\n(\u4ee5\u524d\u8abf\u3079\u305f\u6642\u3001MS-Teams\u306eDB\u306f\u65e5\u672c\u30ea\u30fc\u30b8\u30e7\u30f3\u304c\u3042\u308b\u304cGWorkspace\u306b\u306f\u7121\u304b\u3063\u305f\u306f\u305a\u3002\u6d77\u5916\u30b5\u30fc\u30d0\u3002
\n\u6d77\u5916\u306e\u65b9\u304c\u5b89\u5168\u304b?\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u7684\u306b\u306f\u56fd\u5185\u6307\u5411\u304b?\u3002\u30b5\u30fc\u30d0\u30fc\u30ec\u30b9\u306d\u3047\u3069\u3046\u3060\u308d\u306d\u3047)
\n\u3068\u601d\u3063\u3066\u3044\u305f\u3089\u3001
\n\u7c73\u30b0\u30fc\u30b0\u30eb\u3001\u5343\u8449\u306b\u30c7\u30fc\u30bf\u30bb\u30f3\u30bf\u30fc\u958b\u8a2d\u3078\uff0d\u540c\u793e\u3068\u3057\u3066\u306f\u65e5\u672c\u3067\u521d\u3081\u3066
\nhttps:\/\/www.bloomberg.co.jp\/news\/articles\/2022-10-07\/RJDCTCDWRGG201
\n\u304a\u3059\u3059\u3081\u306eFirebase\u4ee3\u66ff\u30b5\u30fc\u30d3\u30b97\u9078 (\u30b0\u30b0\u3063\u305f\u30022023.07)
\nhttps:\/\/kinsta.com\/jp\/blog\/firebase-alternatives\/<\/a>
\nFirebase\u306b\u306f\u4fbf\u5229\u306a\u6a5f\u80fd\u304c\u591a\u6570\u63c3\u3063\u3066\u3044\u308b\u3082\u306e\u306e\u3001\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u3053\u308c\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u306e\u7ba1\u7406\u304c\u307b\u3068\u3093\u3069\u884c\u3048\u306a\u3044\u3053\u3068\u3092\u610f\u5473\u3057\u307e\u3059\u3002
\n(2023.09)
\n\u3084\u3063\u3068React\u3092\u5b66\u3076\u30bf\u30a4\u30df\u30f3\u30b0\u306b\u6765\u305f\u3002\u66f8\u7c4d\u306e\u30b5\u30f3\u30d7\u30eb\u3092\u52d5\u304b\u3059\u3068\u30d6\u30e9\u30a6\u30b6\u30e2\u30cb\u30bf\u306b\u3001
\nDownload the React DevTools for a better development experience: https:\/\/reactjs.org\/link\/react-devtools
\n\u3068\u304f\u308b\u3002\u66f8\u7c4d\u3067\u306freact@17\u3060\u304c\u516c\u5f0f\u306freact@18\u306b\u306a\u3063\u3066\u3044\u305f\u3002Safari\u3060\u3068npm\u3067\u5165\u308c\u308b\u3089\u3057\u3044\u304c\u3001
\n$ npm install -g react-devtools
\n(\u30da\u30fc\u30b8\u7ffb\u8a33\u3082wappalyzer\u3082react-devtools\u3082\u672c\u5bb6Firefox\u30d0\u30a4\u30ca\u30ea\u3067addon\u3067\u304d\u306a\u304b\u3063\u305f\u3002\u3044\u308d\u3044\u308d
\n\u9811\u5f35\u308c\u3070\u3067\u304d\u308b\u304b\u3082\u3057\u308c\u306a\u3044\u306e\u3060\u308d\u3046\u304c\u3001\u3053\u308a\u3083chrome\u306b\u79fb\u308b\u308f\u3051\u3060\u3002\u5f53\u9762Safari\u3068\u540c\u3058\u65b9\u6cd5\u3067\u3084\u308b)
\nnpm\u3057\u305f\u304f\u306a\u3063\u305f\u3002\u4e45\u3057\u3076\u308a\u306b\u904e\u53bb\u3000https:\/\/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
\n\u3092\u53c2\u8003\u306b\u3001make\/installpkg\u3059\u308b\u304b\u3002\u3068\u601d\u3063\u305f\u304c\u3001\u672c\u5bb6\u30d0\u30a4\u30ca\u30ea\u3067\u3044\u304f\u304b\u3002\u4ee5\u4e0b\u3067\u5165\u308c\u305f\u3002
\nhttps:\/\/seesaawiki.jp\/lifewithslackzaurus_15_0\/d\/node%2ejs
\nReact\u3082Next.js\u3067\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u306b\u306a\u3063\u3066\u3044\u305f\u306e\u304b\u3002
\nhttps:\/\/react.dev\/learn\/start-a-new-react-project
\n$ npx create-react-app react-app
\nnpm ERR! Error: EPERM: operation not permitted, symlink ‘..\/@babel\/parser\/bin\/babel-parser.js’ -> ‘\/myproj\/oldcygwin\/practice300\/practice341\/react-app\/node_modules\/.bin\/parser’
\n(exFat\u4e0a\u3067\u3084\u308b\u3068\u30ea\u30f3\u30af\u304c\u5f35\u308c\u306a\u3044\u3089\u3057\u3044\u3002\u4ed5\u65b9\u306a\u3044\u306e\u3067\u4ee5\u964d\u306fext3\u4e0a\u3067npm\u3067\u3084\u3063\u305f)
\n$ npm init react-app practice341
\naddon\u3067\u304d\u306a\u3044Firefox\u3067\u3082Components\u304c\u3061\u3083\u3093\u3068\u898b\u3048\u308b\u306e\u306f\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30d5\u30a1\u30a4\u30eb\/react-devtools\/npm
\nstart\u3001\u306e\u30d1\u30bf\u30fc\u30f3\u3002
\nfontSize(font-size)\u3068\u304bbackgroundColor(background-color)\u306f\u5909\u6570\u540d\u306b\u30de\u30a4\u30ca\u30b9\u3092\u4ed8\u3051\u308b\u4e8b\u306f
\n\u3067\u304d\u306a\u3044\u304b\u3089\u304b?\u3002(2023.10)
\n$ npm init react-app practice345
\n$ cd practice345
\n(\u30d5\u30a1\u30a4\u30eb\u3092\u7de8\u96c6\u3059\u308b)
\n$ npm start
\n(\u76ee\u7684\u306e\u52d5\u304d\u3092\u3057\u3066\u3044\u308b\u304b\u78ba\u8a8d\u3059\u308b\u3002\u307e\u305f\u306f\u30c7\u30d0\u30c3\u30b0\u3059\u308b)
\n$ npm run build
\n(\u554f\u984c\u306a\u3051\u308c\u3070\u3053\u308c\u3092\u5b9f\u884c\u3057\u3001\u30c7\u30d7\u30ed\u30a4\u7528\u30d5\u30a1\u30a4\u30eb\u3092\u5f97\u308b)
\n\u5909\u6570\u3084\u4e88\u7d04\u5909\u6570?\u306bstring\u3092\u5165\u308c\u308b\u5834\u5408\u3001\\”\\”\u3067\u306f\u306a\u304f\\’\\’\u3067\u3082\u884c\u3051\u308b\u3002Unix\u7684\u306b\u306f\\’\\’\u306e\u65b9\u304c
\n\u5206\u304b\u308a\u3084\u3059\u3044\u3002
\nWithout 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
\nhttps:\/\/qiita.com\/masato5579\/items\/e6acb3da8fa0051851c3
\n(react@18\u3060\u3068npm_start\u3057\u305f\u6642\u306b\u8b66\u544a\u304c\u51fa\u308b)
\n\u7d50\u5c40\u3001Firefox\u3082Chrome\u3082\u4f7f\u3044\u3001Emacs\u3082VSCode\u3082\u4f7f\u3046\u3068\u3044\u3046\u3001\u306a\u3093\u3060\u304b\u306a\u3041\u306a\u72b6\u614b\u3002
\nToo many re-renders. React limits … infinite loop.
\n\u518d\u5229\u7528\u3057\u306b\u304f\u3044\u306e\u3067\u30a2\u30ed\u30fc\u95a2\u6570\u306f\u901a\u5e38\u95a2\u6570\u306b\u4ee3\u3048\u305f\u3002\u305d\u3057\u305f\u3089\u7121\u9650\u30eb\u30fc\u30d7\u3057\u305f\u3002\u6027\u80fd\u304c\u60aa\u3044\u30a2\u30ed\u30fc
\n\u95a2\u6570\u3092\u4f7f\u3063\u3066\u3044\u308b\u7406\u7531\u304c\u5206\u304b\u3063\u305f\u3002
\nhttps:\/\/qiita.com\/katsuomi\/items\/5a062dc1e4d0ab64ae21 https:\/\/zenn.dev\/luvmini511\/articles\/90ea074c7fafb3
\n\u304c\u3001Memo.js\u306f\u30a2\u30ed\u30fc\u95a2\u6570\u3067\u3082\u76f4\u3089\u306a\u304b\u3063\u305f\u3002setMode(‘default’);\u3092\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8\u3057\u305f\u3002
\nlet [mode, setMode] \u306b\u3057\u3066\u3001mode = ‘default’; \u3067\u3082loop\u3057\u306a\u304f\u306a\u308b\u304c\u3001const\u3084\u3081\u3066\u3044\u3044\u306e\u304b\u3063
\n\u3066\u306e\u304c\u3042\u308b\u306a\u3042\u3002bug\u3063\u3066\u4e0a\u66f8\u304d\u3059\u308b\u3068\u6c17\u4ed8\u3051\u306a\u3044\u3002\u4e0d\u8981\u305d\u3046\u3060\u3057\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8\u3067\u3044\u3044\u304b\u3002
\nhttps:\/\/qiita.com\/SolKul\/items\/1cb6a4b9febde4a094e8
\n(\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u3063\u3066\u306e\u306f\u3001\u5358\u306b\u95a2\u6570\u3092\u6700\u521d\u304b\u3089\u5b9f\u884c\u3059\u308b\u3068\u3044\u3046\u4e8b\u3060\u3063\u305f\u306e\u304b\u3002\u305d\u306e\u4e2d\u3067\u81ea\u5206
\n\u81ea\u8eab\u3092\u518d\u5b9f\u884c\u3057\u306a\u3044\u3088\u3046\u306a\u4ed5\u639b\u3051\u304c\u5165\u3063\u3066\u3044\u308b?\u3002\u5206\u304b\u308a\u3084\u3059\u3044\u3068\u3082\u8a00\u3048\u308b?\u3002\u305d\u308a\u3083\uff11\u3064\u306e\u95a2\u6570\u306e
\n\u4e2d\u3067\u3082\u3046\uff11\u500bsetMode\u304c\u3042\u3063\u305f\u3089\u4ea4\u4e92\u306b\u5b9f\u884c\u3057\u5408\u3046\u304b\u3002\u3042\u3068\u30aa\u30de\u30b1\u306b\u3082\u3046\uff11\u56de\u3063\u3066\u4f55\u3060?)
\n\u3069\u3063\u3061\u3067\u3082\u540c\u3058\u306a\u3089\u901a\u5e38\u95a2\u6570\u3067\u884c\u304f\u3002()=>()\u306f\u3001()=>{return ();}\u3067\u3082\u3044\u3044\u3002
\n\\
\n\u524d\u306bBackbone.js\u3067\u4f5c\u3063\u305f\u30e1\u30e2\u5e33\u30a2\u30d7\u30ea\u306e\u65b9\u304c\u901f\u304f\u306a\u3044\u304b\uff1fLinux\u306e\u30ed\u30fc\u30ab\u30eb\u74b0\u5883\u3060\u3068\u9055\u3044\u304c\u5206\u304b
\n\u308a\u306b\u304f\u3044\u3002Next.js\u306e\u7df4\u7fd2\u304c\u7d42\u308f\u3063\u305f\u3089\u5168\u304f\u540c\u3058\u30e1\u30e2\u5e33\u30a2\u30d7\u30ea\u3092\u4e21\u65b9\u3067\u4f5c\u3063\u3066\u307f\u308b\u304b\u3002bootstrap
\n\u3092\u30ed\u30fc\u30ab\u30eb\u306b\u7f6e\u3044\u3066\u3082Backbone.js\u304c\u901f\u304f\u898b\u3048\u308b\u306e\u306f\u3001<AddForm \/>\u3001<FindForm \/>\u3001<DelForm \/>\u3001
\n<Memo \/>\u3092\u5168\u90e8\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u3066\u3057\u307e\u3063\u3066\u3044\u308b\u305b\u3044\u304b\u3082\u3057\u308c\u306a\u3044\u3002\u90e8\u5206\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u306f\u3069\u3046
\n\u3084\u308b\u3093\u3060?\u3002Next.js\u306e\u7df4\u7fd2\u304c\u7d42\u308f\u3063\u305f\u3089\u8abf\u3079\u308b\u304b\u306a\u3002(2023.11)
\n\\
\n$ npm init next-app practice378
\n✔ Would you like to use TypeScript? \u2026 *No \/ Yes
\n✔ Would you like to use ESLint? \u2026 No \/ *Yes
\nhttps:\/\/qiita.com\/mzmz__02\/items\/63f2624e00c02be2f942
\n✔ Would you like to use Tailwind CSS? \u2026 *No \/ Yes
\nhttps:\/\/cloudsmith.co.jp\/blog\/frontend\/2023\/02\/2301873.html
\nhttps:\/\/udemy.benesse.co.jp\/development\/system\/ta<\/a>
\n✔ Would you like to use `src\/` directory? \u2026 *No \/ Yes
\n✔ Would you like to use App Router? (recommended) \u2026 No \/ *Yes
\n✔ Would you like to customize the default import alias (@\/*)? \u2026 *No \/ Yes
\n\u6700\u521d\u306f\u3042\u307e\u308a\u5165\u308c\u306a\u3044\u3067\u884c\u304f\u304b\u3002src\u306e\u4e0b\u306b\u306fapp\u3057\u304b\u7121\u3044\u3088\u3046\u306a\u306e\u3067src\u306f\u5916\u3057\u305f\u3002
\nAngular\u306e\u6642\u3082?\u3060\u3063\u305f\u304b500MB\u304f\u3089\u3044DL\u3059\u308b\u3057\u3001UQ-Mobile\u306e\u30bf\u30fc\u30dc\u6a5f\u80fdON\u3057\u306a\u3044\u3068DL\u5931\u6557\u3059\u308b
\n\u3053\u3068\u3042\u308b\u3057\u3001\u30d5\u30a1\u30a4\u30eb\u306e\u6d41\u7528\u306f\u5fc5\u9808\u3060\u306a\u3002
\n\u672c\u306e\u5185\u5bb9\u3068DL\u3057\u3066\u304d\u305f\u30d5\u30a1\u30a4\u30eb\u540d\u304c\u5408\u3063\u3066\u3044\u306a\u3044\u3002\u3069\u3046\u305bVerUp\u3057\u305f\u3093\u3060\u308d\u3046\u3002
\npages\/index.js(12) -> app\/page.js(13)\u3001\u306b\u306a\u3063\u3066\u308b\u3002\u5909\u3048\u308c\u308b\u3089\u3057\u3044\u304c\u6700\u521d\u306f\u3053\u308c\u3067\u884c\u304f\u304b\u3002
\n$ npm run dev
\n\\> practice378@0.1.0 dev
\n\\> next dev
\n\\ \u25b2 Next.js 14.0.0
\n\\ – Local: http:\/\/localhost:3000
\n\u3088\u304f\u898b\u305f\u308914\u3063\u3066\u306a\u3063\u3066\u308b\u306a\u3002
\n\u53c2\u8003\u60c5\u5831\u306e\u30c7\u30d7\u30ed\u30a4\u3092\u53c2\u8003\u306b\u3001package.json\u306b”export”: “next export”\u3092\u8ffd\u52a0\u3057\u3066\u307f\u305f\u304c\u3001
\n$ npm next export
\nThe “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
\n\u4e0a\u306e\u901a\u308a\u306b\u3084\u3063\u3066npm_run_build\u3084\u3063\u305f\u3089practice378\/out\u304c\u751f\u6210\u3067\u304d\u305f\u3002public\u306e\u4e0b\u306b\u3042\u3063\u305f\u30d5\u30a1\u30a4\u30eb
\n\u3078\u306ePATH\u306findex.html\u3092\u7de8\u96c6\u3057\u305f\u3002
\nWarning: 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.
\nhttps:\/\/eh-career.com\/engineerhub\/entry\/2023\/04\/18\/093000
\n<Head>\u306e\u51e6\u7406\u304c\u3046\u307e\u304f\u3044\u304b\u306a\u3044\u3002<link>\u306f\u3069\u3053\u306b\u7f6e\u304f\u3093\u3060?\u3002npm_install_next@13.4.1\u3067\u5165\u308c\u66ff\u3048
\n\u3066\u3082\u3046\u307e\u304f\u3044\u304b\u306a\u3044\u3002\u3084\u3063\u3071\u6163\u308c\u308b\u307e\u3067\u4e00\u65e6\u3001\u3053\u308c
\n✔ Would you like to use App Router? (recommended) \u2026 *No \/ Yes
\n\u3067\u884c\u304f\u304b\u3002\u53d6\u308a\u76f4\u3057\u305f\u3002
\nAPI Routes cannot be used with “output: export”. See more info here: https:\/\/nextjs.org\/docs\/advanced-features\/static-html-export
\nv14.0.0 next export\u3092\u652f\u6301\u3057\u3066\u524a\u9664\u3055\u308c\u307e\u3057\u305f”output”: “export” <- \u3084\u3063\u3066\u3082\u3046\u307e\u304f\u3044\u304b\u305a\u623b\u3057\u305f
\nDo 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.
\nSee more info here: https:\/\/nextjs.org\/docs\/messages\/no-stylesheets-in-head-component https:\/\/nextjs.org\/docs\/messages\/no-document-import-in-page
\n\u304c\u3053\u308c\u3092\u3084\u308b\u3068\u3001Server Error
\nTypeError: Cannot destructure property ‘styles’ of ‘this.context’ as it is undefined.
\n\u3068\u306a\u308b\u306e\u3067\u3084\u3081\u305f\u3002next\/head\u3067\u884c\u304f\u3002https:\/\/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
\n✓ Generating static pages (3\/3)
\n\\> Image Optimization using the default loader is not compatible with export.
\nPossible solutions:
\n\\- Use `next start` to run a server, which includes the Image Optimization API.
\n\\- Configure `images.unoptimized = true` in `next.config.js` to disable the Image Optimization API.
\nRead more: https:\/\/nextjs.org\/docs\/messages\/export-image-api
\nFinalizing page optimization. https:\/\/github.com\/vercel\/next.js\/discussions\/38487
\n\u3053\u308c\u3067npm_run_build\u3084\u3063\u305f\u3089practice379\/out\u304c\u751f\u6210\u3067\u304d\u305f\u3002\u4f55\u3068\u3053\u306e\u9593\u306b14.0.1\u306b\u4e0a\u304c\u3063\u305f\u3002
\n\u52d5\u304b\u306a\u304f\u306a\u3063\u3066\u304d\u305f\u3089Ver\u3092\u56fa\u5b9a\u3057\u3088\u3046\u3002
\nhttps:\/\/stackoverflow.com\/questions\/76185502\/adding-a-link-tag-to-head-using-next-js13-3-with-appdir-enabled
\nhttps:\/\/stackoverflow.com\/questions\/74934561\/how-to-add-a-css-file-to-a-pages-head-in-the-app-folder-of-next-js
\n\u4e0a\u306e\u901a\u308a\u3084\u3063\u3066\u3001<Head>\u306b<link>\u3092\u7f6e\u3051\u305f\u3002\u304c\u3082\u3046\u3057\u3070\u3089\u304fpages\u3067\u884c\u304f\u304b?\u3002\u304c\u3057\u304b\u3057\u3053\u308c\u3084\u308b\u3068
\nnext\/head\u3092\u4f7f\u308f\u306a\u304f\u306a\u308b\u3002\u5b66\u7fd2\u521d\u3081\u306e\u4eca\u306e\u6bb5\u968e\u3067\u4e2d\u8eab\u3092\u8abf\u3079\u308b\u306e\u306f\u30e1\u30f3\u30c9\u30af\u30b5\u3002\u9014\u4e2d\u307e\u3067\u898b\u305f\u304c\u3002
\n$ find node_modules\/ -name head.js
\nnode_modules\/next\/head.js
\nnode_modules\/next\/dist\/shared\/lib\/head.js
\nnode_modules\/next\/dist\/esm\/shared\/lib\/head.js
\n\u306a\u306e\u3067\u3001ChildHead\u306b\u3059\u308b\u3053\u3068\u306b\u3057\u305f\u3002(\u7d50\u679c\u306f\u30d1\u30c3\u3068\u898b\u3067\u306f\u5909\u308f\u3089\u306a\u3044\u3088\u3046\u3060\u304c\u3002\u5f8c\u304b\u3089\u66f8\u7c4d\u3067\u305d\u3046
\n\u3044\u3046\u4f7f\u3044\u65b9\u3092\u66f8\u3044\u3066\u3044\u305f\u3002Header\u3002\u4eca\u5f8c\u306f\u30b3\u30f3\u30d1\u30a4\u30ebWarn\u51fa\u305f\u6642\u306f\u66f8\u7c4d\u3092\u5148\u8aad\u307f\u3059\u308b\u304b)
\nhttps:\/\/zenn.dev\/yukishinonome\/articles\/c9c8813f89eb80
\nnext.js-13.4.1(npm_install_next@13.4.1\u3067DL\u3057\u5165\u308c\u66ff\u3048)\u3067npm_run_build\u3084\u308b\u3068\u4ee5\u4e0b
\n\\- info Linting and checking validity of types .- error ESLint must be installed in order to run during builds: npm install –save-dev eslint
\n\u304c\u51fa\u308b\u306e\u3067\u5165\u308c\u3088\u3046\u3068\u3057\u305f\u304c\u3001\u3053\u3093\u306a\u611f\u3058\u306e\u591a\u6570\u306e\u30d5\u30a1\u30a4\u30eb\u3092move\u3057\u306a\u3051\u308c\u3070\u306a\u3089\u306a\u304f\u306a\u3063\u3066\u3001
\nhttps:\/\/stackoverflow.com\/questions\/71145130\/npm-err-code-enotempty-npm-err-syscall-rename
\nnpm_uninstall\u3084npm_remove\u3082\u52b9\u304b\u305a\u3001\u30e1\u30f3\u30c9\u30af\u30b5\u304f\u306a\u3063\u3066\u3001
\nhttps:\/\/qiita.com\/mamosan\/items\/6f1cf71ccd82216fe25b
\nhttps:\/\/www.freecodecamp.org\/japanese\/news\/npm-uninstall-how-to-remove-a-package\/
\n\u7d50\u5c40\u3001next.js-Latest\u3067npm_run_build\u3059\u308b\u3053\u3068\u306b\u3057\u305f\u3002\u307e\u3060migration\u4e0d\u8db3\u3089\u3057\u3044\u304c\u3002(2023.12)
\nWarning: 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.
\n“next” should not be imported directly, imported in \/myproj2\/oldcygwin\/practice300\/practice380\/.next\/server\/app\/page.js
\nSee more info here: https:\/\/nextjs.org\/docs\/messages\/import-next
\n<link>\u306f\u7d20\u76f4\u306b<Link>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u5165\u308c\u308c\u3070\u3088\u304b\u3063\u305f\u304b(\u5f8c\u304b\u3089\u66f8\u7c4d\u3067\u305d\u3046\u3044\u3046\u4f7f\u3044\u65b9\u3067\u306f\u306a\u3044\u4e8b
\n\u304c\u5206\u304b\u3063\u305f)\u3002\u3042\u3068\u3001href\u306b\u30ed\u30fc\u30ab\u30ebadr\u3092\u66f8\u3044\u305f\u3089\u3001
\nWarning: Do not include stylesheets manually. See: https:\/\/nextjs.org\/docs\/messages\/no-css-tags
\nstyled-jsx\u3092\u3084\u308d\u3046\u3068\u3057\u305f\u3089\u3001
\n‘client-only’ cannot be imported from a Server Component module. It should only be used from a Client Component.
\nThe 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.
\nNext.js 13\u3067\u958b\u767a\u65b9\u6cd5\u306f\u3069\u3046\u5909\u308f\u308b\uff1f – https:\/\/zenn.dev\/andraindrops\/articles\/a9d2ae3285ceb6
\n“use client”;\u3092\u3064\u3051\u305f\u3089\u3001
\nYou 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
\n\\ ╭\u2500[\/myproj2\/oldcygwin\/practice300\/practice382\/app\/page.js:9:1]
\n\\ 9 \u2502 let message = ‘React Next.js sample page.’;
\n\\ 10 \u2502
\n\\ 11 \u2502 export const metadata = {
\n\\ · \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
\n\\ 12 \u2502 title: {title},
\nexport\u3092\u5916\u3057\u305f\u3089\u30b3\u30f3\u30d1\u30a4\u30eb\u304c\u901a\u3063\u305f\u3002\u5909\u6570\u304c\uff12\u91cd\u5b9a\u7fa9?\u305d\u3053\u306fC\u3068\u540c\u3058\u304b\u3002
\n<Link>\u3092\u8a66\u305d\u3046\u3068\u3057\u305f\u3089\u3001
\nUnhandled Runtime Error
\nError: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.
\nLearn more: https:\/\/nextjs.org\/docs\/messages\/invalid-new-link-with-extra-anchor
\na\u3092\u5916\u3057\u305f\u3002\u3042\u3068\u3084\u3063\u3071dir\u4f5c\u3089\u306a\u3044\u3068\u30e0\u30ea\u304b\u3001mkdir other; mv -i other.js other\/page.js
\nhttps:\/\/nextjs.org\/docs\/app\/building-your-application\/upgrading\/app-router-migration#step-3-migrating-nexthead
\nlayout.js\u3067Layoot()\u3092\u3084\u308d\u3046\u3068\u3057\u305f\u3089\u3001RootLayout()\u3068\u304b\u3044\u3046\u3084\u3064\u304c\u5c45\u308b\u3002
\nhttps:\/\/nextjs.org\/docs\/app\/building-your-application\/routing\/pages-and-layouts#root-layout-required
\n\u6700\u4e0a\u4f4d\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u306f\u30eb\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u3068\u547c\u3070\u308c\u307e\u3059\u3002\u3053\u306e\u5fc5\u9808\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5185\u306e\u3059\u3079\u3066\u306e\u30da\u30fc\u30b8\u3067\u5171\u6709\u3055\u308c\u307e\u3059\u3002\u30eb\u30fc\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u306b\u306fhtml\u3068body\u30bf\u30b0\u304c\u542b\u307e\u308c\u3066\u3044\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002
\n\u4efb\u610f\u306e\u30eb\u30fc\u30c8\u30bb\u30b0\u30e1\u30f3\u30c8\u306f\u3001\u30aa\u30d7\u30b7\u30e7\u30f3\u3067\u72ec\u81ea\u306eLayout\u3092\u5b9a\u7fa9\u3067\u304d\u307e\u3059\u3002\u3053\u308c\u3089\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u306f\u3001\u305d\u306e\u30bb\u30b0\u30e1\u30f3\u30c8\u5185\u306e\u3059\u3079\u3066\u306e\u30da\u30fc\u30b8\u3067\u5171\u6709\u3055\u308c\u307e\u3059\u3002
\nnext.js rootlayout\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/reffect.co.jp\/react\/next-js-13-app
\nhttps:\/\/qiita.com\/yukiji\/items\/84fd44057f455e7e179d
\nhttps:\/\/reffect.co.jp\/react\/next-js-13#Layout
\n\u30d6\u30e9\u30a6\u30b6\u4e0a\u306b\u8868\u793a\u3055\u308c\u305fabout\u30da\u30fc\u30b8\u306e\u753b\u9762\u306b\u306f\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u304c\u5165\u3063\u3066\u3044\u307e\u3059\u304cpage.tsx\u30d5\u30a1\u30a4\u30eb\u306b\u306fCSS\u306b\u3088\u308b\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u305b\u3093\u3002\u3067\u306f\u306a\u305cpage.tsx\u30d5\u30a1\u30a4\u30eb\u306bCSS\u304c\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u306a\u3044\u306b\u3082\u95a2\u308f\u3089\u305aCSS\u306b\u3088\u308b\u30b9\u30bf\u30a4\u30eb\u304c\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3057\u3087\u3046\u3002\u305d\u306e\u7406\u7531\u306fapp\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u4e0b\u306elayout.tsx\u30d5\u30a1\u30a4\u30eb\u306e\u8a2d\u5b9a\u304c\u53cd\u6620\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3067\u3059\u3002
\n<MyImage>\u304calign:middle\u3067\u4e2d\u592e\u306b\u6765\u306a\u304b\u3063\u305f\u306e\u3067\u3001inspector\u3092\u898b\u3066\u3001display inline\u3001\u3092\u30b0\u30b0\u3063\u305f\uff1a
\n\u3010CSS\u3011display\u306e\u4f7f\u3044\u65b9\u3092\u7dcf\u307e\u3068\u3081\uff01inline\u3084block\u306e\u9055\u3044\u306f\uff1f
\nhttps:\/\/saruwakakun.com\/html-css\/basic\/display
\nhttps:\/\/qiita.com\/sawadays0118\/items\/4c329fd05cdff14ffebc
\n\u3042\u3068\u3001build\u3059\u308b\u3068\u3001
\n\\.\/app\/image.js
\n21: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
\n21:7 Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y\/alt-text
\ninfo – Need to disable some ESLint rules? Learn more here: https:\/\/nextjs.org\/docs\/basic-features\/eslint#disabling-rules
\n(\u4eca\u56de\u306f\u30b9\u30ad\u30c3\u30d7\u3057\u305f\u3002\u305d\u306e\u5185\u3084\u3063\u3066\u307f\u3088\u3046)
\nfetch()\u3092\u8a66\u3057\u305f\u3089\u30a8\u30e9\u30fc\u3002
\nnext.js TypeError: Failed to parse URL from \/data.json [cause]: TypeError [ERR_INVALID_URL]: Invalid URL\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/stackoverflow.com\/questions\/76148113\/nextjs-server-side-fetch-typeerror-failed-to-parse-url-from-htt%D1%80-localhost
\nhttps:\/\/qiita.com\/Gma_Gama\/items\/86a68240b70448003fb1
\nunhandled errors Next.js out of date (learn more)Unhandled Runtime Error TypeError: Failed to fetch\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/reffect.co.jp\/react\/next-js-13
\n\u7d76\u5bfe\u30a2\u30c9\u30ec\u30b9\u306b\u3057\u305f\u304c\u3001Unhandled Runtime Error \u3067\u30e1\u30e2\u30ea\u3092\u6d88\u8cbb\u3059\u308b\u306e\u3092\u76f4\u3059\u65b9\u6cd5\u304c\u30b0\u30b0\u3063\u3066\u3082\u5206\u304b\u3089\u305a\u3001\u3061\u3083\u3093\u3068\u898b\u308b\u3053\u3068\u306b\u3057\u305f\u3002
\nconst res = fetch(url);console.log(res);
\nnext.js console.log promise Prototype PromiseState PromiseResult \u898b\u65b9\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/zenn.dev\/convers39\/articles\/bfad06b6697c08
\n(useState\u4f7f\u3063\u3066\u308b\u304b\u3089\u3001\u6bce\u56de\u66f4\u65b0\u3057\u3066\u6bce\u56deHome()\u3092\u30b3\u30fc\u30eb\u3057\u3066\u3001\u3069\u3053\u304b\u3067\u51e6\u7406\u30bf\u30a4\u30df\u30f3\u30b0\u304c\u30ba\u30ec\u3066
\nresolve\u304c\u5fc5\u8981\u306b\u306a\u308b\u304c\u3001resolve()\u7528\u610f\u3057\u3066\u306a\u3044\u306e\u3067 unhandled errors?\u3002\u3053\u3053\u3067useState\u4f7f\u3046\u306e\u3084\u3081\u3002
\n\u304c\u305d\u3046\u3059\u308b\u3068\u3001\u30c7\u30fc\u30bf\u5230\u7740\u524d\u306b\u7a7a\u8868\u793a\u3057\u3066\u3057\u307e\u3046) next.js fetch() resolve()\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/dev-harry-next.com\/frontend\/request-api-by-fetch-function-in-nextjs
\n(response.catch()\u3092\u8ffd\u52a0\u3057\u305f\u3068\u3053\u308dError\u3068\u30e1\u30e2\u30ea\u6d88\u8cbb\u6fc0\u5897\u306f\u7121\u304f\u306a\u3063\u305f\u304c\u3001Firefox\u3060\u3068\u30e1\u30e2\u30ea\u6d88\u8cbb\u306f
\n\u5fae\u5897\u3057\u7d9a\u3051\u3066\u6b62\u307e\u3089\u306a\u3044\u3002\u51e6\u7406\u901f\u5ea6\u5dee?)
\nnpm_install_swr\u3057\u3088\u3046\u3068\u3057\u305f\u3089\u3001Eslint\u306eVer\u304c\u5408\u308f\u306a\u304f\u306a\u3063\u305f\u306e\u3067\u3001next.js\u3092\u53d6\u308a\u76f4\u3057\u305f\u3002
\n$ npm init next-app practice387
\n$ npm install swr
\n\u3042\u3068\u66f8\u7c4d\u901a\u308a\u306b\u3084\u308b\u3068\u3046\u307e\u304f\u3044\u304b\u306a\u3044\u3089\u3057\u3044\u3002https:\/\/qiita.com\/ryo666-6\/items\/730526f3e65e0a06ee4d
\nhttps:\/\/swr.vercel.app\/ja\/docs\/getting-started https:\/\/zenn.dev\/yodaka\/articles\/f5f93877b7a19f
\n\u4eca\u3055\u3089\u6c17\u4ed8\u3044\u305f\u30a2\u30ed\u30fc\u95a2\u6570\u4f7f\u3046\u306e\u306f\u6587\u5b57\u6570\u6e1b\u3089\u3059\u305f\u3081?\u3002\u30bb\u30df\u30b3\u30ed\u30f3\u3082\u5168\u90e8\u4ed8\u3051\u308b\u3068\u30d0\u30ab\u306b\u306a\u3089\u306a\u3044\u3002
\ndata.data.map()\u3063\u3066\u30c0\u30b5\u3044\u304b\u3089obj.data.map()\u3063\u3066\u306a\u308b\u3088\u3046\u306b\u66f8\u304d\u63db\u3048\u305f\u3089\u52d5\u304b\u306a\u304f\u306a\u3063\u305f\u3002\u30de\u30b8\u304b\u3002
\nVSCode\u306a\u3089\u3082\u3063\u3068\u65e9\u304f\u6c17\u4ed8\u3051\u305f\u304b\u3082\u3060\u304c\u3001\u3084\u3063\u3071\u6163\u308c\u3066\u304f\u308b\u3068emacs\u306b\u623b\u308a\u305f\u304f\u306a\u308b\u3002
\nhello.js\u306a\u3093\u3067app\/page.js\u306e\u65b9\u306b\u306f\u7121\u3044\u3093\u3060?\u3002
\n$ cp -i -a ..\/practice379\/pages\/api app\/ (\u30b3\u30d4\u30fc\u3057\u305f\u3060\u3051\u3067\u306f\u52d5\u304b\u306a\u304b\u3063\u305f)
\nnext.js api\u3001next.js app\/page.js api\u3001next.js No HTTP methods exported in ‘route.js’. Export a named export for each HTTP method.\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/zenn.dev\/kiriyama\/articles\/87b8911973444d
\nhttps:\/\/qiita.com\/hukuryo\/items\/56a516d6252326c8e2cf
\nhttps:\/\/stackoverflow.com\/questions\/76214029\/no-http-methods-exported-in-export-a-named-export-for-each-http-method
\n\uff13\u756a\u76ee\u306e\u3084\u3064\u3067GET\u3060\u3051\u306e\u30b3\u30fc\u30c9\u304c\u30b7\u30f3\u30d7\u30eb\u3067\u3088\u3044\u304c\u3001\u66f8\u7c4d\u306e\u306faxios\u3092\u4f7f\u3063\u305f\uff12\u756a\u76ee\u306e\u3084\u3064\u306b\u8fd1\u3044?\u3002
\n$ cp -i -a ..\/practice379\/pages\/api\/hello.js app\/api\/hello\/route.js
\n$ emacs app\/api\/hello\/route.js
\nimport { NextResponse } from “next\/server”;
\nexport async function GET(req) {
\n\\ \/\/NextResponse.status = 200
\n\\ console.log(NextResponse)
\n\\ return NextResponse.json({ name: ‘John Doe’ })
\n}
\n\u958b\u767a\u30c4\u30fc\u30eb\u306e\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u3092\u898b\u308b\u3068status\u304c200\u306b\u306a\u3063\u3066\u308b\u306e\u3067\u3001statusCode = 200 \u304cdef\u3067\u5165\u3063\u3066\u308b?\u3002
\nhttps:\/\/developer.mozilla.org\/ja\/docs\/Web\/HTTP\/Status\/200?utm_source=mozilla&utm_medium=devtools-netmonitor&utm_campaign=default
\n\u5909\u308f\u308a\u904e\u304e\u3060\u304c\u5206\u304b\u308a\u6613\u3044\u304b\u3002GET\u3084POST\u3092\u53d7\u3051\u308c\u308b\u3063\u3066\u4e8b\u306fAPI\u3082\u3067\u304d\u308b\u3063\u3066\u4e8b\u304b\u3002node.js\u3068lib\u4f7f\u3063\u3066\u3002
\nhttps:\/\/seesaawiki.jp\/lifewithslackzaurus_15_0\/d\/DB%a4%d8%a4%ceAPI
\n\u30b5\u30fc\u30d0\u5074\u3067\u52d5\u3044\u3066\u308b\u304b\u3089console.log()\u306f\u30d6\u30e9\u30a6\u30b6\u306e\u30e2\u30cb\u30bf\u3067\u306a\u304f\u3001Linux\u306e\u30bf\u30fc\u30df\u30ca\u30eb\u3067\u898b\u308b\u3057\u304b\u306a\u3044\u304c\u3001
\n[class NextResponse extends Response]
\n\u30d6\u30e9\u30a6\u30b6\u307b\u3069\u60c5\u5831\u304c\u898b\u308c\u306a\u3044\u306e\u3067\u3001\u307e\u305f\u307e\u305femacs\u304b\u3089vscode\u3078\u623b\u3063\u305f\u3002\u30af\u30e9\u30b9\u306e\u7d99\u627f\u8ffd\u3046\u306eemacs\u30e0\u30ea
\n(find\/grep\u3084\u30bf\u30b0\u3068\u304b\u3067\u3067\u304d\u308b\u304b\u3082\u3060\u304c\u30e1\u30f3\u30c9\u30af\u30b5\u3002\u3053\u3046\u3044\u3046\u6642\u3060\u3051vscode\u4f7f\u3046\u304b?\u3046\uff5e\u3080)\u3002
\ninterface Response extends Body {
\nhttps:\/\/developer.mozilla.org\/ja\/docs\/Web\/API\/Response\/status
\n\u30c7\u30d7\u30ed\u30a4\u3057\u3088\u3046\u3068\u3057\u305f\u3089\u52d5\u304b\u306a\u3044\u3002https:\/\/seesaawiki.jp\/lifewithslackzaurus_15_0\/d\/%a5%ed%a1%bc%a5%ab%a5%eb%a5%b5%a1%bc%a5%d0%20apache%a1%dcnode%2ejs<\/p>\n
\nVue.js\u8b1b\u5ea7\uff1a\u53c2\u8003\u66f8\u7c4d\uff13
\n\u7d50\u5c40\u3001Angular\u3082React.js\u3082Vue.js\u3082\u307f\u306a\u540c\u3058\u69d8\u306a\u4eee\u60f3DOM\u3067\u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3002\u4eca\u306fReact
\n\u304c\u591a\u304f\u4f7f\u308f\u308c\u3066\u3044\u308b\u3089\u3057\u3044\u304c\u4eca\u5f8c\u3082\u305d\u3046\u3060\u308d\u3046\u304b\u3002\u3068\u308a\u3042\u3048\u305a\u8efd\u305d\u3046\u306aVue.js\u3067jQuery\u3068\u306e\u9055\u3044
\n\u3060\u3051\u4f53\u9a13\u3057\u3066\u3001JS-FW\u306f\u3057\u3070\u3057\u69d8\u5b50\u898b\u3068\u3059\u308b\u304b\u3002(\u305d\u306e\u5f8c\u307e\u3060\u3084\u3063\u3066\u306a\u3044)
\nVite\u3068\u306f\u4f55\u306a\u306e\u304b
\nhttps:\/\/qiita.com\/inagacky\/items\/ad424821653067c99253
\n\u9ad8\u901f\u3067\u52d5\u4f5c\u3059\u308b\u30d3\u30eb\u30c9\u30c4\u30fc\u30eb\u3001Vue.js \u306e\u4ed6\u3001React Preact \u306e\u30d3\u30eb\u30c9\u3082\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u308b\u3089\u3057\u3044\u3002<\/p>\n
\n\u53c2\u8003\u66f8\u7c4d\uff19\u3092\u53c2\u8003\u306b\u3001PHP\u306e\u51e6\u7406\u3092React.js\uff0bNode.js\u3078\u5909\u63db\u3057\u3066\u307f\u308b\u3002(2024.09)
\n\u4ee5\u4e0b\u306ePHP\u3067\u66f8\u304b\u308c\u305f\u5c0f\u898f\u6a21\u306a\u3001\u91ce\u83dc\u5c4b\u306eEC\u30b5\u30a4\u30c8\u306e\u5546\u54c1\u4e00\u89a7(shop_list.php)\u3092\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3092React.js\u306b\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3092Node.js\u306b\u3001\u5909\u63db\u305b\u3088\u3002(ChatGPT)
\n(\u30b3\u30fc\u30c9\u306e\u30e1\u30e2\u306f\u7701\u7565)
\nNode.js \u30d0\u30c3\u30af\u30a8\u30f3\u30c9
\n\u307e\u305a\u3001Node.js\u3067MySQL\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3001\u305d\u308c\u3092\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306b\u63d0\u4f9b\u3059\u308bAPI\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002
\n1.\u4f9d\u5b58\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb:
\n$ npm init -y
\n$ npm install express mysql2 cors
\n2.\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u4f5c\u6210 (server.js):
\n(\u30b3\u30fc\u30c9\u306e\u30e1\u30e2\u306f\u7701\u7565)
\n\u3053\u308c\u306b\u3088\u308a\u3001Node.js\u30b5\u30fc\u30d0\u30fc\u304cMySQL\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u304b\u3089\u5546\u54c1\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3001API\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8 \/api\/products \u3092\u901a\u3058\u3066\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306b\u63d0\u4f9b\u3057\u307e\u3059\u3002MySQL\u30b5\u30fc\u30d0\u30fc\u304c\u52d5\u4f5c\u3057\u3066\u304a\u308a\u3001mst_product \u30c6\u30fc\u30d6\u30eb\u306b\u30c7\u30fc\u30bf\u304c\u3042\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002
\nReact.js \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9
\n\u6b21\u306b\u3001React.js\u3092\u4f7f\u3063\u3066\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3092\u4f5c\u6210\u3057\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306eAPI\u304b\u3089\u5546\u54c1\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3066\u8868\u793a\u3057\u307e\u3059\u3002
\n1.\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u4f5c\u6210: create-react-app \u3092\u4f7f\u7528\u3057\u3066React\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002
\n$ npx create-react-app shop-frontend
\n$ cd shop-frontend
\n2.API\u30ea\u30af\u30a8\u30b9\u30c8\u7528\u306bAxios\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb:
\n$ npm install axios
\n3.\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306eUI\u4f5c\u6210 (src\/App.js):
\n(\u30b3\u30fc\u30c9\u306e\u30e1\u30e2\u306f\u7701\u7565)
\n4.\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u5b9f\u884c:
\n$ npm start
\n\u3053\u306eReact\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306f\u3001Node.js\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u304b\u3089\u5546\u54c1\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3001\u4e00\u89a7\u3068\u3057\u3066\u8868\u793a\u3057\u307e\u3059\u3002\u307e\u305f\u3001\u30bb\u30c3\u30b7\u30e7\u30f3\u306e\u30c1\u30a7\u30c3\u30af\u3092\u884c\u3044\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u30ed\u30b0\u30a4\u30f3\u3057\u3066\u3044\u308b\u304b\u3069\u3046\u304b\u3092\u78ba\u8a8d\u3057\u3066\u8868\u793a\u5185\u5bb9\u3092\u5207\u308a\u66ff\u3048\u307e\u3059\u3002\u30bb\u30c3\u30b7\u30e7\u30f3\u7ba1\u7406\u90e8\u5206\u306f\u3001sessionStorage\u3092\u4f7f\u3063\u3066\u4eee\u5b9f\u88c5\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u5b9f\u969b\u306e\u5b9f\u88c5\u3067\u306f\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3067\u30bb\u30c3\u30b7\u30e7\u30f3\u3092\u7ba1\u7406\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002
\n\u6700\u7d42\u30b9\u30c6\u30c3\u30d7
\n\u30fb\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3068\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3067\u3001\u30ed\u30b0\u30a4\u30f3\u6a5f\u80fd\u3084\u30bb\u30c3\u30b7\u30e7\u30f3\u7ba1\u7406\u3092\u3055\u3089\u306b\u6539\u5584\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002
\n\u30fbNode.js\u30b5\u30fc\u30d0\u30fc\u3068React\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4e21\u65b9\u304c\u6b63\u5e38\u306b\u7a3c\u50cd\u3057\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306f http:\/\/localhost:3000 \u3067\u52d5\u4f5c\u3057\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306f http:\/\/localhost:3001 \u304b\u3089\u30c7\u30fc\u30bf\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002
\n\u3053\u306e\u3088\u3046\u306b\u3057\u3066\u3001React.js\u304cUI\u3092\u7ba1\u7406\u3057\u3001Node.js\u304c\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3067API\u304a\u3088\u3073\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u3068\u306e\u901a\u4fe1\u3092\u884c\u3046\u30b7\u30b9\u30c6\u30e0\u306b\u5909\u63db\u3057\u307e\u3057\u305f\u3002<\/p>\n
\n\u53c2\u8003\u66f8\u7c4d\uff19\u3092\u53c2\u8003\u306b\u3001PHP\u306e\u51e6\u7406\u3092Next.js\u3078\u5909\u63db\u3057\u3066\u307f\u308b\u3002(2024.09)
\n\u4e0a\u8a18\u306e shop_list.php \u3092Next.js\u306b\u5909\u63db\u305b\u3088\u3002(ChatGPT)
\n\u4ee5\u4e0b\u306b\u3001PHP\u3067\u4f5c\u6210\u3055\u308c\u305f shop_list.php \u3092\u3001Next.js \u306b\u5909\u63db\u3059\u308b\u624b\u9806\u3092\u793a\u3057\u307e\u3059\u3002
\nNext.js \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u8a2d\u5b9a
\n1.Next.js \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210: \u307e\u305a\u3001\u65b0\u3057\u3044Next.js\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002
\n$ npx create-next-app@latest shop-next
\n$ cd shop-next
\n2.\u5fc5\u8981\u306a\u4f9d\u5b58\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb: Next.js\u3067\u306f\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u3067\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3067\u304d\u308b\u306e\u3067\u3001axios\u306f\u4f7f\u7528\u305b\u305a\u306b\u76f4\u63a5Node.js\u5185\u8535\u306e\u6a5f\u80fd\u3092\u4f7f\u3044\u307e\u3059\u3002MySQL\u3068\u306e\u63a5\u7d9a\u306b\u306f mysql2 \u3092\u4f7f\u7528\u3057\u307e\u3059\u3002
\n$ npm install mysql2
\n\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u7d71\u5408
\nNext.js\u306f\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306a\u306e\u3067\u3001API\u30eb\u30fc\u30c8\u3092\u4f7f\u7528\u3057\u3066\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u3068\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u4e21\u65b9\u3092\u540c\u3058\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u6271\u3044\u307e\u3059\u3002
\n1.API\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u3092\u4f5c\u6210\u3059\u308b (\/pages\/api\/products.js):
\nNext.js\u3067\u306f\u3001\/pages\/api \u4ee5\u4e0b\u306b\u914d\u7f6e\u3055\u308c\u305f\u30d5\u30a1\u30a4\u30eb\u306fAPI\u30eb\u30fc\u30c8\u3068\u3057\u3066\u6a5f\u80fd\u3057\u307e\u3059\u3002\u307e\u305a\u306f\u3001MySQL\u304b\u3089\u5546\u54c1\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308bAPI\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002
\n(\u30b3\u30fc\u30c9\u306e\u30e1\u30e2\u306f\u7701\u7565)
\n\u3053\u306eAPI\u306f\u3001\/api\/products \u3068\u3044\u3046\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u3067\u52d5\u4f5c\u3057\u3001MySQL\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u304b\u3089\u5546\u54c1\u4e00\u89a7\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002
\n2.\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u30da\u30fc\u30b8\u4f5c\u6210 (\/pages\/index.js):
\n\u6b21\u306b\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u30da\u30fc\u30b8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u3053\u306e\u30da\u30fc\u30b8\u3067\u306f\u3001getServerSideProps \u3092\u4f7f\u7528\u3057\u3066\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u6642\u306b\u5546\u54c1\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3001\u30da\u30fc\u30b8\u306b\u8868\u793a\u3057\u307e\u3059\u3002
\n(\u30b3\u30fc\u30c9\u306e\u30e1\u30e2\u306f\u7701\u7565)
\n\u30bb\u30c3\u30b7\u30e7\u30f3\u7ba1\u7406
\ngetServerSideProps \u3067\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u6642\u306b\u3001\u30bb\u30c3\u30b7\u30e7\u30f3\u30c7\u30fc\u30bf\uff08\u30e6\u30fc\u30b6\u30fc\u306e\u30ed\u30b0\u30a4\u30f3\u60c5\u5831\uff09\u3092\u78ba\u8a8d\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u3001cookies \u3092\u4f7f\u3063\u3066\u30bb\u30c3\u30b7\u30e7\u30f3\u3092\u7c21\u5358\u306b\u6271\u3063\u3066\u3044\u307e\u3059\u304c\u3001\u5b9f\u969b\u306b\u306f\u8a8d\u8a3c\u3084\u30bb\u30c3\u30b7\u30e7\u30f3\u7ba1\u7406\u306f\u5225\u9014\u8a2d\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002
\n\u52d5\u4f5c\u78ba\u8a8d
\n1.\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u8d77\u52d5:
\nNext.js\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u8d77\u52d5\u3057\u307e\u3059\u3002
\n$ npm run dev
\n\u30ed\u30fc\u30ab\u30eb\u30b5\u30fc\u30d0\u30fc\u304c http:\/\/localhost:3000 \u3067\u8d77\u52d5\u3057\u307e\u3059\u3002\u30d6\u30e9\u30a6\u30b6\u3067\u30a2\u30af\u30bb\u30b9\u3059\u308b\u3068\u3001\u5546\u54c1\u4e00\u89a7\u30da\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u3001\u5404\u5546\u54c1\u306e\u8a73\u7d30\u30da\u30fc\u30b8\u3078\u306e\u30ea\u30f3\u30af\u3084\u30ab\u30fc\u30c8\u3078\u306e\u30ea\u30f3\u30af\u3082\u52d5\u4f5c\u3057\u307e\u3059\u3002
\n\u307e\u3068\u3081
\n\u30fbAPI\u30eb\u30fc\u30c8 (\/pages\/api\/products.js) \u3092\u4f7f\u7528\u3057\u3066\u3001MySQL\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u304b\u3089\u5546\u54c1\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308bAPI\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002
\n\u30fb\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0 \u3092\u6d3b\u7528\u3057\u3066\u3001getServerSideProps \u3067\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3001React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u30c7\u30fc\u30bf\u3092\u6e21\u3057\u3066\u8868\u793a\u3057\u307e\u3059\u3002
\n\u30fb\u30bb\u30c3\u30b7\u30e7\u30f3\u306e\u7c21\u6613\u7684\u306a\u5b9f\u88c5\u3092\u901a\u3057\u3066\u3001\u30e6\u30fc\u30b6\u30fc\u306e\u30ed\u30b0\u30a4\u30f3\u72b6\u614b\u3092\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306b\u53cd\u6620\u3055\u305b\u307e\u3057\u305f\u3002
\n\u3053\u308c\u306b\u3088\u308a\u3001Next.js\u3092\u4f7f\u3063\u305f\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u5909\u63db\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002<\/p>\n
\n\u4f5c\u3063\u3066\u5b66\u3076 Next.js\/React Web\u30b5\u30a4\u30c8\u69cb\u7bc9 2022.7 (\u6301\u3063\u3066\u306a\u3044)
\nhttps:\/\/ebisu.com\/next-react-website\/
\nReact.js&Next.js\u8d85\u5165\u9580 2021.03
\nhttps:\/\/www.shuwasystem.co.jp\/book\/9784798063980.html
\nSoftware Design 2020\u5e749\u6708\u53f7 Vue.js\u8b1b\u5ea7
\nhttps:\/\/gihyo.jp\/magazine\/SD\/archive\/2020\/202009
\nAngular\u8d85\u5165\u9580 2019.06
\nhttps:\/\/www.shuwasystem.co.jp\/book\/9784798057736.html
\n(\u8a2d\u8a08\u30d1\u30bf\u30fc\u30f3\u306b\u3064\u3044\u3066\u306f\u66f8\u3044\u3066\u306a\u3044\u304cMVVM\u3067\u3042\u308a\u3001ngModel\u30b3\u30de\u30f3\u30c9\u3067\u30d3\u30e5\u30fc\u3068\u30e2\u30c7\u30eb\u3092\u30d0\u30a4\u30f3\u30c9)
\nVue.js&Nuxt.js\u8d85\u5165\u9580 2019.02 (\u6301\u3063\u3066\u306a\u3044)
\nhttps:\/\/www.shuwasystem.co.jp\/book\/9784798056593.html
\nAngular web\u30a2\u30d7\u30ea\u958b\u767a \u30b9\u30bf\u30fc\u30c8\u30d6\u30c3\u30af 2018.04
\nhttp:\/\/www.sotechsha.co.jp\/pc\/html\/1197.htm
\nhttps:\/\/qiita.com\/isso_w\/items\/d5ed993dbafe44870397
\nAngular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0 2017.08
\nhttps:\/\/gihyo.jp\/book\/2017\/978-4-7741-9130-0
\nJavaScript\u30a8\u30f3\u30b8\u30cb\u30a2\u990a\u6210\u8aad\u672c 2014.10
\nhttps:\/\/gihyo.jp\/book\/2014\/978-4-7741-6797-8
\n\\
\n\u6c17\u3065\u3051\u3070\u30d7\u30ed\u4e26\u307fPHP \u6539\u8a02\u7248 2017.03
\nhttps:\/\/www.ric.co.jp\/book\/programming\/detail\/192<\/p>\n
\nBackbone.js \u9700\u8981\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/zenn.dev\/wing3298\/articles\/5b65db5cc89770
\nbackbone.js el\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u8a2d\u5b9a\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/qiita.com\/ledsun\/items\/dde4f415205c888f54b4
\n\u30a4\u30d9\u30f3\u30c8\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3068\u306f\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/noumenon-th.net\/programming\/2017\/06\/24\/eventobject\/
\n\u30a4\u30d9\u30f3\u30c8\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306f\u3001\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u30fc\u304a\u3088\u3073\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u306b\u304a\u3044\u3066\u5b9f\u884c\u3055\u308c\u308b\u95a2\u6570\u306e\u5f15\u6570\u3068\u3057\u3066\u53d7\u3051\u53d6\u308b\u3053\u3068\u306e\u3067\u304d\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u3059\u3002 \u305d\u306e\u30a4\u30d9\u30f3\u30c8\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304b\u3089\u3001\u767a\u751f\u3057\u305f\u30a4\u30d9\u30f3\u30c8\u306b\u95a2\u308f\u308b\u69d8\u3005\u306a\u60c5\u5831\uff08\u30d7\u30ed\u30d1\u30c6\u30a3\uff09\u3092\u77e5\u308b\u3053\u3068\u304c\u3067\u304d\u3001\u307e\u305f\u305d\u306e\u30a4\u30d9\u30f3\u30c8\u3092\u5236\u5fa1\u3059\u308b\u30e1\u30bd\u30c3\u30c9\u3092\u6d3b\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002
\nbackbone.localstorage.js download\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/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
\nhttps:\/\/qiita.com\/kony\/items\/0952e7e0f15ec023101f
\nhttps:\/\/github.com\/jeromegn\/Backbone.localStorage
\njavascript \u30e1\u30bd\u30c3\u30c9\u30c1\u30a7\u30fc\u30f3\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/qiita.com\/sawapi\/items\/279531c88709700d0ff1
\nhttps:\/\/note.affi-sapo-sv.com\/js-mnethod-chain.php
\njavascript window.App ={}\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/qiita.com\/roothybrid7\/items\/9a357428a00b1838647c
\nhttps:\/\/tektektech.com\/what-is-window-object\/<\/a>
\n(\u3064\u307e\u308aJS\u306e\u30b0\u30ed\u30fc\u30d0\u30eb\u9818\u57df\u306fwindow\u4ee5\u4e0b\u3001window\u3092\u7701\u7565\u3067\u304d\u306a\u3044\u3068\u5206\u304b\u308a\u306b\u304f\u3044(\u4f7f\u3044\u306b\u304f\u3044)\u308f\u3051\u3060\u3002
\n<body>\uff5e<\/body>\u306e\u4e2d\u3067\u3042\u3063\u3066\u3082<script>\uff5e<\/script>\u306e\u4e2d\u306evar abc;\u306f\u3001window.abc;)
\n\\
\nPrototype JavaScript Framework\u3092\u4f7f\u3063\u3066\u307f\u305f\u611f\u60f3
\nhttps:\/\/qiita.com\/tomomoss\/items\/0112fc9e2b255da52692
\nUnderscore.js + Backbone.js + jQuery = Prototype.js \u3067\u3059\u304b?
\nhttps:\/\/www.quora.com\/Is-Underscore-js-+-Backbone-js-+-jQuery-Prototype-js
\n\\
\nangular react \u5171\u901a\u70b9\u3001\u4ed6(\u5fd8\u308c\u305f)\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/qiita.com\/oioigohan\/items\/e7b98b25dee956f37b37
\nhttps:\/\/qiita.com\/mqtsuo02\/items\/5701238e666e20416664
\n(\u7d50\u5c40\u3001Angular\u3082React\u3082Vue.js\u3082\u307f\u306a\u4eee\u60f3DOM\u3067\u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0)
\nhttps:\/\/dividable.net\/sidework\/javascript-sidework
\nVue.js\u306f\u300cAngular\u306e\u826f\u3044\u90e8\u5206\u3092\u53d6\u308a\u51fa\u3057\u3001\u305d\u308c\u4ee5\u5916\u3092\u524a\u304e\u843d\u3068\u3057\u305f\u3088\u3046\u306aJavaScript\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u958b\u767a\u3057\u305f\u3044\u300d\u3068\u306e\u8003\u3048\u304b\u3089\u958b\u767a\u3055\u308c\u305f\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af
\n\\
\nreact typescript\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/future-architect.github.io\/typescript-guide\/react.html
\nhttps:\/\/typescript-jp.gitbook.io\/deep-dive\/tsx\/react
\nReact.createElement {}\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a(2023.09)
\nhttps:\/\/www.hypertextcandy.com\/react-tutorial-02-jsx
\n<script src=”https:\/\/unpkg.com\/@babel\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a(2023.10)
\nhttps:\/\/qiita.com\/murasuke\/items\/8dbe350c0c1c1fe269bf
\nReact.js 17 18 \u9055\u3044 render()\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a(2023.10)
\nhttps:\/\/ics.media\/entry\/200310\/
\nhttps:\/\/ja.legacy.reactjs.org\/blog\/2022\/03\/08\/react-18-upgrade-guide.html
\nhttps:\/\/react.dev\/blog\/2022\/03\/08\/react-18-upgrade-guide
\nreact \u95a2\u6570\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8 \u30af\u30e9\u30b9\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8 \u3069\u3061\u3089\u304c\u4f7f\u308f\u308c\u3066\u3044\u308b\uff1f\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a(2023.10)
\n\u95a2\u6570\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u63a8\u5968\u3055\u308c\u308b\u7406\u7531\u306f\u300c\u77ed\u304f\u66f8\u3051\u308b\u304b\u3089\u300d\u3067\u306f\u306a\u3044
\nhttps:\/\/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
\nnext.js 12 13 \u9055\u3044 pages\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/dev-k.hatenablog.com\/entry\/nextjs133-explained<\/a>
\nhttps:\/\/dev-harry-next.com\/frontend\/nextjs-13-detail
\nhttps:\/\/udemy.benesse.co.jp\/development\/next-js13.html<\/a>
\nnext.js config \u30c7\u30d7\u30ed\u30a4\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nNext.js\u3067\u9759\u7684\u30d3\u30eb\u30c9\u3057\u305f\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u30b5\u30d6\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u30d1\u30b9\u306b\u30c7\u30d7\u30ed\u30a4\u3059\u308b\u65b9\u6cd5
\nhttps:\/\/zenn.dev\/chot\/articles\/99ae6acca1429b
\nhttps:\/\/qiita.com\/hiropy0123\/items\/02ab91f69dbfa4e2797f
\nhttps:\/\/qiita.com\/pirokichidesu\/items\/7758f630e25688ad4dc2
\nhttps:\/\/nextjs-ja-translation-docs.vercel.app\/docs\/advanced-features\/static-html-export
\nnpm install \u30d0\u30fc\u30b8\u30e7\u30f3\u6307\u5b9a package.json\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/qiita.com\/chihiro\/items\/5826678bc9287fb57a28<\/a>
\nhttps:\/\/zenn.dev\/tm35\/articles\/778b9a260d43fc<\/a>
\nnext.js axios\u3068\u306f\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/apidog.com\/jp\/blog\/axios-introduction\/
\nAxios\u306fJavaScript\u3067\u4f7f\u3048\u308bHTTP\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002 Promise\u30d9\u30fc\u30b9\u306eAPI\u3092\u63d0\u4f9b\u3057\u3066\u3044\u308b\u306e\u3067\u975e\u540c\u671f\u51e6\u7406\u304c\u6271\u3044\u3084\u3059\u304f\u3001JSON\u30c7\u30fc\u30bf\u306e\u81ea\u52d5\u5909\u63db\u3082\u884c\u3063\u3066\u304f\u308c\u308b\u305f\u3081\u30ec\u30b9\u30dd\u30f3\u30b9\u30c7\u30fc\u30bf\u306e\u51e6\u7406\u304c\u3057\u3084\u3059\u304f\u306a\u3063\u3066\u3044\u307e\u3059\u3002
\n\\
\nnext.js \u984c\u6750\u3001\u3067\u30b0\u30b0\u3063\u305f\uff1a
\nhttps:\/\/qiita.com\/masakinihirota\/items\/99054b9f9cf428881617
\nhttps:\/\/zenn.dev\/mossan_hoshi\/articles\/20220327_real_world_nextjs<\/p>\n