企画主旨

Frontend Developer Roadmapをひたすら巡回する企画
詳しくはこちら

今回の実施内容

静的型チェッカー
TypeScriptでかっちりしていこう。

Type Checkers

TypeScript

もはや何が公式ドキュメントかわからなくなったので、React+TypeScriptでヒットしたReact - TypeScript Deep Diveを参考にした。
実際には、React+TypeScript+MobX+Webpackという感じ。

Webpackがだいぶすっきり。

webpack.config.js

  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        loader: 'ts-loader'
      },
      {
        test: /\.scss/, // 拡張子 .scss の場合
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader', // CSSをバンドルするための機能
            options: {
              url: false,
              sourceMap: enabledSourceMap,
              importLoaders: 2
            }
          },
          {
            loader: 'sass-loader', // Sassファイルの読み込みとコンパイル
            options: {
              sourceMap: enabledSourceMap
            }
          }
        ]
      }
    ]
  },

こんな感じの型を定義して、Reactのpropsに適応していく。

Types.ts

export interface _Skill {
  front: string[],
  back: string[],

}

export type _addSkill = () => void
export type _changeText = (text: string) => void
export type _togglePage = (bar: string) => void
export type _updateNews = (news: string) => void

App.tsx

import * as React from 'react';
import { observer, inject } from 'mobx-react';
import Header from './components/Header/Header';
import Content from './components/Content';
import Footer from './components/Footer';
import { _Skill, _addSkill, _changeText, _updateNews, _togglePage } from './Types';

interface Props {
  store?: Store | any
}

interface Store {
  page: string,
  news: string,
  skill: _Skill,
  inputText: string,
  addSkill: _addSkill,
  changeText: _changeText,
  updateNews: _updateNews,
  togglePage: _togglePage,
}

@inject('store')
@observer
class App extends React.Component<Props> {
  constructor(props: Props) {
    super(props);
    this.fetchJson = this.fetchJson.bind(this);
  }

  async componentDidMount() {~~~~~}

  render() {~~~~~~~}
}

export default App;

成果物

(型)安全第一。
もっと大規模で複雑なコードなら恩恵を感じることができたかも。
https://github.com/tonchan1216/WDR-frontend/tree/v12
https://tonchan1216.github.io/WDR-frontend/v12/

JavaScriptを学ぼうということで２０１９年１０月から勉強開始。
プログラムを学びながら得ていった知識を、どのようにまとめていこうか迷っていたところ、こちらのサイトを見つけた。

正確にはこの記事に出会い、「Qiita」を知ることになった。
https://qiita.com/InamuraYuta/items/f76c5923f056edc795e5

「Qitta」はとても良さそうな予感がしたのでさっそく登録。
ところで「Qiita」ってなんて読むのか？

ぐーぐる先生に聞いてみたところ、

「チータ」

だそうです。
「きった」じゃなかった。調べてよかった。

こんな感じで、自分の知識を貯めていく場所としてこちらを使わせていただくことにしたので、よろしくお願いします。

はじめに

初めまして。
年末まで毎日webサイトを作っている者です。
今日は文字数カウンターを作りました。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は3日目。(2019/10/21)
よろしくお願いします。

サイトURL

https://sin2cos21.github.io/day3.html

やったこと

テキストのコピペで文字数を数えられるシステムを作りました。
使った言語はJavaScriptです。
昨日やった文字列操作（空白・改行取り除きシステム）が面白かったので今日も文字列系で作ってみました。こんな感じです↓

こだわったところ

文字数に空白・改行を入れるか入れないか選べるようにしました。
空白・改行込みで文字数を知りたいなら「空白あり」ボタン
空白・改行なしで文字数だけ知りたいなら「空白なし」ボタンを押します。

html部分は入力欄をform+textarea、出力部分をbutton+divで作りました。

JavaScriptも昨日作ったものを少しアレンジした程度です↓

 <script>
        function text() {
            var text = document.forms.form1.input_text.value;
            var text11 = text.length;
            var target = document.getElementById("output");
            target.innerText = text11;
        }

        function text2() {
            var text2 = document.forms.form1.input_text.value;
            var text22 = text2.replace(/\s+/g, "");
            var target2 = document.getElementById("output2");
            target2.innerText = text22.length;
        }
    </script>

空白・改行ありの方は入力情報を受け取ってlengthメソッドで長さを図ります。
空白・改行なしの方は入力情報を受け取って、空白・改行を除いてからlengthメソッドで長さを図りました。

感想

文字列操作にはまってしまいました。
次はハイライトやったり、もっと驚くようなものを作っていきたいですね。
文字数をカウントするのってもっと難しいと思ってたんですけど実際はとてもシンプルでした。
これもメソッド作ってくれた方のおかげですね。
あと、相変わらずソースツリーを使ってのgit操作がうまくいきません。直接のアップロードはできるのでサイトは見れるものの、モヤモヤする...

参考

String - JavaScript | MDN
↑MDNは基礎が分かりやすいのでオススメです。

最後までお読みいただきありがとうございました。

.test

regexp.test(str)

regexp: 正規表現、str:チェックしたい文字列

与えられた文字列を検索し、その結果はtrue/falseで返す

const required = val => !!val.trim()

以下と同じ意味

const required = function (val) {
   return !!val.trim() //trim()はvalの前後の空白を取り除く
}

Object.keys

オブジェクトのキーだけを配列で取得

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]

.find

提供されたテスト関数を満たす配列内の最初の値を返す。

var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {
  return element > 10;
});

console.log(found);
// expected output: 12

はじめに

JavaScriptでcanvasを使って、2人プレイのディフェンスゲームを作ってみました。

プレイはこちらから→ディフェンスゲーム

環境

• Windows 10 home
• Google Chrome

ルール

2人プレイのゲームになります。
黄色の玉が画面右から左へ移動します。
画面左まで移動したときに、HPが減っていき、HPが0になるとゲーム終了です。
プレイヤー1と2は黄色の玉が画面の左へ移動するのを阻止する必要があります。
プレイヤー1は赤色の玉、プレイヤー2は青色の玉をそれぞれ操作し、黄色の玉に当たることで、黄色の玉を消すことができます。
このようにして、黄色の玉の移動を阻止していきましょう！
また、それぞれ黄色の玉に当たると得点も付くようにしているので、協力し合うことも、対戦で遊ぶこともできます。

操作方法

1P	矢印キーでの移動
↑	上に移動
↓	下に移動
→	右に移動
←	左に移動

2P	WASDキーでの移動
W	上に移動
S	下に移動
A	右に移動
D	左に移動

プログラム

index.html

<style>body{margin:0;}</style>
<canvas class="canvas">
<script>
"use strict";
{
const WIDTH = 1200; //キャンバスの横軸
const HEIGHT = 600; //キャンバスの縦軸
const HTML_CVS = document.querySelector(".canvas"); //キャンバスの領域の取得
const CANVAS = HTML_CVS.getContext("2d"); //キャンバスの描画機能を有効

class Circle{ //円クラス
  constructor(canvas,x,y,r,color){
    this.canvas = canvas;
    this.x = x;
    this.y = y;
    this.r = r;
    this.color = color;
  }

  draw(){ //描画
    this.canvas.beginPath(); //パスの初期化
    this.canvas.fillStyle = this.color;
    this.canvas.arc(this.x,this.y,this.r,0*Math.PI,2*Math.PI,true);
    this.canvas.closePath(); //パスを閉じる
    this.canvas.fill();
  }
}

class Player extends Circle{ //プレイヤークラス
  constructor(canvas,x,y,r,color){
    super(canvas,x,y,r,color);

    this.speed = 20; //プレイヤーの移動の速さ
    this.score = 0; //プレイヤーの得点

    this.up = false;
    this.down = false;
    this.right = false;
    this.left = false;
  }

  move(){ //キー操作での動き
    if(this.up && this.y-(this.r+this.speed)>=0){this.y -= this.speed;}
    if(this.down && this.y+(this.r+this.speed)<=HEIGHT){this.y += this.speed;}
    if(this.right && this.x+(this.r+this.speed)<=WIDTH){this.x += this.speed;}
    if(this.left && this.x-(this.r+this.speed)>=0){this.x -= this.speed;}
  }

  toEnemyDistance(enemy){ //敵との距離を算出
    return Math.sqrt((enemy.x-this.x)**2+(enemy.y-this.y)**2);
  }
}

class Enemy extends Circle{ //敵クラス
  constructor(canvas,x,y,r,color){
    super(canvas,x,y,r,color);
    this.y = Math.floor(Math.random()*(HEIGHT-this.r*2))+this.r;
    this.speed = 12;
  }

  move(){ //右から左への動き
    if(this.x > 0+this.r){
      this.x -= this.speed;
    }
  }
}

class ScoreLabel{
  constructor(canvas){
    this.canvas = canvas;
    this.x = 10;
    this.y = 40;
    this.hp = 20;
  }

  draw(p1,p2){
    this.canvas.fillStyle = "white";
    this.canvas.font = "30px Arial";
    this.canvas.fillText("hp : "+this.hp +" / P1 : "+p1.score+" / P2 : "+p2.score,this.x,this.y);
  }
}

class Game{
  constructor(){
    HTML_CVS.width = WIDTH;
    HTML_CVS.height = HEIGHT;

    this.PlayerRadius = 60; //プレイヤーの玉の半径
    this.EnemyRadius = 10; //敵の玉の半径
    this.frameRate = 50; //フレーム数
    this.timeCounter = 0; //タイムカウンタ
    this.intervalTime = 0.2; //敵の生成間隔時間
    this.gameflag = true;

    this.player1 = new Player(CANVAS,this.PlayerRadius,this.PlayerRadius,this.PlayerRadius,"red"); //1P
    this.player2 = new Player(CANVAS,this.PlayerRadius,HEIGHT-this.PlayerRadius,this.PlayerRadius,"blue"); //2P
    this.enemy = [];
    this.scoreLabel = new ScoreLabel(CANVAS);

    window.setInterval(()=>{ //ループ処理(フレーム数はFRAME_RATE)
      CANVAS.fillStyle = "black";
      CANVAS.fillRect(0,0,WIDTH,HEIGHT) //キャンバスを描画

      if(this.gameflag){
        this.player1.draw(); //プレイヤー1の描画
        this.player1.move(); //プレイヤー1の動き

        this.player2.draw(); //プレイヤー2の描画
        this.player2.move(); //プレイヤー2動き


        for(let i=0;i<this.enemy.length;i++){
          this.enemy[i].draw(); //敵の描画
          this.enemy[i].move(); //敵の動き
          if(this.enemy[i].x <= 0+this.enemy[i].r){
            this.enemy.splice(i,1);
            this.scoreLabel.hp--;
          }
          if(this.player1.toEnemyDistance(this.enemy[i])<=this.player1.r+this.enemy[i].r){ //距離による当たり判定
            this.enemy.splice(i,1);
            this.player1.score++;
            continue;
          }
          if(this.player2.toEnemyDistance(this.enemy[i])<=this.player2.r+this.enemy[i].r){ //距離による当たり判定
            this.enemy.splice(i,1);
            this.player2.score++;
            continue;
          }
        }
        this.timeCounter++;

        if(this.timeCounter % (this.frameRate*this.intervalTime) == 0){
          this.enemy.push(new Enemy(CANVAS,WIDTH-this.EnemyRadius,HEIGHT/2,this.EnemyRadius,"yellow"));
        }

        this.scoreLabel.draw(this.player1,this.player2);
        if(this.scoreLabel.hp <= 0){this.gameflag=false;}
        }else{alert("ゲームオーバー！");} //アラートでゲームオーバーを表示

    },1000/this.frameRate);

    window.addEventListener("keydown",()=>{ //キーボードのキーを押したときに処理
      if(event.keyCode==38){this.player1.up=true;} //上矢印キー
      if(event.keyCode==40){this.player1.down=true;} //下矢印キー
      if(event.keyCode==39){this.player1.right=true;} //右矢印キー
      if(event.keyCode==37){this.player1.left=true;} //左矢印キー

      if(event.keyCode==87){this.player2.up=true;} //Wキー
      if(event.keyCode==83){this.player2.down=true;} //Sキー
      if(event.keyCode==68){this.player2.right=true;} //Dキー
      if(event.keyCode==65){this.player2.left=true;} //A印キー
    });

    window.addEventListener("keyup",()=>{ //キーボードのキーを離したときに処理
      if(event.keyCode==38){this.player1.up=false;} //上矢印キー
      if(event.keyCode==40){this.player1.down=false;} //下矢印キー
      if(event.keyCode==39){this.player1.right=false;} //右矢印キー
      if(event.keyCode==37){this.player1.left=false;} //左矢印キー

      if(event.keyCode==87){this.player2.up=false;} //Wキー
      if(event.keyCode==83){this.player2.down=false;} //Sキー
      if(event.keyCode==68){this.player2.right=false;} //Dキー
      if(event.keyCode==65){this.player2.left=false;} //Aキー
    });
  }
}

new Game(); //ゲーム開始
}
</script>

