【感想】React ビギナーズガイド

経緯

読むに至った経緯。

1. チームに配属になったReact未経験者向けの学習書籍として利用可能か。
2. 現在の業務に取り入れられる何かがあるか？

結論

1. 可能だが、ちょっとハードルが高い気がする。
2. Flow, Jestは使っていないため導入時に参考になりそう。

思ったこと・・・

訳本のためか、若干読みにくい印象があった。

基本的な部分を押さえつつ、実際に小さなアプリケーションを動作させるまでを書籍で紹介。

ソースコードはgithubにある。

私の場合は書籍を読んで終わっているが、実際にソースコードをダウンロードして動作を確認しながら進めると理解を深められるかもしれない。

そういった観点からはreact未経験者向けには良い教材になるかもしれない。

fluxについての紹介があり、考え方を理解するために自分で作ってみるというのが他にはない印象で新しかった。

また、品質維持のために複数のnpmパッケージについても紹介されている。そのため、開発環境を整えるには良いかもしれない。

もし下記のパッケージについて利用を検討しているがうまく導入できていないなら、良い資料になるかもしれない。

• ESLint
• Flow
• Jest

気になること

書籍はReact v14を使っている。 現在、まもなくv16がリリースされようとしている。

v16から大きく変わる点が多少あるため、v14からv16にアップグレードする際にはリリースノーツをよく確認しアップグレード手順を理解しなければならない。

後でリファレンスにはならないかもしれない。 理解した後は、これを卒業するというイメージでしょうか。ビギナーズガイドなので・・・。

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

【感想】はじめてのCSS設計

読むに至った背景

現在、保守・運用中のサービスが近い将来CSS面で保守しにくくなりそうで、どうになならないかと思った。 そこでメンテナブルなCSS設計するにはどうしたらいいのか？気になり読んでみることにした。

背景その２

私は開発責任者（システム開発部マネージャ）、バックエンド系エンジニアというポジション。

現職の企業では現在社内にフロントエンドエンジニア不在。他業務と兼用。 ウェブページのデザインをする際は画面仕様を作成しそれをもとに外部発注。 納品物を組み込んで使う流れ。

保守はバックエンドエンジニア、企画、デザイナー系の人が行っている。

考えたい内容としては、下記の２点を改善したい。 * 外部発注する際に何ができるか？ * 自分たちが保守する際に何ができるか？

内容

• CSSの仕様説明
• CSS設計/命名規則(BEM,SMACSS, OOCSS,etc…)、などの紹介
• CSS設計～実装までの一連の流れを紹介（実際のできあがるまで）
  • SCSS , gulp,kss(スタイルガイドジェネレータ), etc..

所感

• 文面が非常に読みやすい印象。
• 設計手法から具体的な実装方法まで掲載されているため、考え方は分かった・・・、それでどうやってる作るんだ？とはならない。コードも記載されておりダウンロードも可能なので実際に手を動かしながら習得できそうだ。当方は読んだだけです・・。

問題の改善

読むに至った経緯で出ていた問題点を改善するには？

共通点（発注、保守）

• 明確なコーディングルールがなかったため整備が必要。発注先のレギュレーションに準拠していたが明文化・検査を自動化していない。よって時間とともにCSSが複雑化する。納品後の保守はほぼ無法地帯。
• ひとまずの解決案：静的解析ツールの導入( EditorConfig , CSSComb、etc…)。
• スタイルガイドがない。
• デバイスやブラウザによるデザイン崩れのチェックに使える
• 実装時のリファレンスになる
• ひとまずの解決案：共通部品を抽出しスタイルガイドを作成する。スタイルガイド生成は自動化する。

導入している設計手法、命名規則を明文化し、静的解析により自動化できればとりあえずは改善できそうだ。 スタイルガイドは無法地帯と化してる状況から新たに作ることは難しそう。 しかし部品化されているルールセットも多少あるため、それらのスタイルガイドを作れそうだ。 共通部品に限定してスタイルガイドが作れれば、多少はメンテナブルになると考えられる。特に人員の入れ替えが発生した場合には良いリファレンスになりそうだ。

設計時の考慮

OOCSSやBEM,SMACSSなどの様々な考え方が存在するがすべてに共通することは、下記の通りと考えられる。

1. ウェブデザインとして必要な項目を洗い出し

2.「共通部分」、「非共通部分」の抽出

基本的に他のソフトウェア開発と同じ。 これを「どのように分類するか」という考え方がそれぞれ異なる。

