{"id":39740735,"url":"https://github.com/pepoipod/frontend-boilerplate","last_synced_at":"2026-01-18T11:14:38.873Z","repository":{"id":20311750,"uuid":"142972448","full_name":"pepoipod/frontend-boilerplate","owner":"pepoipod","description":"Frontend boilerplate.","archived":false,"fork":false,"pushed_at":"2023-01-04T21:52:38.000Z","size":4368,"stargazers_count":1,"open_issues_count":27,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-14T21:48:37.235Z","etag":null,"topics":["boilerplate","frontend","javascript","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pepoipod.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-31T06:34:07.000Z","updated_at":"2020-01-14T08:17:24.000Z","dependencies_parsed_at":"2023-01-12T03:30:27.326Z","dependency_job_id":null,"html_url":"https://github.com/pepoipod/frontend-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pepoipod/frontend-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pepoipod%2Ffrontend-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pepoipod%2Ffrontend-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pepoipod%2Ffrontend-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pepoipod%2Ffrontend-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pepoipod","download_url":"https://codeload.github.com/pepoipod/frontend-boilerplate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pepoipod%2Ffrontend-boilerplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28535160,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T10:13:46.436Z","status":"ssl_error","status_checked_at":"2026-01-18T10:13:11.045Z","response_time":98,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["boilerplate","frontend","javascript","webpack"],"created_at":"2026-01-18T11:14:35.755Z","updated_at":"2026-01-18T11:14:38.866Z","avatar_url":"https://github.com/pepoipod.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# frontend-boilerplate\n\nWebサイト開発用のboilerplateです。   \nReactやVueなどを使ったSPA制作には対応していません。   \n    \ndeploy時は、webの`src/`を除いた状態でdeployして下さい.\n\n\n## USAGE\n\n### セットアップ\n```bash\n$yarn install\n```\n\nor\n\n```bash\n$make setup\n```\n\n### Webサーバーの立ち上げ.\n以下のコマンドを実行すると、 `localhost:8080` でWebサーバーが立ち上がります。   \n\n```bash\n$yarn start\n```\n\nor\n\n```bash\n$make run\n```\n\n終了したい際は `Ctrl + C` と入力してください。\n\n### ビルド\n\n```bash\n$yarn build\n```\n\nor\n\n```bash\n$make build\n```\n\n稀に自動で終了しない時があるので、その際はビルドの完了を確認した後に `Ctrl + C` と入力してください。\n\n## CSS\n作業ディレクトリ: `web/src/styles`   \n   \nエントリーポイントを `index.scss` とし、そこに様々なscssファイルがインポートされることを想定しています。   \nデフォルトで、 [sanitize.css](http://jonathantneal.github.io/sanitize.css/) がimportされていますが、用途に合わせてreset.cssに変えるなりしても良いと思います。（どのreset.cssを使うかというルール決めをするのも良いかもしれません）\nCSSライブラリですが、 `yarn` で追加したものをimportするのがcleanで良いかと思われます.\n\n\n### ディレクトリ構成\n基本的な構成は以下のようになります。   \n以下のディレクトリで十分まかなえるはずなので、不用意にディレクトリを新しく切ることはあまりおすすめしません。\n\n#### base\nプロジェクトのベースとなるscssをここに配置します。\n\n* `_variable.scss` : 変数の宣言を行うファイルです。\n* `_font.scss` : フォントファミリーの定義を行うファイルです。加えて、フォントファミリー関係の変数はここにまとめておくと、わかり良いかも知れません。\n* `_mixin.scss` : mixinの定義を行うファイルです。\n* `_function.scss` : functionの定義を行うファイルです。\n* `_base.scss` : html, body, aなどプリミティブなタグにおいての基本的なstyle定義を行うファイルです。\n\n#### components\ncomponent単位に分割されたscssファイルを配置する.\n\n#### pages\npage固有のstyleが定義されたscssファイルを配置する.\n\n#### vendor\nnpmにないようなライブラリ、パッケージはここに入れて下さい。そして、index.scssでここからrequireして下さい。\n\n\n### Prettier\n整形ツールとして [CSScomb](http://csscomb.com) を採用しています。基本的なruleのみ記述しています。  \nsort-orderは社内ルールが決まり次第書いていきましょう.\n\n#### 参考記事\n[【Grunt】csscombでソートだけでなくインデントなどのフォーマットも整形する \\| バシャログ。](http://bashalog.c-brains.jp/14/12/01-202258.php)\n[CSSCombのAtomプラグイン \\- EagleLand](https://1000ch.net/posts/2015/atom-csscomb.html)\n\n\n## JavaScript\n作業ディレクトリ: `web/src/scripts`   \n    \n`index.js` をエントリーポイントとします。\nパッケージは基本的に `yarn` で入れられるパッケージはyarnでaddした上で、require or importすることを推奨します。   \nこのboilerplateでは実際に、 `jQuery` をその方法でrequireしていますので、`index.js` を参考にしてみて下さい.   \n\nまた、webpackのbuild軽量化のために、外部ライブラリはdllとしてコンパイルされるようになっています。\nライブラリの追加時は、 `webpack.dll.config` の `vendor` にpluginを追加した上で、 `make rebuild-scripts-dll` を実行してください.\n\n### ディレクトリ構成\n\n#### components\n機能毎のパーツをclassで切り出して作成し、ここに配置します.\n\n#### helpers\n各ページにまたがって使うようなhelperクラス、関数をここに配置します.\n\n#### vendor\nnpmにないようなライブラリ、パッケージはここに入れて下さい。そして、必要なページでここからrequireして下さい。\n\n\n## ドキュメント情報\n作成者: 岩本 大樹 \u003ciwamoto@cshool.jp\u003e  \n更新日: 2018/08/17\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpepoipod%2Ffrontend-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpepoipod%2Ffrontend-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpepoipod%2Ffrontend-boilerplate/lists"}