JavaScriptでの質問

[dic]

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

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

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

[あたっしゅ]

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

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

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

」

[dic]

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

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

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

[YuO]

今どきのWebサイト作成は何らかのフロントエンドフレームワークを使うのが普通です。
一般的にはReactやVueですね。
フロントエンドフレームワークは、基本的にJavaScriptで出来ています。

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

いまのところ、私がやっている開発案件はVue + TypeScriptですね。
ちょっとVue 2.0 + @vue/composition-apiという時代遅れ環境もあったりしますが。

► スポイラーを表示

オフトピック

そして、Vue 2.0実行時コンパイルしているページ / Vue 3.0 + Vue-Router + TypeScript + WebPackでSPAもどきをしているページの混在環境というカオスもあったり。
Vue 2と3、Bootstrap 4と5がpackage.jsonに指定してあって、古いバージョンはnode_modulesをlibにコピー、みたいな運用もしています。
マネすることはお勧めしません。

コード:

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

みたいにすると、複数バージョン同居が可能です。

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

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

データの取得がAPIアクセスになるということは、同じようなページであれば部分書き換えでよくなります。
たとえば、この掲示板のトップページにトピックリストがありますが、次のページへ遷移する場合、SPAでは「次のページのデータをAPI経由で取得して、トピック一覧部分とURLを書き換える」ことで対処します。

コード:

// 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して上記コードを実行するようにするところですが。
}

こうすると、PHPで1から表示するよりも表示がだいぶはやくなり、ユーザー体験が良くなります。

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


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

[dic]

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

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