Go to Qiita Advent Calendar 2024 Top
LoginSignup
85
87

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@tonkotsuboy_com(鹿野 壮)

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

Last updated at Posted at 2017-03-29

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

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

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

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

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

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

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」を参照ください。

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つの意味を知れば怖くありません。このページでは、引き続きプロジェクト直下ファイルの情報を追加します。

85
87
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
85
87

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?