2018-06-09

修行編 - 8日目

1日遊んでました

やったこと

1. Kotlin入門

環境構築と基本的な文法の確認

ジェネリクスがあるのは嬉しいですね

2. ランニング

サボり

3. スケジューリング

サボり

4. 横浜観光

神奈川にくるのは1年半ぶりです。

横浜駅周辺をブラついたり、元町中華街を歩いたり、夜のみなとみらいを散策したりしました。

今日は気分転換のためにホテルビスタプレミオ横浜に宿泊しています。

【公式】ホテルビスタプレミオ横浜［みなとみらい］

窓から観覧車のライトアップが見えるのが素敵です。

なんとなくですが、雨の夜の横浜はサイバーパンク感がありますよね。

5. 幼馴染と食事

生まれた街どころか病室まで同じな幼馴染としばらくぶりに再会しました。(誕生日は1日違い)

少し合わないうちに向こうは嫁ができていたり、僕はエンジニアになって会社5個くらい経験してたりとお互い人生の進捗が大きかったです。

どれだけ環境が違っていても会えばすぐに小学生のころのテンションに戻れる友人は宝物ですね。

明日も朝から向こうの家に押しかけて一緒にNBA Finalsを観戦する予定です。

明日やること

すっかり1日遊んでしまったなー。明日も碌に進捗が生めなさそうなので、移動時間等を活用して学習を継続していきたいと思います。

NBA Finals観戦
神奈川探訪
サーバーサイドKotlinの構成を調べる
アプリケーションの立ち上げ
Kotlinアプリケーションのスケジューリング(明日こそ!)

生憎の天気ですが、みなさん良い週末を！

2018-06-08

修行編 - 7日目

やったこと

1. Python環境構築

年末にMLをやった関係でpyenvとか一通り設定していたため、シュッと3.6系の最新版がインストールできました。他には一通りpipやEditorの設定をしたり。

コマンド入力してた時間より処理待ちしてた時間の方が長そうです笑

2. Django入門

Docsやチュートリアル記事を見てざっくりとディレクトリ構造やルーティングやORMの仕組み等を把握。初めてDjangoを触るので当然知らないことばかりなのですがなぜか強烈な既視感が・・・

デザインパターンに新鮮味が無いのが問題なのかスクリプト言語特有の問題なのかよく分かりませんが、なぜか全然やる気が出ないです笑笑

「Rails勉強した時みたいにDjangoでもWebアプリ作るぞ！！」というやる気が数日前にはあった筈なんですけどね。

もう少しだけAPIサーバーの実装パターンや認証の仕組みを調べたらお終いにしようと思います。仕事で必要になったらまた勉強して、今月は別の事に時間を使った方が良さそうかな

3. Scala入門

Djangoのやっていきが失われたのでScalaに入門しました。

環境構築をして簡単な関数を実行するところまでです。次回はファイルシステムやフレームワークについて調べたいと思います。

とはいえこちらも「Scalaで〇〇を作るぞ！」みたいな欲求が乏しく、モチベーションが継続するか心配・・・

JVM言語に触れることが目的なので先にKotlinでモバイルアプリを作るのも良いかもしれませんね。迷い中。

4. DTNの勉強

例のアレのためのお勉強です。

www.nasa.gov

https://www.jstage.jst.go.jp/article/bplus/2011/16/2011_16_16_57/_pdf

www.nasa.gov

目を通したのはこの辺。まだまだ基礎の基礎です。

5. 面談

例のところの一次選考をパスしたので二次選考へ。

緊張してあまり眠れなかったり、面談中に心拍数が爆上がりしたりと不安材料でいっぱいでしたが先ほどこちらも通過の連絡をもらいました。

あと2つほど選考が残っているので気を抜かず臨みたいと思います。

6. UIT #3

LINEさんで開催されたUITの第三回へ。今回のテーマはBFF(Backend for Frontend)ということで豪華な面々が勢ぞろいするイベントでした。

uit.connpass.com

やはり既にMicroservicesが動いているような会社の方が導入ニーズが高いのかな。

自分はUITは皆勤賞なのですが、運営で参加した前回の打ち上げで「LINEさんとメ○ペイ社でBFF勉強会しましょうよー」と話していた内容が実現して、本当に嬉しかったです。

生憎と某社はすこし前に退職してしまったのですが元同僚が素晴らしい発表をしてくれました。

