2018-05-25

Go言語でhttpサーバーを立ち上げる

Go言語

Go言語でHTTP通信をするには、net/httpパッケージを使用します。

package main

import (
    "io"
    "net/http"
)

func infoHandler(w http.ResponseWriter, r *http.Request) {
    // HTML テキストをhttp.ResponseWriteへ
    io.WriteString(w, `
  <!DOCTYPE html>
  <html lang="ja">
  <head>
  <meta charset="UTF-8">
  <title>hello</title>
  </head>
  <body>
  <h1>Hello World</h1>
  </body></html>
  `)
}

func main() {
    // /hello にアクセスした際に処理するハンドラーを登録
    http.HandleFunc("/hello", infoHandler)

    // サーバーをポート8080で起動
    http.ListenAndServe(":8080", nil)
}

ハンドラ関数の定義

HTTPリクエスト発生時に呼び出される具体的な処理が書かれています。(infoHandler関数) ハンドラ関数は、必ず以下形で定義します。

func 関数名(w http.ResponseWriter, r *http.Request) {
    // 実行する処理
}

http.ResponseWriterインタフェース

ハンドラ関数の第一引数には、http.ResponseWriterインタフェース型のオブジェクトが渡されます。このオブジェクトはHTTPレスポンスヘッダへの値セットや、HTTPレスポンスボディへの出力に使用します。

ioパッケージ

基本的な入出力のための型とインターフェイスがまとめられたパッケージ。

WriteString関数

func WriteString(w Writer, s string) (n int, err os.Error)

WriteStringは、wに文字列sの内容を書きこみます。

ハンドラ関数の登録

main関数内でhttp.HandlerFunc関数を使用することで、アクセスパスとハンドラ関数を結びつけています。

http.HandleFunc("/hello", infoHandler)

サーバの起動

全てのハンドラ関数の登録が完了したら、サーバの起動を行います。

http.ListenAndServe(":8080", nil)

プログラムを実行するには？

基本的には、go run hoge.goもしくはgo build hoge hoge.go | ./hogeとすることで実行することができます。

go build

goはコンパイル型言語なので、CやJavaのように基本的にはコンパイルする必要があります。

go build [コンパイル後のファイル名] [コンパイルしたいファイル名]

コンパイルし,コンパイル後のバイナリファイルを実行するには

./[コンパイル後のファイル名]

で実行します。

go run

自動的にコンパイル・実行してくれる便利なコマンド。

go run ファイル名

コンパイルして実行せずに実行できます。

2018-05-14

webpackについて丁寧に。

webpack

webpack4になったので、これを機に丁寧に理解したいなあ、と思ってまとめました。自分用メモです。

webpackとは

モジュールバンドラのこと。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。

モジュールバンドラ
複数のモジュールを1つにまとめたファイルを出力する
ツールのこと

なんでモジュールバンドラを使うの？

機能ごとにファイルを分割（モジュール化）できるから
自分が作成したモジュールだけではなく、外部モジュール（npmなどでインストールできるパッケージなど）も利用できるから
リクエスト数を減らせるから
依存関係を解決したファイルを出力できるから

自分が作成したモジュールだけではなく、外部モジュール（npmなどでインストールできるパッケージなど）も利用できます。

ファイルを分割（モジュール化）するメリットは？

コードが見やすくなる
名前空間を生成できる（変数の競合やグローバル汚染を防ぐ）
モジュールの保守性を高められる
モジュールの再利用性を高められる

webpackを使ってみる

実際にwebpackを使う手順です。

1. webpackローカルインストール

npm install webpack --save-dev
or
yarn add webpack --dev

2. webpack-cliのインストール

webpackコマンドでwebpackを実行するために、以下のコマンドでwebpack-cliをインストールします。
（webpack 4から必要になったみたいです。）

npm install webpack-cli --save-dev
or
yarn add webpack-cli --dev

3. webpack.config.jsの設定