以上で終了です！
ここまで読んでいただき、ありがとうございました。

はじめに

React に入門する際に、三目並べを作成する公式チュートリアルに取り組む方は多いと思います。
実際に運用されている React プロダクトのほとんどは Redux と何らかのミドルウェアを併用していますが、このチュートリアルでは React 単体についてしか学べません。
当然と言えば当然なのですが、折角 React に入門したのですから、そのままの流れで Redux (と react-redux) も導入したいと考えるのが人情というものです。
という訳で、本記事ではその三目並べに Redux を導入してみます。
Redux 公式チュートリアルと併せて読んでみてください。

また、続編として redux-observable とかを導入する記事も書いたので、興味があればそちらもどうぞ。

事前準備

まず、React 公式チュートリアルのタイムトラベルの実装まで済ませましょう。
三目並べが完成すると、 Game component がいくつかの状態を持つと思います。
この状態を Redux に管理してもらいましょう。

Redux 導入をやりやすくするために、まずはファイルを分割します。
ここを参考に、以下のファイルに JavaScript コードを分割してください。

• src/components.jsx
• src/index.jsx

Redux / react-redux 導入

Redux とは

Redux is a predictable state container for JavaScript apps.

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

You can use Redux together with React, or with any other view library. It is tiny (2kB, including dependencies), but has a large ecosystem of addons available.

Getting Started with Redux･Redux より引用

react-redux とは

React Redux is the official React binding for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update data.

Quick Start･React Redux より引用

redux / react-redux をインストール

以下のコマンドで redux, react-redux をプロジェクトに追加します。
yarn を使用する場合は適宜読み替えてください。

npm install redux react-redux

action を追加

Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch().

Actions・Redux より引用
（store の説明は後で出てくるので、今はまだわからなくても大丈夫です。）

三目並べで発生する action は以下の 2 つとします。

• どこかのマスがクリックされる
• いずれかの履歴がクリックされる

前者を表現した action を以下に示します。

src/actions.js

/*
 * action types
 */

export const CLICK_SQUARE = "CLICK_SQUARE";

 /*
  * action creators
  */

export function clickSquare(index) {
  return { type: CLICK_SQUARE, index };
}

「マスがクリックされた」という情報を表す CLICK_SQUARE action type と、「ある場所のマスがクリックされた」という action を生成する action creator が定義できました。

それでは、ここに「いずれかの履歴がクリックされた」を表す action type と action creator を追加しましょう。
実装例はここにあります。

reducer を追加

Reducers specify how the application's state changes in response to actions sent to the store. Remember that actions only describe what happened, but don't describe how the application's state changes.

Reducers・Redux より引用

reducer の実装を以下に示します。

src/reducers.js

import { combineReducers } from "redux";
import { CLICK_SQUARE, JUMP_TO_PAST } from "./actions";

 const initialState = {
  history: [
    {
      squares: Array(9).fill(null)
    }
  ],
  stepNumber: 0,
  xIsNext: true
};

 function game(state = initialState, action) {
  switch (action.type) {
    case CLICK_SQUARE:
      const history = state.history.slice(0, state.stepNumber + 1);
      const current = history[history.length - 1];
      const squares = current.squares.slice();
      if (calculateWinner(squares) || squares[action.index]) {
        return state;
      }
      squares[action.index] = state.xIsNext ? "X" : "O";
      return {
        history: history.concat([
          {
            squares: squares
          }
        ]),
        stepNumber: history.length,
        xIsNext: !state.xIsNext
      };

     default:
      return state;
  }
}

 export const app = combineReducers({ game });

 // ========================================

 function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

initialState は Redux の state の初期値です。
ちなみにこれは Game component の state をそのまま持ってきただけです。

game() が reducer です。
こちらも Game component の handleClick() とほとんど同じです。

combineReducers() は複数の reducer を 1 つにまとめるための関数です。
（今回の例では大した役割を担っていないので、あまり気にしなくて良いです。）

それでは、ここに「履歴がクリックされた」という action に対応する処理を追加しましょう。
実装例はここにあります。

store を追加

In the previous sections, we defined the actions that represent the facts about “what happened” and the reducers that update the state according to those actions.

The Store is the object that brings them together.

Store・Redux より引用
（ここはとても重要なところなので、Redux をよく知らない人は引用元をよく読むことをお勧めします。）

createStore() 関数に reducer を渡すことで store を作ることができます。

src/index.jsx

import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import { Game } from "./components";
import { app } from "./reducers";
import "./index.css";

const store = createStore(app);
ReactDOM.render(<Game />, document.getElementById("root"));

ここで作成した store は、 container component を追加した後に使用します。

container component を追加

私がContainerと名付けたコンポーネントの特徴は以下の通りです。

• どのように機能するか、ということと結びついてる。
• PresentatinalコンポーネントとContainerコンポーネントの両方を内部に持つことができるが、たいていの場合は自分自身のためのDOMマークアップとスタイルを「持たない」。
• データと挙動を、Presentationalコンポーネントや、他のContainerコンポーネントに対して提供する。
• Fluxのアクションをcallしたり、アクションをコールバックとしてPresentatinalコンポーネンへ提供する。
• たいていの場合は状態を持ち、データの源としての役割を担う。
• higher order componentを用いることで生成される。例えばReact Reduxのconnect()やRelayのcreateContainer()やFlux UtilsのContainerCreate()である。

日本語訳: Presentational and Container Components より引用
（Usage with React・Redux にも記述があるので、そちらも参照してみてください。）

React / Redux を使う時の container component というと、だいたいこんな感じになります。

src/containers.js

import { connect } from "react-redux";
import { clickSquare, jumpToPast } from "./actions";
import { Game } from "./components";

 const mapStateToProps = (state, ownProps) => {
  return state.game;
};

 const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    handleClick: index => {
      dispatch(clickSquare(index));
    },
    jumpTo: () => {}
  };
};

 export const GameContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(Game);

mapStateToProps() は、Redux の state を props として適当な形に整形する関数です。

mapDispatchToProps() は、Redux の dispatcher を props として適当な形に整形する関数です。
（action を store に渡すことを dispatch と呼び、それをする関数のことを dispatcher と呼びます。）

connect()() は、Redux の state と React component を接続する関数です。
mapStateToProps ないし mapDispatchToProps と React component を渡すと、container component が返ってきます。

これで Game component は GameContainer component から Redux の諸々を props 経由で受け取ることができるようになりました。
なので、それらを使うよう書き換えましょう。

src/components.jsx

