{"id":16738107,"url":"https://github.com/dc7290/ejs-wepack-template","last_synced_at":"2025-04-05T06:24:25.488Z","repository":{"id":39000698,"uuid":"372885610","full_name":"dc7290/ejs-wepack-template","owner":"dc7290","description":"テンプレートエンジンにejsを採用したwebpackのスターターキットです。","archived":false,"fork":false,"pushed_at":"2023-01-07T08:05:59.000Z","size":2936,"stargazers_count":1,"open_issues_count":11,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-10T14:12:58.365Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dc7290.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-01T15:54:05.000Z","updated_at":"2022-05-11T13:36:23.000Z","dependencies_parsed_at":"2023-02-06T15:30:49.336Z","dependency_job_id":null,"html_url":"https://github.com/dc7290/ejs-wepack-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dc7290%2Fejs-wepack-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dc7290%2Fejs-wepack-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dc7290%2Fejs-wepack-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dc7290%2Fejs-wepack-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dc7290","download_url":"https://codeload.github.com/dc7290/ejs-wepack-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247296471,"owners_count":20915641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-13T00:29:16.568Z","updated_at":"2025-04-05T06:24:25.460Z","avatar_url":"https://github.com/dc7290.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ejs-wepack-template\n\nテンプレートエンジンに ejs を採用した\nwebpack のスターターキットです。\n\n## 目次\n\n- [特徴](#features)\n- [使い方](#usage)\n- [ディレクトリ構造](#directory)\n- [画像](#image)\n- [ejs ファイルでの注意点](#ejs-note)\n- [元から入っている ejs,scss,js ファイル](#files)\n\n## \u003ca name=\"features\"\u003e\u003c/a\u003e特徴\n\n- ejs, scss\n- ディレクトリ構造に基づいてルーティングを決定\n- 画像を自動で最適化\n- ESLint, Stylelint を設定済み\n- autoprefixer, babel でクロスブラウザ対応\n\n## \u003ca name=\"usage\"\u003e\u003c/a\u003e使い方\n\n### 開発\n\n1. このリポジトリをクローン、または zip ファイルでダウンロードして、ローカルで開いてください。\n\n2. 以下のコマンドを実行してください。\n\n```bash\nyarn # npm i\nyarn dev # npm run dev\n```\n\n自動でローカルサーバーが立ち上がるので、それぞれのファイルを編集して作業します。\n\n### 本番\n\nビルドするには次のコマンドを実行します。\n\n```bash\nyarn build # npm run build\n```\n\ndist ディレクトリに本番用のファイルが吐き出されます。\n\n## \u003ca name=\"directory\"\u003e\u003c/a\u003eディレクトリ構造\n\n### \u003ca name=\"pages\"\u003e\u003c/a\u003epages\n\nこのディレクトリにルーティングを再現します。\n\n例:\npages/index.ejs → /index.html\npages/about/index.ejs → /about/index.html\n\n動的ルートは[]でファイル名を囲って、\nejs ファイル内にどうルーティングするのかを設定します。\n\n`[userId].ejs`\n\n``` html\n\u003c%#\ndataFile: 'src/data/users.json' \u003c!-- 繰り返したいデータを記述したjsonファイルへのパス --\u003e\nparamsKey: 'id' \u003c!-- ルーティングに用いたいデータのkeyパラメータ --\u003e\n%\u003e\n```\n\n`users.json`\n\n```json\n[\n  {\n    \"id\": \"user01\",\n    \"name\": \"Andy\"\n  },\n  {\n    \"id\": \"user02\",\n    \"name\": \"Jon\"\n  }\n]\n```\n\npages/[userId].ejs → /user01/index.html, /user02/index.html, ....\n\n### public\n\n画像などの静的ファイルを提供できます。このフォルダのファイルは`/`に置かれて、次のように取得できます。\n\n```html\n\u003cimg src=\"/image.png\" /\u003e\n```\n\nこの時に`/`からパスを書いてください。\n`/`から始まるパスのみを静的ファイルへのアクセスとして扱っています。\n\n\u003cp style=\"font-size: 0.7em\"\u003e注)この方法で指定した画像ファイルは自動で最適化されません。\u003c/p\u003e\n\nそれ以外の自動で最適化したい画像ファイルの指定の仕方については[こちら](#image)を参照ください。\n\n### src\n\n`ejs`、`scss`、`js`ファイルや最適化したい画像ファイル、json ファイルなど、作業ファイルをおきます。\n\n## \u003ca name=\"image\"\u003e\u003c/a\u003e画像\n\n画像は自動で最適化されます。\n対応拡張子は `jpg, png, gif, svg` です。\n`jpg, png`に関しては、画像パスの後に`?webp`をつけることで、webp 画像に変換されます。\n\n```html\n\u003c!-- 通常の指定 --\u003e\n\u003cimg src=\"../src/images/image.png\" /\u003e\n\u003c!-- webpに変換 --\u003e\n\u003cimg src=\"../src/images/image.png?webp\" /\u003e\n\n\u003c!-- エイリアスを使った指定 ('~'を最初に書くことで、続く文字をエイリアスとして認識する)  \n以下は全て同じパス指定 --\u003e\n\u003c!-- '~': '/' --\u003e\n\u003cimg src=\"~~src/images/image.png\" /\u003e\n\u003c!-- 'src': '/src' --\u003e\n\u003cimg src=\"~src/images/image.png\" /\u003e\n\u003c!-- 'images': '/src/images' --\u003e\n\u003cimg src=\"~images/image.png\" /\u003e\n```\n\n## \u003ca name=\"ejs-note\"\u003e\u003c/a\u003eejs ファイルでの注意点\n\n- include()でのパスの指定\n\n```html\n\u003c%- include('/header') %\u003e\n\u003c!-- または --\u003e\n\u003c%- include('/header.ejs') %\u003e\n```\n\nこれで`src/components/header.ejs`という指定になります。  \n(ejs オプションの`root`に `src/components` を指定しているため)\n\n- 動的ルート\n\n[pages ディレクトリ](#pages)の記述の通り、ejs のコメントで\n\njson ファイルへのパスとルーティングのときの URL に使う値の key を設定します。\n\nそして自動的に json ファイル内の配列の 1 つが`data`オブジェクトで渡ってくるので、\n\n```html\n\u003ch1\u003e\u003c%= data.id %\u003e\u003c/h1\u003e\n```\n\n```json\n[\n  {\n    \"id\": \"user01\",\n    \"name\": \"Andy\"\n  },\n  {\n    \"id\": \"user02\",\n    \"name\": \"Jon\"\n  }\n]\n```\n\n`h1`には、\n/user01/index.html では`user01`が、\n/user02/index.html では`user02`が入ります。\n\n## \u003ca name=\"files\"\u003e\u003c/a\u003e元から入っている ejs,scss,js ファイル\n\nある程度汎用的な記述はすでに用意しているものがあるので、解説します。\n\n### EJS\n\n[`components/image.ejs`](blob/main/src/components/image.ejs)\n\n```html\n\u003cpicture\u003e\n  \u003csource \u003c% if (lazy) { % /\u003e\n  data-\u003c% } %\u003esrcset=\"\u003c%= src + '?webp' %\u003e\" type=\"image/webp\" /\u003e \u003cimg \u003c% if (lazy) { % /\u003edata-\u003c% } %\u003esrc=\"\u003c%= src %\u003e\"\n  width=\"\u003c%= width %\u003e\" height=\"\u003c%= height %\u003e\" alt=\"\u003c%= alt %\u003e\" class=\"lazyload \u003c%= className %\u003e\" /\u003e\n\u003c/picture\u003e\n```\n\nwebp 変換機能付きの遅延読み込み画像コンポーネントです。\n渡せるパラメータを表にします。\n\n| name      | type    | required | default | description                                                                                                              |\n| --------- | ------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------ |\n| src       | string  | true     |         | 画像のパスを入力します。このコンポーネントを include するファイルからの相対パスかエイリアスを用いた指定が可能です。      |\n| width     | number  | false    | null    | オリジナル画像の幅を指定します。コンテンツレイアウトシフトやレンダリング速度の向上のため、指定することをお勧めします。   |\n| height    | number  | false    | null    | オリジナル画像の高さを指定します。コンテンツレイアウトシフトやレンダリング速度の向上のため、指定することをお勧めします。 |\n| alt       | string  | false    | ''      | 代替テキスト                                                                                                             |\n| className | string  | false    | ''      | img タグに付加したいクラス名を指定できます。                                                                             |\n| lazy      | boolean | false    | true    | 遅延読み込みをするかどうかを選択できます。デフォルトは`true`です。                                                       |\n\n### SCSS\n\n#### mixin\n\n- メディアクエリ\n\nメディアクエリを簡潔に。\n\n[`scss/vars/mixins/__breakpoints.scss`](blob/main/src/scss/vars/mixins/__breakpoints.scss)\n\n```scss\n@use 'sass:map';\n@use 'sass:meta';\n\n@use '../variables';\n\n@mixin media($breakpoint) {\n  @if map.has-key(variables.$breakpoints, $breakpoint) {\n    @media (min-width: #{meta.inspect(map.get(variables.$breakpoints, $breakpoint))}) {\n      @content;\n    }\n  } @else {\n    @error \"指定されたブレークポイントは定義されていません。\" + \"指定できるブレークポイントは次のとおりです。 -\u003e #{map.keys($breakpoints)}\";\n  }\n}\n```\n\n`使う側のscss`\n\n```scss\n@use '../vars/mixins';\n\n.title {\n  @include mixins.media(sm) {\n    // 640px 以上のスタイル\n  }\n}\n```\n\n#### variables\n\nscss 変数。\n\n[`scss/vars/_variables.scss`](blob/main/src/scss/vars/_variables.scss)\n\n```scss\n/* break points */\n$breakpoints: (\n  sm: 640px,\n  md: 768px,\n  lg: 1024px,\n  xl: 1280px,\n  xxl: 1536px,\n);\n\n/* content width */\n$content-width: 85vw;\n$content-width-sm: 600px;\n$content-width-md: 720px;\n$content-width-lg: 960px;\n$content-width-xl: 1180px;\n$content-width-xxl: 1400px;\n\n/* colors */\n$color-black: #333;\n```\n\n- $breakpoints\n\nメディアクエリの mixin で用いている値です。\nブレイクポイントをここで管理することで、情報を一元化します。\n\n- $content-width\n\nこの後に紹介する`.container`のスタイルに用いる変数です。\n\n- $color\n\nプロジェクトごとの色を管理します。\nIE 対応の必要がなければ、css 変数を用いた方がアニメーションで用いたりできるので、便利かと思います。\n\n#### container クラス\n\n[`scss/modules/_container.scss`](blob/main/src/scss/modules/_container.scss)\n\n```scss\n@use '../vars/mixins';\n@use '../vars/variables';\n\n.container {\n  width: variables.$content-width;\n  margin-right: auto;\n  margin-left: auto;\n\n  @include mixins.media(sm) {\n    width: variables.$content-width-sm;\n  }\n  @include mixins.media(md) {\n    width: variables.$content-width-md;\n  }\n  @include mixins.media(lg) {\n    width: variables.$content-width-lg;\n  }\n  @include mixins.media(xl) {\n    width: variables.$content-width-xl;\n  }\n  @include mixins.media(xxl) {\n    width: variables.$content-width-xxl;\n  }\n}\n\n.sm\\:container {\n  @include mixins.media(sm) {\n    width: variables.$content-width-sm;\n    margin-right: auto;\n    margin-left: auto;\n  }\n  @include mixins.media(md) {\n    width: variables.$content-width-md;\n  }\n  @include mixins.media(lg) {\n    width: variables.$content-width-lg;\n  }\n  @include mixins.media(xl) {\n    width: variables.$content-width-xl;\n  }\n  @include mixins.media(xxl) {\n    width: variables.$content-width-xxl;\n  }\n}\n\n.md\\:container {\n  @include mixins.media(md) {\n    width: variables.$content-width-md;\n    margin-right: auto;\n    margin-left: auto;\n  }\n  @include mixins.media(lg) {\n    width: variables.$content-width-lg;\n  }\n...\n```\n\nいわゆる container クラスです。\n設定ファイルの$content-width を元に width を決めて、mx-auto のスタイルです。\n\nそれぞれのブレイクポイント以上でのみ効く container クラスも用意しています。\n例: .md:container -\u003e 768px 以上で container\n\n### JavaScript\n\n#### ページ内リンクのスムーズスクロール\n\n[`js/utils/inPageScroll.js`](blob/main/src/js/utils/inPageScroll.js)\n\na タグを使ったページ内リンクをスムーズスクロールにしています。\n\n#### 360px 未満の viewport 処理\n\n[`js/utils/windowNarrow.js`](blob/main/src/js/utils/windowNarrow.js)\n\n[こちら](https://zenn.dev/tak_dcxi/articles/690caf6e9c4e26#360px-%E6%9C%AA%E6%BA%80%E3%81%AF-js-%E3%81%A7-viewport-%E3%82%92%E5%9B%BA%E5%AE%9A%E3%81%99%E3%82%8B)の記事を参考にしました。\n\n#### webfont の遅延読み込み\n\n[`js/utils/fontLoad.js`](blob/main/src/js/utils/fontLoad.js)\n\n`webfontloader`を使って Web Font の遅延読み込みを行います。\nデフォルトではコメントアウトしていますので、使う場合は`src/js/index.js`のコメントを外してください。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdc7290%2Fejs-wepack-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdc7290%2Fejs-wepack-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdc7290%2Fejs-wepack-template/lists"}