cidermitaina

フロントエンドエンジニアをやっています。
25歳です。頑張るから読んでほしい。

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

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 ファイル名

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


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

or

npm run webpack

or

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

モードはdevelopmentproductionnoneが存在します。

・production

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

たとえば、

bundleしたソースのconsoleを消す

uglifyjs-webpack-pluginをinstallします。

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

or

yarn add uglifyjs-webpack-plugin --dev

or

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の続きも書こうと思います。

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

はじめてのNode.js 2

昨日の続きです。

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');
  1. expressとnode.jsのpathモジュールを読み込む
  2. appを用意、ejsを置くディレクトリを決めて、 view engineとして指定する


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



以下が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

  1. Herokuにログイン
    heroku login

  2. Herokuに新しいアプリケーションを作成
    heroku create XXX

  3. Herokuにpushする
    git push heroku master

  4. Herokuコマンドでサーバーを起動
    heroku ps:scale web=1

6. まとめ

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




はじめてのNode.js 1

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

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


1. node.jsとは

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

特長

  • V8エンジンで動いている

  • イベント駆動

    • 何かのきっかけで処理を行う仕組み
  • ノンブロッキング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のモジュール群

Index | Node.js v8.11.1 Documentation



4. expressを使う

expressとは

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

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

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

    ※「express-generator」というnpmモジュールを使用すると、アプリのひな型を自動生成することができます。 ビューのテンプレートエンジンも選択でき、すぐに動作を確認することが可能

  2. expressアプリケーションの作成
    express -e myapp(-eはejs、myappというプロジェクト)

  3. サーバー起動
    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メソッドを捌いているだけなので怖くない




はじめての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="txt1">
    <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.txt1;
        this.message ='you typed: ' + str + '.';
      } 
    }
});



4. methods

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

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

  1. 入力フィールドの値がtxt1にバインド
  2. txt1を取り出すことで、入力フィールドの値が得られる。
  3. その値を加工、messeageに設定
  4. 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

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


npm-scriptsを使った開発環境

いつも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のメリット、デメリットをまとめてみます。

メリット

  1. シンプルな開発環境

  2. スクランナー独自のルールを学習しなくて済む

  3. 豊富なnode_modulesを直接叩ける

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

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


デメリット

  1. 環境依存

  2. 可読性が悪くなる

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

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



まとめ

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

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




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

github.com

2017年と2018年

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

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


音楽のこと

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

そんな1年でした。


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

Healing

Healing

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

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

Are You Anywhere [12 inch Analog]

Are You Anywhere [12 inch Analog]

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

Jersey Devil

Jersey Devil

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

WILLOWBANK

WILLOWBANK

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



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

Before Today

Before Today

I Can't Tell You How Much It Hurts

I Can't Tell You How Much It Hurts

  • moow
  • ヒップホップ/ラップ
  • ¥1500




1 Hour of Relaxing Zelda: Breath of the Wild Music


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

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

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



本のこと

2017年は小説を読む量が減りました。 お仕事を変えたこともあると思うのですが、技術書を読むことが増えた気がします。

とりあえず読んだ小説

朝顔の日

朝顔の日

言葉ひとつひとつがとても綺麗でした。

お目出たき人 (新潮文庫)

お目出たき人 (新潮文庫)

池袋にある梟書茶房で。

楽園のカンヴァス (新潮文庫)

楽園のカンヴァス (新潮文庫)

ラストの"夢をみたんだ"っていう言葉が印象的でした。

かわいくてポップな感じがしました。

グレート・ギャツビー (村上春樹翻訳ライブラリー)

グレート・ギャツビー (村上春樹翻訳ライブラリー)

アメリカンドリーム



気になる本、技術書、漫画

日曜日の人々

日曜日の人々

星の子

星の子

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

きちんと読みたい。

Webフロントエンド ハイパフォーマンス チューニング

Webフロントエンド ハイパフォーマンス チューニング

会社に置いてあるので読みたい

毎週気になる...





お仕事のこと

1年間を振り返ってみると、化粧品案件で診断コンテンツを作ったり、大企業のコーポレートサイトを作成したり、 100ページ規模のサイトをcss設計を含めて作成したり、とても充実した一年になりました。

振り返ると土日も家に帰ってからもコード書いてたなあ、っていう印象です。 何かを学ぶのに人の倍しないと覚えられないのでほんとうに辛かったのですが、 コードを書くことが楽しくて、何か新しいことができた瞬間が嬉しくて、作ったページを先輩が褒めてくれる瞬間が大好きで 1年間頑張れた気がします。

2017年の目標は、フロントエンドエンジニアとして自信を持って名乗れるように技術力をあげていきたいなあ、と漠然と思っています。

  • ES6をきちんと書けるようになりたい。
  • React,Vueでwebアプリを作ってみたい。
  • ReactNativeでアプリを作ってみたい。
  • サーバーサイドのことも勉強したい。(PHP
  • npm scriptを使った開発環境を完成させたい。

漠然としているけれど、今年は難しいことにも挑戦していきたいです。



2018年

2018年新しくはじめたことなのですが、仮想通貨をはじめてみました。 怖くてなかなか始められなかったのですが、やっとはじめました。

とりあえずですが、Zaif、coincheck、Binance、Cryptofolioに登録して 少額ですがはじめてみました。

2017年は個人的に仮想通貨、決済システムが大きく変化したなあ、という印象です。

去年気になったのが、Payment Request API です。 developers.google.com

ネットで買い物するときにめんどうな住所の入力、クレカ番号の入力が簡単になるみたいです。

なんだか送金システムのニュースだったり、仮想通貨のニュース記事を見ていると いつのまにか、紙のお金が本当にただの紙になってしまう日がきてしまうのかなあ、と感じます。

今年は少しずつですが、資産運用もはじめていきたいと思っています。






今年はすてきな思い出がたくさんとできるといいなあ、