Nuxt.jsはモダンなWebアプリケーションを開発するための、 Vue.jsベースのフレームワークです。
そんなNuxt.jsですがWebアプリケーションはもちろん、静的なWebサイトを作成することも可能。
Nuxt.jsなら、フロントエンドに必要な骨組みが揃っており開発が高速化できるといったメリットがあります。
この記事ではNuxt.jsのサンプルアプリを静的ファイルに出力し、それをFirebase Hostingにホスティングするための手順を解説していきます。
これらに当てはまる方におすすめの記事となっています。これを読めばWebサイト構築を効率化することができますよ。
まずは下記コマンドでNuxt.jsのアプリを作成します。
yarn create nuxt-app nuxt-app-firebase
各フレームワークやLinterは必要になった時に自分で選んで入れたいので、
基本的にはNoneを選びます。
package managerはYarn、rendering modelはSSRを選択します。
アプリが作成できたら下記コマンドで開発用のサーバーを立ち上げます。
cd nuxt-app-firebase yarn run dev
以下のような画面が表示されればOKです。
Nuxt.jsの静的ファイル出力はデフォルトでdistディレクトリになっています。
Firebaseはpublicディレクトリがホスティングされるので、
nuxt.config.jsを以下のように修正して出力先を変更します。
build: {
...
},
generate: {
dir: 'public'
} ディレクトリが変更できたら下記コマンドで静的ファイルを出力します。
yarn run generate
publicフォルダに以下のファイルが出力されていればOKです。
200.html README.md _nuxt/ favicon.ico index.html
次にホスティング先のFirebaseの設定を進めていきます。
まずはFirebaseのサイトでプロジェクトを作成します。
今回は本運用はしないのでGoogle Analyticsは無効にします。
次にFirebaseをコンソールから操作するためのツールを下記コマンドでインストールします。
npm install -g firebase-tools
インストールが完了したら下記コマンドでFirebaseにログインします。
firebase login
認証画面が自動で立ち上がるのでログインします。
ログインが完了すると以下のような画面が表示されます。
次に下記コマンドでFirebaseの初期化を行います。
firebase init
今回はWebサイトのホスティングに利用するのでHostingを選択します。
選択はエンターではなくスペースキーなので注意してください。
先ほど作成したプロジェクトを使いたいのでexisting projectを選択します。
先ほど作成したプロジェクトを選択します。
publicフォルダはそのままでOKです。
今回はSSRモードにしているためNoを選択します。
Nuxt.jsで出力したindex.htmlと重複するためNoを選択します。
初期化が完了したら下記コマンドでFirebaseにデプロイします。
firebase deploy
下記のような画面が表示されればOKです。
先ほど表示されたHosting URLにアクセスします。
以下のような画面が表示されればOKです。
これでNuxt.jsで作成したWebサイトをFirebaseでホスティングできるようになりました！
Nuxt.jsでWebサイトを作ることによって、開発が効率的にスピーディーに行えるようになります。
dehaでは、５年ほど前から、ベトナムオフショア開発を行っています。
ベトナムオフショアに興味がある方や、本日紹介したNuxt.jsのようなフレームワークでのWeb開発を行いたい方は、ぜひお気軽にお問い合わせください。
AIや生成AIの導入が急速に進んでいます。しかし、「AIを導入した企業が、そのまま企業価値を高められているか」という問いに対しては、まだ明確に「Yes」とはいえません。 独立行政法人情報処理推進機構（IPA）が2026年7月に公表した「DX動向2026」では、日本企業のAI導入・試験利用が58.0％に達したことが明らかになりました。AI活用そのものは、もはや一部の先進企業だけの取り組みではありません。 一方で、AIによって得られた成果を見ると、「業務が効率化したり迅速化した」が91.6％であるのに対し、「顧客満足度が向上した」は4.5％、「売上や利益が向上した」はわずか3.9％にとどまっています。 つまり、AI導入は進んでいるものの、その成果はまだ「社内の効率化」という内向きの領域に集中しているのです。 この状況を変えるために重要になるのが、AIツールを増やすことだけではありません。AIが企業の中核業務や顧客接点、データ活用まで入り込めるよう、既存システムそのものを見直すことが必要です。 この記事では「DX動向2026」のデータを読み解きながら、AI活用を企業価値創出につなげるために、なぜレガシーマイグレーションが重要なのか、そしてどのシステムから刷新すべきなのかを解説します。 レガシーマイグレーションについて知りたい方 AIを活用したい方 これらに当てはまる方におすすめの記事となっています。これを読めばレガシーマイグレーションの特徴が丸わかりですよ。 (more…)
「レガシーシステムを刷新したいが、コストや移行リスクが不安」「生成AIをシステム刷新に活用したい」と考える企業が増えています。 2026年は、生成AIを活用して既存システムの解析やコード変換、ドキュメント作成、テストなどを効率化する「モダナイゼーション×AI」が注目されています。 この記事では、AIを活用したモダナイゼーションのメリットや成功のための戦略、失敗を防ぐための注意点について詳しく解説します。 モダナイゼーションが気になる方 モダナイゼーションとAIをどう組み合わせればいいのかわからない方 業務にAIを活用していきたい方 これらに当てはまる方におすすめの記事となっています。これを読めばモダナイゼーションとAIの活用方法やポイントが丸わかりですよ。 (more…)
多くの企業では、長年にわたって利用してきた基幹システムや業務システムが、現在も重要な役割を担っています。 一方で、こうした「レガシーシステム」は、技術の老朽化や複雑化、保守人材の不足、外部サービスとの連携の難しさなど、さまざまな課題を抱えています。 こうした状況を受け、企業ではシステムを単純に新しくする「リプレース」だけではなく、クラウドやAPI、データ分析基盤などを活用して、IT環境そのものを現代のビジネスに適した形へ変える「モダナイゼーション」が進んでいます。 本日はそんなモダナイゼーションについて、具体的な手順や活用事例を踏まえて解説していきます。 モダナイゼーションが気になる方 社内のIT人材が不足している方 レガシーシステムの刷新をしたい方 これらに当てはまる方におすすめの記事となっています。これを読めばモダナイゼーションについてわかるのはもちろん、レガシーシステム刷新の具体的な手順まで丸わかりですよ。 (more…)
〜IPA『DX動向2026』から読み解く、日本企業のリアルな課題と本質〜 はじめに：69ページの報告書が突きつける問い 独立行政法人情報処理推進機構（IPA）が発表した最新の調査資料『DX動向2026』（有効回答数：1,799社）。本レポートを精読する中で、最も印象的かつ示唆に富んでいたのは、次の現実でした。 「コストを削減することは、新たな売上を生み出すことよりもはるかに容易である」 日本においてDXへの取り組み率は75.7%に達し、過去数年間にわたり高水準で推移しています。もはや「DXに取り組むべきか否か」という議論のフェーズは完全に過去のものとなりました。しかし、その取り組みの内実をデータで精査すると、多くの企業が直面している構造的な課題が浮かび上がってきます。 1. 「守りのDX」の成功と、「攻めのDX」の停滞 DXに取り組んでいる企業のうち、60.8%が「何らかの成果が出ている」と回答しています。しかし、その「成果」の内訳には顕著な偏りが見られます。 業務効率化・コスト削減の成果：70.9% 新規事業創出・売上拡大の成果：わずか17.9% ペーパーレス化や社内業務のデジタル化といった、既存プロセスの効率化（いわゆる「守りのDX」）は順調に進展しています。しかし、製品・サービスの変革やビジネスモデル自体の刷新といった、事業価値を拡張する「攻めのDX」で具体的な成果を上げている企業は2割にも満たないのが現状です。 効率化によるコスト削減はDXの重要な足がかりですが、それ自体がゴールではありません。真の変革は、効率化によって生み出された余力を「新たな事業機会の創出」へ再投資することで初めて達成されます。 2. 投資拡大の裏にある「投資対効果（ROI）の不可視性」 レポートが示すもう一つの注目すべきデータは、投資と効果測定のギャップです。…
企業の業務を支える基幹システムや業務システムは、長年にわたって使い続けることで、企業独自の業務ノウハウが蓄積される一方、システムの老朽化や複雑化が進みやすくなります。 「古いシステムを刷新したいが、業務を止めることはできない」「既存システムに詳しい担当者が退職し、保守が難しくなっている」「DXを推進したいものの、既存システムが足かせになっている」といった課題を抱える企業も少なくありません。 こうした問題を解決するための重要な取り組みが「モダナイゼーション」です。 モダナイゼーションは、単純に古いシステムを新しいものへ置き換えるだけではありません。既存システムが持つデータや業務ロジック、ノウハウを活かしながら、現在のビジネス環境に適したIT基盤へと刷新していく考え方です。 この記事では、モダナイゼーションの基本的な意味からDXとの違い、代表的な刷新手法、AIを活用した進め方、実施手順、成功させるためのポイントまで詳しく解説します。 モダナイゼーションについて知りたい方 古いシステムを刷新したい方 DX化をすすめたい方 これらに当てはまる方におすすめの記事となっています。これを読めばモダナイゼーションについてわかるのはもちろん、DX化との違いまで丸わかりですよ。 (more…)
「AIを業務に取り入れたいけれど、導入コストが気になる」「どのようなAIツールを選べばよいのかわからない」「補助金を使ってDXを進めたい」――このような悩みを抱える中小企業・小規模事業者は少なくありません。 そこで活用を検討したいのが、2026年度の「デジタル化・AI導入補助金」です。 従来の「IT導入補助金」から名称が変更され、2026年度はAI活用を含むデジタル化をより意識した制度となっています。 業務効率化や生産性向上につながるITツールの導入費用を支援することで、中小企業のDXを後押しする制度です。 この記事では、2026年度のデジタル化・AI導入補助金について、制度の概要から申請スケジュール、AI活用の具体例、申請時の注意点までをわかりやすく解説します。 AI導入を検討している方 IT導入補助金を申請したい方 これらに当てはまる方におすすめの記事となっています。これを読めば2026年度の「デジタル化・AI導入補助金」の詳細がわかるだけでなく、具体的な申請方法も丸わかりですよ。 (more…)