export class Game extends React.Component {
  render() {
    const history = this.props.history;
    const current = history[this.props.stepNumber];
    const winner = calculateWinner(current.squares);

    const moves = history.map((step, move) => {
      const desc = move ? `Go to move #` + move : "Go to game start";
      return (
        <li key={move}>
          <button onClick={() => this.props.jumpTo(move)}>{desc}</button>
        </li>
      );
    });

    let status;
    if (winner) {
      status = "Winner: " + winner;
    } else {
      status = "Next player: " + (this.props.xIsNext ? "X" : "O");
    }

    return (
      <div className="game">
        <div className="game-board">
          <Board
            squares={current.squares}
            onClick={i => this.props.handleClick(i)}
          />
        </div>
        <div className="game-info">
          <div>{status}</div>
          <ol>{moves}</ol>
        </div>
      </div>
    );
  }
}

これでこの component は内部に state を持たないし、外部の state （つまり Redux の state ）の存在も知らないものになりました。
アプリケーションの状態と完全に切り離すことができたので、この component はテストをしやすいはずです。

さて、先ほど提示した mapDispatchToProps() が返却している jumpTo プロパティには不足があります。
これを完成させましょう。
実装例はここにあります。

container component と Redux の state を接続

それでは、今まで Game component を呼び出していた箇所を GameContainer に書き換えましょう。

src/index.jsx

import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import { Game } from "./components";
import { app } from "./reducers";
import "./index.css";

const store = createStore(app);
ReactDOM.render(<GameContainer />, document.getElementById("root"));

次に、 Provider component を導入します。

The option we recommend is to use a special React Redux component called <Provider> to magically make the store available to all container components in the application without passing it explicitly. You only need to use it once when you render the root component:

Usage with React・Redux より引用

src/index.jsx

import React from "react";
import { render } from "react-dom";
import { createStore } from "redux";
import { Provider } from "react-redux";
import { app } from "./reducers";
import { GameContainer } from "./containers";
import "./index.css";

const store = createStore(app);

render(
  <Provider store={store}>
    <GameContainer />
  </Provider>,
  document.getElementById("root")
);

Provider component は配下にいる container component に redux state と dispatcher を良い感じに渡してくれます。
これで三目並べに Redux を導入できたはずです。

ここに、以下のような変更を加えても良いでしょう。

• calculateWinner() を src/utils.js に切り出す
• 全ての React component を functional component にする
• Game component の render() 内で定義されている current および status を mapStateToProps() 内に移す
• Board component に渡されている onClick() および squares props を Redux の state から直接受け取るようにする

これで Redux の導入が完了しました。
ちなみに、導入の全容はこのリポジトリにあります。

更なる発展

プロダクトとして使うには（場合によりますが）まだ不十分です。
例えば以下のようなものが必要でしょう。

• ミドルウェア
  • redux-saga など
  • 三目並べに redux-observable を導入する記事を 後日書きます 書きました↓
    • React チュートリアルの三目並べに redux-observable とかを導入する
• TypeScript
  • React + Redux なフロントを構築するのであれば、TypeScript は必須です
• テスト機構
  • jest や enzyme など
• 拡張性のあるディレクトリ構造
  • Re-ducks パターンなど
• router ライブラリ
  • @reach/router など (使ったことないけど)
• CSS ライブラリ
  • 僕の最近のお気に入りは Spectre.css です
• エラー監視ツール
  • Sentry など
• サイト分析ツール
  • Google Analytics や Intercom など

はじめに

localStorageは基本的に同じドメイン内（厳密にはポート番号なども一致している必要がある）でしか有効ではありませんが、postMessage API（Web Messaging API）を使用することでクロスドメインでも共有することができます。

調べてみても古い記事が多かったり、サンプルのコードが無かったりだったので自分用の備忘録も兼ねてやり方をご紹介します。

構成

【ドメインA】
・localstorageのデータを持つ側。
・ドメインBからの要求に応じてlocalstorageの操作を行う。

【ドメインB】
・ドメインAに保存されているlocalstorageの値の参照や更新を要求する側。

（実際の動作確認はA側をGithub Pages、B側をローカルサーバーに置いた状態で行いました。）

ドメインA側

ドメインB側からのメッセージをトリガーにlocalstorageの操作を行っています。
（厳密にメッセージの中身を検証して処理を切り分けたりまではしていません。）

index.html

<body>
  <script>
    (function() {
      var origin = 'http://B.com';
      window.addEventListener('message', function(event) {
        // 送信元が指定のオリジンと一致していれば処理を行う
        if(event.origin === origin) {
          var message = event.data;

          // メッセージが'get'ならlocalstorageの値を返す
          if(message === 'get') {
            var storageData = localStorage.getItem('test');
            event.source.postMessage(storageData, event.origin);
          }
          // getでなければメッセージを分割してlocalstorageに保存する
          else {
            var messageArray = message.split(',');
            var key = messageArray[0];
            var value = messageArray[1];
            localStorage.setItem(key, value);
          }
        }
      });
    })();
  </script>
</body>

ドメインB側

display:noneで非表示にしたiframeでドメインA側のindex.htmlを読み込み、iframeObject.contentWindowでWindowオブジェクトを取得して、それに対してpostMessageでメッセージを送っています。

index.html

<body>
  <iframe id="iframe" src="http://A.com/index.html" style="display: none;"></iframe>
  <input type="text" name="text" id="text">
  <button id="set">ストレージに値を入れる</button>
  <button id="get">ストレージの値を取得する</button>
  <script>
  (function() {
    var iframeWindow = document.querySelector('#iframe').contentWindow;
    var $text = document.querySelector('#text');
    var $setButton = document.querySelector('#set');
    var $getButton = document.querySelector('#get');
    var origin = 'http://A.com';

    window.addEventListener('message', function(event) {
      // 送信元が指定のオリジンと一致していれば処理を行う
      if(event.origin === origin) {
        alert(event.data);
      }
    });

    $setButton.addEventListener('click', function() {
      // テキストエリアに入力されている値を送信
      iframeWindow.postMessage(`test,${$text.value}`, origin);
    });

    $getButton.addEventListener('click', function() {
      // localstorageの値の取得を要求するメッセージ送信
      iframeWindow.postMessage('get', origin);
    });

  })();
  </script>
</body>

以上になります。
もう少しややこしいロジックが必要かと思っていましたが、postMessage APIのおかげで意外と楽にできました。

(もしかしたらLIFF v2ハンズオンは国内初かもしれない。)

この資料について

福井ハッカソン@ #ヒーローズリーグ 2019 by MAのハンズオンで実施した内容になります。

自己紹介

• 菅原のびすけ (@n0bisuke)
  • dotstudio, inc
  • https://www.facebook.com/dotstud10/ <- いいねしてね！
• プロトタイピング専門スクール「プロトアウトスタジオ」
  • https://www.facebook.com/protoout/ <- いいねしてね！
• 国内最大のIoTコミュニティIoTLT主催
• LINE API Experts
  • LINE API Expert第一期メンバーを発表します
• Microsoft MVP (Node.js)

LIFFとは

LINE Frontend Frameworkの略で、LINEアプリの内部ブラウザ上でLINEの情報を活用したWebアプリケーションを動作させることができるプラットフォームの事を指します。
LIFF環境上で動作するWebアプリケーションのことをLIFFアプリと呼びます。

公式文面: https://developers.line.biz/ja/docs/liff/overview/

LIFFアプリはこんな雰囲気です。↓

Messaging APIの新機能LIFFの使い方を解説します。

これまでのLIFFで出来たこと

既存のLIFFでは大まかに以下の機能が扱えます。

• ユーザーの情報取得
• LINEにメッセージ送信
• 外部のBLEデバイスにアクセス(ただしこれはLINE Thingsという機能になり、ちょっと別カテゴリ感なので割愛)

現状見ている限りだと、v1とv2で特段何かが出来なくなったって感じではなさそうです。
なのでこの辺の機能は

LIFF v2のアップデート

2019/10/16のリリースでLIFF v2がリリースされました。

大まかにアップデートされた内容は

1. 外部ブラウザでもLIFFアプリを扱うことが出来るようになった

→ 今までのLIFFアプリはLINEのブラウザ上からしかアクセス出来ませんでした。

2. LINEログインが扱えるようになった

→ 今までのLIFFアプリはLINEのブラウザ上からしかアクセス出来なかったので、ログインはしている前提だったのですが、v2から外部ブラウザでも扱えるようになったことにより、 外部ブラウザからのアクセス時のみ LINEログインを扱うことができます。

3. QRコードスキャンが扱えるようになった

→ LIFF上からLINEアプリのQRコードスキャン機能を呼び出せるようになりました。

4. LIFFアプリを動作環境を細かく取得できるようになった

→ 外部ブラウザでもLIFFアプリが動くようになったので、外部ブラウザでの動作なのか、LINEアプリ内での動作なのかなど、動作環境を細かく取得できるようになりました。

ハンズオン

今回は これらの機能を丸っと触れてみるハンズオンになります。
また、管理のしやすさなどを加味してVue.jsを利用しています。

事前準備

1. LINE BOTを作ったことがある
2. Node.jsが動く環境がある
3. ngrokが動作する環境がある
4. ローカルサーバーを起動する環境がある
   • VSCodeのLive Serverプラグインが便利です

1~3までは「1時間でLINE BOTを作るハンズオン」をやっておくと良いです。

今回の到達目標

1 or 2で選んで行きましょう。前での紹介としては2で進んで行きますが、1のフォローもします。

1. LINE BOTを作ったことが無い人 -> 「1時間でLINE BOTを作るハンズオン」を試してLINE BOTを作ってみるのもOK(STEP3まで)
2. LINE BOTを作ったことがある人 -> このページをこのままお進み下さい。

1. ngrokなどでトンネリング

ngrok http <利用するポート名>という形で起動させておきます。

$ ngrok http 5500

生成されるhttps://xxxxxx.ngrok.ioのアドレスをコピーしておきましょう。次の手順で利用します。

補足

ngrokがインストール出来なさそうな人はserveoを利用すると良さそうです。特にインストールなどせずにsshでトンネリングが出来ます。Node.jsやnpmがそもそも入ってないよーって人はこちらの手段でもOKです。

