開発環境の作り方 – まとめページ

これまでに書いた開発環境の作り方についての記事をまとめています。

XAMPP

 

Node.js

 

React + webpack + ESLint

 

コーディング規約

 

エディター

Atomおすすめパッケージ(5段階評価)

GitHubが開発したオープンソースのテキストエディター Atom(アトム)無料でこれだけの機能が使えるのは本当にすごい!世界中の有志が集まり、プラグインとして様々な機能を提供してくれています。

この記事では、Atomのおすすめパッケージを5段階評価で紹介しています。いいパッケージが見つかったら、ぜひ利用してみてください。

atom-beautify


Before

After

評価: ★★★★☆

コードを綺麗に整形してくれるパッケージです。右クリックで現れるメニューからBeautify editor contentsを選ぶと整形されます。統一感のある綺麗なコードで保存されるのは非常に気持ちがいいです。

パッケージをインストールしただけですぐに整形できる言語(html, css, jsなど)もあるのですが、他にも別途インストールしなければ整形できない言語もあります。この作業が結構面倒なので、もう少し簡単に導入できるシステムになってくれればいいのですが。

autocomplete-paths


評価: ★★☆☆☆

パスを自動補完してくれるパッケージです。/(スラッシュ)を入力すると、プロジェクト内のディレクトリやファイルを表示してくれます。使用頻度はあまり高くないですが、入れているとたまに役立ちます。

color-picker


評価: ★★★★★

右クリックで表示されるメニューからカラーピッカーを選ぶと、画像のような画面が現れ、色を視覚的に選択することができるようになります。RGB、HEXなど様々な方式で出力できるので非常に便利です。

editorconfig


評価: ★★★★☆

プロジェクトの文字コードや改行コード、インデントをどうするかについて設定することができるようになります。

複数人が関わる開発で記述ルールを統一することができたり、拡張子のよくわからないファイルが出てきた場合でも(例えば .editorconfig )自分で設定したインデントで編集することができます。

EditorConfigについて解説した記事がありますので、詳しく知りたい方はこちらを確認してください。

EditorConfigを使おう

file-icons


評価: ★★★☆☆

さまざまな拡張子に対応したアイコンが表示され、Atomのビジュアルが華やかになります。見た目に関わるものなので、絶対に必要な機能というわけではないのですが、一度入れると外せなくなります。

goto-definition


評価: ★★☆☆☆

定義元の関数を検索して開きます。例えば test() という関数を定義したとします。その test() という関数を使用しているファイルから、定義元のファイルを簡単に開くことができます。あの関数の戻り値ってどういう設定にしてたっけ?といったケースで手軽にチェックすることができるようになります。

ただし、このパッケージはうまく検索できなかったり、検索速度が遅かったりするので、使っていて残念に感じることも多いです。

highlight-line


評価: ★★★★★

現在、選択している行をハイライトします。一度使い出すと、これはあって当たり前のような機能になっています。

highlight-selected


評価: ★★★★★

ダブルクリックしたワードと同じものをハイライトします。例えば変数を違う名前に変えたいときに検索・置換ボックスを使う方法もありますが、数が少ないときはこれでハイライトさせて、簡単に置き換えるといったことができます。

japanese-menu


評価: ★★★★★

メニューバーとコンテキストメニュー、設定画面が日本語化されます。プログラム関係は英語に触れる機会がどうしても多くなりますが、基本的な部分はやはり日本語化されている方が楽です。設定画面で英語に悩むのは辛いですよね。

linter


評価: ★★★★★

間違ったコードの書き方をしている場合に警告してくれます。独自の書き方をすると後々後悔することが多いので、できるだけ基本的な作法に従って書いていきましょう。

linter はこれだけで動作しませんので、言語ごとに用意されているパッケージを追加でインストールしてください。例)linter-htmlhint(HTML用)

minimap


評価: ★★★★☆

ソースのプレビューを表示することができます。細かい文字まで把握することはできませんが、今いる大まかな位置を把握することができます。ミニマップ上でドラッグすると移動することもできます。

他のミニマップパッケージと一緒に使うとより便利です。

Atomエディタのminimapをもっと便利に使うパッケージのまとめ

pigments


評価: ★★★★★

コード上で色を確認できるようになるパッケージです。rgb(255, 0, 0)と書かれていても普通はどんな色かわからないですが、その場で確認できるようになるのでとても便利です。

project-manager


評価: ★★★★★

プロジェクトを管理するパッケージです。登録したプロジェクトを切り替えることができるようになります。開いているファイルを記憶してくれるので、前回の開発の続きをそのまま始めることができます。

symbols-tree-view


評価: ★★★☆☆

変数や関数を一覧にして表示してくれます。一覧上で表示されている関数をクリックすると、コード上でその関数が記述されている場所へ移動できます。

便利ですが、必要のない要素が一覧に大量に表示されてしまうため、それを除外する設定に手間がかかります。例えば関数だけを表示しようと思うと、不要な変数などを大量に除外設定しなければならないので大変です。

EditorConfigを使おう

インデントはスペース派?タブ派?


一人で開発を進めている方は、コーディング規約などを定めず、自分のやりやすいルールで自由に書いている方が多いのではないかと思いますが、もしあなたが開発しているアプリケーションの需要が爆発的に増え、開発の規模を大きくしなければならない事態になった場合、困った問題が起こると思いませんか?

私の場合はアプリケーションが人気になってというわけではないのですが、ある日突然、GitHubにコードを公開しようと思い立ちまして、公開してみたものの自分ルールで適当に書いていたコードに恥ずかしさを覚えることになりました。

人生なにが起こるかわかりません。いつ誰に見られてもいいように、みなさんも世の中の基本的な記述ルールに従ってコードを書くようにしましょう!

