倒れるときは前のめり。

カレーが好きです。

ES2015 + Babel + Webpack + ESLint な開発環境をつくった

ナウなヤングに人気な React のチュートリアルを自分もやりたくなったんだが、まあまずは環境構築だよね…ということで、サクッとやってみた。 ついでに Docker 上で動くようにこまかい工夫を加えてみた。

つくったもの

How to Use

$ dbin/yarn install
$ docker-compose up

ディレクトリ構成

$ tree
.
├── .babelrc
├── .dockerignore
├── .eslintignore
├── .eslintrc.json
├── .git
├── .gitignore
├── Dockerfile.dev
├── dbin
│     ├── console
│     └── yarn
├── dist
│     └── index.html
├── docker-compose.yml
├── node_modules
├── package.json
├── src
│     ├── components
│     │     ├── hello.jsx
│     │     └── world.jsx
│     └── index.js
├── webpack.config.js
└── yarn.lock

つくりかた

Docker

公式の node イメージを使った。 alpine ベースだからサイズも小さい。yarn も導入済み。

Dockerfile

FROM node:7.8.0-alpine

WORKDIR /myapp

docker-compose.yml

version: '2'

services:
  main:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - 4000:4000
    volumes:
      - .:/myapp:cached
    command: "yarn start"

docker-compose run ~ と毎回入力するのがだるいので、こんなスクリプトを用意して dbin/console として呼び出すことにした。

#!/bin/bash
set -eux

readonly APP_CONTAINER="your_conitainer_name"
readonly COMMAND="/bin/sh"

docker-compose run --rm $APP_CONTAINER $COMMAND $@

Babel

トランスパイラ。

$ yarn add --dev babel-core babel-loader babel-preset-2015  babel-preset-react

Webpack

ビルドしてくれたりファイル変更を監視してオートリロードしてくれるすげーやつ。

$ yarn add --dev webpack webpack-dev-server

注意点

Docker 環境上で動作させる際には以下留意すること。

  • host: ‘0.0.0.0’
  • watchOptions でポーリング時間を定義
// webpack.config.js

{
  devServer: {
    contentBase: './dist',
    inline: true,
    host: '0.0.0.0',
    port: 4000,
    hot: true
  },
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  },
(略)
}

ESLint

めちゃくちゃカスタマイズできる文法チェックツール。 とりあえず airbnb のルールを当ててみる。

$ npm info eslint-config-airbnb@latest peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs yarn add --dev eslint-config-airbnb@lates
// eslint.json

{
    "extends": "airbnb",
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "sourceType": "module"
    },
    "rules": {
    }
}

React

みんなだいすきビューライブラリ。

$ yarn add react react-dom

とりあえずそれっぽくコンポーネントつくってみる。

// src/components/hello.jsx

import React from 'react';

const Hello = () => <h1>Hello</h1>;
export default Hello;
// src/components/world.jsx

import React from 'react';

const World = () => <h1>World</h1>;
export default World;
// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

import Hello from './components/hello';
import World from './components/world';

ReactDOM.render(
  <div>
    <Hello />
    <World />
  </div>,
  document.getElementById('app'),
);
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JavaScript Boilerplate</title>
</head>
<body>
  <div id="app"></div>
  <script src="/bundle.js"></script>
</body>
</html>

あとは、http://localhost:4000/ にアクセスすれば変更内容を確認できる。 コンポーネントを修正するとブラウザに内容がリアルタイムで反映される。すごい時代だ。

感想

とりあえずトランスパイラとビルドツールの準備が整い、ES2015 の世界へ飛び込めるようになったので、当初の目的は達成。細かい作法や文法は、ESLint で怒られながら気軽に学べるしなんとかなるでしょ。あと webpack-dev-server はやはり便利だ。

つぎはいよいよ React チュートリアルかな。

参考リンク

Docker上にRails5×MySQLな新規プロジェクトを爆速で構築する

概要

