無限大な夢のあと

テニスとアニメが大好きな厨二病SEのブログ

【書評】基礎から学ぶReact Native入門 ( @yyamada )

WINGSプロジェクトの書籍レビュアーに応募し、献本してもらったので、書評を書きました。
今回は表題にある通り「基礎から学ぶReact Native入門」の書評となります。

早速、レビューに入ります。

TL;DR

端的にいうと、実務でReactNative扱っている方が情報をうまく取捨選択しながら、執筆した書籍だなという印象でした。
React開発経験 or モバイルアプリ開発がある人なら、こちらの書籍でReactNative開発のスタートをしっかりできそうに見えました。
もし、チームでReactNativeを扱うことになったら、この書籍を一冊目に薦めます。

前提としての自分の実務経験や知識など

私の今回の書籍に関係するところでの実務経験や知識はこんな形です。

  • モバイルの知識
    • iOSアプリ開発 実務3年弱
    • Androidアプリ開発 実務半年弱(コードレビューは2年ほど参加)
    • Flutter 副業で3ヶ月弱(技術検証のみ)
    • React Native/Expoでの検証(技術検証のみ) 副業で1ヶ月弱
  • Webの知識
    • HTML/CSSは苦手、JavaScript/TypeScriptは問題なく使える
    • AngularJS、Angular2での開発 半年弱
    • Vueでの開発 0から立ち上げ 半年弱
    • 直近 React(FC、Hooks含む)、StyledComponentsでの開発 4ヶ月ほど

実務でReactNative扱っている方が執筆したと感じた点

具体的にはそう感じたのは以下でした。

  • 関数コンポーネント+Hooksでの説明があること
  • 影の付け方などのiOS/Androidが違うなどのレイアウトの説明があること
  • UIライブラリ/画面遷移/データ永続化/TypeScript活用などの説明があること
  • 細かい部分だと日付周りライブラリがmoment.jsではなく、date-fns使っていたりすること
  • 書籍全体で紹介してきた集大成としての実際のアプリ作成の紹介があること

上記以外の書籍の中身について

個人的に非常に嬉しいなと思ったのは、以下のスタイルでの装飾、レイアウト、UIライブラリを丁寧に紹介している点でした。

  • 第6章 React Nativeでアプリの見た目を整えよう - スタイルでコンポーネントを装飾する
  • 第7章 React Nativeでアプリの見た目を整えよう - スタイルでコンポーネントをレイアウトする
  • 第8章 UIライブラリで美しいデザインを手軽に利用する

ここまで丁寧に紹介されていると、私のようにReactやり始め、HTML/CSSなどが苦手勢でも、これでアプリをまずは動かす最初の一歩から、実際にアプリを作り始めて細かくレイアウトを組んでいく2歩目を踏み出せるなぁと思いました。

また、そこそこアプリ開発の他の経験があったとしてもリリース周りは、今回のExpo使うケースだと別知識なのでそこの紹介も「第13章 リリース用のアプリファイルを用意しよう」にあったのもありがたかったです。

他の部分だと、説明の都合上とは思いますが、4章/ClassComponentでの実装→5章FunctionalComponent/Hooksでの実装という例で紹介していますが、実際はFunctionalComponent/Hooksでの実装をメインで使うと思いますので、最初この説明順だったときに混乱はしました。
ただ、React自体の知識が全くなかったり、FunctionalComponent/Hooksの知識がなかったら、この方がすっと頭には入ってくるので、より広い層に向けては良いように思いました。

今回の書籍の続編やページ数があれば+αで欲しかった点

個人的には入門という範囲ではとてもベストな内容/分量に収まっていると思います。
逆にもっとページ数があればor応用編みたいなところなどが今後出版できるなら、以下の知識周りがあるとより嬉しいなと思いました。

  • FirebaseやCognitoなどを使った認証機能の実装など(可能なら、FirebaseAuthやFirebaseAuthUI使ったものとか)
  • ネイティブアプリだけではなく、PWAのサンプルなど
  • ReactNative周りで、簡易にPush通知できるサンプルがあれば(ダメならOneSignalでの実装例とか)

