webのプロジェクトフォルダ直下のファイルの意味をまとめてみた

17
いいね
0
コメント

tonkotsuboy_com

2017年03月29日に更新

昨今のweb開発では、プロジェクト直下に多くのファイルが配置されます。

本エントリーでは、一つ一つのファイルがどんな意味を持つのか、どんな技術で使われているのかをまとめました。ピックアップしたのはGoogleのWeb Starter Kitの一部と、筆者がよく使う技術です。

次のファイルについて紹介します(随時更新中)。

package.json
.gitignore
webpack.config.js
gulpfile.js
.eslintrc
tsconfig.json
tslint.json
yarn.lock

package.json

npmの設定ファイルです。

npmとは、Node.jsのパッケージを管理するためのツール。Node.jsのパッケージとは、Sassを使うためのnode-sassパッケージや、Gulpを使うためのgulpパッケージのことで、昨今のweb開発ではこれらのパッケージを使った開発が主流です。

package.jsonを使うことで、プロジェクトで使われているパッケージの名前やバージョンを管理したり、npm-scripts(参考記事「Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ - ICS MEDIA」)を使ってスクリプトを実行したりできます。

packagejson

{
  "name": "babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "github:gulpjs/gulp#4.0",
    "gulp-sass": "^3.1.0"
  }
}

▲ package.jsonの例

.gitignore

Git管理下のファイルの内、無視するファイルを指定できるファイルです。

.gitignore

node_modules
dist/
.tmp

▲ .gitignoreの例

webpack.config.js

webpackの設定ファイルです。

webpackとは、CSS、JavaScript、画像ファイル等、webで必要なファイルを一つにまとめるためのツールです。特に、JavaScriptのモジュール（複数ファイルに分割したJavaScriptファイル）を取り扱うのに便利で、筆者はES6やTypeScriptモジュールのバンドルによく利用しています。

webpack.config.jsには、どのファイルを対象にするのか、どのローダー（CSSやTypeScriptの読み込みに必要なもの）を使うのかといった設定を記述します。

webpack.config.js

module.exports = {
  entry: "src/app.ts",
  output: {
    filename: "[name].js"
  },
  resolve: {
    extensions: [".ts", ".js"]
  },
  module: {
    rules: [{test: /\.ts$/, loader: 'ts-loader'}]
  }
}

▲ webpack.config.jsの例

gulpfile.js

Gulpのタスクファイルです。

Gulpとは、SassやBabel・TypeScriptのコンパイル、ローカルサーバーの構築等、面倒なweb制作のタスクを効率的に記述するビルドシステム。詳しくは記事「5分で導入！ GulpでWeb制作を効率化しよう - ICS MEDIA」を参照ください。

gulpfile.jsには、どんなタスクを行うのか？を記載します。

gulpfile.js

const gulp = require("gulp");
const sass = require("gulp-sass");

// Sassのコンパイルタスク
gulp.task("sass", () => {
  return gulp.src("./sass/style.scss")
    .pipe(sass())
    .pipe(gulp.dest("./css/"));
});

// Sassファイルのウォッチタスク
gulp.task("sass:watch",  () => {
  gulp.watch("./sass/**/*.scss", gulp.series("sass"));
});

▲ gulpfile.jsの例

.editorconfig

EditorConfigの設定ファイルです。

EditorConfigとは、エディター間のコードスタイルを統一するツール。複数人でコードを書く場合、インデントをスペースにするかタブにするか、改行コードをLFにするかCRLFにするか等、各々のエディター設定によって出力されるコードに違いが出ますが、EditorConfigを使うことで、各設定を統一可能です。

.editorconfigには、インデントの種類、改行コードの情報などを記載します。

.editorconfig

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = crlf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

▲ .editorconfigの例

.eslintrc

ESLintの設定ファイルです。

ESLintとは、JavaScriptコードのルールを設定し、それに沿っているかどうかをチェックするツール。例えば、セミコロンを必須、クオートはダブルクオート、var宣言を禁止（代わりにconstやletを使う）といったルールをこの設定ファイルに定めておき、ESLintを実行することで、ルールに沿っていないコードをエラー出力できます。複数人の開発で厳密にコーディングルールを統一したい場合に役立ちます。

eslintrcに設定したいコーディングルールを記載します。

.eslintrc

{
  "env" : {
    "es6": true
  },
  "rules": {
    "semi": [1, "always"],
    "quotes": [2, "double"],
    "no-var": 1,
    "indent": [2, 2]
  }
}

▲ eslintrcの例

tsconfig.json

TypeScript の設定ファイルです。