docs.google.com

BFFは短い在職期間の中でも自分から積極的にバックエンドチームやSREチームに話を持ちかけて実現した思い入れのある部分なので、日の目が見られて想いもひとしおです。

チームの仲間と作ったものが名だたるTech企業や尊敬するエンジニアの発表と並んで紹介される経験は、自分のエンジニアリングキャリアの中でも一つマイルストーンになった気がします。

今回のUITの内容は世界的に見てもとても貴重な知見で溢れていたなと思うので次回のイベントも楽しみです！

7. NBA Finals Game 3

3大スターのうちの2人が絶不調だったので流石に厳しいかなと思いましたが、勝ちましたね。

これで今年も3勝0敗。ほぼ優勝は確定でしょう。

今日のゲームではLeBronがあまりアグレッシブでないのが気になりました。ホーム初戦なのでゲームメイクに専念してチーム全体のコンディションアップを狙ってたんですかね？実際にHoodやLoveは大活躍だったしJ.R. Smithも今までよりはマシだったかなという感じです。

その全てをかき消すようなDurantのパフォーマンス。歴史に残るバケモノ級の活躍でした。

孤軍奮闘で43点を取る働きもイカれてますが最後の3ポイントがやばかったですね。Game 3のラスト1分はもうずっとKDにボール持たせとけば良いんじゃないでしょうか笑

LeBronというもう一人のバケモノがいるのでまだ分かりませんが、この調子ならもしかしたら4連勝もあるかもです。おそらくGame 4ではStephもKlayも調整してくるでしょう。

できればスポーツバーで幼馴染と観戦したい！

8. ランニング

1日休んだだけで身体が重いです笑

それとやはり酒を飲むとダメですね。しばらく会食も控えようと思います。

今日も25時ごろから走ったのですが、駒沢通りにかかる高架橋の下でバスケをしたりダンスをしたりする若者がいて、なかなかヒップでホップな感じでした。

明日やること

Djangoに1週間ほど使う予定でしたが早くも暗雲が立ち込めています。正直ReduxもやりたいしNodeのライブラリも触りたいしdenoも触りたいしWeb Componentsも触りたいし、とJS熱が沸々と煮えたぎっているのですが心を鬼にして新しい技術に取り組みたいと思います。

とりあえず明日はリサーチ中心でこんな感じ

各種連絡
Scalaのフレームワークを調べる
Kotlin入門
開発スケジューリング
denoのローカルビルド

週末は気分を変えて神奈川で過ごす予定です。みなさん、良い金曜日を！

2018-06-06

修行編 - 6日目

やったこと

1. ロマンシング佐賀

redux-sagaについて引き続きお勉強 & 実装。

昨日から使い始めたtypescript-fsaで作成したAsync Actionをtypescript-fsa-redux-sagaでbindしてあげれば良い感じにsagaからリソースfetch処理を callしてあげられそうです。

Flux Storeの実装をする時はドメイン単位でactionsやreducerを纏めるDucks Pattersが好きなのですが、sagaを利用する時はどのようにファイルを配置してあげるのが良いかかなり悩みました。

github.com

とりあえず上のissueで紹介されているような SagaManager classをRootレベルに配置して、各moduleからpushしてあげる方法を試そうと思います。

2. モックサーバーの作成

「Swaggerの運用つらい」みたいな感情が5分に一度込み上げてくるので雑にNode.jsでAPI Serverを書いてみました。

Expressだと秒速で完了してつまらなかったので初めてKoaも触ってみました。とは言っても1エンドポイント&ダミーレスポンスなので大した事はしていません。

その後Reduxについて調べるためにネットを回遊してたらこんな物を見つけました。

github.com

Yosuke Furukawaさんが紹介していたリクテク謹製のJSONモックサーバー作成ツールです。

以下のようなファイルを用意するだけでAPIサーバーが起動します。

// ./agreed.js
module.exports = [
  {
    request: {
      path: '/user/:id',
      method: 'GET',
      query: {
        q: '{:someQueryStrings}',
      },
      values: {
        id: 'yosuke',
        someQueryStrings: 'foo'
      },
    },
    response: {
      headers: {
        'x-csrf-token': 'csrf-token', 
      },
      body: {
        message: '{:greeting} {:id} {:someQueryStrings}',
        images: '{:images}',
        themes: '{:themes}',
      },
      values: {
        greeting: 'hello',
        images: [
          'http://example.com/foo.jpg',
          'http://example.com/bar.jpg',
        ],
        themes: {
          name: 'green',
        },
      }
    },
  },
]

