ゆるふわ技術日誌

エンジニア見習いの悪戦苦闘日記

英語に苦しんだりしてた

フロントエンド

毎日ちょこちょこやってるフロントエンドのお勉強。

今日は以前作ったAPIとつなぎこみをした。とりあえず仮の状態だけどリクエスト飛ばして画面に出すところまではいった。

f:id:uutarou:20180530195328p:plain

(どういうサンプル文やねん…)

CORS関連のエラーが出たのでAPIの方にもAccess-Control-Allow-Originヘッダを追加したりした。CORS関連はいつもおざなりに*とか指定してお茶を濁してしまうので、以前Node学園祭にいった時に聞いたスライドを引っ張り出してきた。

speakerdeck.com

とは言いつつもDev環境のサーバーは面倒なので*指定しちゃいましたが…。こういうのはENVみたいな環境変数を見て処理切り分けるとかするのが普通なのだろうか。

英語に苦しむ

昨日から読み始めた海外の論文、ボスに見せて見たら「時間かかってもいいから読んでミソ」と言われたので本腰を入れて読むことにした。

やはり圧倒的に単語力が不足しているのが、英語の文を読むのが辛い一番の原因なのだろうと考察した。

ここ1ヶ月くらい、意識的に通学時の電車の中などで英語の技術記事を読むようにしたりしていたので、英語の文章を読むことに対する心理的なハードルは下がったのはよかったかもしれない。とりあえず1週間くらいで読み終えたい(10ページくらいの論文)

雑談

どうでもよい話なのだが、僕が来年4月から働くであろう会社の内定者(つまり未来の同期)はなぜだか無駄に(無駄ではないです)学歴が高い。学歴の高さ=技術力ではないのは3年間このしょぼい学力の大学で過ごしてきて実感した。(ウチくらいのレベルでも、すごいやつはすごい)

ただ、基本的に高校のお勉強ができているから立派な大学に入れることを考えると英語くらいは既に難なくできちゃう人たちばかりってことになる。英語力のせいで技術的成長の足引っ張られて置いていかれる、みたいなのはあまりにも悲惨すぎるので英語の勉強やっていき。

初めてのPullRequest/ReactのContext

またもフロントエンドの話。

ReactのContextについて

ReactにContextと言うものがあるのを恥ずかしながら今日知った。

コンポーネントから子や孫のコンポーネントまで値を伝搬するのに、手動で1階層づつpropsとかで渡してあげなくてもよくなるやつ。

reactjs.org

Provider以下の階層にあるコンポーネントから値を参照できるという優れものっぽい。

react-reduxのProviderのようなものをイメージすればいいのだろう。(と思ったが、react-reduxのコードを見る限りContextは使わずに実装されているみたい。この辺は必要に応じて深追いした方がいいかもしれない)

MobXで簡単なTodoアプリを作った。

f:id:uutarou:20180529223408p:plain

フロントエンド入門の定番みたいなところある。Storeが汚い。改善の余地あり。

yarnデビューした

特筆することもないが、遅ればせながらyarnデビューしてみた。(家がADSLなのでキャッシュ効果でちょっとは開発効率上がるといいなぁなんて。 )

f:id:uutarou:20180529223200p:plain

研究室のマシン(Ubuntu)とMacに入れたが、Macの方は絵文字が出てきゃわいい。

初めてPRを出した

初めてといってもバイト先とか研究室とかは除きます。初めて全くの他人のリポジトリに対してPRを出した。

github.com

それがこれ。MobXを使ったTodoMVCの実装サンプルなのだが、なぜかHTMLのlang属性にutf-8と指定されていたので直してみた。

英語でのメッセージとか緊張しますね。(このリポジトリ自体長いことコミットもないしissueも放置されているのでmergeされるか微妙なところかなとは思いますが、良い経験になった。)

雑談

研究もちゃんとやるぞ〜と思って関係ありそうな英語の論文をiPadで読んでいたのですが、そのまま上にPencilで書き込みできるし、英単語の意味引けるしめっちゃ便利やなぁと思った。

改めてbabelでハマってる話

昨日はwebpackとお友達になった〜とか怖くないとか書いた気がしますが、今日はbabelさんとケンカ気味。

ハマってること

MobXはdecoratorを使ってストアのアクションやら外部に公開する値を設定する。(そうではない方法もあるがデコレーターを使った方がカッコいいw)

