mizdra commented 8 years ago

質の向上のためにこのプロジェクトをモダン化しませんか? このプロジェクトは今後、さらなる開発がされていくと思っています。そのためにも不適切なコードの除去、一部機能の自動化を目指し、開発しやすく、メンテナンスのしやすい環境を構築してみませんか?

私の具体的な提案内容は以下の通りです。

npmを導入してnpmパッケージを利用できるようにする (パッケージの管理)
eslintを導入してコードをlintする (不適切なコードの検出・修正)
gh-pagesでデプロイを自動化する

また、npm package化することで以下のことも実現できます。

モダンなjsコードに書き換えて、babelで古いブラウザ向けにトランスパイル (ソースコードをモダン化しつつ、サポートブラウザは変わらない!)
mochaを導入してコードをtestする
データセット(pokedex)をjsonファイル化し、build時にそれをapp.js中に展開する(データと処理の切り分け)

手順は以下の通りです。

準備

npmを導入する都合上、ディレクトリ構造を変更することをお勧めします。(以下で説明するeslintやgh-pagesといったnpm packagesが扱いやすくなります) まず、以下が現状のディレクトリです。

PokemonGoIVCalculator
├ css/
│ └ dashboard.css
├ js/
│ └ app.js 
├ index.html
└ LICENSE

これを以下のように変更します。

PokemonGoIVCalculator
├ src/
│ ├ css/
│ │ └ dashboard.css
│ ├ js/
│ │ └ app.js 
│ └ index.html
└ LICENSE

npmを導入してnpmパッケージを利用できるようにする

npmはNode.js向けのパッケージマネージャです。npmを導入することで公開リポジトリ上にある「npm packages」と呼ばれる他人が書いたコードを簡単に自分のプロジェクトに取り入れることができます。

プロジェクトルートでコマンドラインからnpm initを実行して下さい。プロジェクトルートにpackage.jsonnが生成され、そこにnpmに関する設定が書き込まれていきます。npm initコマンドは対話形式でnpmに関する設定を決定します。

以下は例です。

$ cd PokemonGoIVCalculator
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (PokemonGoIVCalculator) pokemongo-iv-calculator
version: (1.0.0) 0.0.1
description: ポケモンGO個体値計算機
entry point: (index.js)
test command:
git repository: (https://github.com/odanado/PokemonGoIVCalculator.git)
keywords:
author: odanado
license: (MIT) MIT
About to write to /Users/mizdra/src/github.com/odanado/PokemonGoIVCalculator/package.json:

{
  "name": "pokemongo-iv-calculator",
  "version": "0.0.1",
  "description": "ポケモンGO個体値計算機",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/odanado/PokemonGoIVCalculator.git"
  },
  "author": "odanado",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/odanado/PokemonGoIVCalculator/issues"
  },
  "homepage": "https://github.com/odanado/PokemonGoIVCalculator#readme"
}

Is this ok? (yes) yes

設定しておくべき値はname(プロジェクトの名前, 大文字は使えません, 慣例で単語の区切りをハイフンでつなぎます), version(プロジェクトのバージョン, 通常、1.0.0は正式版を表します), description(プロジェクトの説明), author, licenseです。

これでnpm install -D eslintなどを実行すると npm package がプロジェクトにインストールされ、そのプロジェクト名がpackage.jsonに保存されるようになります。

eslintを導入してコードをlintする

eslintはJavaScriptコードをlintするための npm package です。以下のサイトを参考に、プロジェクトに eslint を導入します。(npm install -D eslint)

ESLint 最初の一歩 - Qiita

npm-scripts に "lint": "eslint"を設定しておくとnpm run lintコマンドで lint が実行できるようになります。lint 対象とするjsファイル郡は./src/js/*とすると良いかと思います。

gh-pagesでデプロイを自動化する

gh-pages を使うことでgh-pagesにチェックアウトし、生成物をcommit、pushといった作業を自動化してくれます。以下のサイトを参考にプロジェクトに gh-pages を導入します。(npm install -D gh-pages)

npm run deploy で GitHub Pages にお手軽デプロイ - Qiita

npm-scripts に "deploy": "gh-pages -d ./src"を設定しておくとnpm run deployコマンドでデプロイが実行できるようになります。

今後は変更内容をgh-pagesブランチ以外(master, developなど)にコミットし、サイトを更新したいときはnpm run deployを実行するという流れになります。

以上が私の提案となります。ご検討よろしくお願いします。

odanado commented 8 years ago

提案ありがとうございます．
fix-to-modernブランチで作業を行い完了しました．何かご指摘あればよろしくお願いします． https://github.com/odanado/PokemonGoIVCalculator/tree/fix-to-modern

mizdra commented 8 years ago

お引受けいただきありがとうございます! 作業お疲れ様です。

先程コードを拝見しました。とても良いと思います。

提案があるのですが、このissueの作業を終えた後に自動でlintするためにCIツール(例えばTravisCI)を導入してみてはいかがでしょう? 導入時の設定は以下が参考になるかと思います。

Building a Node.js project - Travis CI

以上、よろしくお願いします。

odanado commented 8 years ago

ありがとうございます． comma-dangleをエラーにし対応しました．

CIツールの導入は私も考えていましたので，情報の提供ありがとうございます．

odanado / PokemonGoIVCalculator

プロジェクトのモダン化 #6

準備

npmを導入してnpmパッケージを利用できるようにする

eslintを導入してコードをlintする

gh-pagesでデプロイを自動化する