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

Firebase Advent Calendar 2016参加中

qiita.com

 

参加中。

アウトプット大事

Goはじめた

Goはじめた

 

参考

 

aial.shiroyagi.co.jp

 

https://astaxie.gitbooks.io/build-web-application-with-golang/

 

はじめてのGo―シンプルな言語仕様,型システム,並行処理:特集|gihyo.jp … 技術評論社

今読んでる本

自分用の喝

 

 

システム設計の謎を解く 強いSEになるための、機能設計/入出力設計の極意

システム設計の謎を解く 強いSEになるための、機能設計/入出力設計の極意

 

 

 

Laravelエキスパート養成読本[モダンな開発を実現するPHPフレームワーク!] (Software Design plus)

Laravelエキスパート養成読本[モダンな開発を実現するPHPフレームワーク!] (Software Design plus)

 

 

 

不正アクセス調査ガイド―rootkitの検出とTCTの使い方

不正アクセス調査ガイド―rootkitの検出とTCTの使い方

 

 

【GW】ES6、React、Flux、Reduxに触れてみた(3)

かなり日が経ってしまいましたが、GW勉強企画最終です。

 

▪︎ Redux

人気のFluxフレームワーク

 

*Fluxのおさらい

データフローを一方通行にすうrことで既存のMVCの問題だった依存関係の複雑さを回避できる。

 

▪︎トレンドな環境

Node.js + Babel + webpack + Redux

ES6→RS5

JSX→JS

トランスパイルはBabelに任せる!

 

▪︎Reduxの三原則

1. 状態はただ一つのStoreによって保持する

    状態はリードオンリーであり、その状態を変化させる

2. きっかけはActionの発行のみであること

3. 状態の変化は純粋関数で行うこと 

 

純粋関数?

副作用のない関数のこと

(現在の値を引数として受け取り、別の値を返却する)

 

▪︎Reduxの何が良いのか?

 

状態が一カ所に集約さえることにより、複雑性の軽減。

Reduxのコンセプトは、予測可能な状態コンテナ。

データフローが一方向だから状態遷移のきっかけがクリア。

 

大規模なアプリケーション

用途ごとの多数の状態管理

・・・・分散すると大変。デバックもつらい。

 

Reduxのコンセプトなら把握しやすい!

一方向のデータフロー=入出力の経路が明確になる。

 

*注意

一カ所に集約すると責務に分離せず複雑になる。

ReduxではReducerを使い、責務分割と状態の集約をする

アプローチがある。

 

▪︎もしReduxアプリケーションを作ることになったら・・・

例)

Actionから作る

actionCreatorとReducerの関数を作って手動で確認

stateもしくはdispatchをpropとしてラップするcomponentsとcontainesを作る

 

▪︎気づいたこと

reducersのexport default〜〜〜が

stateの値になっている。

stateの状態をみるとexportしないと値がセットされていない。

exportされるとreducerが実行される。

 

▪︎実験ソース

 

github.com

リーダブルコード

リファクタリング 技術書

リーダブルコード。

有名な本で、何回も読んでいますが少しまとめます。

 

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

 

 

この本の目的は、より良いコードを書く。

気になったものをリストにしておく

 

・いい名前をつける

明確な単語をつけよう。汎用的抽象的な名前はやめよう。

フォーマットを決めよう。

名前に情報をつける。重要な属性をつける。

例)

限界値はmin,max

範囲はfirst,last

包含/排他的範囲はbegin,end (日付の範囲とか?)

・スコープは小さくしよう

・一貫性のある簡潔な改行位置、並び、宣言(見た目がきれいにね)

・コードは段落に分割する

・価値のあるコメントを書こう

大切なことを説明しよう

・定数にもコメントをつける

・プロジェクトを熟知してない人が読み手と考える。

・条件式の引数の並び順を意識する

if (length >= 10)

のように、左側は変化する値、右側は比較対象のあまり変化しない値

英語の用法だ。

もし君が18歳以上ならば、をもし18年が君の年齢以下ならば

