圧倒的成長の記録2018

  • 1/1 Redux-saga, Generator, Async/Await, Promise, high-order-component
  • 1/2 Redux, React をリアルタイムに書く練習
  • 1/3 Redux をリアルタイムに書く練習
  • 1/4
  • 1/5
  • 1/6
  • 1/7
  • 1/8
  • 1/9 HOF による イベントハンドリングコンポーネントの実装、
  • 1/10 async のエラー処理
  • 1/11 create.JS, 三項演算子/&&の使い分け
  • 1/12 e2e テストを WebDriverIO, power-assert で
  • 1/13 React 勉強会打ち合わせ
  • 1/14
  • 1/15 初めてのJavaScript リテラル、クロージャ
  • 1/16 テストの概要の記事を翻訳
  • 1/17 テスト用のフレームワークの学習(mocha?karma?jest?)
  • 1/18 createjs import では使えない、codepen で直接読み込みで使う

 

英文記事まとめ

How To Successfully Teach Yourself How To Code 済1/1 5点

学習の記録をつけることで成長を実感すること。動画コンテンツは流し見するだけでは理解できないので、みながら自分のプロジェクトの作業をし、わからないことはしっかり調べる。進捗が遅いように見えても、それが一番確実。すごい人と比べると自分は無力のように思うが、そんなことはない。仕事以外の自分のプロジェクトを持つこと。

Developing NPM Packages 途中1/1 5点

NPM パッケージを自分で開発するために必要な、GitHub の使い方、コンパイル、パブリッシュの手順が詳しい。より一層の JS の理解のために NPM 開発が必要だ。

HOC ハイオーダーコンポーネント系。

 

redux-saga 使い方 まとめ

https://redux-saga.js.org/

redux-saga は、React において state の管理を redux にさせている場合に、非同期処理を担当する middleware。同様のアプリケーションに redux-thunk がある。

redux-thunk から redux-saga に乗り換え

https://hackernoon.com/moving-form-redux-thunk-to-redux-saga-5c19d0011ca0

まずは Generator がコア

The Basics Of ES6 Generators

View story at Medium.com

function *generatorFunction (){} でgenerator を作る。

const it = generatorFunction () で it という イテレーターオブジェクトを作る。

it.next() で進める。 it.next().val で yield の値が取れる。

function *generatorFunction (){
yield 1;
yield 2;
yield 3;
}

console.log(it.next().value) //1
console.log(it.next().value) //2
console.log(it.next().value) //3

yield したものが return される。

for ( const value of generatorFunction ()){}

でとれる。

Generator, yield と async/await の類似性

async/await は、await によって promise オブジェクトが返されるまで待つ。これによって非同期処理を、書き方としては同期処理のように上から下へと書くことができる。

Generator における yield は、await と同じように、next() を待つ。これによって redux-saga は、処理を止めたり進めたりしている。

シンタックス

https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html

saga.js を用意する。

import { delay } from 'redux-saga' // 時間差を作り出す
import { put, takeEvery, all } from 'redux-saga/effects'
// put はアクションのディスパッチを予約
// takeEvery は action を待ち受けるために使う
// all は saga をまとめて出力するために使う

// generator で定義。非同期処理を実行するもの
function* incrementAsync() {
  yield delay(1000) //saga のdelay を使う。終わるまでここで待つ
  yield put({ type: 'INCREMENT' }) // delayが終わればこの行に来る
  // action をディスパッチする
}


// アクションを待ち受ける
function* watchIncrementAsync() {
  yield takeEvery('INCREMENT_ASYNC', incrementAsync) 
  //受けたら関数を実行
}

// まとめておく
// notice how we now only export the rootSaga
// single entry point to start all Sagas at once
export default function* rootSaga() {
  yield all([
    helloSaga(),
    watchIncrementAsync()
  ])
}

ミドルウェアの適応

import "babel-polyfill" // generator とかに必要っぽい

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'

import rootSaga from './sagas' // saga関係がまとまっているもの

import reducer from './reducers'

const sagaMiddleware = createSagaMiddleware() //ミドルウェアを作る

//redux にミドルウェアを噛ませる
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
)

//サーガを起動
sagaMiddleware.run(rootSaga)

関数の実行と引数の渡し方

call を使って function を実行する。これはイテレーターか、もしくは promise を返す function を使う。例えば fetch など。promise が返されるまで、yield は待つ。

