GGG

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

「React Design Patterns and Best Practices」を読んだ

発売日に予約したのに、積読状態だった書籍を消化。

書籍名がステキで思わず購入。先日ようやく読み終わった。

個人的には、とても良書だと思う。 reactを使って開発しているエンジニアにはぜひご一読いただきたい書籍だと思う。

タイトルから想像がつくように初学者向けの書籍ではない。 規模はともかく「すでにreactの開発したことがある」ことを前提にしていると思う。

ただしタイトルの「ベストプラクティス」という表現は適切か分からない。ここ注意

まだ模索中の方法論もあり、この問題を解決をするには今はこんな方法(npm library)があるよ!!っていう紹介が多い。 ただし、使い方の紹介だけでなく技術的な背景が説明されているため机上だけでも十分理解できる内容となっていると思う。

目から鱗が落ちるアイディアも確かにあったり、問題と認識してなかった部分について問題意識を持つことができた。

忘れないうちにまとめてみたい。

HoC ( Higher-order Component)

T.B.D.

Server side rendering –> client side renderingのデータ受け渡し

T.B.D.

Data Fetch を宣言的に書く

T.B.D.

Regular CSSはスケールしない

T.B.D.

React Design Patterns and Best Practices

React Design Patterns and Best Practices

docker build で 「no space left on device」と出たらやること

docker利用時にタイトルのno space left on deviceが出た場合に下記の2つを実施して解決。

コンテナの削除

docker ps -aq | xargs docker rm

イメージの削除

docker images -aq | xargs docker rmi

nginx error_pageをS3にしてみる

nginx + rails および AWS の構成。

Route53のDNS failover機能をつかってsorryページをS3 Bucketに用意するようにした。 nginxがダウンした場合はこれでOKだが, railsがダウン場合も同じようなことをしたい。

rails がダウンした場合(502 Bad gateway)のsorryページをnginx のinternalではなく、DNS failover のsecondary になっているS3 Bucketにしてみようと思ったという話。

任意のリージョンに任意のbucketを作成。sorryページを用意。 オレゴン州XXXXXXXというbucketを作成。

XXXXXXX.s3-website-us-west-2.amazonaws.com

Amazon S3 の指定bucketに用意したSorryページへ nginx でエラー時に飛ばそうとしてみたら 下記のエラーがブラウザに表示された。

404 Not Found

  • Code: NoSuchBucket

  • Message: The specified bucket does not exist

  • BucketName: XXXXXXX

  • RequestId: YYYYYYYYYY

  • HostId: ZZZZZZZZZZZZZZZZZZZZZZZ

タイポがありミスってた。だから無いと出ていたみたい。

タイポを修正後、再実行してみたら下記のエラーがブラウザに表示された

400 Bad Request

  • Code: IncorrectEndpoint

  • Message: The specified bucket exists in another region. Please direct requests to the specified endpoint.

  • Endpoint: XXXXXXX.s3-website-us-west-2.amazonaws.com

  • RequestId: YYYYYYYYYYYYYY

  • HostId: ZZZZZZZZZZZZZZZZZZZZ=

原因は下記のURLと同じそう。 https://forums.aws.amazon.com/thread.jspa?threadID=215640

しばらく時間をおいてから確認したら、うまくいった。

設定ファイルの一部は下記の通り。

upstream XXXXXXX {
  server s3-website-us-west-2.amazonaws.com;
}


server {
  .
  .
  省略
   .
   .

  error_page 502 = @fallback;

  location @fallback {
     proxy_pass http://XXXXXXX;
  }
}

webpack-dev-server トラブルシューティング

webpack-dev-serverで以下のようなエラーが出た場合は、 他に開いているターミナル上で npm start (webpack-dev-server)している可能性がある

> app@0.0.0 start /Users/user/workspace/app
> webpack-dev-server --config ./webpack.config.js

events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE 127.0.0.1:8080
    at Object.exports._errnoException (util.js:1022:11)
    at exports._exceptionWithHostPort (util.js:1045:20)
    at Server._listen2 (net.js:1262:14)
    at listen (net.js:1298:10)
    at doListening (net.js:1397:7)
    at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:62:16)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:81:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! app@0.0.0 start: `webpack-dev-server --config ./config/webpack.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the app@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2017-06-05T09_24_20_493Z-debug.log

【感想】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