とはいわないはずだ。

・条件は否定式よりも肯定式を使う。

・単純な条件を先に書く。

・関心を引く条件や目立つ条件を先に書く

・do/whileはさける

・関数から早く返す

用が済んだらreturn。

・ネスとを浅くする

・説明変数や要約変数を使って処理を分割してみる

if line.split(':')[0].strip() == 'root'

username = line.split(':')[0].strip()

if username == 'root'

みたいにね

・ド・モルガンの法則を使う

情報処理でやったな〜

 ! (a || b || c) は !a && !b && !cに

! (a && b && c)は !a || !b || !c

にね

・複雑な条件になってしまったら、反対を考えるとシンプルな条件になるかも

・中間変数は削除しよう。早めにreturnすれば不必要になるかも

・無関係の下位問題を積極的に見つけて抽出すること

・きれいなインタフエース

引数が少なく、事前設定も必要なく、面倒なことをしなくてもいいライブラリ

・タスクは小さくする、一度にひとつのタスクを行う

・有用なライブラリは積極的に使う

・必要なコードは削除する

・テストは読みやすくする

 

最後に高品質なコードを書くための書籍紹介

 

 

Code Complete 第2版 上 完全なプログラミングを目指して

Code Complete 第2版 上 完全なプログラミングを目指して

 
Code Complete 第2版 下 完全なプログラミングを目指して

Code Complete 第2版 下 完全なプログラミングを目指して

 

 

 

新装版 リファクタリング―既存のコードを安全に改善する― (OBJECT TECHNOLOGY SERIES)

新装版 リファクタリング―既存のコードを安全に改善する― (OBJECT TECHNOLOGY SERIES)

 

 

 

プログラミング作法

プログラミング作法

 
コーディングを支える技術 ~成り立ちから学ぶプログラミング作法 (WEB+DB PRESS plus)

コーディングを支える技術 ~成り立ちから学ぶプログラミング作法 (WEB+DB PRESS plus)

 
達人プログラマー―システム開発の職人から名匠への道

達人プログラマー―システム開発の職人から名匠への道

  • 作者: アンドリューハント,デビッドトーマス,Andrew Hunt,David Thomas,村上雅章
  • 出版社/メーカー: ピアソンエデュケーション
  • 発売日: 2000/11
  • メディア: 単行本
  • 購入: 42人 クリック: 1,099回
  • この商品を含むブログ (351件) を見る
 

 

【GW】ES6、React、Flux、Reduxに触れてみた(2)

JavaScript React Flux ES6

前回の記事の続き、Fluxについて

 

■Flux

フロントエンド開発の新しいアーキテクチャ

Reactと組み合わせ既存のMVCの課題を解消するアプリケーション全体のアーキテクチャである。

アーキテクチャの図はネットにいっぱいあるのでそちらを参照。

 

FluxはMVCと同じく責務の分割とオブザーバーパターンを基本としたアーキテクチャ

MVCと異なるのは、データフローが常に一方通行になるように制約がある。

 

・メリット

MVCなのにデータフローが一方向

イベント発生に合わせてどんな処理がどこの部品として実装すべきかが明確

再利用性、テストの容易性

 

Fluxのアーキテクチャに存在する役割をReactと絡めて簡単に説明

・Store

ReactのStateで扱うデータの抽象化をしている

StoreはReactの親コンポーネントから監視されている。

Storeの更新はStoreのみが行いかつ同期処理で行う。

・Dispatcher

Actionを受け取り、Storeに配送する

・View

React。

Storeをルートコンポーネントで監視するのが定番

・Action

Actionを識別子はアプリケーションの振る舞いのインタフエースを表現

 

非同期処理やHTTPの呼び出しはActionをトリガーにする。

Storeの独立性意識し、再利用しのために制約を守る

 

■参考

 

WEB+DB PRESS Vol.86

WEB+DB PRESS Vol.86

 

 

 

WEB+DB PRESS Vol.87

WEB+DB PRESS Vol.87

 

 

■手を動かす

写経して適当に動かす。