レイヤーや、粒度、状態、コンポーネントなど様々だ。

以上。

はじめてのCSS設計 フロントエンドエンジニアが教えるメンテナブルなCSS設計手法 (WEB Engineer’s Books)

editorconfig.org

CSScomb: Makes your code beautiful

【感想】 React 開発入門 / 入門React

経緯

プロジェクトの開発責任者になってから、チームに加入するメンバーにReactを教育する担当になった。 そのため、研修期間内での必読書としての候補。

結論、

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用 は　研修用として有用。

入門 React ―コンポーネントベースのWebフロントエンド開発 は リファレンス本・副読本として有用。

読書期間

React開発入門

合計６時間程度 （PCで動作確認しながら）

入門React

３時間くらい

所感

React開発入門

非常に平易に書かれている。 使用している機能も限られているため理解しやすい。 ただし基本はおさえている印象。

ステップバイステップで進められる。

説明している内容が最小構成になっている印象。

メモ

JSXの説明があるが、es6のclassは説明なし。 トランスパイラあたりは省略されている。

省略されている事項は、必要に応じて学習が必要。 browserifyやwebpack,babelの説明は 入門React側に書いてあるので２冊を併用するといいかも。

入門React

幅広く書いてある。 平易ではないかも。

必要な知識ではあるが1冊目としては範囲が広すぎる印象。 React開発入門を読んだ後か、副読本として考えると良いかもしれない。

幅広く書いておりまとまっているため、リファレンスとして良いかも。

React開発入門で省略されている事項についても記載されている。

自身で開発環境を構築する状況になった際は必読本です。 webpackについては参考になった。

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

入門 React ―コンポーネントベースのWebフロントエンド開発

Mac で Docker 使ってた困ったこと

Mac で sleepすると、 Dockerの挙動がおかしくなる問題にしばらく困っていたが解決

Docker for Mac でアップデートしたらなおった。 v 1.12.5

OSX : El Capitan v10.11.6

github.com

Uncaught ReferenceError: regeneratorRuntime is not defined

Outline

下記のトラブルが発生した場合の対処方法に関する資料.

Uncaught ReferenceError: regeneratorRuntime is not defined

Environment

• npm : v3.10.8
• node : v7.0.0
• ReactJS : v15.4.0
• webpack : v1.13.3

Cause

JavaScript のES6文法をソースコードで使っている場合に、Bebelで変換処理が入る。この変換処理に必要なpackage(plugin, etc)が読み込まれていないことによる。

Generatorという機能を使っていると発生するらしい より具体的にはasync-await で発生。 arrow関数などのSyntax-sugarなどでも発生することが推測。

Solution

1. インストール docker-compose run web npm install --save-dev babel-polypill
2. 利用しているファイルの先頭で下記を入力

import 'babel-polyfill'; 

他にもいくつか対処方法があるようです。

Reference URLs

• USING ES7 ASYNC/AWAIT TODAY WITH BABEL
• Node.js & webpack & babel で「 regeneratorRuntime is not defined」が発生する場合の対処

Niubility!

GitHub で　 PullRequestを送ってマージしてもらった後に 「Niubility!」とコメントをいただいた。

初めてみた単語だったので調べてみたが中国製英語だそうだ。（和製英語的なものらしい）

和訳すると「すごい」という意味らしい。

ja.urbandictionary.com

【感想】年収の伸びしろは休日の過ごし方で決まる。

読書期間

１－２週間（週末利用)

感想

ひさびさにビジネス書の類を読んだ。 気分転換や新しい発想を取り入れるには、いいものだ。今後も読み続けたい。

以下の３点にまとめてみた。

• 全体を通して言えることは、ただ弛緩して過ごすのではなくオフタイムを真剣に過ごそう。

  • 趣味を全力でやる。
  • 休日を全力で楽しめれば、それが仕事へフィードバックされることもある。

• 仕事にストレスがあるのは当たり前。このストレスとうまく付き合う必要がある。逃げるのではない。

  • 楽しむ。ゲーム感覚で

• これは志向が分かれるかもしれない。。。

「好きなことを仕事にせずに、儲かる仕事を好きになる。」
（引用）

たとえば、エンジニア職の場合、マネージャになった方が一般的に年収が上がりやすい傾向にあるが あえて自分のやりたい開発現場に残るという選択肢もあると思った。

年収の伸びしろは、休日の過ごし方で決まる ズバ抜けて稼ぐ力をつける戦略的オフタイムのコツ34