修行編 - 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のイメージ 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日を

修行編 - 3日目

やったこと

1. 東京へ移動

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

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

2. React in pattersを読む

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

Introduction · React in patterns

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

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

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

また、改めて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)さんのツイートがきっかけ。

これまでは、所謂LGBTというタグで扱われる問題について外野として眺めることしかできませんでした。ですが今日のイベントに参加したことでまた自分の世界が広がった気がします。

特定の性別を自身のレゾンテールにする人もいれば、「性別とはコンディション」と言い切る人もいる。

この社会の一員として「後天的に己の属性を選び取れる社会」「自ら枠組みの外に踏み出した人がどこまでも羽ばたける社会」を作っていかなければならんなと改めて思う素敵な機会でした。

モデルのみなさん、本当に美しかったです。

7. おかえり金井飛行士

半年間のISS(国際宇宙ステーション)滞在を完了した金井宣茂宇宙飛行士がソユーズ宇宙船で地球に帰還する様子がネット配信されました。

www.youtube.com

生憎着陸の瞬間は見られなかったのですが、パラシュートが無事に開いたときはホッとしました。

今回のライブ配信は視聴者が1万人を超えるなど徐々に宇宙熱が高まってきているようで僕は嬉しいです。

長期間のミッション、本当にお疲れ様でした!ぼくらのヒーローです。

明日やること

UIの実装が芳しくないですが、あまりマークアップにはこだわらずデータフローを重点的に攻めていきたいと思います。

  • スケジュール振り返り・再設定
  • Reduxの導入
  • API Clientの導入
  • Redux Sagaについてリサーチ

明日はせっかくの平日なのでDead Pool 2でも観に行こうかな。

それではみなさん良い月曜日を!

修行編 - 2日目

やったこと

1. Next.jsチュートリアル

公式のREADMEにしたがって簡単なSPAを作成しました。Nuxt.jsに比べて比較的シンプルな思想だなという印象です。

ルーティングは見慣れた方式ですが、Layoutの扱いが特徴的なので慣れが必要そう。HOC使うのかな?

2. TypeScriptの導入

Next.jsでTypeScriptを使うには用意されたtemplateでinitする方法もあるようですが、今回は公式で用意されている next-typescriptというプラグインを利用しました。

github.com

tsconfig.jsonの設定は公式推奨のものをそのまま利用しています。TSのバージョンは最新の v2.9.1です。

この機会に今まで雰囲気で書いていたTypeScriptもガッツリ勉強したいのですが、優先度としてはReact >> TypeScriptという感じなので、後々必要に応じて設定のチューニングを行う予定です。

ちなみに fork-ts-checker-webpack-pluginも設定しました。

3. Material UIの導入

先日のGoogle I/Oで発表されたMaterial Themingに興味があったので、Material UIを導入しました。

material-ui.com

正直Material UIには「退屈だな」「世界観が固定されてイヤだな」という抵抗感があったのですが、先日Flutterでアプリを作ってみて「ええやんけ!!」と手のひらを540°ひっくり返したところです。

わくわく。

4. React in patternsを読む(50%ほど)

改めてReact全般の知識を復習&アップデートするためにReact in pattersというサイトを読み直しています。

全て読み切るには集中力が持たず、50%ほどの進捗です。

Introduction · React in patterns

HOCを有効活用したことは無かったのですが、VueでSlotやDynamic Componentを利用したコンポーネント設計に慣れてきたのでこちらも上手く活用していきたいところ。

シュッと目を通して早く手を動かすことに時間を割きたいです。

5. 鴨川ラン

昨日久しぶりの運動をしたせいで太ももがパンパンなのですが、気合いでランニング2日目に臨みました。

やっぱり鴨川は最高だぜ!

心なしか昨日より足運びが軽い気がします。(おそらく錯覚)

明日も頑張るぞい

6. 弟の誕生会 & 京都観光

6/2は三男の誕生日。

留学中の次男を除いた家族全員とそこに祖母が加わってみんなで美味しいフランス料理をいただきました。

昼間からワインが飲める贅沢・・・

日中は叡山電鉄で八瀬に向かい新緑の瑠璃光院を拝観。

2年ぶりに訪れましたが観光客の数も増え、山門の前には行列ができていました。

f:id:andoshin11:20180603010740j:plain

境内も若干混雑はしていたものの、書院はあいも変わらず息をのむほど美しかったです。

おそらくこの緑が萌えているのもあと1~2週間ほど。拝観自体も6/15までなので、まだの方はお急ぎでどうぞ。

弾丸帰省ですが初夏の京都を感じられて大満足です。

明日やること

今日は日中にドップリ観光してしまい、あまり進捗がありませんでした。昼間からグラスで3杯もキメたし・・・

とりあえずのミッションは達成したので明日はおそらく東京に戻ります。

  • React in patternsを全て読む
  • Redux + TSの実装パターンを調べる
  • ダミーデータでUIの骨格を作る(ルーティングも)
  • 東京へ移動

