読者です 読者をやめる 読者になる 読者になる

GGG

プログラミング言語やソフトウェア開発について思ったことを書いてます

【感想】React Components

React Components

React Components

目的

  • 現職のポジションで活かせる内容が一つでもあるか?
    • 初学者向けの教材として利用可能な書籍を探してます。
    • 導入可能な情報があるかどうか

感想

内容としては広く浅くな印象。 洋書であるが比較的読みやすいように思える。

初学者向けに書かれてはいるようだが、実際にはもう少しハードルが高いように思える。 よって会社の新人研修向け教材には推薦しにくい。

他の書籍と比べると、少し違った切り口での情報が多い気がする。そのため新鮮な印象。

紹介 切り口
Fluxアーキテクチャ 理解するために自分で作ってみよう
Ajax socket.io
testing 考え方

* socket.io:知らなかった。今後もう少し詳しく調べてみよう。

  • node.jsについてもちょっとだけ紹介。
  • testingは、Jestやenzymeを使ってxxxxというものではなくテストについての考え方を理解しようというもの。
  • deep-freeze : 知らなかった。 immutable.jsという選択肢もありそうだが、reduxで使うならこちらの方が親和性が高そうだ。調べてみよう。
  • TravisCIについても紹介されていた。

    後で調べたいキーワード

npm

Material design

customize

HISTORY_API

others

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

経緯

読むに至った経緯。

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

結論

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

思ったこと・・・

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

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

ソースコードgithubにある。

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

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

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

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

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

  • ESLint
  • Flow
  • Jest

気になること

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

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

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

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

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

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

読むに至った背景

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

背景その2

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

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

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

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

内容

  • 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)

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

editorconfig.org

CSScomb: Makes your code beautiful

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

経緯

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

結論、

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

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

読書期間

React開発入門

合計6時間程度 (PCで動作確認しながら)

入門React

3時間くらい

所感

React開発入門

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

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

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

メモ

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

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

入門React

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

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

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

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

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

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

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

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

入門 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

Niubility!

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

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

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

ja.urbandictionary.com