その第一歩がEditorConfigです。EditorConfigというのは簡単なコーディング規約を定めた仕様のようなもので、プログラマーによってそれぞれ違う記述ルールを統一することができます。

プロジェクトのルートに .editorconfig というファイルを設置し、その中に決まったルールを記述することで、複数の開発者間で同じルールを用いることができるようになるのです。

複数人で開発する予定がない方でも、各プロジェクト間で統一した書き方ができるようになるので、使う価値は大いにありますよ!

Atom、Eclipse、Emacs、NetBeans、PhpStorm、Sublime Text、Vim、Visual Studio、Xcode、その他多数の著名なエディターもプラグインでEditorConfigに対応していますので、ぜひ環境を整えて使ってみてください。

対応エディターについて知りたい方は、公式サイトを確認してください。

EditorConfig(公式・英語)

.editorconfigのサンプル


サンプルを用意しましたので参考にしてください。

ファイルの指定方法


[ファイル名]
この形でルールを定めたいファイルを指定します。

[*] すべてのファイルを指定
[*.js] 拡張子が.jsのファイルを指定
[*.{js,html,md}] 複数の拡張子のファイルをまとめて指定
[package.json] package.jsonという特定のファイルだけを指定

書き方の解説


root = true
プロジェクトのルートであるという記述です。これを記述しないと、さらに上の階層まで探しに行ってしまいます。

end_of_line = lf
改行コード:lf, cr, crlfを入力できます。

charset = utf-8
文字コード:latin1, utf-8, utf-8-bom, utf-16be, utf-16leを入力できます。

indent_style = space
インデント:space, tabを入力できます。

indent_size = 2
インデントのサイズ:数字を入力してください。2か4が基本です。

tab_width = 4
タブのサイズ:indent_styleにtabを選んだ場合にタブのサイズを入力します。デフォルトではindent_sizeの値が適用されますので、省略が可能です。

trim_trailing_whitespace = true
行末の空白(スペース)が自動的に削除されます。

insert_final_newline = true
保存される時に最後の行が必ず空の行になります。最後の行に文字が入力されている場合は、空の行が1行追加されます。

# コメント
シャープを入力するとコメントを記述することができます。

最後に


どう設定すればいいのかわからないときは、その言語のメジャーなコーディング規約に従って設定するのがいいと思います。

文字コードについては utf-8、改行コードは lf に設定しておくのが無難なようです。

参考になりそうな記事へのリンクを掲載しておきます。

React.jsの開発環境をできるだけ簡単に作る!

React.js の開発環境をできるだけ簡単に作るための情報を提供しています。参考になるファイルもダウンロードできるようにしていますので、よかったら利用してみてください。

こちらの記事は、Node.js がインストールされており、npm の基本的な使い方も理解していることを前提に書かれています。当ブログでは Node.js と npm についても解説していますので、インストール方法や使い方を学びたい方はまずこちらを参考にしてください。

このページで解説しているのは、React.js を導入し、webpack + babel を用いて ECMAScript (ES2015~) とJSX で書かれた JavaScript を ES5 に変換。ESLint + airbnb スタイルガイドで構文チェックを行う方法です。

サンプルプロジェクトのダウンロード


React が動作するサンプルプロジェクトを用意しています。まずこのファイルをダウンロードして解凍してください。中身を見てもらえば、React がどういう構成になっているのかわかりやすいと思います。

index.html を開くと、React で Hello World!! と表示されます。

サンプルプロジェクト
https://gameusers.org/dev/sample/react-sample.zip

パッケージをインストールする


まず開発プロジェクトのフォルダ(ディレクトリ)を作成して、 cd コマンドで移動してください。そして npm initpackage.json を作成してください。それが終わったら以下のコマンドで React.js をインストールしましょう。–save

npm install --save react react-dom

次に webpack、babel、ESLint、airbnb をインストールしましょう。以下のコマンドにすべてまとめられています。–save-dev

npm install --save-dev webpack babel-loader babel-core babel-preset-env babel-preset-react eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react

webpack.config.jsを作成する


webpack を動作させるには、webpack.config.js という設定ファイルを用意しなければなりません。プロジェクトのルートに名前が webpack.config.js というファイルを作成して、以下の内容をコピーしてください。

※ サンプルプロジェクトをダウンロードした方は、中にある webpack.config.js をそのままコピーして使ってください。

entry: './entry.jsx',
output: {
  path: path.join(__dirname, '/dist'),
  filename: 'bundle.js',
},

この entry、output の部分はあなたが開発しているプロジェクトに沿った内容に変更する必要があります。

entry 部分にはビルドの起点になるファイルのパスを記述してください。import で他のファイルを読み込む基本となるファイルです。

output には webpack でまとめたファイルを出力する場所と、そのファイル名を指定します。

webpack.config.js についてもっと詳しく知りたい方は、以下のサイトを参考にしてください。当ブログの記事は webpack version 3 をベースに書かれています。他サイトの昔の記事を参考にする場合は、書き方が変わっている部分がありますので注意してください。

公式サイトを参考にすれば間違いはないです。

Babelの設定を書く


ECMAScript (ES2015~) で書かれた JavaScript を Babel を利用して、ブラウザで表示できるように変換します。そのための設定を書かなければなりません。

通常は .babelrc というファイルを開発プロジェクトのルートディレクトリに用意して、そこに Babel の設定を書いていくのですが、package.json の中に書くことも可能です。設定ファイルが増えていくと管理が大変になりますので、できるだけひとところにまとめた方が楽です。そのため、こちらの解説では package.json に書く方法を採用しています。

"babel": {
  "presets": [
    "react",
    "env"
  ]
},

