>>YuOさん
貴重な情報ありがとうございます。
Vueで開発されてるんですね、ボチボチ頑張ってください。

Enchant.js は古いようですね(;^ω^)
Enchant.js の本があったので安心してました。2018年出版でしたけど。
最新の本を読みたいんですけど、評価がどうしても少なくなって
情報があまり手に入らないジレンマにおちいってます。
買っちゃえばいいんですけど、そろそろ私の本棚も
置くスペースがなくなってきてて、厳選しないとなと思ってます。

{
    "dependencies": {
        "bootstrap": "^5.1.3",
        "bootstrap4": "npm:bootstrap@^4.6.1",
        "vue2": "npm:vue@^2.6.14",
        "vue": "^3.2.36"
    }
}

// Vue.js前提
const atClick = async (page: number) : void => {
    const fetched : Topic[] = await fetch(`/forum/3/topics?from=${page * 100}`); // ページデータをAPI経由で取得
    topics.value = fetched; // データを書き換える
    // 本来ならば、Vue-Routerで次ページへの遷移をpushして、props.pageをwatchして上記コードを実行するようにするところですが。
}

今どきのWebサイト作成は何らかのフロントエンドフレームワークを使うのが普通です。
一般的には[url=https://react.dev/]React[/url]や[url=https://ja.vuejs.org/]Vue[/url]ですね。
フロントエンドフレームワークは、基本的にJavaScriptで出来ています。

さらに、SPA (Single Page Application) と呼ばれる、index.htmlだけあって他は全てJavaScriptでHTMLを生成するようなこともよく行われています。
MPA (Multi Page Application) でも、特定ディレクトリ以下はSPAのように動作する、というのもありますね。
[url=https://github.com/]GitHub[/url]なんかはそのような、MPAとSPAの中間のような動作をします。Frameworkはわかりませんでした。
他のサイトだと、[url=https://developer.mozilla.org/ja/]MDN[/url]はReactを、[url=https://about.gitlab.com/ja-jp/]GitLab[/url]はVueを、それぞれ使っています。

いまのところ、私がやっている開発案件はVue + TypeScriptですね。
ちょっとVue 2.0 + @vue/composition-apiという時代遅れ環境もあったりしますが。
[spoil]
[offtopic]そして、Vue 2.0実行時コンパイルしているページ / Vue 3.0 + Vue-Router + TypeScript + WebPackでSPAもどきをしているページの混在環境というカオスもあったり。
Vue 2と3、Bootstrap 4と5がpackage.jsonに指定してあって、古いバージョンはnode_modulesをlibにコピー、みたいな運用もしています。
マネすることはお勧めしません。

[code=json]
{
"dependencies": {
"bootstrap": "^5.1.3",
"bootstrap4": "npm:bootstrap@^4.6.1",
"vue2": "npm:vue@^2.6.14",
"vue": "^3.2.36"
}
}
[/code]
みたいにすると、複数バージョン同居が可能です。
[/offtopic]
[/spoil]

で、フロントエンドフレームワークを使うと何が嬉しいかというと、役割分担の分離です。
使わなくてもできますが、使った方が圧倒的に楽ができます。

バックエンドはREST APIを取り扱うのが役割になります。
残りはフロントエンドになるのですが、フロントエンドは基本的にルーティング、API呼び出し、表示と入力の取り扱いが役割になります。
まぁ、フロントエンドが頑張っちゃってもよいのですが……。

データの取得がAPIアクセスになるということは、同じようなページであれば部分書き換えでよくなります。
たとえば、この[url=https://dixq.net/forum/viewforum.php?f=3]掲示板のトップページ[/url]にトピックリストがありますが、次のページへ遷移する場合、SPAでは「次のページのデータをAPI経由で取得して、トピック一覧部分とURLを書き換える」ことで対処します。
[code=typescript]
// Vue.js前提
const atClick = async (page: number) : void => {
const fetched : Topic[] = await fetch(`/forum/3/topics?from=${page * 100}`); // ページデータをAPI経由で取得
topics.value = fetched; // データを書き換える
// 本来ならば、Vue-Routerで次ページへの遷移をpushして、props.pageをwatchして上記コードを実行するようにするところですが。
}
[/code]
こうすると、PHPで1から表示するよりも表示がだいぶはやくなり、ユーザー体験が良くなります。

Vueに慣れると、PHPですべてを表示、が面倒になるんですよね……。


なお、[url=https://github.com/wise9/enchant.js]enchant.js[/url]は[url=https://github.com/wise9/enchant.js/commit/c6c364871429d70c275e022f27ae83c8077127da]最後にリポジトリへpushされたCommit[/url]のCommit日付が7年前(2016-01-04)であり、事実上開発が終了しているプロジェクトです。
現在では標準的な、npmやTypeScriptの支援を受けられるという点でも、[url=https://github.com/photonstorm/phaser]Phaser[/url]などの生きているライブラリを使った方がよいかもしれません。

>>あたっしゅさん
Ajax は、なかなか個人サイトでは使用する機会がないかもしれませんね。
必要か？と言われると、難しいところなので、また別の機会に勉強します。

>>調べたこと
Vue React あたりが、需要があるようなので、そこらへんを
見ていきたいと思います。
どんなサイトが作れるのかわかりませんが。

ああっ！小遣いがなくなる(´；ω；`)ｳｩｩ

[香車]東上☆あらし☆海美「
とりあえず、レス。

＞ １．JavaScriptでの質問ですが、JavaScriptは主にどういった分野、方向で使われるのでしょうか？

今の世代の使い方としては Google Map 等みみ。『Ajax』(エージャックス)で検索すると、いいみみ。

」

１．JavaScriptでの質問ですが、JavaScriptは主にどういった分野、方向で使われるのでしょうか？
基本はおさえたのですが、実際の利用しているケースまでは分からないので、質問しました。

PHPならDataBaseを主に扱いますが、JavaScriptでは、現場ではどのような処理が必要とされているのでしょうか？
ググってもなかなかでてこないのです。

２．enchant.js を使って、簡単なシューティングを作ろうと考えています。
JavaScriptのフレームワークは多くて、これをさわっておくといいとかありますか？
事情があってすぐには就職活動できませんが、時間があるときにやっておきたいのです。