HTML/PHPの練習 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
で使ったサンプルPGを、PHP/Ruby/JSのフレームワークに書き換えてFWの練習
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%b3 をしようと思った。
まず、(Web-)FWが対応しているデザインパターンを知らないと。アーキテクチャパターンとか言っ
たりもするらしい。これが分からないと、PHPのサンプルPGをRubyやJSに書き換えて、どこにどう
振り分けて?書いたらいいか分からないと思われる。というかAngular/React練習用に買った書籍
には設計パターンについてのそれらしい説明を探せなかった(モデルという言葉は出てきた)。
入門用のとにかく動かしてみる系の本ということか?。Backbone.jsのMVCの様な分かり易い記述で
はないが高パフォーマンスということか?。入門用で一人で作る用なため、設計パターンは省略?。
PHPとRubyのFWの設計パターンはどうせMVCだろうから調べない。省略。
Django(Python)のMTVという考え方 (2023.05)
https://qiita.com/kotayanagi/items/01e9a617571e2b9526bc
MTVはざっくり言ってしまえば、TのテンプレートがMVCのビューを、VのビューがMVCのコントローラーの位置に属しています。
(Backbone.jsと似てる気がしないでもない? 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%b3 )
みな大きく見るとMVCにはなっているのだろう。Reactとか違うなあ。
https://www.tohoho-web.com/ex/angular.html
MVC (Model View Controller) や MVVM (Model-View-ViewModel) アーキテクチャーを実現します
angular ngController、でググった:
https://js.studio-kingdom.com/angularjs/ng_directive/ng_controller
https://docs.angularjs.org/api/ng/directive/ngController
https://angular.jp/guide/releases
https://angular.jp/api/forms/NgControl
\
https://dev.classmethod.jp/articles/complete-nextjs-tutorial/
Reactはフレームワークではなくライブラリであり、インタラクティブなUIを提供するライブラリで、
Next.jsは(フルスタックな)Reactフレームワーク(なので設計パターンがあるのはNext.jsの方)(2023.11)
ReactとAngular/Vueの書き方の違い。参考書籍から。(2023.06)
もともとMeta(Facebook)は、
XHPというPHPの中にXMLを埋め込むことができるライブラリを開発していた。JSでも同様に、
XML形式のテンプレートをそのままJSに埋め込める形式のJSXというコンポーネントを開発した。
Angular/VueはHTMLのタグの中にAngular語/Vue語を書いている。
ReactはJSの中にReact語を書いてタグを埋め込んでいる。
もしかするとReactの方がとっつき易い?。
ReactもHTMLのタグの中にReact語を書いていた。というかタグそのものを作っていた。(2023.11)
タグの関数化と、関数ベースが使い易そうなReactが、広まるわけだ。
参考書籍/情報:
React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発 2018.05
https://gihyo.jp/book/2018/978-4-7741-9706-7
(MVCとMVPとMVVM、Flux について概要的に書いている。というか本全体が概要的。がしかし全体が
\見えていないとFWを使う目的が分からないまま、他のFWと何が違うのか分からないまま、PGして
\いるなんてことに。なんでか知らないがこう書くと動く、みたいな)
JavaScriptエンジニア養成読本 Backbone.jsで学ぶ MVCフレームワーク[実践]入門 2014.10
https://gihyo.jp/book/2014/978-4-7741-6797-8
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
Java言語で学ぶデザインパターン入門 増補改訂版 2014.03
https://www.sbcr.jp/product/4797327030/
\
backbone.js、でググった:
https://qiita.com/mzmz__02/items/12d6ff9bfb9edf991784
\
react flux redux、でググった:
https://qiita.com/Kontam/items/e4de4569ade71a313246
https://hogehuga.com/post-1095/
react redux recoil zustand、でググった:
https://react-uncle-blog.netlify.app/blog/react-state-managment
\
Webアプリ デザインパターン、でググった:
MVCパターン再考
https://qiita.com/ffggss/items/15943c6c3908a6f25cb5
javascript 設計パターン、でググった:
JavaScript 長く使える系の知識
https://qiita.com/yamadar/items/bfdfc58cec49bf2690e1
もっと細かい実装に関する設計パターン:
デザインパターンについて LaravelまたはPHPフレームワーク (別件のヒット先にあったリンク)
https://teratail.com/questions/30275
Laravelのデザインパターン
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/Laravel%a4%ce%a5%c7%a5%b6%a5%a4%a5%f3%a5%d1%a5%bf%a1%bc%a5%f3