webpack.config.jsとは？

webpackの設定ファイルのことです。

// output.pathに絶対パスを指定する必要があるため、pathモジュールを読み込んでおく
const path = require('path');

module.exports = {
  // モードの設定、v4系以降はmodeを指定しないと、webpack実行時に警告が出る
  mode: 'development',
  // エントリーポイントの設定
  entry: './src/js/app.js',
  // 出力の設定
  output: {
    // 出力するファイル名
    filename: 'bundle.js',
    // 出力先のパス（v2系以降は絶対パスを指定する必要がある）
    path: path.join(__dirname, 'public/js')
  }
};

4. webpackコマンドで実行

npx webpack

npm run webpack

yarn webpack

を実行するとbundle.jsという名前のファイルがpublic/js/配下に出力されます。

webpack.config.jsを詳しく

webpack.config.jsの設定に関してさらっと流しちゃったので、詳しくまとめます。

module.exports = {
    mode: 'development',
    entry:'./src/assets/js/main.js',
    output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'public/assets/js')
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }
}

1. mode

モードはdevelopment、production、noneが存在します。

・production

productionにすれば、何も指定しなくてもコードが圧縮されます。自分で設定をカスタマイズする場合は、uglifyjs-webpack-pluginというプラグインが必要になります。

たとえば、

bundleしたソースのconsoleを消す

uglifyjs-webpack-pluginをinstallします。

npm install uglifyjs-webpack-plugin --save-dev

yarn add uglifyjs-webpack-plugin --dev

const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public/js'),
  },
  optimization: {
    minimizer: [
      new UglifyJSPlugin({
        uglifyOptions: {compress: {drop_console: true}},
      }),
    ],
  },
};

www.npmjs.com

・development

差分ビルドの高速化がされている。

・none

すべての設定が無効。

2. entry

出力の設定

3. output

出力の設定。出力するファイル名や出力先のパスを指定する。 OSによってパスが異なることを防ぐために、出力先のパスの指定にはpath.join()を利用

4. loader

画像やCSSなどのJavaScript以外のファイルをJavaScriptで扱えるように変換したり、バンドルする前にモジュールに対して実行する機能のことです。 TypeScriptをJavaScriptに変換、画像をDataURLに変換、コードをチェックするなど、ローダーによって機能は様々。 js以外のどんなファイルでもloaderさえ使えば読み込むことができます。

module: {
    rules: [
        {
        // 拡張子 .js の場合
            test: /\.js$/,
            exclude: /node_modules/// node_modules は除外する
            //利用するローダー
            use: [{
                  loader: 'babel-loader',// Babel を利用する
                  options: {
                      presets: ['env']
                  }
            }],
        }
    ]
}

babel-loader
ES2015（ES6）のコードをES5のコードに変換するローダー。

www.npmjs.com

って感じです。

node,jsの続きを書こう書こうと思って、webpackのを書いちゃいました。。。忘れないうちにnode.jsの続きも書こうと思います。

音楽のことも書きたい...

2018-04-19

はじめてのNode.js 2

Node.js

昨日の続きです。

express-generatorで吐き出されたapp.jsのコードを読んでみたのでまとめてみました。
（以下のソースは全て吐き出されたapp.js上のコードです。）

あと、せっかくなのでHerokuを使ってサーバー公開してみるところまでやってみたので手順をまとめました。

1. expressのapp.js

サーバー起動時に実行するファイル
必要なURL（ルーティング）を決めていく
使用するミドルウェアを設定していく

2. app.set

expressで使うテンプレートエンジンを設定する

var express = require('express');
var path = require('path');
var app = express();

 // view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

expressとnode.jsのpathモジュールを読み込む
appを用意、ejsを置くディレクトリを決めて、 view engineとして指定する

