このリポジトリはWebチームが主に案件のWebサイト制作をするために作られました。いわゆるJamStackな構成であり、近年のWeb開発の潮流に乗ったモダンな構成になっています。このリポジトリを使って開発することで、最先端のWeb開発の経験を積むことができます。
public
├── assets
src
├── components
│ ├── Footer.astro
│ └── Header.astro
├── env.d.ts
├── layouts
│ └── Layout.astro
├── lib
│ └── microcms.ts
├── pages
│ └── index.astro
├── scss
│ ├── _variables.scss
│ └── styles.scs
astro.config.mjs
│
package.json
│
package-lock.json
│
tailwind.config.mjs
│
tsconfig.json
ディレクトリ構成は以上のようになっています。/src/pages/index.astroがサイトのTOPページに相当します。
フレームワークはAstro.js、CSSフレームワークはTailwind CSSを使用しています。TypeScriptを使用できるようにしています。CMSにはmicroCMSを使う想定です。
※libフォルダにmicroCMSの設定ファイルであるmicrocms.tsを作っていますが、まだ何も書いていないので、セットアップは各自で行ってください。(参考資料)
※この作業はプロジェクトごとに一回だけで大丈夫です。コーダーはやらなくていいです。
- Download ZIPをクリックしてZIPファイルをダウンロードする
- ダウンロードしたZIPファイルを解凍し、フォルダ名を任意の名前に変更する。
- ダウンロードしたフォルダはGitリポジトリになっていないので、ローカルでGitリポジトリにする。(手順詳細)
【案件の場合】リモートに作るリポジトリは先方のOrganizationの中に作り、そのリポジトリをwinc1980のOrganizationにフォークして開発すること。以下参考資料。
VSCodeでフォルダを開きターミナルで、npm installを実行し、node_modulesをインストールする。このコマンドを実行することで、package.jsonの記述をもとに必要なnode_modulesがインストールされ、AstroやTailwindが利用可能になる。package.jsonファイルにこのプロジェクトで使うパッケージが記述されているので、見てみると良い。
Astroで開発する際はローカルサーバーを立ち上げて実行画面を見ながら作業する。
VSCodeでフォルダを開きターミナルで、npm run devを実行し、ブラウザのURLバーでlocalhost:4321にアクセスすると実行画面が開ける。まだ何も書かれていないので、最初は空白のはずである。
/src/pages/index.astroがTOPページに相当するファイルです。
下層ページを作るときは/src/pages/配下に新しいディレクトリを作り、その中にindex.astroファイルを作って書くようにしてください。以下の例はaboutページを作る際の例です。
├── pages
│ └── index.astro
│ └── about
│ └── index.astro
SASSを使えるようにしています。/src/scss/styles.scssに基本的に書くようにしてください。SASSはCSSのように書くことができますが、SASSの記法を覚えるとより効率的に書けるので、使ったことがない人もこのドキュメントを見て、活用してみてください。
- コーディングの際は、Webチームのコーディングルールに従うようにしてください。PMはコーダーにルールを遵守させることを徹底してください。コーディングルールを守ることでソースコードの品質を保つことができます。
- Astroの記法については公式ドキュメントを参照してください。Astroの公式ドキュメントは非常にわかりやすいです。