起動コマンドはこちら

$ agreed-server --path ./agreed.js --port 3010

ちなみにドキュメントUIまで作成されます

f:id:andoshin11:20180606190231p:plain

「オレたちが求めていたのはこれだよ！」と叫びたくなるくらい手軽なツールだったので、早速利用させていただきました。

github.com

どんどん使っていこう

3. Redux Side Effectsの管理について調べる

ここ数日ずっとReduxのことばかり考えている気がします。

TSでAction Creatorを書いたりReducerを書いたりする方法は正解が見えてきた気がしますが、副作用のハンドリングについては今だに答えが出ず・・・

今は練習のためにredux-sagaを書いていますがこれは明かにオーバーキルな代物です。

かと言ってredux-thunkでは自由度が高すぎるのでこちらも却下。

というわけで新たな候補が以下の2つ。

github.com

型安全かつ非同期でReduceがステップ実行さえできれば満足なのでどちらも機能としては必要十分な匂いがします。

実際にコードを書くところまでは行けなかったので次回Reduxを仕事で触るときは上記の2つでプロトタイピングするところからやってみたいです。

4. API疎通テスト

成功

5. ランニング

おやすみ

6. オフィス見学

創業前から憧れていた会社にお邪魔しました。

フロントエンドチームのみなさんと技術やカルチャーについてお話しできて最高でした。

あらゆることのレベルが高いし、チームのサイズ感も理想的でひたすらカッコ良かったです。

7. 会食

初めて大門のエリアに行きました。

新橋よりちょっと静かな感じです。

お肉しゅき💕💕💕

明日やること

Reduxについて考えるのが楽しくなって来たのですが、残念ながらスケジュールの関係で今日で一旦お終いです。

当初の目標であった業務Readyなレベルにはなったかな？後は実務で使ってみて足りないところは死ぬ気でキャッチアップします。

明日からは久々にPythonの環境を作ってDjangoに入門するぞい！

Python環境構築
Django チュートリアル
Djangoアプリの開発スケジューリング
オフィス訪問
BFF勉強会

良い木曜日を!

2018-06-06

修行編 - 5日目

やったこと

1. Next.jsやめました

ReduxとReactの接続でいろいろと試しているときに、詰まってる問題がReac由来なのかNext由来なのかが分からず思い切ってやめました。

getInitialPropsの挙動とか、専用のプラグインの挙動がかなりのブラックボックスで自分には早すぎたようです。もう少しReactスキルがアップしてから再挑戦したいと思います。

アプリは $ npx create-react-appで再度作り直しました。

2. redux-sagaについてひたすら考える

ひたすら考えてました。

そもそもSagaが提唱された経緯から thunkとの比較、 observable epicとの比較、型安全な書き方、フォルダ構成、テストの書き方、Generator構文の復習などをやっていたらあっという間に1日が過ぎてしまいました。

正直今やっているプロダクト程度ならThunkで十分なのですが、Sagaの書き心地が知りたいのでもう少し粘ってみます。

明日こそは実装に移りたい・・・

(*余談ですがSagaの紹介記事でやたらと「Thunkはコールバック地獄が厳しい」みたいな記述を見たけど、 async/awaitで書いたら大して変わらへんやんけというお気持ちになりました)

3. Reducerの書き方を変えました

一度はtypesafe-actionsで記述してみましたが、 actionCreator内での型定義やReducerの書き心地などの理由でtypescript-fsaおよびtypescript-fsa-reducersに乗り換えました

github.com

こんな感じで書けます

//  actions.ts
import actionCreatorFactory from 'typescript-fsa'

export const receiveTodos = actionCreator<ReceiveTodosActionPayload>(Types.RECEIVE_TODOS)

// reducer.ts
import { reducerWithInitialState } from "typescript-fsa-reducers"
import * as actions from './actions'
import { TodoState } from './types'

const initialState: TodoState = {
  items: []
}

const reducer = reducerWithInitialState(initialState)
    .case(actions.receiveTodos, (state, {items}) => {
      return {
        ...state,
        items
      }
    })

export default reducer

VSCode上での補完もバッチリ効いてナイスです。Async Actionsの書き方は要検証。