app.set()
- アプリケーションを必要とする各種の設定情報をセットするためのオブジェクトとメソッド
view engine
- テンプレートエンジンの種類を示す。具体的には第二引数で’ejs’をテンプレートエンジンを使用しているということになる
path.join関数
- 返り値として第1引数以降のパスを順番に結合したパスが得られる
__dirname
- 現在実行中のソースコードが格納されているディレクトリパスが格納されている
  ex) ~/hoge/Foo.js/a.js → ~/hoge/Foo.js

以下がexpressの公式ドキュメントです。app.setのことをもっと詳しく書いてくれてます。
http://expressjs.com/ja/4x/api.html

3. app.use

使うミドルウェアの設定、URLの設定（ルーティング）を行う。
next();が呼ばれる度に実行される。

必要なモジュールを読み込んだり、/や/usersのようにルーティングを記述。

var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');


 // morganを使ってlog出力を行う 
app.use(logger('dev')); 

// body-parserでユーザーのリクエストのbody情報を取得
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false })); 

// リクエストを受けてcookie情報を取得する
app.use(cookieParser());

// 静的ファイルの場所を指定する。ここでは public/ 以下のファイルが静的ファイルとして設定される
app.use(express.static(path.join(__dirname, 'public')));

// routes/index.js のルーティング内容を 'http://domain/' をGETで受け取った時に実行する
app.use('/', routes);
// routes/users.js のルーティング内容を 'http://domain/users' をGETで受け取った時に実行する
app.use('/users', users);

morgan
- logの出力。
  morgan() の引数に文字列を渡すか、format: を指定することで、ログのフォーマットを指定することができる。
body-parser
- HTTPリクエストボディのデータを取得する
express.static
- 静的ファイルの読み込み
  img、CSS ファイル、JavaScript ファイルなど

4. module

//routesというモジュール
var routes = require('./routes/index');

app.use('/', routes);

routes/index.js のルーティング内容を 'http://domain/' をGETで受け取った時に実行

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

. /routes/index.ejsをrenderして返す処理

5. Herokuを使う

herokuとは?

gitでコードを送られると、自動でサーバー公開までやってくれる便利なサービス。

Herokuに登録、Heroku Toolbelをインストール

Heroku

jp.heroku.com

Heroku Toolbel devcenter.heroku.com

Procfileを用意する

Procfileとは？

herokuがこのプロジェクトを起動するときに実行するコマンドを記載している。

Herokuにpush

Herokuにログイン
heroku login
Herokuに新しいアプリケーションを作成
heroku create XXX
Herokuにpushする
git push heroku master
Herokuコマンドでサーバーを起動
heroku ps:scale web=1

6. まとめ

express-generatorで吐き出されたapp.jsの中身を確認。
herokuのリモートリポジトリを使い公開

2018-04-18

はじめてのNode.js 1

Node.js

この間、社内用のテンプレートファイルを作成するにあたってgulpfileを作成していたのですが、謎のエラーに遭遇しました。。。

このエラーが、気になって気になってもやもやしてたのですが、調べてるうちにNode.jsのことを何も分からずに書いてたなあ、と思い勉強したことのまとめです。

1. node.jsとは

javascriptを使ってサーバーサイドのコードを書くことができるプラットフォーム。イベントループモデルで、ノンブロッキングI/Oを使用している。

特長

V8エンジンで動いている
- chromeで使われているJavascriptエンジン
- ブラウザとほぼ同じJavascriptが書ける
イベント駆動
- 何かのきっかけで処理を行う仕組み
ノンブロッキングI/O
- ファイルの読み込みのような時間がかかる処理を非同期に実行ができる
- 処理を詰まらせずにできる

2. node.jsはイベントループなサーバー

WEBサーバの種類

apache →接続ごとにメモリを確保する為、同時リクエスト数に上限がある。

NGINX →イベントループで非同期の為同時リクエストに強い。

イベントループなサーバーだと何がいいの？

多くのユーザーの同時アクセス・大量リクエストを捌きやすい。イベントループで処理を待たずに、イベントが呼ばれるまでループする