servioの利用

$ ssh -o ServerAliveInterval=60 -R <利用したいドメイン名>:80:localhost:<ポート> serveo.net

実際はこんな感じ

$ ssh -o ServerAliveInterval=60 -R n0bisuke:80:localhost:3000 serveo.net

Forwarding HTTP traffic from https://n0bisuke.serveo.net
Press g to start a GUI session and ctrl-c to quit

この場合は次の手順で設定するエンドポイントURLはhttps://xxxxxx.serveo.netを設定しましょう。

2. LIFFアプリの登録

LINE DevelopersのLINE BOTの管理画面からLIFFのタブを選択し、追加ボタンを押しましょう。

エンドポイントURLに 先ほどのngrokのアドレスを指定し、キャプチャのようにチェックをして追加するを押しましょう。

作成したLIFFアプリケーションを確認し、LIFF URLの line://app/xxxxxxxxのxxxxxxxxをメモしておきましょう。

3. 外部ブラウザでの挙動とLINEログインを試す

まずは外部ブラウザでの挙動とLINEログインを試していきます。

3.1 コードを書いていく

任意のフォルダを作成し、その中にindex.htmlとscript.jsを作成しましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
        <title>LIFF v2 ハンズオン</title>
    </head>
    <body>
        <div id="app">
            <button @click=logout>ログアウトする</button>

            <h1>{{displayName}}</h1>
            <p>{{userId}}</p>
            <p>{{statusMessage}}</p>
            <img :src=pictureUrl alt="profile" width="200px" />
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
        <script src="script.js"></script>
    </body>
</html>

script.js

'use strict';

const app = new Vue({
    el: '#app',
    data: {
        displayName: '',
        userId: '',
        statusMessage: '',
        pictureUrl: '',
    },

    methods: {
        //プロフィール取得関数
        getProfile: async function(){
            const accessToken = liff.getAccessToken();
            const profile = await liff.getProfile();
            this.displayName = profile.displayName; //LINEの名前
            this.userId = profile.userId; //LINEのID
            this.pictureUrl = profile.pictureUrl; //LINEのアイコン画像
            this.statusMessage = profile.statusMessage; //LINEのステータスメッセージ
        },

        //ログアウト処理の関数
        logout: async function(){
            if (liff.isLoggedIn()){
                alert('ログアウトします。');
                liff.logout();
                window.location.reload();
            }
        },

    },

    //ページを開いた時に実行される
    mounted: async function(){
        await liff.init({
            liffId: 'xxxxxxxxxxx' // ! 先ほどメモしたものを入力してください。
        });

        //LINE内のブラウザかどうか
        if(liff.isInClient()){
            alert('LINE内のブラウザ');
            this.getProfile(); //LINE内で開いた場合は特にログイン処理なしで大丈夫
        }else{
        //外部ブラウザかどうか
            if(liff.isLoggedIn()){
                alert('外部ブラウザ');
                this.getProfile();
            }else{
                liff.login();
            }
        }
    }
});

この状態でindex.htmlでローカルサーバーを起動させましょう。

最初の手順でngrokでトンネリングさせているポート(5500)を指定して起動してください。

3.2 Webサイトにアクセスして試してみる

https://xxxxx.ngrok.ioのアドレスをPC上のブラウザなどから開いてみましょう。

こんな感じでログイン画面に遷移します。

無事にログインできるとこんな感じでアラートが出ます。

3.3 ここで繋がらない人FAQ

• LIFFのIDちゃんとありますか？
  • ソースコード上で一箇所だけ書き換えがあるので注意
• http://localhost:5500みたいなアクセスしてませんか?
  • https://xxxx.ngrok.ioのアドレスで

3.4 LINEアプリ内からもアクセスしてみる

LINEアプリからline://app/xxxxxxxxxxxのアドレスにアクセスしてみましょう。
何かしらの方法でLINEのBOTや会話などにこのアドレスを投稿して試してみるのが良いです。

4. QRスキャンとメッセージ送信を試してみる

QRとメッセージ送信を試します。

4.1 コードを書く

index.htmlとscript.jsを更新します。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
        <title>LIFF v2 ハンズオン</title>
    </head>
    <body>
        <div id="app">
            <button @click=logout>ログアウトする</button>

            <button @click=sendMessage>メッセージ送信</button>
            <button @click=QR>QRスキャン</button>

            <h1>{{displayName}}</h1>
            <p>{{userId}}</p>
            <p>{{statusMessage}}</p>
            <img :src=pictureUrl alt="profile" width="200px" />
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
        <script src="script.js"></script>
    </body>
</html>

script.js

'use strict';

const app = new Vue({
    el: '#app',
    data: {
        displayName: '',
        userId: '',
        statusMessage: '',
        pictureUrl: '',
    },

    methods: {
        //プロフィール取得関数
        getProfile: async function(){
            const accessToken = liff.getAccessToken();
            const profile = await liff.getProfile();
            this.displayName = profile.displayName; //LINEの名前
            this.userId = profile.userId; //LINEのID
            this.pictureUrl = profile.pictureUrl; //LINEのアイコン画像
            this.statusMessage = profile.statusMessage; //LINEのステータスメッセージ
        },

        //ログアウト処理の関数
        logout: async function(){
            if (liff.isLoggedIn()){
                alert('ログアウトします。');
                liff.logout();
                window.location.reload();
            }
        },

        //QRコードの利用の関数
        QR: async function(){
            if(!liff.isInClient()) {
                alert('LINEから開いて下さい');
                return;
            }
            //QR読み込み
            const res = await liff.scanCode();
            const msg = `読み取ったコードの中身は「${res.value}」です`;
            alert(msg);
        },

        //LINEにメッセージ送信の関数
        sendMessage: async function(){
            if(!liff.isInClient()) {
                alert('LINEから開いて下さい');
                return;
            }
            //メッセージ送信
            await liff.sendMessages([
                {
                  type:'text',
                  text:'Hello, World!'
                }
            ]);

            alert('メッセージを送信しました。');
        }
    },

    //ページを開いた時に実行される
    mounted: async function(){
        // alert(liff.getOS());
        await liff.init({
            liffId: 'xxxxxxxxxx' // ! 先ほどメモしたものを入力してください。
        });

        //LINE内のブラウザかどうか
        if(liff.isInClient()){
            console.log('LINE内のブラウザ');
            this.getProfile(); //LINE内で開いた場合は特にログイン処理なしで大丈夫
        }else{
        //外部ブラウザかどうか
            if(liff.isLoggedIn()){
                console.log('外部ブラウザ');
                this.getProfile();
            }else{
                liff.login();
            }
        }
    }
});

4.2 LINEアプリからアクセスして試してみる

この機能は外部ブラウザからのアクセスでは利用できないので、LINEアプリからline://app/xxxxxxxxxxxのアドレスにアクセスして試してみましょう。

5 チャレンジ課題

時間が余った人はチャレンジしてみましょ！

5.1 公式ドキュメントを参考に送信するメッセージをカスタマイズしてみよう

参考: https://developers.line.biz/ja/reference/liff/#send-messages

5.2 QRコードで読み込んだ文字列をLINEに送信してみよう

組み合わせチャレンジです。

---

まとめ

お疲れ様でした。LIFF v2の機能を試すハンズオンを行いました。
目玉機能はLINEログインとQRスキャンだと思うのですが、個人的には外部ブラウザでLIFFの活用が出来るようになったというところだと思ってます。

既存のWebサービスにもLIFFアプリの機能を活用できるポイントも増えてくるかもしれないので、LINE Thingsのように、LINEがスマートフォンアプリやチャットプラットホームからさらに活用したユースケースが出てくると思います。

みんなで活用考えてみましょう！

ブラウザで音声や映像を記録するためのAPIとして
MediaRecorderがあります。
これを使うと、音声や映像をデバイスからサクっと取ってBlobに出来ます。

const media = await navigator.mediaDevices.getUserMedia({ audio: true });
      const recorder = new MediaRecorder(media);
      recorder.addEventListener('dataavailable',(event:BlobEvent) => {
        const data:Blob = event.data;
        //Blobを使った処理
      })
      recorder.start();

こんな感じにサクっとカメラやマイクのデータが取れます。

が、色々厳しいところがまだあります。

typescriptの型定義が追い付いていない

実は上記のtypescriptコード、そのままだとコンパイルが通りません。
MediaRecorderやBlobEventが標準ではまだ存在していないので自分で足してやる必要があります。

非対応ブラウザがあるのでpolyfillが必須

上記のMDNを見ても、IEどころかEdgeが真っ赤ですし、？になっているiOSのsafariも普通にダメでした。
ついでに、この辺りのpolyfillに標準でtypescriptの型定義が付いているのがなかったので、
結局そこは自分で頑張るかanyでごまかすしかありません。
(型が付いているextendable-media-recorderというものもあったものの、こちらは逆にクロスブラウザ対応していない)

まとめ

• 便利だけどカバーされていない部分も多いので注意

Vueで、アニメーションするコンポーネントを作ったので、
ついでにReactでも作ってみると実装方法が違ったので比較する

作ったものは、ハンバーガーボタン(押したらバツになるやつ)
svgをGSAPのTweenMaxでclickイベントをトリガーにアニメーションさせることでハンバーガーボタンを作成する

とりあえずsvgをただTweenMaxでアニメーション

DOMを取得してTweenMaxでアニメーションする例
ボタンを押せばアニメーション

See the Pen SvgTween by Saito Takashi (@7_asupara) on CodePen.

Vueで作成する

See the Pen VueHamburger by Saito Takashi (@7_asupara) on CodePen.

Vue

