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

(2017/06/02)
package-lock.jsonについて追記しました。

---

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

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

本エントリーでは、1つ1つのファイルがどんな意味を持つのか、どんな技術で使われているのかをまとめました。ピックアップしたのは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とは、CSS、JavaScript、画像ファイル等、webで必要なファイルを1つにまとめるためのツールです。とくにJavaScriptのモジュール（複数ファイルに分割したJavaScriptファイル）を取り扱うのに便利で、筆者は**ES6やTypeScriptモジュールのバンドルによく利用しています**。より詳しくは、記事「[JS開発で人気のWebpackとは!? 5分でわかる入門記事 - ICS MEDIA](https://ics.media/entry/12140)」を参照ください。

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

.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を実行することで、ルールに沿っていないコードをエラー出力できます。**複数人の開発で厳密にJavaScriptのコーディングルールを統一したい場合に役立ちます**。

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/)の使用時に生成される、npmモジュールのバージョン固定の為のファイルです。

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の例

# package-lock.json (2017/06/02 追記)
npmモジュールのバージョン固定の為のファイルです。

Node.js v8にバンドルされたnpm v5で、バージョン固定の為の機能が追加されました。npmのモジュールのバージョンを厳密に固定できるため、バージョン違いによるエラーを防ぐことができます。前述のyarn.lockのような挙動をnpm単体で可能にします。とくに設定をする必要はなく、`npm install (パッケージ)`を実行した際に自動的に生成されるため、Node.js v8が主流になればよく見かけるようになるでしょう。

npm v5について詳しくは、記事「[npm v5 がリリースされた - from scratch](http://yosuke-furukawa.hatenablog.com/entry/2017/05/30/090602)」を参照ください。

```bash:package-lock.json
{
  "name": "myproject",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "dependencies": {
    "shuffle-text": {
      "version": "0.2.4",
      "resolved": "https://registry.npmjs.org/shuffle-text/-/shuffle-text-0.2.4.tgz",
      "integrity": "sha1-4OApC4w1r1YO9gi8beiq/scVS+4=",
      "dev": true
    }
  }
}
```


▲ package-lock.jsonの例


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