TypeScriptとは、型を使いながらJavaScriptを記述し、現在のブラウザ向けにコンパイルできる言語です。開発はMicrosoft社。大規模なプロジェクトで複数人開発する場合も、型を用いた安全な開発が可能です。Google社のフレームワークAngularにも採用されています。

tsconfig.jsonでは、コンパイル対象（例：ES5向けか、ES6向けか）やソースマップの出力有無等を設定できます。

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "lib": [
      "dom", "es2015.promise", "es5"
    ],
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": false
  }
}

▲ tsconfig.jsonの例

tslint.json

TSLintの設定ファイルです。

TSLintとは、ESLintのTypeScript対応版のようなもので、TypeScriptのコーディングルール設定を行います。ルール詳細については、記事「tslintの各オプションの意味一覧 - 日々精進」が分かりやすいです。

tslint.json

{
  "rules": {
    "class-name": true,
    "indent": [
      true, "spaces"
    ],
    "quotemark": [
      true, "double"
    ],
    "triple-equals": [
      true, "allow-null-check"
    ]
  }
}

▲ tslint.jsonの例

yarn.lock

Yarnの使用時に生成される、パッケージのバージョン固定の為のファイルです。

Yarnとは、Facebook社が開発したパッケージマネージャーで、npmとの互換があります。npmと比べて高速なインストール、厳密なバージョン固定が可能です。詳しくは記事「npm互換のJavaScriptパッケージマネージャーYarn入門 - ICS MEDIA」を参照ください。

yarn.lock

# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
abbrev@1:
  version "1.0.9"
  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"

accepts@~1.3.3, accepts@1.3.3:
  version "1.3.3"
  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
  dependencies:
    mime-types "~2.1.11"
    negotiator "0.6.1"

▲ yarn.lockの例

随時情報更新中

プロジェクト直下に配置された大量の設定ファイルに驚くことも多いかもしれませんが、一つ一つの意味を知れば怖くありません。このページでは、引き続きプロジェクト直下ファイルの情報を追加していきます。

昨今のweb開発では、プロジェクト直下に多くのファイルが配置されます。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/90438585-dba4-5be4-a294-c495b2f0cbed.png)