import { call, put } from 'redux-saga/effects' 
// call が非同期処理をする関数を呼び出すために必要

export function* fetchData(action) {
   try {
      // Api.fetchUser ha promise を返すものとする
      // call(function,arg) ここでは action を引数として渡した
      // promise の返り値が const data に入る
      const data = yield call(Api.fetchUser, action.payload.url)
      // アクションをディスパッチ
      yield put({type: "FETCH_SUCCEEDED", data})
   } catch (error) {
      yield put({type: "FETCH_FAILED", error})
   }
}

sandbox

sksk

 

async/await promise の使い方の記事まとめ

https://codesandbox.io/embed/oopvk114p9

最初に読んだ

https://medium.freecodecamp.org/oh-yes-async-await-f54e5a079fc1

次に読んだ

https://tutorialzine.com/2017/07/javascript-async-await-explained

図示

http://nikgrozev.com/2017/10/01/async-await/

const async1 = async () => {return await returnPromiseFunction()}

const async2 = async () => {console.log(await async1())}

async と arrow function の前につける。そのファンクションの中で await を使える。await は promise オブジェクトが返されるまで、待つ。return value は return Promise.resolve(value) と同じ。つまり promise オブジェクトを返している。

25日目 シリコンバレー戦略4 編「シリコンバレーに本社がある企業の日本での求人を読む」 2017年圧倒的成長振り返り一人アドベントカレンダー

この記事は ” 2017年圧倒的成長振り返り一人アドベントカレンダー ” の 24日目です。

https://adventar.org/calendars/2747

アドベントカレンダーに乗り遅れ、参加できそうなものがなかったので行われる、孤独な一人アドベントカレンダー。最終日25日目の今日は、シリコンバレーの会社の応募項目を読む 編です。

惜しくも25日には間に合わず、仕事納めの翌日30日に書いております。25日にかけたはず。甘え。こういうちょっとしたディレイが最終的にシリコンバレーを遠くしていくので、きっちりやっていきたい。まずは、25日分のアドベントカレンダーの完成です!

Google と Facebook の求人を読む

まずは Google

JavaScript で検索するとこれが

とりあえずおもむろにボタンを押してみると、基本情報に加えて、resume つまり経歴書、もっている技術を示すための書面を添付すれば OK のようだ。なので、英文 Resume を書く能力がさしあたって必要という気がしました。

ということで英文レジュメの書き方を早速買ってみた。

英文履歴書の書き方Ver.3.0
有元 美津世
固定リンク: http://amzn.asia/7F4LyEd

書くぞい!

これでアドベントカレンダーは終わり!よくやった俺!

この記事は ” 2017年圧倒的成長振り返り一人アドベントカレンダー ” の 24日目です。

https://adventar.org/calendars/2747

アドベントカレンダーに乗り遅れ、参加できそうなものがなかったので行われる、孤独な一人アドベントカレンダー。最終日25日目の今日は、シリコンバレーの会社の応募項目を読む 編です。

 

24日目 シリコンバレー戦略3 編「シリコンバレーの会社をリストアップ」 2017年圧倒的成長振り返り一人アドベントカレンダー

この記事は ” 2017年圧倒的成長振り返り一人アドベントカレンダー ” の 24日目です。

https://adventar.org/calendars/2747

アドベントカレンダーに乗り遅れ、参加できそうなものがなかったので行われる、孤独な一人アドベントカレンダー。24日目の今日は、シリコンバレーの会社をリストアップ 編です。

そもそもどんな会社があるのか

そもそもどんな会社があるのか知らないことには戦略がぶれます。調べます。

わかったこと

調べればなんでもわかる。調べる前と後では、できそうな雰囲気がかなり違う。調べれば調べるほど近づいている実感がある。今後もどんどん調べる。

日本支社がある企業に入るという素直な戦略もあり。

  • Google(グーグル)日本支社がある。求人もあった。
  • Facebook(フェイスブック)まさにシリコンバレー。React。東京の募集あった。
  • ネットアップ ストレージ、データ管理。日本支社あり。
  • アジレント・テクノロジー  化学分析機器や電気・電子計測機器の開発・製造・販売・サポートを行う、業界最大手の企業。ということで、メインはウェブではないけれど、なんらかのウェブエンジニアの仕事はありそうだ。八王子に日本支社がある。日本支社経由という戦略もありうる。

地味だけど仕事が多そうな会社は潜りこめそう。