来週は会食の予定が詰まってきたので、時間がある今のうちになるべく作業を進めたいです。

それでは明日も良い休日を!

修行編 - 1日目

やったこと

1. Django + Reactプロジェクトの計画

いつもは7日間のWeekly Sprintを組んで作業するのですが、今回はスピードが欲しいため3日間でSprintを切って細かく振り返りを行えるようにしました。

タスクの管理はGitHub Projectを利用しています。

github.com

2. APIドキュメントの作成

お決まりのSwaggerを利用してREST APIの雛形を作成しました。

ForkしたSwagger Editor Liveの設定と、Dockerを利用したモックサーバーの生成フローの導入までコピペでDone。

github.com

いい加減Yaml書くのツライなーという気持ちが高まってきたのでgRPC向けにprotoを書くことも考えたのですが、初めてのDjangoプロジェクトなのでベーシックなHTTP + RESTFulでがんばります

3. Flutterアプリの写経だん

inKinoというOSSのFlutterアプリが非常に完成度も高く勉強になるので、数日前から写経を行っていました。

github.com

ようやくReduxとUIの設定が終わり一通り動くところまで完成。

Viewの実装パターン等もフワッと理解できたので、近い将来にガチめなFlutterアプリをスクラッチで書くぞという機運が高まってきました。

これにてしばらくFlutterはお休みです。

4. ランニング

久々に走りました。東京に来てからは初めてです。

平日の昼間ということもあり人も少なく、外気も適温で絶好のコンディションでした。

が、、、

予想以上に体力の減退がひどく、3kmほど走ったところで死亡😇😇😇

続くかなこれ・・・

5. 帰省しました

京都に戻ってきました。

上賀茂神社で蛍を見る恒例のイベントも無事完了。月曜日まで初夏の京都を楽しむ予定です。

6. NBA Final観た

Game 1勝ちましたね。

サンキューJ.R.

明日やること

弟の誕生日だったり、入洛する祖母の案内だったりで作業時間取れないフラグがビンビン立ってます笑

  • Next.jsでプロジェクト立ち上げ
  • TypeScriptの設定
  • React in patternsを読む

頑張るやで。

それではみなさん良い週末を!

修行編 - 0日目

ひょんなことから1ヶ月ほどゆっくりする時間ができました。

久々に納期の概念から解放されるまたと無い機会なので、今一度立ち止まってカラダとアタマを鍛え直そうと思います。

カラダを鍛える

走ります。

長く続けたバスケットを止めてからというもの、サイクリングの他には碌に運動というものをしてきませんでした。

体脂肪率8%の中学時代の身体をもう一度!とまでは言いませんが、まずはお腹周りの肉を落とす&持久力をつける意味で毎日ランニングをやってみます。

幸い家から3分で駒沢オリンピック公園があるので地の利を活かしたいです。ホコリを被ったFitBitも充電しなければ・・・

アタマを鍛える

新しい武器を身につけます。

書き慣れたRuby on RailsとVue.jsをしばらく封印して、他のスキルを業務レベルで使えるようにしたいです。

まずは基礎であるPython(Django)とReactをガッツリ復習して自信を持って仕事が受けられるようにするのが目標。作りたいサービスがいくつかあるので2週間くらいでカタチにするところまでかな。

現在取り組んでいるGo + Flutterのネイティブアプリも完成させたいですが、そちらはおそらく保留。後半の2週間はせっかくなのでScalaやRustのような新しい概念を学ぼうと思います。

そのあとはKotolinもやりたいしk8sも勉強したいしML Kitも触りたいしword2vecでも遊びたいし(ry

とにかく時間が欲しい。

生活を切り詰めて+もう1ヶ月お休みするのもアリなんじゃないかという気がしてきました(フラグ

ただし欲望の赴くままにあれもこれもと手をつけると中途半端な結果になりそうなので、戦略的にスキルアップを図っていきたいと思います。

というわけで明日は・・・

  • Flutterプロジェクト(写経)をキリの良いところまで進める
  • Django + Reactプロジェクトのカンバンとマイルストーンを用意する
  • SwaggerにAPI定義を書いてモックサーバーを立てる

くらいまで進めれば最高ですね。

新幹線で京都に移動したり、両親と食事したりというイベントがあるので先行きは不安です笑

最後に

今回「ヒマ人になるよー」という話をしたところ、本当にビックリするほど多くの方から仕事のお誘いをいただきました。

プログラマとしての経歴も浅く東京に来てからの日も浅い自分にこれだけお声がけをいただけて、本当に感謝の気持ちでいっぱいです。

生憎そのすべてにはお応えできそうにありませんが、この機会にまたパワーアップしてより大きな価値を提供できるよう頑張ります。

改めて今後とも不肖Andyをどうぞよろしくお願い致します。

P.S.

関東近郊の方へ:

食事のお誘いをいただければいつでもどこでも飛んでいきます。