まとめ

2018年頃にReactNativeの書籍を読んだりした際には、レイアウト部分などがそこまで詳しく書いていなく、私のようにCSS弱い勢には大変で諦めてしまい、個人開発でちょっとしたものを作るのにはiOS/AndroidネイティブやFlutterに寄っていてしまっていました。
ただ、現在の自分の知識だとReactの知識も活用できるうえ、こっちの方が実務側にも知識を還元でき、将来モバイル対応などが発生した際には今のチームにはReactNativeがマッチする選択肢もあるので、本腰入れて使ってみようかなと思いました。

最後に目次や中身のソースコード、今後追加されるであろう正誤表については、こちらのリンクから確認できます。
wings.msn.to

以上、書評とさせていただきます。

React.js&Next.js超入門

React.js&Next.js超入門

stripeでfp-tsを活用した例 #1 決済入力項目のクリア

最近、TypeScript/ReactでWebフロントエンドをやっています。
stripeの接続をやっている中で、とにかくundefinedかnullかを判定したりなどでとても面倒になり、本来はTypeScriptの機能だけを活用するべきですが、fp-tsを導入しました。
今までSwiftやScalaをやっていく中でOptionとか、for式楽だなぁと思っていたので、そこもうまく活用してみた感じです。
一旦、備忘録的に書いていきます。

今回紹介するのは画面でstripeで決済した際に、入力していたクレジットカード番号、有効期限、CVCなどの項目のクリアを行っています。

大枠の処理自体はgistに貼り付けました。
もうちょい見やすくかけるかもしれないので、ご意見欲しいです。

今回はpipe、fromNullable、chainNullableKを使っています。
それぞれのメソッドについて、簡単に紹介していきます。

pipe

正確なすごい簡単にいうと、関数を適用していく際に入れ子ではなく、パイプラインのように記述できます。
ライブラリ側のソースコードのドキュメントコメントにはこのような感じでわかりやすい例で書いています。

Pipes the value of an expression into a pipeline of functions.
See also flow.
Example:
import { pipe } from 'fp-ts/function'  

const len = (s: string): number => s.length  
const double = (n: number): number => n * 2 
assert.strictEqual(double(len('aaa')), 6)    // without pipe  
assert.strictEqual(pipe('aaa', len, double), 6)  // with pipe  

Since:2.6.3

個人的には、こっちの方が読む立場から見るとわかりやすい派です。

pipe(
  'aaa',
  len,      //ここのメソッドの引数に'aaa'が渡って来て、len('aaa')が実行される
  double  //ここのメソッドの引数に、lenメソッドに'aaa'を実行した結果が渡されて、double(lenメソッドに'aaa'を実行した結果)が実行される
)

Option.fromNullable

https://gcanti.github.io/fp-ts/modules/Option.ts.html#fromnullable

これはnullやundefinedを引数に渡すと値がない概念の型のnoneが返り、それ以外だった場合は、値がある概念の型のsomeにラップされた値が返ります。
関数型的にはいわゆるMaybeモナドという概念ですね。

ここも同じく、ライブラリ側のソースコードのドキュメントコメントにはこのような感じでわかりやすい例で書いています。

Constructs a new Option from a nullable type. If the value is null or undefined, returns None, otherwise returns the value wrapped in a Some.
Example:
import { none, some, fromNullable } from 'fp-ts/Option'   

assert.deepStrictEqual(fromNullable(undefined), none)  
assert.deepStrictEqual(fromNullable(null), none)  
assert.deepStrictEqual(fromNullable(1), some(1)) 

Since:2.0.0

これは本当の便利な概念だと思っていて、例えばJavaScript/TypeScriptのfindとかって、値がない場合ってundefinedが返りますよね。
developer.mozilla.org