普通こういう会社はエンジニアはあまり好まないのではないか。地味なので。日本で地味な仕事をやるならシリコンバレーでやったほうが当然面白いと思う。

明日は

この二社が日本でも募集しており、しかも詳細な資料があるので、これを読んでみようと思います!

この記事は ” 2017年圧倒的成長振り返り一人アドベントカレンダー ” の 24日目です。

https://adventar.org/calendars/2747

アドベントカレンダーに乗り遅れ、参加できそうなものがなかったので行われる、孤独な一人アドベントカレンダー。24日目の今日は、シリコンバレーの会社をリストアップ 編です。

23日目 シリコンバレー戦略2 編「苦手な方からやってみる」 2017年圧倒的成長振り返り一人アドベントカレンダー

この記事は ” 2017年圧倒的成長振り返り一人アドベントカレンダー ” の 23日目です。

https://adventar.org/calendars/2747

アドベントカレンダーに乗り遅れ、参加できそうなものがなかったので行われる、孤独な一人アドベントカレンダー。23日目の今日は、シリコンバレー戦略2 編です。

具体的な行動に落とし込む

19日のシリコンバレー戦略編1の記事で 今思いつく戦略を書き出しました。これをさらに具体的にやっていきたいと思います。

  • 応募先の会社のリストアップ
  • 申し込みの履歴書的なものの英文での作成
  • 英語での面接対策
  • 行ってから生活に不便しない英語力を身につける(オンライン英会話)
  • エンジニアとしてのスキルのアップ(ただこれはどこまでも無限にあるので必須ではないかも)
  • 海外エンジニアのコミュニティへの所属
  • 海外で働いているエンジニアにコンタクト

苦手そうな方からやる

この中で一番自分にとって難しそうだなと感じるものはどれか。順番にしてみるとこうなります。

  1. 応募先のリストアップ
  2. 英文での申し込みレジュメ作成
  3. 海外で働いているエンジニアへのコンタクト

他のものはコツコツ一人でできるので、いけそうです。この三つはいろんな人に協力してもらわないとできなさそうです。のでここを重点課題としたいと思います。

苦手なことは、後回しにされます。でも苦手というのは実は雰囲気だけであって、やりさえすれば、できるんじゃないかなと思います。

ということでリストアップしたので、これを次の記事で順番にやっていきます!

この記事は ” 2017年圧倒的成長振り返り一人アドベントカレンダー ” の 23日目です。

https://adventar.org/calendars/2747

アドベントカレンダーに乗り遅れ、参加できそうなものがなかったので行われる、孤独な一人アドベントカレンダー。23日目の今日は、シリコンバレー戦略2 編です。

22日目 アドベントカレンダーやってよかった 編「自分の行動を自分でデザインする」 2017年圧倒的成長振り返り一人アドベントカレンダー

この記事は ” 2017年圧倒的成長振り返り一人アドベントカレンダー ” の 22日目です。

https://adventar.org/calendars/2747

アドベントカレンダーに乗り遅れ、参加できそうなものがなかったので行われる、孤独な一人アドベントカレンダー。22日目の今日は、アドベントカレンダーやってよかった 編です。

有言実行こそが力

一人でアドベントカレンダーを全部やる、という笑いの取り方は、簡単に思いつくことができるし、実際やっている人が結構います。 ただ、実際に全日程をこなし、かつボリュームのある記事を書くことができれば、そこそこ面白いと思って始めました。やはり継続することが、笑いを取る上では大事だと思います。思いつきをしつこくしつこく形にする。

そして何より、1日1記事書くという、ちょうどいいレベル感の課題をクリアーすることで、次のレベルに自分がいけるのではないかという直感がありました。

1日1記事書くという課題は、決してクリアーできないものではありません。しかし、言い訳をしようと思えばいくらでもすることができ、諦めることもできる課題です。ネタがない。仕事が忙しくて時間が取れない。もっと効率的な課題のためにやめる。等々。

だからこそ、25日全日を埋め、達成することができれば、自分の目標を自分でクリアーする習慣づけのためにいい効果があると思いました。この記事を入れてあと3つ書けばクリアーです。

自分の行動をデザインする

ジュンク堂の 6F 特設コーナーにデザインコーナーができていて、そこで人生をデザインするというような本がいくつかありました。