Docker Compose を使って、ローカル環境を(ほぼ)汚さずに Rails5 と MySQL が動く環境を作ったので公開してみる。キモは、rails new で新しくRailsプロジェクト作成後に行う、便利Gemのインストールやめんどうくさい設定もろもろを、Rails Application Template で自動化した点。

Rails on Docker

README.md書いてない適当ぷりではあるけれどそこは勘弁。

動作環境(2017/3/5時点)

ホスト

コンテナ

構成

$ tree
.
├── Dockerfile.dev
├── Gemfile
├── Gemfile.lock
├── docker-compose.yml
└── templates
    ├── Gemfiles.rb
    └── settings.rb

1 directory, 6 files.

How to use

mkdir your_rails_app && cd your_own_app
git clone git@github.com:cheezenaan/rails-on-docker.git . && rm -rf .git
docker-compose run --rm webapp rails new . --database=mysql --force -BT -m ./templates/Gemfiles.rb
docker-compose run --rm webapp bundle e rails app:template LOCATION=./templates/settings.rb
docker-compose up -d webapp

Railsアプリには http://localhost:3000 からアクセスできる。

補足

Rails Application Templates

今回の開発環境構築にあたり苦労した箇所。 Application template の場合はGemのインストールやアプリケーションの設定をまとめて行えるのだが、今回 Docker上 で行う場合は

Could not find gem 'pry-coolline' in any of the gem sources listed in your Gemfile.

とエラーが表示されて進まなくなる。Gemのインストールまでで作業を区切った後、再度 docker-compose run ~ することでなんとかなった。

こういうときはどうする?

Gem を新しく追加したい

ホスト側のGemfileを編集してから、

docker-compose exec webapp bundle install

OK.

rubocop でコードスタイルをチェックしたい

ホスト環境にインストールすればいいのでは。

gem install rubocop

もっさりして重い

Docker for Mac特有の問題らしい。docker-sync使うとわりとマシになる。

いちいち docker-compose exec [container-name] ~~~ 打つのだるい

わかる。自分はコマンドライン補完に頼ってるからまだ耐えられるけれどどうにかしたい。 下の参考記事でも紹介されているラッパースクリプトを用意するのがよさそう。

ぐちゃぐちゃになったから環境作り直したい

docker-compose down --volumes --remove-orphans --rmi all

でコンテナ破棄した後、docker-compose up なりすればいい。

参考記事

MarkdownエディタとしてAtomを使えるようにするまでにやったこと

標題の通り。Atomを導入するまでにやったことの備忘録。

事前準備

すでにインストールしていた場合は、いちど消しておく。

rm -rf ~/.atom
rm /usr/local/bin/atom
rm /usr/local/bin/apm
rm ~/Library/Preferences/com.github.atom.plist
rm ~/Library/Application Support/com.github.atom.ShipIt
rm -rf ~/Library/Application Support/Atom/

Homebrewからインストール

brew cask install atom

パッケージインストール

ターミナル上から

apm install [packege-name]

と入力するとインストールできる。

さらに、パッケージ名の一覧が書かれたテキストファイル(package_hoge.txt)を指定して

apm install --package-file package_hoge.txt

で一括インストールができて非常にラク。

sync-settings 導入

Atomの設定(パッケージやキーマップ等)をgistにアップロードして他のPCと同期できる。 GitHubのアクセストークンとgist idが必要なので別途取得すること。

apm install sync-settings

カラースキーマ

Vimやtmuxでも使えるカラースキーマ、Nord一択。かっこよさは正義。

apm install nord-atom-ui
apm install nord-atom-syntax

フォント

RictyかわいいよRicty

全般

  • atom-beautify
  • project-manager
  • vim-mode
  • terminal-plus
  • file-icons
  • minimap
  • advanced-open-file