GitHub - hatahata12/study-react: study repository

 

■動作環境

Node.js

Babel

Browserifyやwebpack

 

Browserifyは依存解決のひとつとしてJavaScriptを生成することが目的。

webpackは最適化したアセットの配布を目的

 

どちらもトランスパイラはBabelに任せる

ES6 ➡︎ ES5

JSX ➡︎ js

 

次はReduxについて

【GW】ES6、React、Flux、Reduxに触れてみた(1)

Flux JavaScript React ES6

GW中、ちょっと話題になってたES6、ReactやFlux、Reduxに触れてみました。

 

■ECMAScript2015(ES2015、ES6)

JavaScriptの中核仕様を抜き出して標準化したもの。

現在ブラウザで対応しているのはES5なので、ES6を使うには

トランスパイラで変換する必要がある(Babelとか)

 

■React

Facebook製のJavaScriptライブラリ。

UIを構築するためのライブラリである。(MVCのC)

他のライブラリとして

backbone.js

Angular.js

Vue.js

などがある。AngularやVueはMVVM(Model + View + ViewModel)系のライブラリである

Reactは規模が大きいサービスに適している。

小さめのアプリケーションや高速開発をするなら、VueやBackboneのほうが適しているかも。

 

Reactの特徴の一つとしてVirtual Dom(仮想DOM)がある。

DOMツリーを仮想的保持。

データ変更があった場合にオブジェクトの差分を計算して実際のDOMの再レンダリングを最小限にする。

また、JSXという独自シンタックスがある。

ユーザインタフェースの要素をコンポーネントとして分割して考える

 

・Reactの基本

コンポーネントの組み合わせを親子ツリーを意識して組み、Stateは親が管理し入力イベントは子から親へ更新されたStateの値はPropsをインタフェースに親から子へと伝搬させる。

データの流れは一方通行。

上位のコンポーネントが下位のkんポーネントに対してデータを流していく。

Reactivity(反応性、柔軟性)

 

Componentのrenderが行われるタイミングは

1. stateを更新

2. propsを外部から受け取る

 

stateはそれを仕様して描画を行うすべてのComponentの上位にならなければいけない。

 

・Reactを使うべき理由

今までの理想と現実と解決

理想

 ある構造体の入力に対して必ず一意なビューを生成したい。

現実

 jQuery,DOMを使って頑張る!

 データの状態からアプリを構築・・・難しい・・・

 DOMから特定の要素に対して自分でプログラムするのさ! jQuery万歳!!!

解決

 小さい単位でDOMを分割して管理するのがデータバインディング方式!

 AngularとかVueね。

 

Reactはこの解決アプローチを変えた!!

ユーザが記述するのは生のDOMではなく・・・・仮想のDOM!!

最初のレンダリングは普通。

与えられた仮想DOMに対して1対1に対応したDOMが生成される。

2回目以降は差分が計算されDOMの操作を内部的にやってくれる。

 

jQueryとの相性はあまりよくない。

直接DOMを触るケースは最悪。

仮想DOMと実際の構造がずれたらあかんですわ・・・

Reactを使うならDOMラッパーは使わずReactに絞る必要がある。

 

・Reactについてもう一度まとめる

React = ユーザインタフエース構築ようJavaScriptライブラリ。

ReactはViewだけを提供する

データ更新をStateで管理し、DOM操作をラップし(仮想DOMを通す)

最小限のパスで更新することができる。

コンポーネントという概念は

DOMに関連するビューのロジックは同じコンポーネントないで閉じることになる。

DOMがどこでいつ書き換えられるか保証できる。

 

・Reactの問題点

ツリーが深くなると子から親へのツリー階層をたどるのが面倒

状態管理は外部に任せたい・・・

JSXにHTMLを記述するスタイル・・・・

 

■参考書

 

WEB+DB PRESS Vol.87

WEB+DB PRESS Vol.87

 
WEB+DB PRESS Vol.86

WEB+DB PRESS Vol.86

 

 

 

次回は上記問題点を解決するFluxについて