本エントリーでは、一つ一つのファイルがどんな意味を持つのか、どんな技術で使われているのかをまとめました。ピックアップしたのはGoogleの[Web Starter Kit](https://developers.google.com/web/tools/starter-kit/)の一部と、筆者がよく使う技術です。

次のファイルについて紹介します(随時更新中)。

- package.json
- .gitignore
- webpack.config.js
- gulpfile.js
- .eslintrc
- tsconfig.json
- tslint.json
- yarn.lock

# package.json
[npm](https://www.npmjs.com/)の設定ファイルです。

npmとは、Node.jsのパッケージを管理するためのツール。Node.jsのパッケージとは、Sassを使うための[node-sassパッケージ](https://www.npmjs.com/package/node-sass)や、Gulpを使うための[gulpパッケージ](https://www.npmjs.com/package/gulp)のことで、昨今のweb開発ではこれらのパッケージを使った開発が主流です。

package.jsonを使うことで、プロジェクトで使われているパッケージの名前やバージョンを管理したり、npm-scripts(参考記事「[Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ - ICS MEDIA](https://ics.media/entry/12226)」)を使ってスクリプトを実行したりできます。

```json:packagejson
{
  "name": "babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "github:gulpjs/gulp#4.0",
    "gulp-sass": "^3.1.0"
  }
}
```

▲ package.jsonの例

# .gitignore
Git管理下のファイルの内、無視するファイルを指定できるファイルです。

```bash:.gitignore
node_modules
dist/
.tmp
```

▲ .gitignoreの例

# webpack.config.js
[webpack](https://webpack.js.org/)の設定ファイルです。

webpack.config.jsには、どのファイルを対象にするのか、どのローダー（CSSやTypeScriptの読み込みに必要なもの）を使うのかといった設定を記述します。

```js:webpack.config.js
module.exports = {
  entry: "src/app.ts",
  output: {
    filename: "[name].js"
  },
  resolve: {
    extensions: [".ts", ".js"]
  },
  module: {
    rules: [{test: /\.ts$/, loader: 'ts-loader'}]
  }
}
```

▲ webpack.config.jsの例

# gulpfile.js
[Gulp](http://gulpjs.com/)のタスクファイルです。

Gulpとは、SassやBabel・TypeScriptのコンパイル、ローカルサーバーの構築等、面倒なweb制作のタスクを効率的に記述するビルドシステム。詳しくは記事「[5分で導入！ GulpでWeb制作を効率化しよう - ICS MEDIA](https://ics.media/entry/3290)」を参照ください。

gulpfile.jsには、どんなタスクを行うのか？を記載します。

```js:gulpfile.js
const gulp = require("gulp");
const sass = require("gulp-sass");

// Sassのコンパイルタスク
gulp.task("sass", () => {
  return gulp.src("./sass/style.scss")
    .pipe(sass())
    .pipe(gulp.dest("./css/"));
});

// Sassファイルのウォッチタスク
gulp.task("sass:watch",  () => {
  gulp.watch("./sass/**/*.scss", gulp.series("sass"));
});
```

▲ gulpfile.jsの例

# .editorconfig
[EditorConfig](http://editorconfig.org/)の設定ファイルです。

.editorconfigには、インデントの種類、改行コードの情報などを記載します。

```bash:.editorconfig
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = crlf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
```

▲ .editorconfigの例

# .eslintrc
[ESLint](http://eslint.org/)の設定ファイルです。

ESLintとは、JavaScriptコードのルールを設定し、それに沿っているかどうかをチェックするツール。例えば、セミコロンを必須、クオートはダブルクオート、`var`宣言を禁止（代わりに`const`や`let`を使う）といったルールをこの設定ファイルに定めておき、ESLintを実行することで、ルールに沿っていないコードをエラー出力できます。複数人の開発で厳密にコーディングルールを統一したい場合に役立ちます。

eslintrcに設定したいコーディングルールを記載します。

```json:.eslintrc
{
  "env" : {
    "es6": true
  },
  "rules": {
    "semi": [1, "always"],
    "quotes": [2, "double"],
    "no-var": 1,
    "indent": [2, 2]
  }
}
```

▲ eslintrcの例

# tsconfig.json
[TypeScript](https://www.typescriptlang.org/) の設定ファイルです。

TypeScriptとは、型を使いながらJavaScriptを記述し、現在のブラウザ向けにコンパイルできる言語です。開発はMicrosoft社。大規模なプロジェクトで複数人開発する場合も、型を用いた安全な開発が可能です。Google社のフレームワーク[Angular](https://angular.io/)にも採用されています。

tsconfig.jsonでは、コンパイル対象（例：ES5向けか、ES6向けか）やソースマップの出力有無等を設定できます。

```js:tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "lib": [
      "dom", "es2015.promise", "es5"
    ],
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": false
  }
}
```

▲ tsconfig.jsonの例

# tslint.json
[TSLint](https://palantir.github.io/tslint/)の設定ファイルです。

TSLintとは、ESLintのTypeScript対応版のようなもので、TypeScriptのコーディングルール設定を行います。ルール詳細については、記事「[tslintの各オプションの意味一覧 - 日々精進](http://anton0825.hatenablog.com/entry/2015/07/06/000000)」が分かりやすいです。

```json:tslint.json
{
  "rules": {
    "class-name": true,
    "indent": [
      true, "spaces"
    ],
    "quotemark": [
      true, "double"
    ],
    "triple-equals": [
      true, "allow-null-check"
    ]
  }
}
```

▲ tslint.jsonの例

# yarn.lock
[Yarn](https://yarnpkg.com/lang/en/)の使用時に生成される、パッケージのバージョン固定の為のファイルです。

Yarnとは、Facebook社が開発したパッケージマネージャーで、npmとの互換があります。npmと比べて高速なインストール、厳密なバージョン固定が可能です。詳しくは記事「[npm互換のJavaScriptパッケージマネージャーYarn入門 - ICS MEDIA](https://ics.media/entry/13838)」を参照ください。

```bash:yarn.lock
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
abbrev@1:
  version "1.0.9"
  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"

accepts@~1.3.3, accepts@1.3.3:
  version "1.3.3"
  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
  dependencies:
    mime-types "~2.1.11"
    negotiator "0.6.1"
```

▲ yarn.lockの例

# 随時情報更新中
プロジェクト直下に配置された大量の設定ファイルに驚くことも多いかもしれませんが、一つ一つの意味を知れば怖くありません。このページでは、引き続きプロジェクト直下ファイルの情報を追加していきます。

tonkotsuboy_com

6473Contribution

Organization

編集リクエスト

webのプロジェクトフォルダ直下のファイルの意味をまとめてみた

package.json

.gitignore

webpack.config.js

gulpfile.js

.editorconfig

.eslintrc

tsconfig.json

tslint.json

yarn.lock

随時情報更新中

人気の投稿

Organization

問題がある投稿を報告する

ご意見