node.jsはjavascriptを知っていれば使える。

3. node.jsでwebサーバーを立てる

httpのcreateServerを使います。

var http = requre('http');  //モジュールを読み込む、使う

http.createServer(function(req, res){
    res.writeHead(200, {'content-Type': 'text/plain'});
    res.end('Hello World');
}).listen(3000);

node.jsのモジュール群

http/https
dns
path
fs など

Index | Node.js v8.17.0 Documentation

4. expressを使う

expressとは

Node.jsで一番使われているフレームワーク
スケルトンプロジェクトのジェネレーターもある
基本的な機能はほぼ揃っている

expressで使ったスケルトンサイト作成

グローバルにexpressをインストール
npm install -g express-generator

※「express-generator」というnpmモジュールを使用すると、アプリのひな型を自動生成することができます。ビューのテンプレートエンジンも選択でき、すぐに動作を確認することが可能
expressアプリケーションの作成
express -e myapp(-eはejs、myappというプロジェクト)
サーバー起動
cd myapp,npm install,npm start

5. サーバーから静的ページ配信

Webサーバーは何してる？

ブラウザからのGETリクエストにレスポンスしてデータを返している

expressでGETする流れ

GETとは?

ブラウザからサイトを見るときに送るHTTPメソッド
他にはPOST / PUT / DELETE がある。用途で分ける

app.get('/newpage', function(req, res){
    res.render('newpage', {text: 'ejsに文字列を渡す'});
});

上記コードを詳しく見ていくと、

app.get('/newpage'
ブラウザからどのURLにリクエストが来た時の挙動なのか記述

function(req, res){
    res.render('newpage', {text: 'ejsに文字列を渡す'});
});

コールバック関数のレスポンス(res)で指定ejsファイル名をレンダリングするように記述。このときにテンプレートへ渡す引数があれば引数にいれる

6. まとめ

node.jsはサーバーサイドでJavaScriptを書くことが出来るプラットフォーム
同時アクセスが多く、大量のリクエストがあるサーバー向き
expressを使えばWebアプリ構築が簡単にできる
基本的なサーバはGET / POST などのHTTPメソッドを捌いているだけなので怖くない

2018-03-12

はじめてのVue.js

Vue.js

化粧品案件で診断コンテンツを作るっていうお仕事がありました。スタイルとカラー選択で診断結果が変わるというコンテンツなのですが、選んだスタイルによって選べるカラーの種類が変わるという診断コンテンツです。

いつもはjQueryで書いていたのですが、Vue.jsで書いてみようかなと思い（データの更新の簡素化、記述量を減らしたい）、診断コンテンツ作成前にVue.jsについて簡単にまとめて見ました。

※実装した診断コンテンツの仕組みは今度書くつもりです。。。

1. Vue.jsとは？

MVVMの代表。画面表示とデータ管理するモデルの間をつなぎ、スムーズにデータの更新を行う機能を提供。双方向データバインディングを行う（双方向に接続し、どちらかが更新されるとリアルタイムにもう一方も更新される）

MVVM

「model」「view」「viewmodel」の略。「model」（データの管理、ビジネスロジック）「view」（ユーザーインターフェース）「viewmodel」（ModelからViewへ出力データを渡す、ViewからModelへ入力データを渡す）

2. Vue.jsを使ってみる

はじめてのVue.jsということで

・どうやって文字を表示させるの？
・どうやってdataを変更させるの？
・どうやってイベント処理を書くの？
・クラスのバインドって？

っていうところを今回はまとめています。

※環境設定などは省略してます。。。

1. Vueオブジェクト

まずは文字を表示させてみます。

VueオブジェクトとはVue.jsに用意されているViewModelオブジェクト。 Vueオブジェクトを作成し、データと画面表示を関連づけ、処理していく。

var 変数 = new Vue({　オプション情報　});