4. API疎通テスト(失敗)

Reactアプリケーションを localhost:3000で動かしているのに対してSwaggerで生成したモックサーバーは localhost:8080で動いているため、当然のごとくCORSで怒られました。React Nativeの開発をしている時は全然気がつかなかった・・・

改めてSwagger Specを読んで当該レスポンスに headers -> Access-Control-Allow-Origin: *を追記したのですが何故か適用されず🤔

Swagger Editor上では構文エラー等出ていないのですがなんでなんでしょうか。

明日もう一度試してだめならExpressからハードコーディングしたダミーレスポンスを返してみます

5. おひす訪問

恵比寿の某社にお邪魔してピカピカのおひすを案内していただきました。気になっていたチョコレートもついでに頂戴。

肝心のミーティングはというと、「デザイナーさんとかエンジニアさんと話してみたいっすwww」と舐めたお願いをしたことをひたすら反省するアレでした。

無防備でお邪魔したせいでこっちが面接してるのかあっちが面接してるのかよく分からない感じになっちゃいましたね。本当に申し訳ないです。

お忙しいなか時間をいただき、本当にありがとうございます。

6. 恵比寿探索

普段あまり足を運ぶ機会がない恵比寿なのでいくつかカフェ巡りをしました。

3つほど訪れましたが、本日のベストはessence cafe

https://essence-cafe.jp/

表向きは花屋と見紛う可愛らしさですが(実際にお花も売っていた)、B1フロアには電源とWi-Fiが完備されており作業スペースに持ってこいでした。

間食でいただいたミートパイも美味しかったです。

7. 会食

Vueコミュニティがきっかけで仲良くなった友人たちとご飯に行きました。

600円のスペアリブがめちゃめちゃ美味しかったです。

とてもワクワクする野望が聞けたので僕も気を引き締めて頑張らなきゃなと思いました。また近いうちにご飯しましょう！

8. ランニング

雨の上がった12:30ごろから深夜ランへ。

1kmを5分フラットで走ってみたくていつもより速めのペースで飛ばしたら、2km付近で見事にバテました...orz

徐々にペースを上げていって、ある程度のスピードに乗ったら均一の速度をキープするのが大事だなという学びです。

まあ今日は恵比寿から渋谷まで歩いたり、お酒も飲んだ後でのランなので疲れていて当然という気もします(言い訳)

明日はずっと雨のようなので休息日にするのもアリかもしれません。

明日やること

明日も本日と同じくオフィス訪問 & 会食の予定が入っています。そろそろ梅雨本番といった感じで天気もイマイチですが、粛々と進捗を生めたらなと思います。

オフィス訪問 & 会食
Redux Sagaの実装
API疎通テスト
Render List View

そういえばまだDead Poolを観に行けてない・・・

明日も良い1日になりますように

2018-06-04

修行編 - 4日目

やったこと

1. Redux with TypeScriptの導入

最低限動くカタチで実装しました。

「ReduxはVuexと比べてTypeScriptとの相性最高！」って言ってた人いたけどマジかよって感じです。

今回はこちらの typeafe-actionsというライブラリをAction CreatorとReducerで利用しました。

github.com

Next.jsとの接続はこちらの next-redux-wrapperでやっています。

github.com

毎回Storeの実装について考えるのも結構大変なので自分向けにRedux Boilerplateを作成しました。

github.com

自分で書いておきながらそもそもこれが型安全なのかどうか不安でいっぱいなので、温かいツッコミをお待ちしています。

2. API Clientの作成

某所で利用していたAPI Clientをそのまま持ってきました。

こちらも時間のあるときにいろいろなOSSの実装を見て勉強したいです。ロギングとかエラーハンドリングとか全然分かっていないので。

認証の仕組みについてはバックエンド側(Django)の仕様が未定なので実装を保留にしています。おそらくJWTかな。

github.com

3. Redux Sagaについて調べる

Thunkは以前利用していたものの、Sagaは未経験だったのでこの機会に入門。

API通信時の非同期処理だけでなく、様々なSide Effectsを管理できるmiddlewareのようですね。ジェネレーターを実践でゴリゴリ書いたことが無いので少し慣れが必要かも。

Sagaのイメージ図↑

まだまだ「全然わからん」というレベルなので公式のドキュメントと合わせてこちらの記事なんかも読みながら明日もう少し勉強したいです。