<template>
  <div class="button" v-on:click="toggle"> <!-- クリックイベントを付与 -->
    <svg :viewbox="viewbox" :width="size" :height="size" style="overflow: visible">
      <!-- svgの各属性に変数をバインディング -->
      <line
        x1="0"
        :y1="line1Y1"
        :x2="size"
        :y2="getTopLimit()"
        :stroke="stroke"
        :stroke-width="strokeWidth"
      />
      <line
        :x1="line2X1"
        :y1="halfSize"
        :x2="size"
        :y2="halfSize"
        :stroke="stroke"
        :stroke-width="strokeWidth"
      />
      <line
        x1="0"
        :y1="line3Y1"
        :x2="size"
        :y2="getBottomLimit()"
        :stroke="stroke"
        :stroke-width="strokeWidth"
      />
    </svg>
  </div>
</template>

<script>
export default {
  data() { // dataオブジェクト 変更を通知したい変数とかはここで定義
    return {
      size: 50,
      stroke: 'black',
      strokeWidth: 6,
      speed: 0.4,
      line1Y1: 0,
      line2X1: 0,
      line3Y1: 0,
      menuCloseFlg: false
    };
  },
  computed: { // 加工した返り値の変数を作りたい場合はここで定義
    viewbox: function () {
      return `0 0 ${this.size} ${this.size}`
    },
    halfSize: function () {
      return this.size / 2
    }    
  },
  mounted () { // mountedではcomputedが動かないのでmethodで初期化
    this.line1Y1 = this.getTopLimit()
    this.line3Y1 = this.getBottomLimit()
  },
  methods: {
    getTopLimit () {
      return this.strokeWidth / 2
    },
    getBottomLimit () {
      return this.size - (this.strokeWidth / 2)
    },
    toggle () { // クリックイベント
      if (this.menuCloseFlg) {
        TweenMax.to(
          this.$data,
         this.speed,
          {
            line1Y1: this.getTopLimit(),
            line2X1: 0,
            line3Y1: this.getBottomLimit(),
            ease: Expo.easeIn
          }
        )
      } else {
        TweenMax.to(
          this.$data,
          this.speed,
          {
            line1Y1: this.getBottomLimit(),
            line2X1: this.size,
            line3Y1: this.getTopLimit(),
            ease: Expo.easeIn
          }
        )
      }
      this.menuCloseFlg = !this.menuCloseFlg
    }
  }
}
</script>

Vueでは、dataオブジェクトを変更すると、自動で画面にも反映(rerender)してくれる
なので、svgの動かしたい属性にdataオブジェクトのプロパティを付与してその値を変更すれば勝手に画面に反映してくれる

この例の場合は、toggleメソッドでDOMではなく、svg属性に割り当てたdataオブジェクトの値を直接TweenMaxで変更してアニメーションさせている
この特性のおかげで値の変更が直感的にできるので、アニメーションを扱う上でとてもVueはいいと思う

svgを使用した動的なUIが簡単に作れそう

Reactで作成する

とりあえずClassComponentを使って作成する

See the Pen ReactHamburger by Saito Takashi (@7_asupara) on CodePen.

React

import React from 'react';

class App extends React.Component {
  constructor(){
     super();
     // 必要な変数の定義
     this.size = 50;
     this.speed = 0.4;
     this.strokeWidth = 6;
     this.halfSize = this.size / 2;
     this.halfStrokeWidth = this.strokeWidth / 2;
     this.topLimit = this.halfStrokeWidth;
     this.bottomLimit = this.size - this.halfStrokeWidth;
     this.viewbox = `0 0 ${this.size} ${this.size}`;
     this.stroke = 'black'

     // 変更を通知したい変数はここでstateとして定義
     this.state = { closeFlg: false };

     // DOMノードを取得するための準備
     this.line1Ref = null;
     this.line2Ref = null;
     this.line3Ref = null;
  }

  handleClick = () => {
    // svgの属性ではなく、DOMノードを直接Tweenさせる
    if (!this.state.closeFlg) {
      TweenMax.to(this.line1Ref, this.speed, { attr: { y1: this.bottomLimit }, ease: Expo.easeIn })
      TweenMax.to(this.line2Ref, this.speed, { attr: { x1: this.size }, ease: Expo.easeIn})
      TweenMax.to(this.line3Ref, this.speed, { attr: { y1: this.topLimit }, ease: Expo.easeIn })
    } else {
      TweenMax.to(this.line1Ref, this.speed, { attr: { y1: this.topLimit }, ease: Expo.easeIn })
      TweenMax.to(this.line2Ref, this.speed, { attr: { x1: 0 }, ease: Expo.easeIn })
      TweenMax.to(this.line3Ref, this.speed, { attr: { y1: this.bottomLimit }, ease: Expo.easeIn })
    }

    // Reactでは変更の通知はsetStateが必須
    this.setState(prevState => ({
      closeFlg: !prevState.closeFlg,
    }))
  }

  // svgのlineタグにrefを付与してDOMノードを取得する
  render() {
    return(
      <div className="button" onClick={this.handleClick}>
        <svg viewBox={this.viewbox} width={this.size} height={this.size} style={{ overflow: 'visible' }}>
          <line
            ref={ c => this.line1Ref = c}
            x1="0"
            y1={this.topLimit}
            x2={this.size}
            y2={this.topLimit}
            stroke={this.stroke}
            strokeWidth={this.strokeWidth}
          />
          <line
            ref={ c => this.line2Ref = c}
            x1="0"
            y1={this.halfSize}
            x2={this.size}
            y2={this.halfSize}
            stroke={this.stroke}
            strokeWidth={this.strokeWidth}
          />
          <line
            ref={ c => this.line3Ref = c}
            x1="0"
            y1={this.bottomLimit}
            x2={this.size}
            y2={this.bottomLimit}
            stroke={this.stroke}
            strokeWidth={this.strokeWidth}
          />
        </svg>
      </div>
    );
  }
}

Reactでは、変数(state)変更の通知をsetStateを使って行って初めて画面に反映(rerender)される
(Reactはstate変更の通知をするかどうかをプログラマーがコントロールしたいので、setStateを実行することを採用している)
なので、Vueのように値を変更するだけでは画面に反映されない

TweenMaxのようなトゥイーン系のライブラリはフレーム毎の値の変更をループでよしなにやってくれるが、svgの属性値の変更をする場合、この中にsetStateをねじ込むことができないので変更の通知ができなくアニメーションされないはず
そこで、ReactでTweenしたい場合は、Refを使用してDOMノードを取得しDOMに対してTweenMaxでアニメーションする(要はjQueryとかと同じで昔ながらの方法)

Vueより手間が多くなり、複雑なアニメーションはめんどくさそうだ

ReactHooksで作成する

Reactでは、ClassComponentが滅びてReactHooksとかいうのを使うのがスタンダードになるらしいのでこいつのもついでに作ったが、結構めんどくさかった
ReactにはFunctinalComponentとClassComponentがあって、ClassComponentでしかstateが利用できなかったが、FunctinalComponentでもReactHooksを利用してstateを扱えるようになったらしい

See the Pen ReactHooksHambergur by Saito Takashi (@7_asupara) on CodePen.

ReactHooks

import React from 'react';

function App() {
  const size = 50;
  const speed = 0.4;
  const strokeWidth = 6;
  const halfSize = size / 2;
  const halfStrokeWidth = strokeWidth / 2;
  const topLimit = halfStrokeWidth;
  const bottomLimit = size - halfStrokeWidth;
  const viewbox = `0 0 ${size} ${size}`;
  const stroke = 'black'

  // React.useStateで、stateのgetterとsetterの定義
  // const [getter, setter] = React.useState(デフォルト値)
  const [closeFlg, setCloseFlg] = React.useState(false);
  const [clicked, setClicked] = React.useState(null);

  // useRefでDOMノードの取得 ClassComponentとだいたい同じ
  const line1Ref = React.useRef(null);
  const line2Ref = React.useRef(null);
  const line3Ref = React.useRef(null);

  // クリックイベント closeFlgをトグルするだけ
  const toggle = () => {
    setCloseFlg(!closeFlg);
  };

  // useEffect SideEffect(副作用?)を実行するやつ
  React.useEffect(() => {
    if (closeFlg) {
      TweenMax.to(line1Ref.current, speed, { attr: { y1: bottomLimit }, ease: Expo.easeIn })
      TweenMax.to(line2Ref.current, speed, { attr: { x1: size }, ease: Expo.easeIn})
      TweenMax.to(line3Ref.current, speed, { attr: { y1: topLimit }, ease: Expo.easeIn })
    } else {
      TweenMax.to(line1Ref.current, speed, { attr: { y1: topLimit }, ease: Expo.easeIn })
      TweenMax.to(line2Ref.current, speed, { attr: { x1: 0 }, ease: Expo.easeIn})
      TweenMax.to(line3Ref.current, speed, { attr: { y1: bottomLimit }, ease: Expo.easeIn })
    }
  }, [closeFlg]);

  return (
    <div className="button" onClick={toggle}>
      <svg viewBox={viewbox} width={size} height={size} style={{ overflow: 'visible' }}>
        <line
          ref={line1Ref}
          x1="0"
          y1={topLimit}
          x2={size}
          y2={topLimit}
          stroke={stroke}
          strokeWidth={strokeWidth}
        />
        <line
          ref={line2Ref}
          x1="0"
          y1={halfSize}
          x2={size}
          y2={halfSize}
          stroke={stroke}
          strokeWidth={strokeWidth}
        />
        <line
          ref={line3Ref}
          x1="0"
          y1={bottomLimit}
          x2={size}
          y2={bottomLimit}
          stroke={stroke}
          strokeWidth={strokeWidth}
        />
      </svg>
    </div>
  );
}

Refの使い方とstateをsetしないといけないのはだいたいClassComponentと同じ

ただ、クリックイベントを普通にFunctionalComponentのメソッドとして定義してもライフサイクルが考慮されないのか、そこでDOMノードにアクセスしてTweenしようとしても何も実行されない(画面にレンダリングされる前に定義されるからかな？よくわからん)