advanced-open-fileは、cmd + opt + o でファイル名指定して開ける。ファイルが存在しない場合は指定した名前で新規作成してくれるのが便利。よくある「 cmd + n して cmd + s してファイル名入れて保存…」という3ステップが1ステップに短縮。

Markdown支援

markdown-writerMarkdown記法の入力支援パッケージ。 便利なキーバインドをよしなに追加してくれる機能があるので、以下の手順で有効化する。

  1. cmd + shift + p で コマンドパレット開いて、
  2. Markdown Writer: Create Default Keymaps を選択
  3. keymap.csonキーバインドが追加される

おまけ: インストールしたパッケージの一覧を出力する

前述したパッケージの一括インストール(apm install --package-file [package-file.txt])に使える形式で出力できる。

$ apm list -ib
advanced-open-file@0.16.5
atom-beautify@0.29.16
file-icons@2.0.7
markdown-preview-opener@0.1.1
markdown-scroll-sync@2.1.2
markdown-writer@2.6.3
minimap@4.25.7
nord-atom-syntax@0.4.0
nord-atom-ui@0.9.0
project-manager@3.3.3
sync-settings@0.8.1
terminal-plus@0.14.5
tool-bar@1.0.1
tool-bar-markdown-writer@0.2.0
vim-mode@0.65.2

Ruby歴3ヶ月のWebエンジニア見習いがRubyKaigi2016に参加してきた

9/7~9/10の3日間、京都国際会館で開催されたRubyKaigi2016に参加してきました。

会社のスポンサード等多大な支援を賜って3日間のフル参戦。各講演の技術的な解説については、トゥギャッターや他の参加者によるレポートに譲るとして、Ruby開発経験の浅いエンジニアがRubyKaigiに参加した全体的な感想を、記憶が飛ばないうちに内容をまとめます。

RubyKaigiとは

  • RubyistRubyistによるRubyistのための国際カンファレンス
  • 2006年に始まって以来、首都圏(東京、つくば)での開催が多かったが、首都圏以外で開催するRubyKaigiは今年が初だとか
  • RubyKaigiについてくわしく知りたい方は以下のスライドを参照

どんなテーマがあったの?

  • Rubyそのものに関する話(CRubyの実装仕様, Rubyパフォーマンス改善, Ruby3x3, etc.)
  • Rubyを使ったプロダクトの話(Fluentd, H2O, etc.)
  • "Ruby"Kaigiということもあり、あくまで主役はRuby. Railsをメインテーマとする話題はなし
  • 開催年ごとに講演のトレンドがある?
    • 今年は並列性・並行処理(Concurrency)に関するテーマが全40講演中6講演を占めていた

印象に残った講演

  • レガシーなコードをリファクタリングしていくことについて
  • ビジネスサイドにリファクタリングの重要性を理解してもらうことの難しさとか、あるある多し
  • Non-Nativeにも聴き取りやすくわかりやすいプレゼン
  • Emojiをふんだんに取り入れてテンポの良いスライド構成が参考になった

行ってよかった?

間違いなくよかったです。

  • ふだん使用している開発言語の"中の人"が考えていることや今後の展望等、ほんの一部だけど様子を伺うことができた
  • 多くのRubyエンジニアと交流ができた
    • Twitterやブログで見かけるあの人やこの人も、懇親会等で話しかけると意外とフレンドリー
  • スポンサーブースのフリー茶菓子(提供: GMOペパボ様)最高╭( ・ㅂ・)و

こうしておけばよかったこと

英語学習がんばりましょう

  • Rubykaigiの講演、約半分は海外のエンジニアによる発表
  • 日本のエンジニアによる講演は英語への同時通訳対応があるが、逆はなし
  • 将来的にはRubykaigiの講演をすべて英語に統一したい(できれば安上がりになるのになあ)という、中に人のぼやきも
  • EN -> JAの脳内翻訳が発生してしまい、内容理解にオーバーヘッドが発生して次第についていけなくなる
  • 英語によるインプット(リスニング、リーディング)はストレスなく行えるようにしたい