上記コードを見てください。これは babel-preset-react と babel-preset-env パッケージの設定を行っています。このコードをそのまま package.json に追記してください。

babel-preset-react は Babel で React をトランスパイルするためのパッケージで、babel-preset-env は説明が難しいのですが、以下のような機能を持っています。

A Babel preset that compiles ES2015+ down to ES5 by automatically determining the Babel plugins and polyfills you need based on your targeted browser or runtime environments.

ターゲットとするブラウザまたはランタイム環境に基づいて必要なバベルプラグインとポリフィルを自動的に決定することによりES2015 +をES5にコンパイルするバベルプリセットです。

例えば、過去2バージョンのブラウザまで対応しながらトランスパイルするといったターゲットの指定ができるパッケージです。

ESLintの設定を書く


ESLint を動作させるには、通常 .eslintrc.json という設定ファイルをルートディレクトリに用意しなければなりませんが、こちらの設定も Babel の設定と同じく package.json の中に書くことが可能です。以下のコードを package.json に追記してください。

"eslintConfig": {
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 2017,
    "sourceType": "module",
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true,
      "jsx": true
    }
  },
  "extends": "airbnb",
  "rules": {
    "comma-dangle": 0,
    "function-paren-newline": 0
  }
},

rules と書かれた部分にルールについての記述を行っていきます。ちなみに comma-dangle という表記は、行末にコンマをつけなければならないというルールを無効にしています。実際に開発を進めていると、不要に感じたりするルールが出てきますので、そのたびに自分で追加していく形になります。

基本は “ルール名”: 0~2 という書き方をします。

  • 0 または “off” – ルールを無効にする
  • 1 または “warn” – 警告として扱う
  • 2 または “error” – エラーとして扱う

詳しくは以下の公式サイトを確認してください。

Configuring ESLint(英語)

 

サンプルプロジェクトの package.json

package.json の設定が完了すると、このような内容になります。

 

追記:package.json の内部に書ける設定は他にもあります。さらに知りたい方は以下のページを参考にしてください。

package.jsonに設定を書けるって知ってました?

エディターでESLintを使う


ESLint を利用できる環境が整いましたので、お使いのエディターでも扱えるようにしましょう。この記事では Atom で ESLint を利用する方法を解説しています。他のエディターを利用している方は、お使いのエディターで ESLint を利用する方法を調べてください。

 

Atom パッケージのインストール

Atom を開き、上部メニューから環境設定を選んでください。次にインストールを選んで、画像の画面に移動してください。

パッケージのインストールフォームで、linterlinter-eslint, language-babel を検索してインストールしましょう。

これで Atom で ESLint が使えるようになります。

 

Atom の ESLint がエラーを表示しているところ

webpackでビルドする


webpack でビルド(ファイルの出力)をしてみましょう。

ビルドするファイルは自分で React を書くか、サンプルプロジェクトのファイルを利用してください。サンプルプロジェクトのファイルを利用する場合は、開発プロジェクトのルートに、サンプルプロジェクトから entry.jsx, hello.jsx, index.html をコピーしてください。

そして package.json を開いて、scripts を以下のように書き換えてみてください。

"scripts": {
  "build": "webpack --display-error-details",
  "watch": "webpack --watch"
},

これを追加することでコマンドプロンプトで、build ができるようになります。

npm run build

と入力してみてください。設定が間違っていなければ、webpack.config.js の output に記述した場所に、ファイルが出力されているはずです。

出力されたファイルは開発用で圧縮されていません。本番用のファイルを出力したい場合は、webpack.config.js の env 部分を以下のように書き換えてください。

const env = 'development';
↓
const env = 'production';

production に書き換えて npm run build すると、圧縮されたファイルが出力されます。

npm run watch

また上記のように入力すると、ファイルが編集されて保存されるたびに、webpack によって自動的にビルドされるようになります。毎回、build コマンドを入力するのは大変なので、開発するときは watch を使ってみてください。

最後に


後は React を解説しているサイトなどを参考にして、React の書き方を覚えていってください。Redux や Immutable.js など、React 関連のパッケージもたくさんあって学習コストは高めですが、一度使えるようになると便利なので頑張ってください。

ここで解説しているものをベースにして、必要なパッケージやプラグインを追加していく形で開発を進めていけると思います。

webpack や React は進化が激しいので、バージョンが変わると書き方が変わっていたりしますので、そういった場合はまず公式サイトをチェックするようにしてください。この記事も含め、ネットにある情報はすぐに古くなってしまうので、できるだけ新しい情報を参考にするようにしてください。

 

補足


以下で解説している部分は必須ではない項目です。不要だと思った場合は設定ファイルから削除することができます。

 

plugins: [
  new webpack.EnvironmentPlugin({
    NODE_ENV: env
  }),
],

webpack.config.js のこの部分は、EnvironmentPlugin を利用し、JavaScript から process.env.NODE_ENV としてアクセスできる値を設定しています。

if (process.env.NODE_ENV === 'development') {
  console.log('development');
}

例えば上記のように使うことで、開発時のみ分岐させるといったことができます。この部分は必須ではありませんので、不要なら削除してください。

EnvironmentPlugin

 

devtool: 'source-map'

webpackage.config.js のこの部分は、ソースマップを出力するための設定です。サンプルプロジェクトでは dist フォルダ内に、bundle.js.map というファイルが出力されています。上記の表示を残したまま、npm run build をするとソースマップが同時に出力されます。

 

"scripts": {
  "build": "webpack --display-error-details",
},

package.json の –display-error-details と書かれている部分は webpack でエラーが出た場合、エラーの詳細が表示されるオプションです。

リンク


公式サイトのリンクです。さらに情報を集めたい場合はこちらを活用してください。

npmの基本的な使い方