ReactHooksでは、useEffectとかいうのがComponentのライフサイクル(ClassComponentでいうcomponentDidMountとかcomponentDidUpdateとか)を管理しているみたいなので、これを利用する
クリックイベントには、stateのcloseFlgのトグル処理のみ記述し、
useEffectで実行したい処理(第一引数)と監視するstate(第二引数)を指定し、closeFlgが変更されたら実行されるようにする(componentDidUpdateにあたるかな, VueならWatcher使えば同じような実装になるような)

アニメーションに限定していえば、慣れたらいけるかもやけど全然直感的じゃないのでめんどくさく感じたし、useEffectがなんか慣れない

まとめ

両者を比較すると、Vueに比べてReactはデータを厳格に扱うことを目指していると思われる
その分、Vueは今回の場合に限らず直感的にコードが書けると思う

ページ数が小規模でアニメーションが多めのインタラクティブなLP、コーポレートサイトが作りたければVueを使うべきだと思う
一方Reactは、大規模なシステム等でデータを厳格に扱いたい場合は優位だと思う
これらの中間のものは好きな方を勝手に選ぼう

ただ、今回はsvgのTweenでアニメーションしたので違いがでたが、CSSとか代替の方法もあると思うので楽な方法を検討すればいい

背景

実求人をクロールし、どの言語がどれだけ求人を保有しているか実数を取得し、年収別の求人数から総合ランキングを作成してみました。個人の恣意的な価値観を反映しないよう、エンジニアとしての個人的な主観は可能な限り省いています。(解説のところで少し主観が入っているのでお気をつけください)

調査方法

Web上にある求人サービスから実求人をクローリングし、言語の頻出数から人気言語のランキングを調査しました。

クローリングとは何か

クローラーとは、ザックリ言うと、web上でデータを集めてくれるロボットです。webにある色々なサイトを飛び周り、こちらの命令（求めているもの）に該当するページで、データを集めてくれます。集まったデータは、各項目ごとに分別され、それぞれ値が抽出されます。抽出されたものは、何かうまいことやってデータベースに格納するなどします。

初心者でも分かる説明

水泳帽をかぶったロボットがプールの中をクロールで泳ぎまくり、「おとな20人」「こども12人」「おとこ20人」「おんな11人」「せいべつふめい1人」みたいな感じで情報、データを集めてくれる便利で良い奴です。

対象データ

調査した実求人総数は10万件ぐらい。
プログラミング言語はWikipediaの一覧から取得し、求人数が100件に満たないものは除外しました。

ref https://ja.wikipedia.org/wiki/プログラミング言語一覧

では早速見てみましょう。

年収別ランキング（絶対数順）

全体的にJava,PHP,JavaScriptが上位に位置しています。特にJavaの案件がダントツに多いことが分かりますね。

この３つの言語は幅広いスキル層に求人を提供しています。専門学校、プログラミングスクールなどを卒業したての駆け出しエンジニアから、バリバリ開発が出来る高レベル層のエンジニアまで幅広い種類の案件がたくさんあります。

傾向

上位はJava、C、PHP, C#, JavaScriptです。市場規模を考えると業務系はWeb系の8倍弱なのでJava,C,C#が上位に来るのは当然です。PHP,JavaScriptが健闘しています。

第2章 我が国における IT 関連産業及び IT 人材の動向
https://www.meti.go.jp/policy/it_policy/jinzai/27FY/ITjinzai_report_2.pdf

C言語はJavaに比べ高年収求人が比較的少ない事が分かります。逆にRuby,PythonはC言語と比較するとそれぞれ案件数に比べて高年収求人は比較的多い事分かります。C, C#などは低年収求人が比較的多いようです。組み込み寄りの言語は人あまりが発生しているのかもしれません。

高年収求人はTypeScript, Kotlin, Scalaが高年収求人に偏っています。TypeScriptはJavaScriptの、KotlinとScalaはJavaの後方互換言語で、これから言語学習を始める方はJavaかJavaScriptをやっておけば、高年収の道は確保されていると見て良さそうです。

年収別ランキング（相対数順）

単純な求人数だけの比較をしてしまうとどうしても母数の多い言語が有利になってしまうため「言語別の高年収求人の割合」を出して並び替えました。「人気がありかつ人手不足の求人ほど給料が高年収の求人割合が多い」と考えるなら、こちらのほうが人気度の実態を表していると考えられます。

傾向

400万円台までは組み込み系かWeb系、500万円台,600万円台からモダンな言語が増えていきます。700万円台ではProcessingの人気が際立っています。Processingは主に電子アートとビジュアルデザインのための言語です。その他、高年収求人には最近出て来たモダンな言語が割合多く見られます。

2019年 総合ランキング 決定版

絶対評価、相対評価だと結局どの言語が良いのか分からないので、絶対数と相対数から弊社独自の重み付けにより総合ランキングを算出しました。ランキングの仕組みは期待値を出しているだけで単純すぎて恥ずかしいので割愛しますが、要は「高年収求人の割合が多い言語」ほど上位に来る仕組みだと思ってください。(期待値のようなものです。というか期待値です。)

10位：Kotlin

Androidアプリ開発で採用する企業が年々と増えており、Android需要に後押しされた格好です。Androidアプリ開発自体はJavaでもできるため、Kotlinでの開発は選択的でiOS開発におけるSwiftほどのインパクトはなかったと見るべきでしょう。

KotlinはJavaよりもスマートに完結に書けることを目指していて、Javaとの互換性もあり、人気が高まっている言語です。最近は「サーバサイドでもkotlinで実装しよう」という動きが目立ち始めています。

国内のサーバーサイド Kotlin 公開採用事例まとめ
https://qiita.com/ptiringo/items/dd734ab8064f94139294

9位：Scala

国内ではあまり目立っていませんが「高単価求人の多さ」が援護射撃になり上位にランクイン。開発資産としてJavaライブラリが使用可能で(Kotlinも同じ)、生産性を高めるモダンな書き方も可能です。やや古い話ですが、2009年にはTwitterがバックエンドをRubyからScalaに移行しました。

Twitter、Ruby on RailsからScalaへ
https://it.srad.jp/story/09/04/10/0421223/

8位：JavaScript

SPAの需要拡大に伴いTypeScriptと共に上位に浮上しました。Adobe AcrobatがJavaScriptのマクロ機能を積んでいるなど、サードパーティ製ツールもJavaScript解析エンジンを積んでいる例が散見されます。また昨今ではJavaScriptの言語的特性(NonBlocking I/Oと相性が良い)からサーバサイドでもJavaScript(NodeJS)を使う動きが見られています。

githubでは注目度断トツの1位。世界的にも現在、もっとも注目を浴びている言語の１つとして過言ではないでしょう。
https://githut.info/

7位：Python

Pythonはシンプルで少ないコードで書けるので、C言語などと比較し扱いやすい人気言語です。近年よく耳にするAI/機械学習/統計解析に必要なライブラリを揃えている事で上位にランクイン。AI需要もありこれからもPython需要は高まっていくかもしれません。