Rubyへの理解は深めておくべき

  • メタプログラミングとか細かい言語仕様とか"Rubyっぽい書き方"とか
  • 『パーフェクトRuby』を事前に1周通読していたおかげで「さっぱりわからん」ということはなかったが…
  • Rubyのしくみ』が積ん読リストに追加されました

WebやHTTP等、周辺の知識も合わせて理解しておくべき

まとめ

  • もっと勉強しよう、Rubyがんばろうという気持ちになれました
  • RubyKaigi、こわくないしRuby経験浅いエンジニアでも楽しめるからみんな行こう!!!!1

おまけ

※ 参考: 「『せいぜい』がんばって」?|NHK放送文化研究所

初日のOfficial Conference Party にて。ほんもぁずるい

そう、Day3は rebuild.fmとRubyKaigiがブッキングしてしまったのでした

広島優勝おめでとうございます

WEB+DB PRESS Vol.92の特集「Web開発新人研修〜手を動かして学ぶ開発の全体像〜」が、今っぽいWeb開発の全体像をさっと抑えられる良特集だった

「もし自分がゼロからWeb開発の世界に飛び込んだとして、どうやって学びの道筋を定めていこうか」という問いに対して、ひとつの方向性を教えてくれたような特集だった。浅すぎず深すぎず、狭すぎず広すぎずとWeb開発の全体像を示してくれているので、自分のような発展途上の2年目エンジニアが今まで培ってきた技術や知識を棚卸しするにはちょうどよい。

学べること

  • Web開発をとりまく登場人物と求められるスキルについて
  • 開発環境を整える
  • TODOアプリをつくろう!
    • Githubでバージョン管理
    • サーバサイド(API): Ruby on Rails w/ Minitest
    • フロントエンド: npm + ES2015 + Babel + Browserify + React
  • Vagrant + Itamae ではじめる、実践 Infrastructure as Code
  • etc.

よかったこと

  • サーバサイドからフロントエンドまでスピーディに・バランスよく体験することができた
  • OJTとか研修のネタとして膨らませやすい、ほどよい量と質
    • ○○おじさんを囲んで脱線トーク・ディスカッションして、周辺知識の拡充を促すのがよさそう

次にやるなら

トレーニーの習熟度や事前知識にもよるけれど、やっぱり安心と信頼の「Railsチュートリアル」だろうか。

フロントエンドのおもしろさを見出したら、ES2015あたりをキーワードに学習を進めるのがよいのでは。

シン・ゴジラ発声可能上映に参加したら圧倒的な熱量に打ちのめされた

発声可能上映から半日経とうとしてるのに未だ興奮醒めやらぬ状態でまるで考えが収束しそうにないのだけれど、記憶が残っているうちに書き殴っておこう。

正直、ゴジラ作る暇があるならエヴァ完結させてくれよ頼むよ…なんて思ってました。 前言撤回です。ありがとうシン・ゴジラ。ありがとう庵野秀明

ちなみにシン・ゴジラ鑑賞は今回の発声可能上映で4回目(IMAXで2回、立川の極上爆音上映で1回)。IMAXも極爆もシン・ゴジラが初だったけど甲乙つけがたく最高でした。

https://res.cinemacity.co.jp/TicketReserver/studio/movie/710

発端

深夜0時の予約開始からわずか7分で売り切れるプラチナチケットを無事確保。

上映2時間〜60分前

農兵スチームほんとウマいですオススメです

上映60分〜10分前

※平日夜の様子です

センスの良さに嫉妬

今回のイベントの発振源、島本大先生が2〜3つ前の席に…! ファンからのサインにも快く対応していてプロってすげえなとあらためて

上映直前

今回のイベント発起人らしき東宝の中の人のご挨拶に続いて、島本先生によるありがたいお話。

そして

\見せてもらおうか/ \庵野秀明の実力とやらを!!!!/

