Nuxt.jsで大規模なサイトをSPAで作って大丈夫？→やめた方がいいと思う
こんにちは、のすけです。
Nuxt.jsチップスのお時間です。
Nuxt.jsはSPA・Universalモード(SSR&SPA)を選択できるのだけど
SPA(Single Page Application)
シングルページアプリケーション
全てのページ１つのHTML上に展開し、ページ遷移はクライアントサイドのJSでガシガシ書き換えることで
夢のような高速なサイト作成ができる！！
SSR(Server Side Rendering)
サーバーサイドレンダリング( Universalモード)
Nuxt.jsはSSRとか行っておきながら、どちらもいいとこ取りする(どっちも実装しなくてはいけなくて辛い！？)
Universalモードというのがあります。
HTMLをサーバーサイドでレンダリングするので、SEOに強いと言われている(詳細は不明。もはやGoogleが追いついている気もするので気にする必要もないかも)
従来のサーバーサイドコーディング＆Vueを合わせた実装になり、かなり面倒。
サーバーサイドでHTMLをレンダリングするので貧弱なWebサーバーや回線だとSPAほどの速度は出ないが
Nuxt-linkを踏む場合のみ高速で画面遷移できる。
問い
「Nuxt.jsで大規模なサイトをSPAで作って大丈夫？」
最初よく分からなくて、まぁSPAでいいしょ！と思って作っていたのですが、、、
SPAで１年間運用し、その間に機能拡張をしまくって盛り盛りになったプロジェクトは
どうなったのでしょうか？？
Nuxt.js環境でGSAPプラグインを登録する方法
Nuxt.jsにてGSAPのプラグインを使おうとする場合
Docs - GreenSock
このページの通りにやっても
Unexpected token {
とか色々出て動きません。
色々調べた結果、このようにgsap/dist/のパス指定してあげると動きます！
import { gsap } from "gsap";
import { MotionPathPlugin } from "gsap/dist/MotionPathPlugin";
gsap.registerPlugin(MotionPathPlugin);
Nuxt.js のエラー 「Failed to execute 'appendChild' on 'Node': This node type does not support this method」
nuxt-linkで遷移した場合には問題ないのですが
リロードやURLを直接叩いた場合に以下のようなエラーが発生します
DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
at Object.appendChild原因としては、クライアントサイドとサーバーサイドのDOMに差異が発生しているためのようです。
特にv-ifを利用するとほぼ発生するように思います
その場合、v-ifの前後や、場合によってはコード全てを
<client-only></client-only>
で囲えば発生しなくなります
ご察しの通り、これで囲った部分は、クライアントサイドレンダリングになりますので
その辺りはご注意ください
参考：
ティラノスクリプトにfirebaseを連携させて自在に操る
前回、シナリオゲームが手軽に作れるティラノスクリプトに
強引にVue.jsを入れることをやりましたが。
次は、、、Firebaseを入れたい！！
やはり本格的なWebアプリケーションを作るためにはデータベースとの連携は必須。
そしてFirebaseのFirestoreならとても扱いやすい。
もし、Firebaseとティラノスクリプトが掛け算できるなら
どんなものでも作れそうですよね。
それではいきましょう！！
Firebaseを初期化する
例によって強引にindex.htmlにscriptタグを埋め込みます。
firestoreとauthを使いたかったのでそれも入れています。
first.ksなどで初期化します。
;Firebase [iscript] console.log("Init firebase"); // Initialize Cloud Firestore through Firebase firebase.initializeApp({ apiKey: 'xxxxx', authDomain: 'yyyyy.firebaseapp.com', projectId: 'zzzzzzz' }); f.db = firebase.firestore(); f.auth = firebase.auth(); [endscript]
初期設定をして
ティラノスクリプトのゲーム変数(f)にdbとauthを登録しておきます。
呼び出す！
こんな感じで、例えばscene1.ksのiscriptタグの中で
firebase authenticationのユーザログイン情報を取得したり。
;Firebase [iscript] f.auth.onAuthStateChanged(user => { if (user) { f.displayName = user.displayName; f.email = user.email; f.uid = user.uid; } }); [endscript]
こんな感じで、firestoreの任意のコレクションからデータを取ったりできます
;Firebase [iscript] (async () => { let query = await f.db.collection("contact") .orderBy("created","asc").limit(20); const snapShot = await query.get(); const datas = snapShot.docs.map(doc => { return doc.data(); }); console.log(datas); })(); [endscript] f.msg の内容 : [emb exp="f.msg"][p]
この例では、contactコレクションから20個データを取って来て
メッセージに１つ目の内容を表示しています
ティラノスクリプトに強引にVueを入れてみる
こんにちは、ノベルゲームをHTML5を用いて気軽に作成できる
ティラノスクリプトをご存知でしょうか？
最近、ノベルゲーム的な表現がしたくて触っているのですが。
使われているJsライブラリがjQueryになっていて、やはりVueの中で実行したい！
という思いが強くなって来たので、強引にVueを入れてみました。
強引にVueを入れる方法
やり方はとてもシンプルです。
index.htmlにVueのタグを入れるだけです
cliを入れたり、Nuxt.js上で実行したかったのですが、ティラノスクリプトはかなり複数のファイルとリンクしており
Vue化するには色々と問題が多かったため、シンプルにタグを入れる方法でいきます。
こんな感じで、index.htmlの上の方でcdn版のvueを読み込みます。
そして、bodyタグの下の方でvue用のdivを定義して。
あとはcssでposition:absoluteとかでレイヤー化しておきます。
次に、Vueをインスタンス化する必要がありますが。
やり方としては、ティラノスクリプトはJSを実行できる
[iscript]タグを利用します。
例えば,最初に実行されるfirst.ksや、シナリオ読み込み時に必ず実行されるmake.ksに
次のように書きます
結果
こんな感じで、Hello Vue!!が出てくる
Vueを操ってみる
Vueを操るには[iscript]タグを利用していきます。
先ほどの部分を少し改変します。
first.ksでnew Vueしたインスタンスをティラノスクリプトのゲーム変数に格納します
;Vue読み込み [iscript] var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) // システム変数にVueを追加 f.vue = app; [endscript]
そうすると、例えばscene1.ksなどでvueインスタンスを呼び出すことができるので
こんな感じでmessage変数にアクセスできるはず！
[iscript] f.vue.message = "こんにちは"; [endscript]
・・・
・・・
・・・
変わった！！
技術ポートフォリオ
なんとなく自分の技術ポートフォリオをまとめてみました
重点科目はJS系、その他の言語は重点項目ではないので一旦排除しています。
- Lv15までは守
- Lv100までは破
- Lv100以上は離の領域
総合力: Lv50 (システム開発歴10年ほど)
- Javascript：Lv35
- Nuxt.js : Lv10
- Vue.js：Lv15
- Firebase総合力：Lv5
- Firebase FireStore：Lv15
- Firebase Authentication：Lv10
- Firebase Storage：Lv5
- Firebase Functions：Lv10
- Pixi.js,Three.js,babylon.js：Lv5~Lv10
- システム開発のチーム連携力 Lv5
- サーバー構築 Lv20
- システム設計 Lv35
守：ツールを十分に理解するフェーズ
【テーマ】通常の利用方法の範囲で忠実に実行する。2年くらいの利用実績。
課題
・Nuxt.js、Vue.jsのレベルを15まであげる
・Firebaseの総合力をレベルを15まで
破：基本理解が一定レベルを超え、ツールの垣根超えて縦横無尽に利用できるフェーズ
【テーマ】
ツールではなく根源的な法則の理解(基本の積み重ね)
・ほぼ入り口にはいっている。様々なライブラリを取り込み組み合わせて利用できるようになって来た
現在レベル50
→外部のJSライブラリをどんどん取り入れ、Lv15まで理解し、その後複合させて独自のシステムに昇華させるフェーズ
勉強: 破レベルの先輩コードに触れ学ぶ！
TODO:
ティラノスクリプトのソースコードを読む
Pixi.jsのソースコードを読む
Three.jsのソースコードを読む
普段使ってるOSSで不満に思ったことを書き留めておく
２・６・２
『自己満曲線』に入ってないか定期的にチェックする。
・リリース
→体感としてLv70くらいを目指していた。
・フォーカス
→Lv1000を目指す事。