Node.jsに含まれているnpm(パッケージ管理ツール)の基本的な使い方について解説しています。

npmとは開発するプロジェクトにライブラリなどを簡単に導入するための機能です。Node.jsをインストールするとnpmも同時にインストールされます。

インストール方法についてはこちらで詳しく解説しています。

Node.jsをイントールしよう!

Node.js command promptを起動しよう


Windows10のケースで解説しています。他のOSを使用している場合は、そのOSのアプリケーション起動方法に従ってください。

 

Node.js command prompt

スタートメニューからNode.jsの欄を探してください。そしてNode.js command promptを起動してみましょう。

 

起動後

黒い文字だけの画面が起動されると思います。npmは基本的にこのコマンドプロンプトを利用して操作していきます。

以下のコマンドを入力してEnterを押してみてください。

node -v

上記のようにバージョンが表示されると思います。これはあなたの環境にインストールされているNode.jsのバージョンです。

テストプロジェクトを作成する


npmの使い方を覚えるために、テストプロジェクトを作成してみましょう。どこでも構いませんので、新しくフォルダ(ディレクトリ)を作成してみてください。

この解説ではこのようにフォルダを作成しています。

Cドライブ > xampp > htdocs > test

フォルダが完成しましたら、Node.js command promptに戻りましょう。そして cdコマンドを利用して、今作成したフォルダの場所へ移動します。

cdコマンドというのは、ディレクトリ(フォルダ)を移動するためのコマンドです。主に利用するのは以下のコマンドです。よく利用しますので覚えておきましょう。

 

cd test

現在のディレクトリ内に存在するtestディレクトリに移動する。

 

cd ../

現在のディレクトリからひとつ上のディレクトリに移動する。

 

cd ../../

現在のディレクトリからふたつ上のディレクトリに移動する。

 

cd /

ルートディレクトリに移動する。例えば今、Cドライブ内のどこかのフォルダにいる場合は、Cドライブのトップに移動します。

 

現在、こちらの環境では上記のように表示されています。これはCドライブの中にある、Usersフォルダの中にある、AZフォルダに現在いるということです。

ここからさきほど作成したtestフォルダにcdコマンドで移動してみましょう。

cd ../../xampp/htdocs/test

これは現在のディレクトリからふたつ上のディレクトリに移動し、さらにxampp/htdocs/testに移動するというコマンドです。個別に cd ../../、cd xampp/htdocs/testと2回打っても同じ結果になります。

移動ができたら以下のような表示になります。

C:\xampp\htdocs\test>

ちなみにバックスラッシュと¥記号は同じものと考えてください。Windowsのコマンドプロンプトではバックスラッシュの代わりに¥記号が表示されます。

あなたが作成したテストプロジェクトのフォルダに移動できたら、次に進んでください。

package.jsonを作成する


npmを使うためにはまずpackage.jsonというファイルを作成しなければなりません。簡単に作成するコマンドが用意されていますので、以下を入力してみてください。

npm init

英語がズラズラと表示されると思います。これは対話式でpackage.jsonを作成するコマンドで、質問に答えていくとpackage.jsonが作成される仕組みになっています。

とりあえずテストプロジェクトなので、なにも入力せずにEnterだけを何度も押し続けましょう。内容について今は理解する必要はありません。

name: (test)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this ok? (yes)

最後の質問でEnterを押すと、テストプロジェクトのフォルダ内にpackage.jsonというファイルが作成されます。エディターで開いて中身をチェックしてみましょう。

これでnpmを利用する準備は整いました。

パッケージをインストールする


npmを使ってパッケージをインストールしてみましょう。今回はテストプロジェクト内にjQueryをインストールしてみます。以下のコマンドを入力してみてください。

npm install jquery --save

すると以下のような表示になると思います。