それが型レベルとかでわからないですし、その後にメソッド呼び出しするとエラーになって落ちてしまいます。
また、nullだったり、undefinedだったりの判定も面倒ですよね。

これを型レベルで防いでくれるのが嬉しかったりします。
findとかで返り値がOptionになったりします。
https://gcanti.github.io/fp-ts/modules/Array.ts.html#findfirst
https://gcanti.github.io/fp-ts/modules/Array.ts.html#findfirstmap

Option.chainNullableK

https://gcanti.github.io/fp-ts/modules/Option.ts.html#chainnullablek

Optionの値があった場合(someだった場合)に渡した関数で処理をして、値がなかった場合(noneだった場合)には何もしないです。
pipeと組み合わせて使うと強力に使えます。

ここも同じく、ライブラリ側のソースコードのドキュメントコメントにはこのような感じでわかりやすい例で書いています。

 import { some, none, fromNullable, chainNullableK } from 'fp-ts/Option'
 import { pipe } from 'fp-ts/function'
 
 interface Employee {
   company?: {
     address?: {
       street?: {
         name?: string
       }
     }
   }
  }
 
 const employee1: Employee = { company: { address: { street: { name: 'high street' } } } }
 
 assert.deepStrictEqual(
   pipe(
     fromNullable(employee1.company),
     chainNullableK(company => company.address),
     chainNullableK(address => address.street),
     chainNullableK(street => street.name)
   ),
   some('high street')
  )
 
 const employee2: Employee = { company: { address: { street: {} } } }
 
 assert.deepStrictEqual(
   pipe(
     fromNullable(employee2.company),
     chainNullableK(company => company.address),
     chainNullableK(address => address.street),
     chainNullableK(street => street.name)
   ),
   none
 )
 
since 2.9.0

stipe+fp-ts活用

こんな感じでメソッドを組み合わせて、以下のような形で書いてみました。

今回の大きなモチベーションとしては、stripeで準備している以下のメソッドを呼んだときに、nullで返ってくる可能性があります。

element.getElement(CardNumberElement)
element.getElement(CardExpiryElement)
element.getElement(CardCvcElement)

getElement(component: CardNumberElementComponent): stripeJs.StripeCardNumberElement | null;
        /**
         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=card) for the `CardCvcElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
         * Returns `null` if no `CardCvcElement` is rendered in the current `Elements` provider tree.
         */
getElement(component: CardCvcElementComponent): stripeJs.StripeCardCvcElement | null;
        /**
         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=card) for the `CardExpiryElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
         * Returns `null` if no `CardExpiryElement` is rendered in the current `Elements` provider tree.
         */
getElement(component: CardExpiryElementComponent): stripeJs.StripeCardExpiryElement | null;

値があった場合は都度チェックしてclearするというのが面倒だったので、これをスマートに実現したくて、fromNullable、chainNullableKを使ってみた感じです。

また、以下の中でまたpipeが入ると入れ子が深くなるので、返り値の関数としてO.fromNullableを渡しています。

O.chainNullableK((e: stripeJs.StripeCardNumberElement) => e.clear())(O.fromNullable(element.getElement(CardNumberElement)))

【書評】独習Python ( @yyamada )

WINGSプロジェクトの書籍レビュアーに応募し、献本してもらったので、書評を書きました。
今回は表題にある通り「独習Python」の書評となります。

独習Python

独習Python

Pythonhは実務では使ったことがないというのがステータスです。

