この記事の背景
子供の頃にバニラサイトを始めました。
最近GoogleFirebaseを知りSSGやVercelに辿り着きました。
そんな人でもコネコネいじってたら静的サイト完成できたので記事にしました。
作り方は伝えられてると思いますが、都度ググってください。
この記事を見て一人でも多くチャレンジしてくれると嬉しいです。
この記事で得られる経験
- ググる力が付く
- コピペ力が上る
- 公式ドキュメントを読む力が付く
- 環境構築に慣れる
- 大手企業が使っているサイトと同じ技術でサイトが作れる
制作に使う言語
- HTML
- CSS
- JavaScriptフレームワーク
まずはじめに、
今回使う静的サイトであるSSGを使う条件が揃う場面。
- ページの数が少ないサイト
- アクセス数が多いサイト
- 動的なコンテンツを含みにくいサイト
- 更新が少なくてもいいサイト
この記事のターゲーット
- HTML CSSがわかる人(これから習得したい人)
- 静的サイトに興味がある人
- JavaScriptを勉強したい人
導入
Visual Studio Codeのインストール
Gitのインストール
想定するSSGサイトの簡易デモ版の用意(HTML CSSファイル)
プロジェクトのインストール
SSGはJavaScriptのReactかVueのフレームワークのNext.jsかNuxt.jsを使って製作します。
Node.jsのインストール (これがないと何もできません)
VueかReact のインストール(なくても動くけど教材として入れとくべき)
NuxtかNext のインストール (プロジェクトフォルダ名、後から直リネーム大丈夫です)
コーディング
Nuxt.jsもしくはNext.jsにデモで作っていたコードを各所コピペしていきます。
コンポーネントを細かく分けることで管理しやすくしましょう。
Footer/Header/Navbar/TOP/Bottom/Picture/Metatxt/みたいな感じで各部品を作っていきます。
実際にホストする
サーバーはVercelかNetlifyです。
GitHubに毎度お馴染みリポジトリをしてcommitしてpushします。
あとはGitHubと連携してポチポチしたら終わります。
と、そこまで簡単に行くわけなくて、大体エラーを吐きます。
結構ここで時間かかる人多いと思うんですが、エラーの中身とファイルを見比べて修正してください。
ワンポイントアドバイス
コツは一つ一つのファイルの役割を明確にして、すべてなるべく少ない記述で構成することです。躓いた場合、ReactやVueの基本的なコンポーネントの操作方法を見るといいです。
また公式ドキュメントに説明書すべて書いてあるので読みましょう。(Reactは英語ですが翻訳で違和感ないです)
おわり
このSSGを作るだけなら特段プログラミング的なコーディング技術は必要としないので、最低限HTMLを触った人なら構築できます。
さらにレスポンシブ対応やSPAアプリケーションの知識もあれば実際に仕事でも使えるんではないでしょうか。
ホストできるサーバーがVercelみたいなところで限定的なのは案件需要的に致命的ですがね。
わりと今回の記事は現代のフロントエンドのチュートリアル的な位置づけだと思います。
※デザインのセンスがショボいと結局出来上がるモノもショボいですｗ
VueのSSGとReactのSSGの違い
Next.jsはモバイルでのhoverの挙動が若干あやしい。
Nuxt.jsは後発なだけあって速度もネクストの2倍ほど速く普通に優秀かなと思います。
試したのですがどっちを使ってもまったく同じものを作れます、私個人的に管理しやすいのはNext.jsですが、(TypeScript的に)
小さいプロジェクトなら実行速度の速いNuxt一択になると思います。
ちょっと小ネタ、
ReactはHTML記述を引数として関数に値を渡すことでコンポーネントやページとして認識されます。
つまりファイルの根本がJavaScriptファイルであることが窺えます。
一方でVueはimport/exportをscriptタグ内に記述してHTMLは上にベタ書きするタイプで、これようするにHTMLベースのファイルであるということです。
1ファイル丸ごとJavaScriptのReactは部分的にJsを採用してるVueより重たいっていうカラクリなんですね。
その一方で顕在化している弊害としてReactのjsxはCSSとの相性がよくないイメージです。おそらく引数としてHTML部分が値として関数に渡されてるため挙動が変わるのでしょう。
ただ一つReactのメリットはTypeScriptとの親和性がとてもよいです。
Vue is HTML in script
React is JavaScript in Html
モバイルの挙動的な意味で私はVueのNuxtを使います。新しいですしね。
私のgitにLayoutの書き方やheadをコンポーネントで管理するやり方をまとめてます。
gitだけ難しかったので操作方法を載せておきます。
GitHubのリポジトリへ登録する操作方法
リモートの初期化
git remote rm origin
リモートリポジトリへの登録
git remote add origin https://github.com/ユーザー名/リポジトリ名.git
コミット
git add .
git commit -m “first commit”
プッシュ(お疲れさまでした)
git push -u origin main
pushから進めない場合SSH Keyを生成して登録をしてください。
GitHubにssh接続するために鍵の登録が必要になります。その手順をまとめてみます。はじめての人は手順通りに進め…
できたんすけどデザインがショボいっすｗ