C:\xampp\htdocs\test>npm install jquery --save
test@1.0.0 C:\xampp\htdocs\test
`-- jquery@3.2.1

npm WARN test@1.0.0 No description
npm WARN test@1.0.0 No repository field.

C:\xampp\htdocs\test>

テストプロジェクトのフォルダをチェックしてみてください。node_modulesというフォルダが新たに作成されています。その中をのぞくと、jqueryというフォルダも存在しています。

npmではnode_modulesというフォルダ内に、インストールしたパッケージを保存していきます。今回はこれでjQueryがインストールされたということです。

次にpackage.jsonを再度エディターで開いてみてください。

"dependencies": {
  "jquery": "^3.2.1"
}

このような表示が追加されていると思います。これはテストプロジェクトにjQueryのバージョン3.2.1をインストールしました、という記録です。npmを使って様々なパッケージをインストールしていくと、ここにどんどん追加されていきます。

この記録をチェックすると、自分がなんのパッケージ(ライブラリ)のどのバージョンをインストールしたのかが、ひと目でわかるようになります。

npmの基本的なコマンド


npmを使う上で必要になる基本的なコマンドについて解説します。

 

npm install パッケージ名

パッケージをインストールするコマンドです。–save または –save-dev をつけずに使うことはおすすめしません。

 

npm install パッケージ名 --save

パッケージをインストールするコマンドに –save というオプションを追加しています。これをつけると、package.jsonのdependenciesに記録が残るようになります。

本番環境にアップロードして利用するパッケージをインストールする場合に –save をつけてください。

 

npm install パッケージ名 --save-dev

–save-dev は開発環境だけで使うパッケージをインストールする時につけるオプションです。本番環境にアップロードしなくてもいいパッケージは –save-dev をつけてインストールしましょう。

package.jsonにdevDependenciesとして記録されます。

 

npm install

パッケージ名を指定しない場合は、package.jsonの dependencies devDependencies に記載されているパッケージをまとめてインストールします。

 

npm update

これまでにインストールしたパッケージを、まとめて新しいバージョンにアップデートします。個別にアップデートしたい場合は updateの後にパッケージ名を記述してください。

 

npm uninstall パッケージ名

インストールしたパッケージをアンインストールします。

 

-g オプションについて

ブログなどでnpmについて書かれた記事に -g というオプションがついていることがありますが、これはグローバルというNode.jsの一番上の階層にインストールするオプションです。

様々なプロジェクトで共通して利用するようなパッケージをインストールする場合に使うオプションで、基本的には使わなくていいものだと考えてください。

Node.js command promptの初期フォルダを設定する


スタートメニューのショートカットから普通にNode.js command promptを起動した場合、Windows10では最初にユーザーのフォルダが開かれると思います。

毎回、開発をするときにcdコマンドで開発しているプロジェクトに移動するのはめんどうなので、アプリケーションを開いた時に、指定のフォルダを開くように設定しましょう。

 

スタートメニュー

  1. スタートメニューでNode.jsを開く
  2. Node.js command promptを右クリック
  3. その他を選ぶ
  4. ファイルの場所を開く

 

エクスプローラーが開きます

ファイルの場所を開くとエクスプローラーが開きます。ここでNode.js command prompt上で右クリックを押して出てきたメニューから、ショートカットの作成を選びましょう。

ここにショートカットを作成することはできません。デスクトップ上に作成しますか?と尋ねられますので、はいを押してください。

デスクトップに作成されたNode.js command promptのショートカット上で右クリックを押し、プロパティを選んでください。

 

ショートカットのプロパティ

プロパティ内部の作業フォルダーの欄を変更しましょう。

"C:\Program Files\nodejs\"
↓
"C:\xampp\htdocs\test\"

開きたいフォルダのアドレスに変更してから、OKを押してプロパティを閉じてください。次回からそのショートカットを使ってNode.js command promptを起動すると、指定したフォルダの場所が開いた状態で開始されます。

最後に


基本的なnpmの使い方は理解してもらえたのではないでしょうか。

上記のテストプロジェクトでは、package.jsonのプロジェクト名は test で、ライセンスもISC(フリーソフトウェアライセンス)と記述されていますが、一人で開発を進める場合はそのままでも問題はありません。

しかしプロジェクトを複数人で開発する場合や、ネットに公開する場合は、正式な書き方でpackage.jsonを作成するようにしましょう。以下のサイトを参考にしてもらうとわかりやすいと思います。

 

ちなみにGame Usersのpackage.jsonはこのようになっています。

 

npmについてさらに詳しく知りたい方は、公式サイトのドキュメント(英語)を確認してください。

以上でnpmの解説を終わります。

Node.jsをインストールしよう!

この記事ではNode.jsを初心者向けに解説しています。インストール方法、アップデート方法、使い方を解説していますので、Node.jsを利用してみたい方はぜひ参考にしてみてください。

Node.jsとは?


Node.jsとはJavascriptがサクサク動作する環境のことです。主な用途は以下の2つになります。

  • Node.js をインストールして npm というパッケージ管理ツールを利用する
  • Webサーバーソフトとして利用する

npm というのはパッケージ管理ツールで、これを利用すると様々なライブラリを簡単にインストールすることができるようになります。

例えばjQueryを利用しようと思うと、これまでは公式サイトに行って最新バージョンをダウンロードして、サイト内に配置してという使い方をしていたと思いますが、npmを利用する場合は、コマンドプロンプトで以下のように入力するだけで、開発しているプロジェクト内にインストールされるので手軽に扱うことができるようになります。

npm install jquery --save

次にWebサーバーソフトとしての利用ですが、Apacheという名前は聞いたことがあるでしょうか?ApacheはWebサーバーソフトで、世の中にある多くのウェブサイトはそのApache上で動いています。

Node.jsはそのApacheと同じように利用することができるのです。Apache、Node.js それぞれに特徴があり、Node.jsの特徴を気に入った開発者がWebサーバーとして利用しています。

Node.jsをインストールする


Node.jsを Windows環境にインストールする方法を解説します。Node.jsのインストールは非常に簡単で、公式サイトからインストーラーをダウンロードしてきて、それを利用するだけです。

Node.js 公式サイト
https://nodejs.org/ja/

記事を書いている2018年1月4日現在では、8.9.4 LTS(推奨版)と9.3.0(最新版)の2種類が置いてあります。特に理由がなければ推奨版を利用すればいいでしょう。

インストールするバージョンをクリックすると、拡張子が .msi のファイルがダウンロードされます。そのファイルをダブルクリックしてインストールを行いましょう。

 

Node.js インストーラー

Nextを押してインストーラーを進めていきましょう。

 

Node.js インストール完了

この画面が出るとインストールは完了です。

Node.jsのアップデート方法


Windows環境の場合はアップデートも簡単です。インストールしたときと同じように公式サイトからインストーラーをダウンロードしてきて、そのままインストールを行うだけで、アップデートが完了します。

古いNode.jsをアンインストールする必要はありません。

 

次はnpm(パッケージ管理ツール)の使い方を解説します。

npmの基本的な使い方

Node.jsの詳しい解説


Node.jsについてもっと詳しく知りたい方は、以下のリンクを参考にしてください。

XAMPPのアップデート方法

XAMPPで作成した開発環境をアップデートする方法を紹介します。

XAMPPはPHP、MariaDB、phpMyAdminなど複数のソフトウェアが含まれたパッケージですが、それらのソフトウェアを個別にアップデートするのはおすすめしません。手間がかかる上に正常に動作させるのに知識が必要になるためです。

XAMPPのアップデートは一度アンインストールしてから新しいバージョンをインストールする方法で行いましょう。設定ファイルの変更部分さえ覚えておけば、1、2時間ほどで新しいバーションに移行することが可能です。

手順-1 ファイルをバックアップする


まず現在のxamppフォルダのバックアップを取りましょう。Cドライブにあるxamppフォルダを他のドライブや、DVDなどのメディアにコピーしましょう。

必要なファイルのみバックアップしたいという方は、以下のファイルを保存してください。

  • xampp > htdocs > あなたが作成したフォルダとファイルのすべて
  • xampp > apache > conf > httpd.conf
  • xampp > php > php.ini
  • xampp > mysql > bin > my.ini
  • xampp > phpMyAdmin > config.inc.php
  • xampp > phpMyAdmin > libraries > config.default.php

当ブログのXAMPP記事を参考に設定を行った場合は、上記のファイルのみで大丈夫です。他の情報を参考に設定を行った場合は、その際に変更したファイルも保存しておいてください。

通常は xampp > htdocs 内にファイルを用意して開発を進めますが、もし違う場所に開発ファイルを保存している場合は、そちらも忘れずにバックアップしておきましょう。

※ バックアップのし忘れがあると取り返しがつきませんので、xamppフォルダごと保存することをおすすめします。

手順-2 データベースをエクスポートする


開発でデータベースを作成した場合は、データベースをエクスポートしましょう。データベースを作成していない場合は、この手順は省いてもらって構いません。

phpMyAdmin にアクセスしてください。コントロールパネルのMySQL右側のAdminボタンをクリックするか、ブラウザで http://localhost/phpmyadmin/ を開いてください。

 

phpMyAdmin トップページ

左側のナビゲーション部分にいろいろなデータベースが表示されていると思いますが、今回、保存するのはあなたが作成したデータベースのみです。それ以外のデータベースを保存する必要はありません。

左側のナビゲーションからあなたが作成したデータベースを選んでください。

 

データベースを開いたところ

次に画面上部のエクスポートと書かれた部分をクリックしてください。

 

エクスポート画面

この画面で実行ボタンをクリックすると、データベースがエクスポートされます。画像では gameusers というデータベースをエクスポートしていますので、gameusers.sql というファイルが作成されます。

このファイルはXAMPPアップデート後にインポートしますので、大事に保存しておいてください。

エクスポートするファイルについて細かく設定したい場合は、ラジオボタンで詳細を選んでオプションを設定してください。この設定にはデータベースの知識が必要になります。

作成したデータベースが複数ある場合は、上記の手順でデータベースそれぞれにエクスポート処理を行ってください。

手順-3 XAMPPをアンインストールする


XAMPPをアンインストールしましょう。

以下はWindows10の環境でソフトウェアをアンインストールする方法を解説しています。違うOSを利用している場合は、それぞれのOSのアンインストール方法を用いてください。

 

Windows10のタスクバー

Windows10の場合は左下タスクバーに アンインストール と入力してください。

 

スタートメニュー

プログラムと機能をクリックしてください。

 

プログラムのアンインストールまたは変更画面

プログラムのアンインストールまたは変更画面が開きますので、そこでXAMPPを選んでダブルクリックしてください。

 

Question

XAMPPをアンインストールしてもいいですか?と尋ねられますのでYesをクリックしましょう。さらに htdocsフォルダを削除するか聞かれますのでYesを選んで削除してください。手順-1ですでにバックアップを行っていますので削除しても大丈夫です。

アンインストール後に再起動が必要ですと表示された場合は、Windowsを再起動しましょう。これでアンインストールは終わりです。

手順-4 XAMPPをインストールする


XAMPPの新しいバージョンをインストールします。以下のサイトに移動してインストールしたいバージョンをダウンロードしてきましょう。

XAMPP ウェブサイト
https://www.apachefriends.org/jp/

インストールについてはこちらのページで詳しく解説しています。わからない場合はこちらをチェックしてみてください。

XAMPPのインストール方法を解説します

手順-5 XAMPPの設定を行う


XAMPPの設定を行いましょう。編集する内容は以下を参考にしてください。独自の設定を行っている方は、バックアップしたファイルを参考にしながら設定を行ってください。

  • xampp > apache > conf > httpd.conf

 

  • xampp > php > php.ini

  • Game Usersの開発に参加する場合

 

  • xampp > mysql > bin > my.ini

 

  • xampp > xampp-control.exe を管理者として実行する

xampp-control.exe にカーソルを合わせ、右クリックをしてみてください。するとメニューが現れますので、そこからプロパティを選んでください。

上のタブから互換性を選んでください。

管理者としてこのプログラムを実行するにチェックを入れてOKをクリックしてください。

 

  • MariaDB / MySQLのパスワードを設定

コントロールパネルを起動し、ApacheとMySQLを起動します。そしてパネル右側 Shell と書かれている部分をクリックしてください。

mysqladmin -u root password と入力してキーボードの Enter を押してください。

パスワードの入力を求められるので2度同じパスワードを入力して Enter を押してください。

 

  • xampp > phpMyAmin > config.inc.php

 

  • xampp > phpMyAmin > libraries > config.default.php

 

これでXAMPPの設定は終わりです。各設定について詳しく知りたい方は以下を参考にしてください。

手順-6 データベースをインポートする


手順-2でエクスポートしたデータベースをインポートしましょう。

phpMyAdmin にアクセスしてください。コントロールパネルのMySQL右側のAdminボタンをクリックするか、ブラウザで http://localhost/phpmyadmin/ を開いてください。

 

phpMyAdmin トップページ

画面上部にあるデータベースをクリックしてください。

 

データベースを作成する

データベース作成画面に移動するので、左のインプットフォームに作成するデータベースの名前を入力して、実行ボタンを押してください。

 

データベースが作成されました

データベースが作成されましたので、手順-2でエクスポートしたデータベースをインポートします。画面上部のインポートと書かれた部分をクリックしてください。

 

データベースをインポートします

アップロードファイルと書かれた部分の横に、ファイル選択と書かれたボタンがあると思います。そこをクリックして、手順-2でエクスポートした拡張子が .sql のファイルを選んでください。

ファイルを選んだら画面をスクロールし、一番下にある実行ボタンをクリックしてください。

 

インポート完了

インポートが正常に終わると画像のような画面が表示されます。他にもエクスポートしたデータベースがある場合は、同じ手順でインポートを行ってください。

これでデータベースのインポートは終わりです。

XAMPPのアップデート完了


最後に xampp > htdocs 内に手順-1でバックアップしたフォルダやファイルをコピーすればXAMPPのアップデートは終わりです。

開発をしていると開発環境に新たなソフトウェアをインストールしたり、設定ファイルを変更することがあると思います。その場合は必ずインストールしたソフトウェアや、変更した部分について記録を残しておきましょう。

自分がなにをインストールして、どこを変更したのか記録しておけば、次回、XAMPPをアップデートするときも同じ手順をたどって、素早く開発環境を作ることができるようになります。

長くなりましたが、お疲れ様でした!

 

XAMPP インストール・設定 関連記事

XAMPPの設定方法-4 phpMyAdmin

XAMPPのApache、PHP、データベースの設定が終わりましたので、最後に phpMyAdmin の設定を行います。

phpMyAdmin がなにかわからない人のために説明すると、これはデータベースをブラウザ上で簡単に扱うためのソフトウェアです。プログラムを始めたばかりの方はデータベースの存在価値があまりわからないと思いますが、それなりの規模のウェブサイトを作ろうと思うと、必ずデータベースは必要になります。

今、世の中で知名度のあるサイトの多くはデータベースを活用しています。

phpMyAdmin を使わない場合は、データベースの管理をコマンドプロンプト(黒い画面)でコマンドを打ちながら操作しなければならなくなります。これは本当に難易度の高い作業なので、絶対にデータベースの管理ソフトは利用した方がいいです。

ですので、最初はよくわからなくても使い方を頑張って覚えていきましょう!

phpMyAdmin(データベース管理ソフト)の設定


エクスプローラーでCドライブを開き、その中のxamppフォルダを開いてください。そしてphpMyAdminというフォルダを開いて、config.inc.php というファイルを見つけてください。

phpMyAdmin(フォルダ) > config.inc.php(ファイル)

 

config.inc.phpファイル

config.inc.php をメモ帳またはエディターで開きましょう。エディターで開いたら、これまでの設定と同じようにメモ帳やエディターの画面でキーボードの Ctrl(コントロールキー)+ F(エフ)を押して検索ウィンドウを開いてください。

 

検索ワード:$cfg[‘Servers’][$i][‘password’]

この ” 内に XAMPPの設定方法-3 データベース で入力したデータベースのパスワードを入力しましょう。上では ‘0123456a’ と書かれていますが、これはサンプルのパスワードです。同じものを入力しても正常に動作しません。

ここでパスワードを入力すると、phpMyAdmin からデータベースにログインして操作することができるようになります。

データベースをインポートする際の時間制限をなくす設定


エクスプローラーでCドライブを開き、その中のxamppフォルダを開いてください。そして以下のフォルダを順番に開いていって、config.default.php というファイルを見つけてください。

phpMyAdmin(フォルダ) > libraries(フォルダ) > config.default.php(ファイル)

 

config.default.php ファイル

config.default.php をメモ帳またはエディターで開きましょう。エディターで開いたら、これまでの設定と同じようにメモ帳やエディターの画面でキーボードの Ctrl(コントロールキー)+ F(エフ)を押して検索ウィンドウを開いてください。

 

検索ワード:$cfg[‘ExecTimeLimit’]

開発が進んでいくと大きなサイズのデータベースをインポートする必要が出てきたりするのですが、その際に時間制限に引っかかって処理が正常に完了しないことがあります。

通常は300秒(5分)でエラーが表示されてしまうのですが、この設定にすることで時間の制限がなくなり、データベースのインポート処理が完了するまでエラーが表示されなくなります。

phpMyAdmin にアクセスする


XAMPPのコントロールパネルで、MySQLと書かれている場所の右側にある Admin というボタンをクリックしてみてください。

コントロールパネルの Admin ボタン

ここをクリックすると phpMyAdmin のトップ画面に移動します。ブラウザのアドレスバーに http://localhost/phpmyadmin/ を入力して移動することもできます。

設定によって、ログイン画面がでることがあります。その場合は以下の情報を入力してください。

ユーザー名:root
パスワード: XAMPPの設定方法-3 データベースで設定したパスワード

 

phpMyAdmin トップ画面

ここからデータベースを操作することができます。データベースを新たに作成したり、データを入力したり、バックアップのためにデータベースをエクスポートしたり、様々な操作を行うことができます。

XAMPP の設定完了!


お疲れ様でした!

これでXAMPPの設定は終わりです。xampp > htdocs の中にフォルダを設置して開発を始めてみてください。

最後に XAMPP をアップデートする方法を紹介します。時間が経つと新しいバージョンに入れ替えたくなるので、アップデートしたくなったら、ぜひ次の記事もチェックしてみてください。

XAMPPのアップデート方法

XAMPP インストール・設定 関連記事

XAMPPの設定方法-3 データベース

XAMPPのApacheとPHPの設定が終わりましたので、次はデータベースの設定を行います。

MariaDB / MySQL(データベース)の設定


エクスプローラーでCドライブを開き、その中のxamppフォルダを開いてください。そして以下のフォルダを順番に開いていって、my.ini というファイルを見つけてください。

mysql(フォルダ) > bin(フォルダ) > my.ini(ファイル)

my.ini ファイル

my.ini をメモ帳またはエディターで開きましょう。

 

my.ini をエディターで開いたところ

my.ini も英語だらけですが、Apache & PHP の設定と同じで、必要な部分を検索して書き換えるだけで設定は終わります。

メモ帳やエディターの画面でキーボードの Ctrl(コントロールキー)+ F(エフ)を押して検索ウィンドウを開いて、必要な部分を検索しながら、以下のように書き換えてください。

#を3つ削除するだけです。

書き換えが終わったら忘れずに保存しましょう。

XAMPPのコントロールパネルを使う


次にXAMPPに用意されているコントロールパネルを使ってみましょう。エクスプローラーでCドライブを開き、その中のxamppフォルダを開いてください。そして xampp-control.exe というファイルを探してください。それがコントロールパネルの起動ファイルになります。

 

xampp-control.exe

まだ起動はしないで xampp-control.exe にカーソルを合わせ、右クリックをしてみてください。するとメニューが現れますので、そこからプロパティを選んでください。

 

xampp-control.exe のプロパティ

こういうウィンドウが表示されますので、上のタブから互換性を選んでください。

 

xampp-control.exe のプロパティ 互換性タブ

管理者としてこのプログラムを実行するにチェックを入れてOKをクリックしてください。これはなにを設定していたかというと、この xampp-control.exe をダブルクリックしたときに、毎回管理者として実行するように設定しています。

なぜそうする必要があるのかというと、環境によって Apache やデータベースが正常に起動しないことがあるのですが、管理者として起動した場合はそういう問題が起こらないためです。

xampp-control.exe をダブルクリックして起動してみましょう。

 

XAMPPのコントロールパネル

ユーザーアカウント制御の画面が出ると思いますので、はいを押してください。するとコントロールパネルが起動されます。次はコントロールパネル上で、Apacheと書かれている部分の右側にある Start をクリックし、続けてMySQLと書かれている部分の右側にある Start をクリックしてみましょう。

画像のように緑色の四角で文字が囲まれると、Apache とデータベースの起動が正常に成功したことになります。

これから開発を進めていく時は、このコントロールパネルを使うことになりますので、xampp-control.exe のファイルの場所は覚えておきましょう。デスクトップにショートカットを作ったり、ランチャーソフトに登録すると起動しやすくなるのでおすすめです。

MariaDB / MySQLのパスワードを設定


ここから少し難しくなるのですが、コマンドプロンプトを使ってデータベースのパスワードを設定します。

コントロールパネルの右側 Shell と書かれている部分をクリックしてください。

コントロールパネルの Shell

ここをクリックするとコマンドプロンプト(黒い画面)が立ち上がります。次にその画面で mysqladmin -u root password と入力してキーボードの Enter を押してください。

コマンドプロンプトに入力した状態

New password:
Confirm new password:

Enter を押すと、このように表示され、パスワードの入力を求められるので2度同じパスワードを入力して Enter を押してください。ここで入力するパスワードは、今後、あなたが開発するプログラムからデータベースを利用するときや、 phpMyAdmin (データベース管理ソフト)でログインするときに必要になりますので、忘れないようにしてください。

これでデータベースの設定が完了しました。次は phpMyAdmin の設定を行います。

XAMPPの設定方法-4 phpMyAdmin

XAMPP インストール・設定 関連記事

XAMPPの設定方法-2 PHP

XAMPPのApacheの設定が終わりましたので、次はPHPの設定を行います。

PHPの設定


エクスプローラーでCドライブを開き、その中のxamppフォルダを開いてください。そしてphpフォルダを開いて、php.iniというファイルを探してください。

php(フォルダ) > php.ini(ファイル)

php.iniファイル

見つからない場合は、php.ini-development というファイルをコピーして、php.ini にファイル名を変更してください。この時、php.ini-development 自体を編集しないように気をつけてください。

php.ini をメモ帳またはエディターで開きましょう。

 

php.iniをエディターで開いたところ

php.ini の中身も英語で難しそうに感じると思いますが、こちらも必要な部分を検索して書き換えるだけです。ただApacheの設定よりも書き換える部分が多いので頑張ってください。

メモ帳やエディターの画面でキーボードの Ctrl(コントロールキー)+ F(エフ)を押して検索ウィンドウを開いて、必要な部分を検索しながら、以下のように書き換えてください。

upload_max_filesize / post_max_size / memory_limit の設定についてですが、これらはアップロードできるファイルの最大サイズを設定しています。256Mと書かれているのは、256メガバイトまでのファイルを一度にアップロードできるということです。

通常のウェブサイトではこんなに大きなファイルをアップロードすることはないのですが、上記で大きめの数字を設定している理由は、phpMyAdmin(データベース管理ソフト)でデータベースをインポート(インストールのような意味)する際に、ファイルサイズが大きい方が便利なためです。

開発が進んでいくと自然とデータベースのサイズは大きくなります。アップロードできるサイズが小さいと、データベースのインポート時にひっかかってしまうためです。

ただしスペックがあまり良くないパソコンを利用している場合は、ここの数字は小さめに設定しましょう。

この設定は以下の関係を維持してください。例えば memory_limit を post_max_size より小さな数字にしてはいけません。

memory_limit > post_max_size > upload_max_filesize

 

php.ini の書き換えがすべて終わったら保存しましょう。これでPHPの設定は終わりです。次はデータベースの設定を行います。

XAMPPの設定方法-3 データベース

Game Usersの開発用設定


Game Usersの開発に参加してくれる方は、こちらの設定を php.ini で追加で行ってください。

 

XAMPP インストール・設定 関連記事