el：値を表示する対象のタグ（Element）を指定。タグのID情報を用意。 data：渡す値を用意。この値はオブジェクトとして用意し、その中に値をまとめておく。

これでHello world！という文字が表示される。

【html】
<p id="msg">
    {{ message }}
</P>

【js】
var initial = new Vue({
    el: '#msg',
    data: {
      message: 'Hello world！'
    }
});

2. HTML側からVueに値を設定する

HTML側から入力した値をVueオブジェクト側に渡すには？

【html】
<body>
  <div id="msg">
    <p>
      {{message}}
    </p>
    <input type="text" v-model="message">
  </div>
</body>

v-model

v-modelはインスタンス上のデータの名前を渡すことで、データと入力フォームの結びつけをすることができます。

v-model="message"はVueのdata内にあるmessageという項目と同期されるようになる。

3. イベントとメソッドの利用

イベント処理の方法

【html】
<body>
  <div id="msg">
    <p>
      {{message}}
    </p>
    <input type="text" v-model="txt１">
    <input type="button" v-on:click="doaction" value="click">
  </div>
</body>

【js】
var initial = new Vue({
    el: '#msg',
    data: {
      message: 'Hello world！',
      txt1: ''
    },
    methods: {
      doaction: function(){
        var str = this.txt１;
        this.message ='you typed: ' + str + '.';
      } 
    }
});

4. methods

Webページ側に割り当てて使われるメソッドをまとめたもの。イベントなどを使ってWebページのタグに割り当てるメソッドは、ここに。

this.txt1は、Vueオブジェクト内に用意されているtxt1の値を示す。data内の値はこのようにthisを使って参照できる。

入力フィールドの値がtxt1にバインド
txt1を取り出すことで、入力フィールドの値が得られる。
その値を加工、messeageに設定
messageに表示される。

5. クラスのバインド

v-bind:class="{クラス名：プロパティ}"

プロパティは、真偽値を扱う。値がtrueならクラスがon、偽ならfalse。

【html】
<button class="btn" :class="{active: isActive}" v-on:click="isActive=!isActive">button</button>

【css】
.active{
  color:red;
}

公式ガイドを参考に初歩的なところをまとめています。

jp.vuejs.org

今度は実践っていうことで作った診断コンテンツの仕組み部分を忘れないようにまとめようかなあ、と思っています。

2018-01-14

npm-scriptsを使った開発環境

npm

いつもgulpを使って開発をしていたのですが、ハマってしまうとなぜかいつも抜け出せなくて開発環境を整理するだけで時間がかかってしまうことがありました。

もっとシンプルな環境が作れないかなあ、と調べていて見つけたのが、npm-scriptを使った開発環境です。

npm scriptsって？

そもそもnpm scriptsって何だろう？と疑問に思ったのでメモ。

npm-scriptsとは、package.jsonファイルに記述可能なシェルスクリプトのエイリアスです。

具体的にどういうことなのかというと

【package.json】

"scripts": {
    "start": "npm run server",
    "server": "browser-sync start --server ./ --port 3000 --files \"./**/*.html,./assets/css/style.css,./assets/js/bundle.js\"",
  },

このpackage,jsonの記述を例にすると

$ npm startでサーバーが立ち上がり、ファイルの監視がはじまります。

このようにシェルスクリプトやエイリアスコマンドを「scripts」というフィールド登録できます。

手順

1. $ npm init
2. $ npm install module名
3. package.jsonのscriptsを編集

実行

$ npm run scripts名 でscirptを実行できます。

この例でいうと$npm run serverでserverが実行されます。

serverはbrowser-syncを使ってローカルサーバーを作って、ファイルの変更を監視オートリロードするタスクです。

予約語

npm-scriptsには予約語が4つあります。それらはrunをつけずに実行できます。さっきの例だと$ npm startで serverタスクが動きます。