\パチパチパチパチパチパチ/

上映中

思った以上に愛の手レパートリー多くて、なにかしら叫んでるかペンライト振ってた記憶しかない

上映後

納得のスタンディングオベーション、からの島本コールで公開感想戦に。

劇場のみんな大爆笑でした。

まさかの"""サプライズ"""登場。庵野秀明、新宿に現る。素で気取らない等身大な人なんだなって。 庵野監督登場後のやりとりは、"LINE LIVE"というストリーミングサイト(アプリ?)を観たほうがわかりやすい。

思ったこと

新宿バルト9で行われたシン・ゴジラ発声可能上映 伝説回 レポまとめ #発声可能上映 - NAVER まとめ

島本センセ発案で「見せてもらおうか、庵野秀明の実力とやらを…!」とご唱和してからの、上映後まさかの庵野監督サプライズ登場で「庵野、俺(たち)の負けだ…!」で締める流れが最高に美しかった

2016/08/15 21:55

誰が言ったか「ニコニコのコメ欄をみんなでやる」という表現がまさに今回のイベントを表していて、会場にいた人みんな一体となって眼の前のコンテンツを全力で楽しんだんだなって。

上映がはじまるまでは、「一体どこで声を出せばいいんだ」とはてなマークだらけだったけど、その不安も上映開始1分も経たずに吹き飛んだ。予告編のさらに前、JTセブン-イレブンのCMからなにかしらの掛け声・愛の手が入りはじめるとは思わなかった。こういうノリで楽しめばいいのかと気が楽になったというか吹っ切れた。

先述の"LINE LIVE"で「一試合完全燃焼」という言葉が出ていてなるほどと思った(たしか完成記者会見あたりのくだり)。 上映後、島本先生が庵野監督に「シン・ゴジラできた時にどう思ったの」と尋ねた際に「ああやっとできたな」と飄々として(それでいて安堵を感じながら)応えていたのがとても印象深かった。

文字通り命を削って作り上げたからこそ、感じとった熱量。いま目の前のものに全身全霊で取り組むってこういうことなのかとあらためて。

以上レポっす。チラシの裏すんません。

粘着イケメン悪魔に学ぶ実践HRTーー『響け!ユーフォニアム』と『Team Geek』

ここ数年で最もハマっただろうアニメ『響け!ユーフォニアム』と、2016年に最も影響を受けたといえる技術書『Team Geek』のよさを伝えるついでにHRTの話をしようと思ったら、収まりがつかなくなった。

響け!ユーフォニアム』のよさ

北宇治高校吹奏楽部は、過去には全国大会に出場したこともある強豪校だったが、顧問が変わってからは関西大会にも進めていない。しかし、新しく赴任した滝昇の厳しい指導のもと、生徒たちは着実に力をつけていった。実際はソロを巡っての争いや、勉強を優先し部活を辞める生徒も出てくるなど、波瀾万丈の毎日。そんななか、いよいよコンクールの日がやってくる――。 (響け!ユーフォニアム~北宇治高校吹奏楽部へようこそ~│宝島社)

良くも悪くも王道な青春もの・群像劇。これがなぜか自分にドハマリした。2015年春から放映していたアニメ1期はなんとなく見た程度だったけれど、今年春から公開している劇場版をスクリーンで観たことをきっかけに何かに目覚めたのか、2016年7月時点で6回くらいリピート鑑賞 && 原作3巻読破済した程度にハマってしまった。

なんでハマったのかなと思い起こすと、ふたつほど思い当たるフシがあった。

ひとつめは人間描写や心理描写が最高に細かいこと。JKというか思春期あるあるなネチっこさとかめんどうくささとか、読み進めていくと思わず「ウッ」と胃液が逆流しそうになることが実に多い。よくここまで細かく観察しているなと思わず感心する。