公式のテンプレもあるのだが、せっかくならと自分でwebpackやらbabelの設定を書いてるがどうにもうまくいかない。

調べたところbabelの7ではデコレーターを標準でサポートしてる?ような話が出てきたり。

いろんな設定の組み合わせをひたすら試すみたいな作業になりつつ……。それは流石に良くないので公式のテンプレの設定を読みながら理解したい所存。

MobXが使いたいというだけであれば、公式のテンプレート使えば一瞬だし、これ以上babelと戦うかは正直悩みどころではあるが、もうあと数年は知ってても損のない知識のような気がするので頑張ってみる。


追記!!!

動いた〜〜〜〜!!!

f:id:uutarou:20180528234332p:plain

(拾ってきたサンプルを動かしてみたの例)

github.com

雑談

babel、公式のドキュメントがやや情報古い気がするのは気のせいかしら。

フロントエンドをやっていくぞ

フロントエンド

フロントエンドのベンキョをしたいと思ったので、先日作ったAPI ServerにUIをつけてあげることにした。

以前バイトをしていた先でReact + Reduxを少し触っていたので、Reduxならば他のライブラリよりは多少わかるのでそれをやろうと思ったが、MobXとかいうの流行ってたな?と思ったので、自分でライブラリのドキュメント見てキャッチアップするいい練習になりそうだと思ったので、使って見ることにした。

今日はひとまず、ドキュメントと公式のチュートリアルを読んでみた。

mobx.js.org

実際に動くチュートリアル。コードを読むだけでもどのような挙動をするのかだいたい理解できるので、第一印象はすごく好感を持った。

実際にコード書いたりしながら遊んでいた。

そして、いざ開発しようと思ったので、久々にWebpackをいろいろと触った。以前触った時はドキュメントすら読まずにQiitaとかに落ちてたconfigをコピペして動かしたけど、ドキュメントのconceptのところを読んでからいろいろといじって見た。(そして、今気がついたけど最後に触ったWebpackは3系だったので4系デビューっぽい)

そうしてみると案外webpack怖くないなと思った。webpackは友達。(?)

ちゃんと理解しながらやるのめちゃめちゃ楽しい。本当に楽しい。こんなにプログラミングとか楽しかったっけってそんなレベル。うぇいうぇい。

雑談

明日は研究室の月一のミーティングデーなので研究の進捗ありませんっ!!って言ってきます。

いつもの金曜でした

今日のn本ノック

Webアプリ開発n本ノック、今日は1日予定が立て込んでたのでなかなか進められなかった。

とりあえず昨日書きかけていたところだけ書き終えてタイムアップ。また寝る前に少しやろうと思うけど、土日に一気に進めていきたい。そんなお気持ち。

オライリーのDocker本

を読んだ。スキマ時間にちょっとだけ。オライリー本なんだからきっと内部の作りの話とか触れてくれるのかと思いきや、割と使い方に振った本でびっくりしたなぁってだけ。

研究室にいると技術書だいたい読みたいのあるので嬉しいですね。

雑談

金曜は時間取れないのいつものことなのでそれもコミコミで計画立てると良さそう。

先に完成を目指そう

先に完成を目指そう

謎に完璧主義な私、どうしてもコードを書いていて共通化できるかもしれない処理とかを見つけると綺麗に書くことを優先してしまいます。書き終わってないのにリファクタリングを始める癖。

これをやり始めるといつまで経っても書いてるコードが完成しないことには、数年前から気が付いていましたが、どうしてもやめられず。先日指摘されてやっぱり直さないとだめだと思って今日は1日、書き上げることだけを意識してコードを書いてました。

結構うまくいって嬉しい。

github.com

ついでにGoもちょこちょこかけるようになってきた。ある程度のところまでいったらフロントエンドを書いてみるつもり。この調子。

go-sql-driverでDATETIMEをtime.Timeにキャストする

row.Scanやるとエラーがでちゃうので困っていたのですが、解決策を見つけた。

pliutau.com

?parseTime=truesql.Openの際に付け加えてあげればいいだけだった。ほんとにこれだけだった。

雑談

Amazonのアカウントに不正侵入されかけた。幸い、Amazonの保護機能が働いたみたいで完全に侵入されることはなかった模様。

恥ずかしながらパスワードを使い回しまくっていてどこから漏れたかも正直わからないので、パスワードマネージャーを入れてありとあらゆるサイトのパスワードをランダムなものに変更しました。