ホームページ、当社も例にもれず今はほとんどの会社は持っていますし、場合によっては個人で持っている場合もあると思います。
今回は、普段皆さんがよく見るホームページはどんな感じで作られているのかをご紹介します。
という訳で、少し技術寄りの内容になりますが、簡単な Web サイトを作ってみようと思います。
使用する開発環境は次の通り
- VSCode
- npm
- Vite
- Vuetify3
とりあえずひな形を作ってみる
では早速・・・
まずは Node.js を、公式サイトからインストールしておきます。
そして、 Vuetify を使ったアプリを作りたいなーと、適当に念じながら
Vuetify の公式サイトへアクセスしてみると
npm create vuetify
このコマンドを叩けと書いてあるので従います。↓
![](https://staf.acesystems.co.jp/wp-content/uploads/2024/05/1.png)
適当なフォルダで VSCode を開いて
![](https://staf.acesystems.co.jp/wp-content/uploads/2024/06/2.png)
さっきのコマンドをターミナルでたたくと
![](https://staf.acesystems.co.jp/wp-content/uploads/2024/05/3.png)
進めて良いか聞かれるので、「もちろん!」と強く答えたあとに
![](https://staf.acesystems.co.jp/wp-content/uploads/2024/06/4.png)
![](https://staf.acesystems.co.jp/wp-content/uploads/2024/05/5.png)
![](https://staf.acesystems.co.jp/wp-content/uploads/2024/05/6.png)
![](https://staf.acesystems.co.jp/wp-content/uploads/2024/05/7.png)
簡単な質問にいくつか答えるだけで
![](https://staf.acesystems.co.jp/wp-content/uploads/2024/05/8.png)
叩いたコマンドが終わりました。
![](https://staf.acesystems.co.jp/wp-content/uploads/2024/06/9.png)
せっかく出来上がったので、作られたフォルダの中に入って実行コマンドを叩いて、
![](https://staf.acesystems.co.jp/wp-content/uploads/2024/05/11-1024x695.png)
Web ブラウザで「http://localhost:3000/」へアクセスすると、なんということでしょう!
イカした画面が表示されました!!
という訳で Web サイトという意味ではこれで完成ですが、ここで見えている画面はサンプル(ひな形)として用意されているものです。
せっかくなので会社のホームページっぽく、次回はこれにもろもろの機能を付けていきます。
ここで一旦解説・・・ (押したら開くよ)
Node.js とは?
→ JavaScript を Windows とかで動かすためのすごいやつ!
※もともと JavaScript は Edge や Chrome などの Web ブラウザでしか動かない
Vuetify とは?
→ おしゃんな Web 画面を作るためのすごいやつ!
npm create vuetify コマンドで何ができたの?
→ Vuetify を使ったサンプルアプリができました。
SPA (Single Page Application) とは?
→ Web 画面の種類の 1 つで、今回作ったものもこれです。
昔からある、リンクなどで画面が変わるたびにサーバーから画面の情報をすべて受け取る Web 画面に対し、情報が必要になったときに必要な情報だけをサーバーと受け渡しする Web 画面
Google マップとか… (場所移動しても画面のリフレッシュしてない。)
便利なものがたくさんあるおかげで、おしゃれなページをこんなにも簡単に作れてしまうんです。
当社 AceSystems でも Web アプリケーションを作るお仕事は多く、その中で我々が提供できる価値は、ここからどんどんとお客様のニーズに合った機能を追加していくことにあります。
← ここが難しいポイントですね。
とはいえ、シンプルな Web ページを作るのは簡単にできるので、ぜひ挑戦してみてください!