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開発を行いたい方は、ぜひお気軽にお問い合わせください。
オフショア開発は、かつては「開発コストを下げるための手段」として利用されるケースが多く見られました。 国内エンジニアの人件費が高騰する中、海外のエンジニアリソースを活用することでコスト削減を実現するというシンプルな目的が中心だったのです。 しかし近年では、オフショア開発の位置づけは大きく変化しています。 この記事ではそんなオフショア開発の変化に着目し、オフショア開発のコストと品質のベストバランスについて紐解きます。 オフショア開発に興味がある方 オフショア拠点をお探しの方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばオフショア開発のコストと品質について、どんなバランスが良いのかがわかるのはもちろん、安定したオフショア拠点が丸わかりですよ。 オフショア開発の現在地：コスト削減だけの時代は終わった 現在のオフショア開発は、単なるコスト削減ではなく「開発リソースの確保」や「開発スピードの向上」「グローバル開発体制の構築」など、より戦略的な目的で導入されるケースが増えています。 IT人材不足が深刻化する日本において、国内だけでエンジニアを確保することが難しくなっているため、海外人材の活用は企業にとって重要な選択肢となっています。 特に中小企業の間では、オフショア開発の活用が再び拡大しています。かつては大規模なシステム開発案件を中心に利用される傾向がありましたが、近年では中規模のプロジェクトやスモールスタート型の導入が増えています。 まずは小さな開発チームからスタートし、プロジェクトの進行に合わせてチームを拡張するという柔軟な運用が主流になりつつあります。 また、開発案件の内容も変化しています。業務系Webシステム開発は依然として主流ですが、近年はAI関連開発や高度な技術領域の案件も増えており、オフショア開発の技術レベルは着実に向上しています。 単純なコーディング作業だけでなく、設計や高度な開発工程を担うケースも珍しくなくなっています。…
近年、IT開発の現場では「オフショア開発のコストが上昇している」という声が多く聞かれるようになりました。 かつてオフショア開発は「低コストで開発できる手段」として広く活用されてきましたが、現在ではその前提が変化しつつあります。 為替環境の変化、各国の人件費上昇、グローバル市場の競争激化などにより、オフショア開発の価格構造は大きく変わり始めています。 一方で、日本国内ではエンジニア不足が深刻化しており、企業は開発リソースを確保するために海外人材の活用を続けざるを得ない状況にあります。 つまり、オフショア開発は「安いから使う」ものから、「必要だから使う」ものへと役割が変化しているのです。 この記事では、オフショア開発の最新動向をもとに、各国のコスト動向、企業の発注傾向、案件内容の変化、契約形態の変化、そして今後の展望について詳しく解説します。 オフショア開発を検討している方 開発効率を上げたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばオフショア開発のコスト面について最新の情報がわかるのはもちろん、今後の展望もわかりますよ。 (more…)
不動産業界は、これまで「対面営業」「紙契約」「属人的な価格交渉」といったアナログな手法が中心でした。 しかし近年、デジタル技術の進化と顧客行動の変化により、業界全体でDX（デジタルトランスフォーメーション）が加速しています。 この記事ではそんな不動産業界のDX化において、注目されている「オークション形式」についてどんな特徴があるのかや、システムを選定する際のポイントについて見ていきたいと思います。 DX化をすすめたい企業の方 不動産業界の方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば不動産業界におけるオークション形式のポイントや注意点が丸わかりですよ。 不動産DXが求められる背景とオークションモデルの可能性 国土交通省の電子契約解禁やオンライン重要事項説明の普及により、売買・賃貸のプロセスは大きく変わりました。さらに、ポータルサイト依存型の集客モデルから脱却し、より収益性の高い販売手法を模索する動きが強まっています。 そこで注目されているのが「オークション形式」です。 従来の不動産取引は「売主が価格を提示し、買主が交渉する」という相対交渉モデルが一般的でした。 しかし、オークションモデルでは市場原理をより明確に反映させることが可能です。需要が集中するエリアや希少物件では価格が自然に上昇し、売主にとっては最大利益を得られる可能性があります。 また、オークション形式は透明性の向上にも寄与します。 価格決定のプロセスが明確になり、「なぜこの価格になったのか」という説明責任を果たしやすくなります。 これはコンプライアンス強化が求められる現代において大きな利点です。…
2026年、AI活用は新たなフェーズへと突入します。これまでの「生成AIを使う」段階から、「AIエージェントが業務を遂行する」段階へと進化しています。 Google Cloudが発表したレポート『AI agent trends 2026』では、企業活動におけるAIの中心がAgentic AI（エージェント型AI）へ移行すると指摘しています。 AIエージェントとは、単に質問に答える存在ではありません。目標を理解し、計画を立て、複数のシステムを横断しながら実行まで行う「行動するAI」です。 この記事では、Googleの調査をもとに、2026年を形づくる5つのAIエージェントトレンドを詳しく解説します。 AIエージェントは何か知りたい方 業務効率を上げたい方 これらに当てはまる方におすすめの数となっています。これを読めばAIエージェントのトレンドがわかるのはもちろん、利用のポイントもわかりますよ。 すべての従業員にAIエージェントがつく時代（Agents for Every…
グローバル市場におけるITアウトソーシングでは、品質保証は単なる最終テスト工程ではありません。 品質は「工程の最後で確認するもの」ではなく、「開発の初期段階から設計され、統制されるべき経営基盤」です。 従来型のQAがリリース直前のテストに依存するのに対し、DEHA SOLUTIONSではTQA・PQA・SQAの3層構造により、技術・プロセス・サービス全体を横断的に管理しています。 これは単なる品質向上施策ではなく、リスクコントロールと持続的成長を実現するためのガバナンス設計です。 (more…)
システム開発プロジェクトにおいて、成功と失敗を分ける最大の要因は「PM（プロジェクトマネージャー）」の力量だと言っても過言ではありません。 技術力の高いエンジニアが揃っていても、要件が曖昧だったり、スケジュールが破綻したり、関係者間の認識がずれたりすれば、プロジェクトは簡単に炎上します。 特に近年は、アジャイル開発やハイブリッド型開発など手法の多様化、オフショア開発の増加、DX推進によるスピード要求の高まりなど、PMに求められる能力はますます高度化しています。 この記事では、そんなシステム開発におけるPMの役割を体系的に整理し、失敗や納期遅延を防ぐための実践的なポイントを徹底解説します。 システム開発をしたい方 システム開発を効率よく行いたい方 社内にIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばシステム開発におけるPMの役割がわかるのはもちろん、失敗しないためのポイントも丸わかりですよ。 PMとは何か？システム開発における本質的な役割 システム開発におけるPM（プロジェクトマネージャー）は、単なる進捗管理者ではありません。 PMの本質的な役割は、「プロジェクトを成功に導くための総責任者」であることです。 プロジェクトには必ず「QCD（品質・コスト・納期）」という制約があります。さらに、近年では「スコープ（範囲）」や「リスク」、「ステークホルダー満足度」も重要な要素です。 PMはこれらすべてを統合的に管理し、バランスを取りながら意思決定を行います。PMの主な責任領域は以下の通りです。 目的・ゴールの明確化 要件定義の統括…