redux-sagaで非同期処理と戦う

4. ランニング

継続中です。

20時ごろの駒沢公園は花火に興じる子どもなども居て風情があります。

5. NBA Finals Game 2観戦

2-0だぜ！やったぜ！！

破られるのも時間の問題だろうなーと思ってた1試合最多3ポイント成功記録もCurryがあっさり更新。Greenのプレイメイキングが攻守に渡って冴えまくっていたり、ベンチメンバーの奮闘もあったりとファン冥利に尽きる一戦でした。

次回の第3戦はCLEでのアウェイマッチ。正直連勝はキビしいだろうとは思いますが、なるべくLeBronを消耗させるようなディフェンスが観れるのを楽しみにしています。

6. SES-12打ち上げミッション

Space XによるSES-12打ち上げミッションをライブで鑑賞。

www.youtube.com

夜間の打ち上げということでいつもほどの盛り上がりはありませんでしたが、相変わらず美しい仕事でした。

再利用されたBlock 4エンジンは今回は回収されていません。そろそろ全面的に耐用性に利点のあるBlock 5への移行が進んでいるようです。

次回のSpace Xによる打ち上げ予定は6/28(日本時間6/29)。ISSに向けてDragon補給ポッドを送り届けるようです。

フェアリングの回収も予定されているようなので今度こそ成功してほしい！前回は回収船のStevensまで15メールの地点に着水したようなので期待が高まります。

明日やること

しばらく会食や打ち合わせの日々が続きます。早朝や夜の時間を活用して生産性のレベルを維持していきたいです。

会食 & オフィス訪問
Saga middlewareのリサーチ & 実装
ReactとReduxの接続
API接続テスト

みなさん良い1日を

2018-06-04

修行編 - 3日目

やったこと

1. 東京へ移動

初夏の京都を満喫したので東京に戻りました。

家族と有意義な時間が過ごせて良い週末でした。

2. React in pattersを読む

新幹線の中でようやく読み終わりました。

Introduction · React in patterns

改めて基本的なReactのコンポーネント実装パターンやDIパターン、Fluxデザイン等を体系的におさらいできて勉強になりました。

3. Redux with TypeScriptの実装パターンを調べる

TSでReduxを書いたことがないので改めて調査しました。 Stateや typesのハンドリングは大体理解できたかと思います。

また、改めてStoreのディレクトリ構成についてもお勉強。

主に以下の2つが参考になりました。

dev.to

github.com

後者についてはReactコンポーネントをTSで記述する方法も詳しく解説してくれているので最高でした。

実装は明日行う予定です。Thunkしか使ったことないからsagaの構成も調べなきゃ・・・

4. Viewの実装

ダメダメです。

昨日導入したMaterial UIの表現力ではやはり不十分なので独自でCSSを定義してあげる必要があるのですが、どこに書いてもしっくりこない・・・

CSS in JS, Styled Component, Styled JSXを全て試してみましたがキモすぎる・・・

JSXでDOMをJSとして管理しようぜ！というノリは理解できます。実際相性良いし。

ただしCSS、てめーはダメだ。

JSで扱うことの恩恵よりデメリットの方が大きく感じられてなりません。

取り合えずコンポーネントごとにStyles Objectを定義してその中で愚直に記述することにしました。

これ、React以外のフレームワークに移行したくなったときほんとどうするんだろう

5. ランニング

なんとか3日続きました。夜の駒沢公園は気持ち良いです。

どうにか1周はできるようになったので、明日は1.5周走れるよう頑張ります。

6. ファッションポジウム

こちらの記事でも紹介されているファッションポジウムに参加するため、東京大学は安田講堂まで足を運びました。新幹線の東京駅から直行です笑

www.huffingtonpost.jp

僕がこのイベントについて知ったのは、個人的にファンだった畑島楓(@kaedehatashima)さんのツイートがきっかけ。

こちらのファッションショーでモデルをします、会いにきてね！
(グラフィックデザインも担当しました)

【ファッションポジウム】
―男女の垣根を越えたファッションの未来を考えるシンポジウム―

開催日：6月3日(日)14:00-
開催地：東京大学安田講堂
入場料無料入退場自由#ファッションポジウム pic.twitter.com/jO534vmktj
— KAEDE,Sari Hatashima (@kaedehatashima) May 14, 2018