その中で特に心を引かれたのが、どんなものにも意味はなく、それに意味を与えているのは、自分自身だから、変えることができるというものです。そして、どんな課題もかならず取り組んで行動し、達成することができる。そういう自分の思考やひととなりをデザインしようというものでした。

なるほどと思いました。エンジニアは比較的自分の生活を自分でデザインできる仕事です。実際今もリモートで仕事をしているので、いかに効率的に成果を出せるかは、全て自分で決めることができます。考え方、ツール、食事等々、自分の意思で変えることができます。

以前サラリーマンをやっていたときにはそうではありませんでした。ある意味では自分で自分の人生をデザインできる方向に、自分の人生を動かしてきた、といえるかもしれません。

自分の行動を無限に変えることができる仕事になったことで、こういった考え方・行動をデザインするということに関して、高い効果が出るようになったということを今日認識しました。これもアドベントカレンダーをなんとか達成するという取り組みをしたことで、自分の行動を自分でデザインするという考え方を自然と実行していたからこそ気づいたのかもしれません。

先に締め切りと内容を決めて書くことで、普通だったら達成できない量を達成できる

25記事を一ヶ月で書くというのは、かなりのハイペースで、自然には決して達成できない量です。(その代わりに、他のプログラミングの勉強時間は減ってしまっていますが。しかしそれよりもアドベントカレンダーの達成を自分は目指したわけです。その選択が大事だと思っています。) それを達成できたのは、やはり締め切りと具体的なテーマを設定したことによります。ドラッカー等のビジネス書に繰り返し強調されていることですが、締め切りと定量的な目標を持つ、ということが、質の良い行動の基本であることを改めて実感しました。

シリコンバレー、世界でエンジニア編における書く力

話はやはり次の目標である、シリコンバレーのエンジニアになること。日本で働いている、日本語を話しているというのは、特に意味がないわけです。ただ日本で生まれたから習慣としてそうしているというだけのことで。

なので、自分の行動をデザインしていって、シリコンバレーで働くのが当たり前の感覚になればいいんじゃないかなと思うわけです。

英語を日常においても、仕事においても使用して、もっとエンジニアとしてのレベルをあげることで、十分可能なはずです。

これについて日々書いて行く。それによって近づいていきたいと思います。

 

この記事は ” 2017年圧倒的成長振り返り一人アドベントカレンダー ” の 22日目です。

https://adventar.org/calendars/2747

アドベントカレンダーに乗り遅れ、参加できそうなものがなかったので行われる、孤独な一人アドベントカレンダー。22日目の今日は、アドベントカレンダーやってよかった 編です。

21日目 ブログ書いてきてよかった 編「書くこと自体が課題解決」 2017年圧倒的成長振り返り一人アドベントカレンダー

この記事は ” 2017年圧倒的成長振り返り一人アドベントカレンダー ” の 21日目です。

https://adventar.org/calendars/2747

アドベントカレンダーに乗り遅れ、参加できそうなものがなかったので行われる、孤独な一人アドベントカレンダー。21日目の今日は、ブログ書いてきてよかった 編です。

ブログを一年やってわかった利点

はっきりいってこのサイトは全然誰も見ていない。月3000ビューくらいで、ほとんどが検索流入だ。そのため特定の記事、例えば React チュートリアルとかだけが見られていて、この記事みたいなものは読まれていない。

それでも書き続ける利点がある。

書くことで、自分ができることとできないことが明確になる。

さらに、書くことを通して、わからなかったことを調べて、最終的にできるようになる。

問題というのは、認識した時点で8割は解決したようなものだ。問題がわかれば、あとは解くだけなのだ。

問題の認識、調べる、解決というプロセスを、書くことで明確にできる。それが一年間ブログを書き続けることで明確になった。

書くことそのものが、解決のフローに乗せることなのだ。

次は未来の目標を書いてクリアーしていきたい

次の目標はシリコンバレーだ。全くどうすればいいのか、今のところわからない。

けれど、このブログを始めた時に CSS のことが、JS のことがほとんどわからなかったのに、書き続けることでその課題をクリアーしたように、シリコンバレーにだって書くことで近づくことができるはずだ。

圧倒的成長を続けまーす。

この記事は ” 2017年圧倒的成長振り返り一人アドベントカレンダー ” の 21日目です。

https://adventar.org/calendars/2747

アドベントカレンダーに乗り遅れ、参加できそうなものがなかったので行われる、孤独な一人アドベントカレンダー。21日目の今日は、ブログ書いてきてよかった 編です。