既にAI分野のディファクトスタンダードのような扱いで、Jupyter Notebook(https://jupyter.org/ )など使えば比較的簡単に環境が手に入ります。これから学ぼうという方にも良いかもしれません。

6位：Ruby

日本で開発されたプログラミング言語で、初めて国際電気標準会議（IEC）で国際規格に認証されたことでも有名です。『Y combinator』出身の時価総額上位10社のうち6社が採用している言語で、世界のテクノロジーを支えていると言って過言ではないでしょう。Webアプリケーション開発と非常に相性がよく、日本では下火になったと言われて久しいですが、求人ベースだと人気は健在。国内のスタートアップが積極的に採用している言語の１つです。

ref
https://news.ycombinator.com/item?id=21138422

5位：TypeScript

TypeScriptはマイクロソフトによって開発されたプログラミング言語。JavaScriptに「型」の概念を持ち込みました。ここから『ReactJS』『VueJS』が生まれたと言って過言ではないでしょう。スパゲティになりがちなフロントエンド開発にオブジェクト指向の概念を持ち込み、優れた保守性を持ったSPAアプリケーション開発を実現します。

4位：Apex

SalseForceのプログラミング言語です。ApexはJavaに似ており、Java言語ユーザには親しみのある記述方法を提供しています。Salesforceは開発者に高いインセンティブを支払うことで有名であり、中小ベンダーにとって採用の敷居が低い人気言語となっています。

実は現在、人材市場ではApex開発者の争奪戦が繰り広げられており、歴3年もあればヘッドハントは当たり前。開発者からすると東京で1000万、大阪でも800万も狙える非常に魅力的なプログラミング言語となっています。

3位：PowerShell

PowerShellは2006年に生まれた言語でMicrosoft発のプログラミング言語です。WindowsやMicrosoft製品のシステム管理を行うためのシェル言語を提供しており、オブジェクト指向で開発ができることでも有名です。Bashで書くかPowerShellで書くかで悩んだ開発者も多いでしょう。現在はオープンソース化されています。

Apexと同様、この２つの言語は使用用途が偏っているため求人数が多くないのですが、その分開発経験者が少なく、高単価になったと考えられます。わざわざこれから始めようという言語ではないかもしれませんが、既に業務で経験されていたり触る機会のある方にはGood Newsかもしれませんね。

2位：Swift

Swiftは、モダンな記述で開発がしたい開発者とiOSアプリの開発需要のダブルアタックで上昇したプログラミング言語です。Swift自体は初心者にも優しく、駆け出しの方にもオススメですが、ある程度ターミナルの知識を求められるので、知識が全くないと環境構築の段階で沼にハマってしまうかもしれません。そして言うまでもないかもしれませんが、Swiftでの開発には「MacBook」が必要です。

1位：Golang

GolangはGoogleによって設計されたプログラミング言語です。動作は軽量でソフトウェアを効率的にシンプルに構築できるとされていてオススメです。Goのツール、コンパイラ、ソースコードは全てオープンソースです。実装はオブジェクト指向にも関数型にも適応しており、優れたメモリ管理アルゴリズムが非常に軽快で高いパフォーマンスを発揮します。ある程度の言語経験者には非常に人気の高いプログラミング言語ではあります。一方で低年収求人には少なく、初心者向きではないので注意が必要です。

まとめ

プログラミング言語別総合ランキングはGolangが一位を獲得しました。今までGolangには興味あるけどなんとなく遠ざけてきた開発者の方は一度Tryしてみる価値はあるかもしれません。しかし入門者が始めるには敷居が高く、これからプログラミング言語を始める人はJava/Ruby/JavaScriptあたりが良いかもしれません。全体的にモダンな言語や用途が限定的ではあるが需要の高い言語が上位に来ており、既に得意になっている言語の延長で取り組めば効率よく年収アップが狙えるかと思います。

プロモーション

『リッターズ』のTwitterアカウントでは世界中の「先端Techビジネス」や技術要素の格付け情報を流しています。気になる方は是非フォローしてみてください。

リッターズ
https://twitter.com/ritters2u

『渋谷コード塾』では求人市場の調査結果から最新の技術トレンドを調査取得し、それらを習得するための半年間のコースを提供しています。直近ではReactNativeによるネイティブアプリ開発とRuby/Python/NodeJS/Golangによるサーバサイド開発を半年でマスターする「アプリxAPI開発コース」を提供しています。「精神と時の部屋」で半年間で3年分の成果を出しましょう。HPはまだ用意していないため、興味ある方は直接私のTwitterアカウントにご連絡ください。

Twitter
https://twitter.com/shiraponsu

フォローやお仕事のお問い合わせもお待ちしています。
ここまで読んでいただきありがとうございました。

TL;DR

monkey-patch.ts

interface HTMLImageElement {
  asyncLoad(): Promise<void>
}

// jsなら↓だけでおk
HTMLImageElement.prototype.asyncLoad = function() {
  if (this.complete) return Promise.resolve()

  return new Promise(resolve => {
    this.addEventListener("load", function callback() {
      resolve(this)
      this.removeEventListener("load", callback)
    })
  })
}

if (this.complete) return Promise.resolve()を記述しないと、読み込み済みの場合 Promise が解決されないので注意

概要

全ての img 要素が読み込み終わったら特定のアクションを実行するとか、new Image()したやつを読み込み終わるまで await したりなどでわざわざ関数書くのも面倒なんで、モンキーパッチと呼ばれるテクニックで HTMLImageElement に asyncLoad というメソッドを追加してみました。

※ Effective JavaScriptにやみくもなモンキーパッチは避けるべきと書いてあるので、業務で使用する場合は上の確認を取ってから実装するように！

使用例

import "./monkey-patch.ts"

/** img要素の全てが読み込まれた場合Promiseが解決される*/
const asyncLoadAllImages = async () => {
  const promises = Array.from(document.querySelectorAll("img"), el => el.asyncLoad())
  await Promise.all(promises)
}

/** 特定パスから画像を読み込まれた場合Promise<HTMLImageElement>が解決される */
const asyncGetImage = async (src: string) => {
  const image = new Image()
  image.src = src
  await image.asyncLoad()
  return image
}

余談

Promise を返却するような非同期関数の命名規則ってどうなっているんだろう。。

基本的に関数名先頭に async を付けてるけど正直コレジャナイ感がすごい。。

あと、「Promise が解決される」って言い方はMDNにそって言ってるけど、これも日本語的にすごく違和感...?

めもめも

(number=>{

const init=width=>{

  const h=i=>~~(i/width), v=i=>i%width, d=i=>h(i)+v(i), u=i=>h(i)-v(i);

  const test=(grid,i,f)=>grid.filter((e,j)=>f(i)==f(j)).reduce((a,c)=>a+c,0) < 2;

  let count=0;

  const log=grid=>[...Array(width).keys()].map(e=>e*width).forEach(
    e=>((e==0)?console.log((++count)+":"+"-".repeat(width)):false)
     ||console.log(grid.slice(e,e+width))
  );

  return solve=(grid=[...Array(width**2)].fill(0),row=0)=>
    [...Array(width)].map((_,i)=>i+row*width).forEach(i=>[
      grid[i]=1,
      (test(grid,i,v)&&test(grid,i,d)&&test(grid,i,u))?
        (row+1==width?log(grid):solve(grid, row+1)):0,
      grid[i]=0
    ]);
};

init(number)();

})(8)

前提

json形式で配列を送りたかったが、配列が別々に２つ存在するため多次元配列（2次元配列）を作る必要があった。

最初

name.rb

names = ["hideki", "takahiro", "miki"]
descriptions = ["すごい", "かっこいい", "かわいい"]

inventories = []

names.each_with_index do |name, i|
  inventories.push [name, descriptions[i]]
end

出力結果

 [["hideki", "すごい"], ["takahiro", "かっこいい"], ["miki", "かわいい"]]

改善

name.rb

names = ["hideki", "takahiro", "miki"]
descriptions = ["すごい", "かっこいい", "かわいい"]

inventories = names.zip(descriptions)

出力結果

 [["hideki", "すごい"], ["takahiro", "かっこいい"], ["miki", "かわいい"]]

メモ：受け取り側での処理

上記をjson形式で送る

name.rb

render json: inventories

ループさせる

name.coffee

success: (json) ->
  html = ""
  for i of json
    html += "<div class='name'>#{json[i][0]}</div><div class='description'>#{json[i][1]}</div>"
  $(".names").html(html)

上記の[0][1]をループさせる方法がわからずでして、、どなたかわかる方がいらっしゃいましたら教えて頂けるとうれしみです。。

参考にした記事

Rubyの配列でごにょごにょするときzipとinjectとevalが便利すぎる件

はじめに

「200行のVue.jsでスネークゲームを作った」、「たった7行でテトリスを実装「七行プログラミング」とは」の影響を受けて「23行のhtmlでマインスイーパーを作った(Qiitaで遊べるよ!!)」という記事を書いたのだが、トレンド入りしたり影響を受けた記事が作られたりするなど個人的には反響が大きかったように思える。
そこで今回はショートコーディング第二弾として、スネークゲームを可能な限り小さいhtmlで制作した。
最終的に行数はたった1桁の9行、サイズは1KBを切るスネークゲームの完成に成功した。

さあ、スネークゲームで遊ぶのだ!

See the Pen HTML_Snake_Min by T.D (@td12734) on CodePen.

大きい画面で遊びたい人はこちら
Qiitaだと上下移動でスクロールされてしまうので大画面推奨です。

ゲームルール

• ヘビ(緑色)を動かしてエサ(赤色)を取得するゲームです。
• 矢印キーを押すとヘビの体を操作できます。
  • 一度上の枠内をクリックしてからでないと矢印キーが反応しないかもしれません。
  • 最初に矢印キーを押した後、ヘビが動き始めます。
  • ヘビは止まらずに動き続けます。
• エサを取るとヘビの体が伸びます。
• ヘビの頭が胴体に衝突する、盤外に行くとゲームオーバーです。
• Resetボタンを押せばゲームをやり直せます。

プログラム

コード

ゲームは以下のコードで実装した。七行プログラミングのルールに従い、1行は79文字以下としている。

<!doctype html><body onKeyDown=K=event.keyCode-36 onload='L=f=>{i=t;while(i--)f
(C(i))};C=c=>T.rows[c/w|0].cells[c%w];D=_=>L(c=>c.style.background=!c.v?0:!~c.v
?"red":c.v-s?"tan":"lime");F=_=>(c=C(M())).v?F():c.v--;M=_=>Math.random()*t|0;R
=_=>{L(c=>c.v=P[I="innerHTML"]=0);C(p=M()).v=s=1;D(F(p++))};for(i=K=0;i<(t=400)
;i++){i%(w=20)?0:r=T.insertRow(0);r.insertCell(0).style="width:24px;height:8px"
+";border:solid"}R(setInterval(_=>{if(+P[I]>=P[I]&&K){if((K>3&&(p+=w)?p<=t:K>2
&&p++?p%w-1:K>1&&(p-=w)?p>0:p--&&p%w)&&C(p-1).v<1){C(p-1).v&&!F(P[I]=s++)?0:L(
c=>c.v>0&&c.v--);D(C(p-1).v=s)}else P[I]+=" Gameover"}},200))'><input onclick=
R() type=button value=Reset><p id=P><table id=T style=border-collapse:collapse>

htmlで保存してブラウザで開いても恐らく遊べます。
最終行を始めとするほぼ全ての行が79文字埋まっており、視覚的にも大変美しいと思います。
主な実装はbodyのonloadに書いてあるが、何書いてあるか分からないと思うのでonloadを書き下したコードを以下に貼る。

onload

L=f=>{i=t;while(i--)f(C(i))};
C=c=>T.rows[c/w|0].cells[c%w];
D=_=>L(c=>c.style.background=!c.v?0:!~c.v?"red":c.v-s?"tan":"lime");
F=_=>(c=C(M())).v?F():c.v--;
M=_=>Math.random()*t|0;
R=_=>{
  L(c=>c.v=P[I="innerHTML"]=0);
  C(p=M()).v=s=1;
  D(F(p++))
};
for(i=K=0;i<(t=400);i++){
  i%(w=20)?0:r=T.insertRow(0);
  r.insertCell(0).style="width:24px;height:8px;border:solid"
}
R(setInterval(_=>{
  if(+P[I]>=P[I]&&K){
    if((K>3&&(p+=w)?p<=t:K>2&&p++?p%w-1:K>1&&(p-=w)?p>0:p--&&p%w)&&C(p-1).v<1){
      C(p-1).v&&!F(P[I]=s++)?0:L(c=>c.v>0&&c.v--);
      D(C(p-1).v=s)
    }
    else P[I]+=" Gameover"
  }
},200))

改行しても23行しかない。
ただ、見やすくなったもののコードの解読は困難だと思うので以下で説明を行う。

変数、関数の説明

