この週末の振り返り

この週末はひたすら(というほどでもないけど)Github Pagesにあげているリポジトリにリストアップしておいたフロントエンドの自主課題に取り組んでいた。

http://yusuke-nozoe.github.io/

主にやってみたことは4つ。

  1. CSSでよくあるパターンを一から書いてみる
  2. 代表的なJavaScriptフレームワークのHello worldを書いてみる
  3. Reduxでよくある機能を実装する(Infinite scrollとか)
  4. D3JSでチャートを書いてみる

いくつトライしたのか、数えるのが面倒な程度には書くことができた。多分10ちょい。どれもシンプルなものばかりだが、それだけに再利用の価値はどれも高く、第一歩目としては多少の達成感がある。

平日は着手する量は当然減るだろうが、コンスタントにテーマを決めてトライを進めていきたい。

重点的にやりたいのは、

  1. CSSで一から見た目が良いデザインを構築できること(色、フォント、レイアウト、etc.)。このパターンを自分なりに作っていきたい。
  2. 再利用性の高いフロントエンドの機能をReduxでストックしていくこと。
  3. チャートの描画。D3JS以外にもライブラリがあれば試してみたいのと、普通にデータを用意するのが大変なので、色々試しながらやりやすい方法を見つける。

これを1年続けることができれば、フロントエンドに関してかなりのスキルが付くと思うので精進したい。

React / Reduxのイニシャルセットアップ

まずは必要なパッケージをインストールする。

$ npm init
$ npm install --save react react-dom redux react-redux redux-thunk
$ npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react webpack

webpackの設定ファイル

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './index.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
};

package.jsonはこんな感じ

{
  "name": "redux-counter",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "webpack -p --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.8",
    "react-dom": "^0.14.8",
    "react-redux": "^4.4.1",
    "redux": "^3.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "webpack": "^1.12.14"
  }
}

ここまでで最小限のセットアップができて、あとは開発するだけ。

追記:このページ自分でもよく見るので、イニシャルであるといいindex.jsも書いておく。
基本的には http://redux.js.org/docs/basics/UsageWithReact.html 参照だが、加えて非同期処理も普通にやるのでthunkを追加する。

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
import Root from './containers/Root';

let store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

render(
  
    
  ,
  document.getElementById('react-app')
)

当然ながら最低限1つのReducerを用意する。

レスポンシブUIの原理

根本的には、どういう仕組みで実装されているのかをシンプルにいうと、メディアクエリを使う。

@media (min-width: 580px) {}
@media (min-width: 870px) {}
@media (min-width: 1160px) {}
@media (min-width: 1450px) {}

こういうやつ。それぞれのメディアクエリ内にCSSを記述することで、特定のスクリーン幅の状態でのみ効かせたいスタイルを定義できるようだ。これにより、ワイドスクリーンでは4カラム、小さめのスクリーンでは2カラム、スマホでは1カラムというように構造を変えることができる。

ロードオブザリングを観終えた

今更ながらロードオブザリングの三部作を観終えた。この映画は各々が3時間と長いので、以前まとまった時間が取れずに挫折したことがある。

全体としてやはり物語は素晴らしい。この話は「もし、指輪一つで世界を支配することができたら」という仮定のもと世界が作られている。この原則は絶対的であり、登場するあらゆる種族・キャラクター問わず誰もがそれに抗うことはできない。ある意味演繹的な考え方で物語が考えられたんだろうか、と想像してしまう。

例えば、いわゆるSFだとある種の「仮定」のもとに物語が展開される、というのはよく見られる形だ。スター・ウォーズならフォースという力が存在したら、という前提があるし、Back to the Futureなら「もし過去や未来に行けたら」という仮定がある。しかし、指輪物語ほどまでに世界観全体でその「仮定」が重要な意味を持つストーリーは他にないのではないかと思った。

そもそも指輪が作られたのは「悪い奴が世界を支配しようとしたから」であり、「そいつを倒した人間が力を得るために指輪をゲットした」ことが問題を生み、人間だけでなくゴーラム、エルフ、ホビットといったあらゆる種族が指輪をみるとそれを欲しいと思ってしまう。このことによって生じる(ある意味アホらしい)トラブルが多数出現し、観る側としてもやきもきさせられるわけだ。

物語に現れるすべての問題やエピソードは前述の「指輪原則」に起因している。そして、それをいわゆる人間性のプラスの側面(勇気とか愛とか)で乗り越えていく、というところは物語全体に一貫していて、ある種、科学のような美しさを感じた。この辺はスター・ウォーズにも共通しているのかもしれない。

CSSのチャレンジリスト

Github pages でフロントエンドで遊ぶためのページを作ってみた。とりあえずCSSを中心にやってみたい。どんなことができるだろうか。

  1. グリッド・ストラクチャー
  2. Pinterest 風UI
  3. タイムライン
  4. 三角形
  5. もっと実用的なサイドバー・ヘッダ構造(リンクとか)
  6. 色をスイッチできるやつ
  7. レスポンシブ

面倒なのでここにまとめていこうhttp://yusuke-nozoe.github.io/

Github pagesを試してみる

https://pages.github.com/

$ mkdir <username>.github.io; cd <username>.github.io; git init

$ hub create <username>.github.io

$ echo “Hello world” > index.html

$ git add . ; git commit -m ‘hello world’; git push -u origin master

$  open http://<username>.github.io

これだけ。ここをフロントエンドの遊び場にしてみよう。

CSSのプリプロセサを使わない人がいるらしい

http://www.456bereastreet.com/archive/201603/why_i_dont_use_css_preprocessors/

CSSのプリプロセッサ、SASSとかを使わないという主張。理由はざっくり言うと「CSSの文法にそれほど問題を感じない」「生でCSSを扱えるメリットの方が大きい」ことのようだ。

関係ないけど、自分的にも毎日フロントエンドで遊んで簡単に公開できる場所が必要だなと思った。github pagesらへんだろうか。