TresJS - Three.js を Vue components として利用する
TresJS とは # TresJS は Vue.js のアプリで Three.js を用いたシーンのレンダリングを行うためのライブラリです。Vue の構文で宣言的にシーンを記述できます。 TresJS | The solution for 3D on VueJS Three.js は ブラウザで手軽に 3D グラフィックスを扱える優れたライブラリです。シーンのオブジェクトグラフを構築しそのオブジェクトグラフをレンダラーに渡して描画するという命令型のプログラミングスタイルです...
記事を読むVue 3 と D3.js で作る可視化アプリ
筆者は Scrapbox を愛用しており、Scrapbox プロジェクトのページ間のグラフ構造を可視化するためのツールを作ったりしています。 GitHub - mamezou-tech/sbgraph: Fetch Scrapbox project data and visualize activities. このツールは Graphviz の dot 形式ファイルを出力するので手軽にグラフ構造の可視化が可能です[1]...
記事を読むNuxt3で導入されたハイブリッドレンダリングとNuxt版ISG/ISRを試してみる
これは、豆蔵デベロッパーサイトアドベントカレンダー2022第18日目の記事です。 今年春にRCバージョンとなったNuxt3は、先月(2022-11-16)ようやく安定バージョンとなりました。 Announcing Nuxt 3.0 stable Nuxt3の目玉機能の1つとしてハイブリッドレンダリングがあります。 以下公式ドキュメントからの引用と機械翻訳結果です...
記事を読むNuxt3入門(第9回) - Nuxt3アプリケーションをサーバーレス環境にデプロイする
前回はNuxt3のステート管理について見てきました。 連載最後の今回は、サンプルアプリとして作成したNuxtアプリケーションをAWS環境にデプロイしてみます。 デプロイするアプリケーションは、以下の回で作成した仮想のブログシステムです...
記事を読むNuxt3入門(第8回) - Nuxt3のuseStateでコンポーネント間で状態を共有する
前回はNuxt3でプラグイン、ミドルウェアの導入について見てきました。 今回はNuxt3が提供する状態管理について見ていきます。 Nuxt2では、コンポーネント間で状態を共有するには、Nuxt2にバンドルされているVuexを使うのが一般的でした。 Nuxt3ではVuexはNuxt本体に含まれていません。 代わりにNuxt3では新たにuseState Composableが提供されるようになりました[1]...
記事を読むNuxt3入門(第7回) - Nuxt3のプラグイン・ミドルウェアを使う
前回はNuxt3のエラーハンドリングについて見てきました。 今回はプラグインとミドルウェアを見ていきます。 両方とも必須という訳ではありませんが、うまく使えばアプリケーション開発を効率化できます。 プラグインはNuxtアプリケーション初期化時に実行してくれるもので、アプリケーション全体で利用するものはここでまとめて定義しておきます...
記事を読むNuxt3入門(第6回) - アプリケーションで発生するエラーに対応する
前回はNuxt3の設定情報管理について見てきました。 今回のテーマは実用的なアプリケーションに不可欠なエラーハンドリングです。 Nuxtはクライアントサイドだけでなく、サーバーサイドレンダリングもサポートするハイブリッドフレームワークです。 このため、エラー発生箇所に対応した適切なハンドリングが求められます...
記事を読むNuxt3入門(第5回) - アプリケーションの設定情報を管理する
前回はNuxt3のルーティング機能について見てきました。 今回はNuxt3が提供する設定情報の管理機能を見ていきます。 Nuxt3では、アプリケーションの設定はRuntime Config(またはApp Config)を通して管理され、グローバルに参照できます。 とはいえ、パスワード等の機密性の高い設定は、ブラウザ上では参照不可とするべきです...
記事を読むNuxt3入門(第4回) - Nuxtのルーティングを理解する
前回はサンプルアプリのブログサイトがAPI経由でブログ情報を取得できるようにしました。 今回は、Nuxtアプリケーションでページ遷移に使うルーティングについて見ていきます。 Nuxt2でも同様ですが、Nuxt開発ではルーティング定義を個別に作成する必要はありません[1]。Nuxtではファイルシステムベースのルーティングを採用しており、pagesディレクトリ配下の構造でルートマッピング決まります...
記事を読むNuxt3入門(第3回) - ユニバーサルフェッチでデータを取得する
前回は簡単なブログサイトを作成し、Nuxtの基本機能や開発の流れを見てきました。 ただ、ここで作成したサンプルアプリのブログサイトは、表示するブログデータは固定値で保持していました。新しいブログを追加した場合は別途ビルドする必要があります。 実際のブログシステムでは、リアルタイムで最新ブログを取得したいところです。また、SEOや初期ロード時間を考慮して、クライアントサイドではなくサーバーサイドでレンダリングした意味のあるHTMLで取得できるようにしたいという要求もあるでしょう...
記事を読む