コード圧縮の都合上、全ての変数名と関数名は1文字になっている。
その結果、可読性が大幅に失われたのでここでは変数名、関数名について説明する。

• 変数、関数名
  • 1文字に圧縮する前に付けたであろう名前
  • この行以降は動作説明など

グローバル変数

• i
  • 特に無し
  • ループ調整変数
• p
  • player
  • ヘビの頭の座標+1
• r
  • tableRow
  • テーブルの行
• t
  • tableSize
  • テーブルのマスの数、及びsetTimeoutのインターバル
• w
  • width
  • テーブルの横サイズ
• I
  • innerHTML
  • 定数"innerHTML"
• K
  • keyCode
  • 入力したkeyCodeから36を引いたもの
• P
  • pElement
  • スコアとGameOverを表示するテキストエリア
• T
  • tableElement
  • ゲームの盤面

ローカル変数

• c
  • cell
  • テーブルのセル
• f
  • function
  • Lで実行する関数
• v
  • cellValue
  • そのセルの数値
  • 0：何もない
  • 1以上：ヘビの体
  • -1：エサ
• _
  • 特に無し
  • アロー関数の()を省略するために定義したダミー変数

関数

• C
  • GetCell
  • テーブルのセルを取得する
• D
  • DrawCell
  • ゲームの盤面のマスに色を塗る
• F
  • FoodSet
  • 盤面にエサを設置する
• L
  • LoopCell
  • 全てのセルに対して引数の関数を実行する
• M
  • Math_random
  • エサとヘビの位置をランダムに決める
• R
  • ResetGame
  • ゲームの盤面を初期化する

動作、工夫点の説明

説明を見る前に最低限知っておきたい知識

• 変数宣言のvarやletは省略可能
• 変数宣言や計算などは文中でも可能
  • 場所によってはカッコで括る必要がある
• if-else文より三項演算子を使った方が短くなる場合がほとんど
  • if(条件) 処理1 else 処理2 → 条件?処理1:処理2
• 0はfalse、0以外はtrueと判断される
  • -1をビット反転させれば0になる(~-1=0)
• 関数宣言はfunctionよりもアロー関数を使った方が短い
  • function func(a){}→func=a=>{}
  • function (){}→_=>{}(「_」はダミー変数)
• if,while,アロー関数などの{}の中の処理が1つの時、{}を省略可能

html部分

<!doctype html>
<body onKeyDown=K=event.keyCode-36 onload='省略'>
<input onclick=R() type=button value=Reset>
<p id=P>
<table id=T style=border-collapse:collapse>

html5ではp,tableなどの閉じタグが無くても動作するのでこれらを削除する。
ただ、環境によってはhtml5と認識されずにエラーが出るので<!doctype html>を書く必要がある。

キーボードのキーが押された時、bodyのonKeyDownが呼ばれて変数Kにキーコード-36が代入される。
(←,↑,→,↓)のキーコードは(37,38,39,40)なので、あらかじめ36を引けばKには(1,2,3,4)が代入されてKの比較時などに文字数を削減可能。

JavaScriptはscriptタグではなくbodyのonloadに全て突っ込む。
こうすれば<script>と</script>の文字列を省略可能で、全てがload時に実行されるのでwindow.onloadも省略可能で文字数を大幅に削減できる。
ちなみに</script>は省略できない。

inputタグではResetボタンを定義し、押した時に関数Rを呼び出すようにしている。

pタグでは点数とGameoverの文字を表示する。
idをPにし、他にP変数や関数を定義しなければgetElementById()をしなくてもP.~の形でpタグにアクセス可能。
同様の事をtableでもやっている。

ゲームの盤面はtableタグで表示している。
styleのborder-collapseをcollapseにしなければ枠線が表示されず、ゲームの難易度が跳ね上がる。

ゲームの盤面を設定する

for(i=K=0;i<(t=400);i++){
  i%(w=20)?0:r=T.insertRow(0);
  r.insertCell(0).style="width:24px;height:8px;border:solid"
}

真ん中よりやや下にある部分だがここが最初に実行される。
1行目はfor文で0～399まで回し、ついでにKに0、tに400を代入している。
2行目ではiを20で割った余りが0のとき、insertRowして行を追加している。
本来は以下に示すif文だが、三項演算子を用いる事で文字を削減できる。
また0がfalse扱いされることを利用して!==0も省略している。

if(!(i%(w=20)!==0))r=T.insertRow(0);

3行目ではテーブルのセルのスタイルを設定している。
セルを横長な長方形にし、境界線を1本だけ引くようにして盤面を見やすくしている。

ゲームテーブルの特定のセルを取得する

C=c=>T.rows[c/w|0].cells[c%w];

座標が引数cであるセルを返している。
分かりやすく書くと以下と同様の処理をしている。

function C(c) {
  return T.rows[Math.floor(c/w)].cells[c%w];
}

小数点以下の切り捨てはMath.floor()を使うよりもビット演算して|0する方が断然短い。

ゲームテーブルの全てのセルに対し、セルを引数とする関数を実行させる

L=f=>{i=t;while(i--)f(C(i))};

テーブルの全てのセルに対し、セルを引数とする関数fを実行させている。
全てのセルの呼び出しはforよりもwhileの方が短く書ける。

ゲームテーブルに色を塗る

D=_=>L(c=>c.style.background=!c.v?0:!~c.v?"red":c.v-s?"tan":"lime");

この1行で色塗り処理を行っている。
読みやすく書き直すと以下のようになる。

function D() {
  L(function (c) {
    if (c.v===0) {
      c.style.background="white";
    }
    else if (c.v===-1) {
      c.style.background="red";
    }
    else if (c.v-s!==0) {
      c.style.background="tan";
    }
    else {
      c.style.background="lime";
    }
  });
}

if文は三項演算子で簡略化し、条件式は0がfalse、0以外がtrue、-1のビット反転が0でfalseである事を利用して文字数を減らしている。
色について、whiteは0で代用可能なので0を代入している。
エサは通常は赤色で示し、redは3文字しかないのでredにした。
ヘビの頭は通常は緑色で示されるが、greenは5文字で長いので4文字のlimeで代用した。
ヘビの胴体は3文字の色であるtanにした。

プレイヤーやエサを配置するセルの座標をランダムに決める

M=_=>Math.random()*t|0;

ランダムな座標、つまり0から399までのランダムな整数を返している。
切り捨てはビット演算で行っている。

何も無いランダムな座標にエサを配置する

F=_=>(c=C(M())).v?F():c.v--;

分かりやすく書くとこうなる。

function F() {
  c = C(M());
  if (c.v!==0) {
    F();
  } else {
    c.v--;
  }
}

まず、セルcをランダム決めている。
次にセルcの値が0ではない、つまりエサかヘビの頭か胴体ならFを再度呼び出し、0ならセルの値から1を引いて-1にしてセルをエサ扱いする。

ゲームを初期化する

R=_=>{
  L(c=>c.v=P[I="innerHTML"]=0);
  C(p=M()).v=s=1;
  D(F(p++))
};

関数Rで全てのセルのリセット、スコアのリセット、プレイヤーのランダム配置、エサのランダム配置を行っている。
分かりやすく書くと以下のようになる。

function R() {
  L(function (c) {
    c.v=0;
    P[I="innerHTML"]=0
  });
  C(p=M()).v=s=1;
  p++;
  F();
  D();
}

最後のD(F(p++))について、関数FとDは引数を参照しないのでどのような引数を入れても処理に支障はない。
そこでFの引数でp++を行い、Dの引数で関数F(p++)を呼び出してセミコロンを減らしている。

200ミリ秒ごとに行う処理を記述し、ゲームの初期化を行う

R(setInterval(_=>{
  if(+P[I]>=P[I]&&K){
    if((K>3&&(p+=w)?p<=t:K>2&&p++?p%w-1:K>1&&(p-=w)?p>0:p--&&p%w)&&C(p-1).v<1){
      C(p-1).v&&!F(P[I]=s++)?0:L(c=>c.v>0&&c.v--);
      D(C(p-1).v=s)
    }
    else P[I]+=" Gameover"
  }
},200))

恐らくこのソースコードで最も難解な場所である。
分かりやすく書くと以下のようになる。

setInterval(function (){
  if(Number(P[I])>=P[I]&&K!==0){ //pタグ内の文字列を数字に変換可能で、Kが0ではない時
    var notSnakeCollided; //ヘビが衝突していなければtrue、説明用変数
    if (K>3) { //下に移動
      p+=w;
      notSnakeCollided=p<=t;
    }
    else if (K>2) { //右に移動
      p++;
      notSnakeCollided=p%w-1;
    }
    else if (K>1) { //上に移動
      p-=w;
      notSnakeCollided=p>0;
    }
    else { //左に移動
      p--;
      notSnakeCollided=p%w;
    }
    if (notSnakeCollided&&C(p-1).v<1) { //ヘビが壁に衝突しておらず、移動先がヘビの胴体ではない時
      if (C(p-1).v!==0) { //セルの値が0ではない、つまりエサの時
        s++;
        P[I]=s;
        F();
      } else {
        L(function (c) {
          if (c.v>0) {
            c.v--;
          }
        });
      }
      C(p-1).v=s;
      D();
    } else { //敗北条件を満たした時はpタグの文字列にGameoverを追加する
      P[I]+=" Gameover";
    }
  }
},200);
R();

setIntervalでは200ミリ秒ごとに以下の処理をやらせている。

1. ゲームオーバーでは無く、ゲームがスタートしているなら次に進む
2. Kの値によってヘビを移動させ、壁やヘビに衝突していないか確認する
3. 衝突していないとき、以下の処理を行う
   1. 移動先がエサのとき、スコアを1増やしてエサを再配置する。
   2. 移動先がエサではないとき、ヘビのセルの値を1減らす。
   3. 移動先の座標をヘビの頭にする
   4. テーブルに現在の状態を反映させる
4. 衝突していたとき、pタグの文字列にGameoverを追加する