レビューに入ります。
こちらの書籍だと、実際にプログラムを書きながら、必要な処理を辞書的に調べるという用途で使えるだろうなと思っているので、一旦そのように読み進めておりました。
ただし、プログラムを書き始めるまでの環境、歴史的経緯も知りたかったので、1章だけは最初に読みました。(私自身としては、JetBrainsのPyCharmで検証してました

実際にプログラムを書く題材としては言語処理100本ノックの準備運動の最初5問を解きつつ、周辺のページを読むというような読み方をしました。
nlp100.github.io

解答例(参考にしたリンクなども記載しました

言語処理100本ノック 準備運動 0-4


上記の問題を解くにあたり、以下の章を特に重点的に読みました。

  • 第5章(標準ライブラリ(基本))
  • 第6章(標準ライブラリ(コレクション))
  • 第7章(標準ライブラリ(その他))

今回は問題を解くのには使わなかったですが、文字列/日付周りはどうしても業務などで処理を書くには必要な処理なので、しっかり内容を書かれているのはありがたいと思いました。
実際に問題を解くにあたっては、少し調べた中で、リスト内表記やスライス構文、lambdaなども使ったのですが、ここら辺の説明も記載があって、既存のコードも読めた感じです。


また、そこ以外だと以下の章にコルーチンがあることやdataClassもPythonに実装がされているのは知らなかったので、そこら辺の説明もしっかり読まさせていただきました。

ここではPythonの言語としての説明だけでなく、コルーチンのところのような概念のところもしっかりイラスト付きで説明もあって、プログラミング初学者自体にも優しい内容だと思いました。

業務で使う方は、こちらの書籍を横に置いて、ちょっとした調べ物もWebだけでなく、こちらも調べて見るとPythonの言語としての理解も深まるかなと思いました。
以上、レビューとなります。

最後に大きく影響はないですが、見つけた誤植部分を記載しておきます。

誤植
P348

(誤)ラムダ式を利用した例はmap関数(6.1.12項)、filter関数(6.1.13項)などでも
(正)ラムダ式を利用した例はmap関数(6.1.13項)、filter関数(6.1.14項)などでも


ゼロから作るDeep Learning ―Pythonで学ぶディープラーニングの理論と実装

ゼロから作るDeep Learning ―Pythonで学ぶディープラーニングの理論と実装

  • 作者:斎藤 康毅
  • 発売日: 2016/09/24
  • メディア: 単行本(ソフトカバー)

【書評】速修Django ( @yyamada )

WINGSプロジェクトの書籍レビュアーに応募し、献本してもらったので、書評を書きました。
今回は表題にある通り「速修Django」の書評となります。

速習 Django 3 速習シリーズ

速習 Django 3 速習シリーズ

Pythonhは実務では使ったことがなく、フルスタックフレームワークの経験としては他言語だとRubyのRubyOnRails、業務で使ったことがあるのはJavaのSpring、ScalaのPlayなどです。

早速レビューさせていただきます。
まず最初に思ったのはWindows前提でしたが、読む人のレベルもバラバラなので、大したページ数もなく大きく変わらないと思うので、Macの場合の記述もあっても良いかなと思いました。
ただ、Mac用のPython環境を整えるページがサポート側に用意されているのは良いと思いました。
サーバサイド環境構築・設定 - WINGS

次に冒頭の方で、この書籍で説明する範囲をちゃんと明確にしていった中で説明が進んだので、全体像を描いた上で読み進めつつ、手を動かせたのでここはすごく良い点でした。
f:id:noimpslmtbrk:20200720004542p:plain

最後に、完全に個人の感想になってしまうのですが、View側(templateのところ)の方は実際に説明があっても個人で使うにせよ、業務に使うにせよ、APIを受け取るクライアント側を別途作ることが多く、Djangoを使っていてもサーバ側はJSONを返すところに徹するように作ることが多いので、速修本では取り除いてもよかったのかなとは思いました。
ただ、その反面としてフォームをちゃんと使えるところまで一通り本書でカバーしている点は、フルスタックフレームワーク系を使ったことがない人に取ってはとても良い点とも思いました。

追加でよりもっとよくなる点があるとしたら、速修シリーズであっても実際に手を動かして動作を確認するので、エディタ系などの開発環境のおすすめは記載があった方が良いと思いました。
私は有料ではありますが、JetBrains社のPycharmで色々動かしたましたが、今時ならVSCodeでの動作を基本として動かすなどはあっても良いかもしれません。

以上、レビューになります。

独習Python

独習Python

SwiftDateで分、秒などを切り捨てる処理

標準を使う場合は以下の記事のようにCalednarオブジェクトを作って処理自体は可能。
https://www.letitride.jp/entry/2019/09/03/092513

ただ、例えば比較処理などをした場合に、それぞれCalendarオブジェクトを作って、比較するのが億劫ですが、SwiftDateを使うとCalendarオブジェクトを使わずに簡単に処理することができます。

SwiftDateを使って分、秒などを簡単に切り捨てる。

SwiftUI 徹底入門

SwiftUI 徹底入門

【書評】実践ドメイン駆動設計から学ぶDDDの実装入門 ( @yyamada )

WINGSプロジェクトの書籍レビュアーに応募し、献本してもらったので、書評を書きました。
今回は表題にある通り「実践ドメイン駆動設計」から学ぶDDDの実装入門」の書評となります。

「実践ドメイン駆動設計」から学ぶDDDの実装入門 (CodeZine Digital First)

「実践ドメイン駆動設計」から学ぶDDDの実装入門 (CodeZine Digital First)

DDDは実際に業務で2年ほど使用していて、復習の意味も込めて今回レビュー応募をさせていただきました。

では早速、本題のレビューをさせていただきます。

まず、書籍にざっと一通り目を通した感想をものすごく端的にいうと、
「IDDD本を要約して読み返すことができる和書としての書籍」という印象です。

簡潔に書籍の「良かった点」、「改善点」をまとめます。

良かった点

  • IDDD本に比べて抜粋して記載してあって、非常に読みやすいくらいの分量になっている。
  • コーディングするに当たって役立つ法則などについてまとめていた上で、書籍の引用元やブログなども参考として載せてあるので知識を深めやすい。
  • 今まで洋書の翻訳本ばかりで日本語的に読みにくいものばかりでしたが、和書として読みやすいので、気持ち的にも障壁が下がった。

改善点

  • 難しい点ではありますが、IDDD本とは別のサンプルがあったりしたら、今後DDDを始める人の参考にもなったかなとは思いました。
  • IDDD本と同じサンプルにするにしても、より読書層を広げるなら、モバイルアプリ開発に使われるSwift/Kotlinなどのサンプルもあっても良いかなと思いました。

エリック・エヴァンスのドメイン駆動設計(通称エリック本)とIDDD本を初めて読んだのは2016年で、部分的には読み返してはいたのですが、今回の書籍を通してあの時の自分の実装が正しかったのかなどを思い返すきっかけになりました。
また、IDDD本をしっかり読んだのがかなり昔なので、IDDD本ってここまで書いてたっけと復習するきっかけにもなりました。

エリック・エヴァンスのドメイン駆動設計 (IT Architects’Archive ソフトウェア開発の実践)

エリック・エヴァンスのドメイン駆動設計 (IT Architects’Archive ソフトウェア開発の実践)

実践ドメイン駆動設計 (Object Oriented SELECTION)

実践ドメイン駆動設計 (Object Oriented SELECTION)

実際にはしっかりとエリック本を読んだ上で読むべき書籍であるので、一番最初の書籍として、今回のレビュー書籍として飛びつくのはあまり良くないかもしれないですが、エリック本をしっかり読むのに心が折れてしまう人もいると思うので、その合間で併読して読むと実装のイメージも湧いて読みやすいかもしれません。

理想プランとしてはエリック本→IDDD本ですが、エリック本→今回のレビュー書籍→IDDD本でも悪くはないかなぁとは思います。
※私は社内研修でエリック本→DDDで実際に掲示板を作り、チームメンバーにレビューをしてもらう→実際に実装をするにあたりIDDD本を読むというのが最初の導入でした。

個人的にDDDに入門する人たちにとって、翻訳本以外の書籍の一つになると思いますので、取っ付きやすい書籍が一つ増えて嬉しいなと思いました。

以上、レビューとなります。

ユースケース駆動開発実践ガイド

ユースケース駆動開発実践ガイド

Swift, Rust, Elmで言語処理100本ノック2015 #1 00. 文字列の逆順+文字列のUnicodeコードポイント/バイト列表示

# はじめに
普段使いのSwiftに加えて、Rust, Elmに慣れるためにトライする実行環境紹介ページです。

言語処理100本ノック2015はこちら
http://www.cl.ecei.tohoku.ac.jp/nlp100/

この方がスマートあるいは処理効率が良いなどありましたら、コメントくださいませ。

## 00. 文字列の逆順

文字列"stressed"の文字を逆に(末尾から先頭に向かって)並べた文字列を得よ.
おまけで文字列のUnicodeコードポイント/バイト列表示。

### Swift

String peace = "azatoi";
> String("stressed".reversed())
String = "desserts"

> "stressed".reversed()
ReversedCollection<String> = {
  _base = "stressed"
}
# Stringで囲まないと、ReversedCollection<String>が返ってくるようです。
# 昔にSwift3の時に練習した時のを掘り出すと.charactersというString.CharacterViewを使わないとダメでしたが、
# Swift4からはStringから直接使えるようになりましたね。
> String("stressed".characters.reversed())

# 文字列のUnicodeのコードポイントを返す
# https://developer.apple.com/documentation/swift/unicode/scalar
# Unicode スカラは U+0000 〜 U+D7FF または U+E000 〜 U+10FFFF の範囲に含まれるコードポイントです。
# Unicode スカラは U+D800 〜 U+DFFF の範囲に含まれるコードポイントであるサロゲートペアのコードポイントは含まれません。
> "Go言語".unicodeScalars.map { print($0.value) }
71
111
35328
35486

# 文字列のバイト列を返す
> Array("Go言語".utf8)
$R1: [String.UTF8View.Element] = 8 values {
  [0] = 71
  [1] = 111
  [2] = 232
  [3] = 168
  [4] = 128
  [5] = 232
  [6] = 170
  [7] = 158
}
}

### Elm

> String.reverse "stressed"
"desserts" : String

> "stressed" |> String.reverse
"desserts" : String
-- パイプじゃないとまだ慣れないなぁ

-- Char型がUnicodeのコードポイント(32bit数値表現かな)ということで試してみました。
-- https://package.elm-lang.org/packages/elm/core/latest/Char#toCode
> "Go言語" |> String.toList |> List.map Char.toCode
[71,111,35328,35486] : List Int


-- バイト列を表示するには
-- ライブラリ導入が早いです。
-- https://package.elm-lang.org/packages/ktonon/elm-word/2.1.2/

> import Word.Bytes exposing (..)
> Word.Bytes.fromUTF8 "Go言語" 
[71,111,232,168,128,232,170,158]

### Rust

> "stressed".chars().rev().collect::<String>()
"desserts"

"stressed".chars().rev()
Rev { iter: Chars { iter: Iter([115, 116, 114, 101, 115, 115, 101, 100]) } }
// collectしないと文字列のバイト列が返ってくる。
// https://doc.rust-lang.org/std/primitive.char.html
"Go言語".chars()
Rev { iter: Chars { iter: Iter([71, 111, 232, 168, 128, 232, 170, 158]) } }
"Go言語".as_bytes()
[71, 111, 232, 168, 128, 232, 170, 158]
// StringはVec<u8>のラッパです。上記は単純にバイト列を返しているだけです。言と語はそれぞれ3バイト使います。
// Unicodeコードポイントの32bit数値表現だとしたら、Iter([71, 111, 35328, 35486]) で返ってくる。
// Unicodeコードポイントが返ってくる実装については一旦保留