$ npm start
　appを起動するようなshell scriptのエイリアスとして用いる。
$ npm restart
　appを再起動させるためのshell scriptのエイリアスとして用いる。
$ npm stop
　appを停止させるためのshell scriptのエイリアスとして用いる。
$ npm test
　appをテストするようなshell scriptのエイリアスとして用いる。

npm-scriptのメリット、デメリット

npm-scriptsのメリット、デメリットをまとめてみます。

メリット

シンプルな開発環境
タスクランナー独自のルールを学習しなくて済む
豊富なnode_modulesを直接叩ける

タスクランナーを使うと、タスクランナーの勉強コストがかかってしまったり、タスクランナー用のnode_modulesの開発が止まったりして、詰まってしまうことがあります。

npm-scriptsだと、package.json だけで設定と処理が完結するのでとてもシンプルです。

デメリット

環境依存
可読性が悪くなる

実際に使ってみて、macでは動くのにWindowsでは動かない問題に直面してしまいました。原因はmacだとUnixのコマンドラインで動作、WindowsだとWindowsのコマンドラインで動作するので同じ記述だと動作しなかったのです。。。記述を変えて解決しました。。。

また、多くのタスクを増やそうとすると、可読性が悪くなります。。。

まとめ

お仕事ではまだ使っていないのですが、npm-scriptsを使った開発環境は気に入っています。

案件によってケースバイケースだなあと思い、今年は、 LPを作る時はnpm-script、ページものを作成する時はgulpを使おうかなあ（ejsを使ったり、複数人で開発のため環境依存や可読性が悪いのはやだなと思ったため）と個人的に考えています。

最後に作った環境をあげておきます。

github.com

2018-01-04

2017年と2018年

日記音楽

書こう、書こうと思って2018年になってしまいました。。。

2017年の音楽のこと、本のこと、お仕事のこと、2018年頑張ることをまとめていこうと思います。

音楽のこと

2017年はずっと音楽を聴いていた気がします。出社してPCをつけてイヤホンをつける、退社してエレベーターに乗ったらイヤホンをつける、家に着いたらPCをつけて音楽をかける。

そんな1年でした。

今年たくさん聴いたなあ、と思うアルバムをとりあえず

Healing

In Love With a Ghost
エレクトロニック
¥1528

たしか春くらいにリリースされて（3月？だったかな）、東京で過ごすはじめての春にたくさん聴きました。

Are You Anywhere [12 inch Analog]

アーティスト:Submerse
発売日: 2017/10/20
メディア: LP Record

前の記事でも書いたけどsubmerseは大好きなので、もう一度。

Jersey Devil

アーティスト:Ducktails
発売日: 2017/10/06
メディア: CD

迷ったんだけど、今年の秋はこのアルバムをよく聴いたので。

WILLOWBANK

アーティスト:YUMI ZOUMA
発売日: 2017/10/04
メディア: CD

10月にリリースされたアルバム。たくさん聴いたのは12月です。

その他に今年たくさん聴いた曲たち

Ｂｅｆｏｒｅ　Ｔｏｄａｙ

アーティスト:THE NOVEMBERS ノベンバーズ
発売日: 2017/09/12
メディア: CD

https://itunes.apple.com/jp/album/i-cant-tell-you-how-much-it-hurts/1312972569?uo=4&at=10l8JW&ct=hatenablog

Thursday - Single

Luby Sparks
オルタナティブ
¥255

1 Hour of Relaxing Zelda: Breath of the Wild Music

NieR Automata OST Full Complete 「ニーアオートマタ Original Soundtrack」

ゲームのサントラを今年はたくさん聴いた気がします...
特にゼルダとニーアオートマタのサントラはすごくよかったです...

去年はあまりライブに行かなかったのですが、2018年はいろんなライブに行ってみたいなあ、と思っています。とりあえず、1/6のsubmerse とTeen Dazeのミニライブには行きたいと思っています。（行ければいいのだけれど。）