ふたつめは非常に爽快な読後感・視聴感。「特別になりたい」「うまくなりたい」。様々なできごと・試練を乗り越えながらも、全国大会に行くんだと、ただひたすらに上を目指していく。思春期特有ともいえるその(異常なまでな)愚直さを登場人物に見せつけられたら、思わず自分たちも背筋が伸びる思いになるというもの。

そして劇場で繰り返し観たからこそ思うのは、やはり音楽もののアニメはでかいスクリーンと爆音な音響設備で化ける、映えるということ。「劇場版?総集編商法必死だな〜」と斜に構えていたけれど、劇中の演奏シーンを思う存分味わった今となってはそんなことなど口が裂けても言える気がしない。


『劇場版 響け!ユーフォニアム~北宇治高校吹奏楽部へようこそ~』予告

劇場版のBDが9月に出るので、完全初見の人はここから入って、気に入ったらTVアニメ版や原作に進むとよいと思う。あと原作読むなら3巻まで大人買いして一気読みしましょう(3巻がこの物語の真骨頂)。

『Team Geek』 のよさ

複数のプログラマが関わる場合、優れたコードを書くだけではプロジェクトは成功しません。全員が最終目標に向かって協力することが重要であり、チームの協力はプロジェクト成功のカギとなります。本書は、Subversionをはじめ、たくさんのフリーソフトウェア開発に関わり、その後Googleプログラマを経てリーダーを務めるようになった著者が、「エンジニアが他人とうまくやる」コツを紹介するものです。「チームを作る三本柱」や「チーム文化のつくり方」から「有害な人への対処法」までエンジニアの社会性について、楽しい逸話とともに解説します。 O'Reilly Japan - Team Geek

「組織の中でいかにエンジニアが仕事をしていくか」「チームで価値を出していくってどういうことなの?」というテーマにフォーカスを当てた本。ソフトウェアエンジニア向け『人を動かす』という捉え方をする人もいてなるほどなーと思った(ちなみに『人を動かす』は未読)。

「ソフトウェア開発はチームスポーツだ」というくだりが個人的にはお気に入り。

HRT(謙遜・尊敬・信頼)

あらゆる人間関係の衝突は、謙虚・尊敬・信頼の欠如によるものだ(Team Geek)

他人とのコミュニケーションで実践すべき原則として、謙虚(Humidity)、尊敬(Respect)、信頼(Trust)の頭文字をとったHRT(「ハート」と読む)が紹介されている。エンジニアに限らずあらゆる職種に通用する普遍な考え方で、本書の登場で一躍世に知られたのではないだろうか。

実例 ― 北宇治高校吹奏楽部顧問 滝昇の場合

滝昇という登場人物がいる。高校の吹奏楽部顧問を務めた父を持ち、自身もまた父と同じ道に進み、主人公らの指導にあたっている。

この人物、生徒のコントロールの仕方が非常にうまい。適度に毒舌で歯に衣着せぬ物言いをし、適度に生徒を突き放しつつ・自分たちで考えさせつつ、それでいて適度に生徒を褒めて乗せていく(適度多いな…)。アニメ1期だけでも、顧問就任からサンフェス出場まで、コンクールメンバーの選抜オーディション、そしてコンクール府大会と印象に残るシーンが多いが、「生徒の自主性を重んじる」彼のモットーを体現するように、どのシーンでも部員のことを信頼している様子が伺える。

指揮者⇔演奏者、顧問⇔部員という関係はたしかにあるのだけど、一方で「いい音楽を奏でたい」という気持ちは立場に関係なく等しく同じなんだと改めて気づかせてくれる。その気持ちがあるからこそ、滝昇は生徒に対して尊敬や信頼をもって接することができるのではないかって。個性豊かな(それでいて感受性豊かな)スペシャリストをまとめるリーダーとして、ここまでHRTの習慣を実践している人物はそういないんじゃないかなーと、むりやりまとめてみる。

(まとまっていないけれど)まとめ

  • ユーフォはいいぞ
  • Team Geek はいいぞ