massa142's blog

くり返す このポリリズム

「はじめてのフロントエンド開発」という本を書きました

共著者として参加していた書籍『React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発』が、2018/5/9に技術評論社さまより発売となりました。

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発

どんな本か

React、Angular、Vue.js、React Nativeそれぞれが、同じサーバのAPIを参照し、同様の機能を持ったアプリケーションとして作成します。React Nativeは、ネイティブアプリを開発するためのフレームワークなため、SPA(Single-page application)だけでなく、スマートフォンアプリ開発についても学習ができます。

つまり、同一のアプリケーションを、それぞれのフロントエンドフレームワークで作ると、作り方にどのような違いがあるのかということもわかる書籍となっているのです。

ちょっと言い過ぎかもしれませんが、JavaScriptフロントエンドフレームワークロゼッタストーンと言えるかもしれません。(はじめに より)

本書ではReact、Angular、Vue.js、React Nativeそれぞれで、Slackライクなサンプルアプリケーションを作っていく流れを紹介しています。特定のフレームワークを深く掘り下げるのではなく、JavaScirpitフレームワークを用いた開発の流れや各フレームワークの特徴・違いなどをつかむことを目的としています。このなかのAngularの章を自分は担当しました。

またサンプルアプリケーションの実装に入る前準備として、JavaScriptの歴史背景・SPAに関する用語解説・環境構築・ECMAScript 2015・TypeScriptの解説もあります。最近のJavaScriptはよく知らないという方でも安心して進められる構成となっています。

React、Angular、Vue.jsという日本で人気のあるフレームワークをまとめて1つの書籍で取り上げるだけでなく、APIサーバとしてFirebaseを採用し、まだまだ進化がはやいReact Nativeも扱うというとても意欲的な1冊となっています!

こんな方におすすめ

本書は以下の方に向けて書かれています。

本書は、React、Vue.js、Angularなどのフロントエンド系JavaScriptフレームワークを使用したいと考えているWeb制作者に向けて書きました。

もし、あなたが「今までjQueryなどで実装をしてきたけど、そろそろSPAでも」と考えているWebエンジニアもしくはWebデザイナーであれば、本書にピッタリな読者といえるでしょう。 (はじめに より)

SPAの勉強をはじめたい人や、どのフレームワークを選べばいいか悩んでいるという人がいれば、「これ読んでおいて」と言って渡す本としておすすめです。

書いたきっかけ

今回の企画には、ベースがありました。御徒町にて月1回、クローズド形式でひっそりと開催されているOkachi.jsという勉強会があります。以前、この勉強会でJavaScriptフレームワークの比較検討会が行われました。参加者がそれぞれ1つずつフレームワークを持ち寄り、プレゼンするという内容です。その企画が、紆余曲折を経て、この書籍へと結びついたという経緯があります。執筆陣もOkachi.jsへ参加している面々だったりします。(はじめに より)

「はじめに」にあるように2017年6月に開催されたOkachi.jsの内容がこの書籍のもとになっています。

また、JavaScriptの勉強をしたいけど「なにから始めればいいかわからない」「おすすめの書籍教えてください」という声を周りからよく聞いていたので、そういった方々のための本があればいいなと考えていたのも執筆に参加する動機となりました。

パンダの由来

JavaScriptの本でなんでパンダ?」と思った方も多いと思うので、ここで由来を紹介しておきます。

というのが、パンダの由来となっています。

デザイナーの方にも手にとってもらいやすいイラストになったのではないかと思います。このパンダは本書のなかで色々なポーズをしているので、読み進めながらかわいい姿にぜひ癒されてください。

サポートリポジトリ

本書に登場するコードは、以下のリポジトリで公開しています。

github.com

レビュー記事(随時追記)

2018年4月の振り返り

仕事

  • Listing掲載情報文の管理機能
  • 手間いらずとの繋ぎこみ
  • django-js-reverse導入
  • Prettier・TSLint・HTMLHint導入
  • pre-commit導入
  • webpackアップグレード

アウトプット

ブログ

イベント

音楽

『魚図鑑』

  • 「なんてったって春」は中毒性があって好きな曲

映画

ちはやふる 結び

#ちはやふる結び

A post shared by Masataka Arai (@massa142) on

  • 原作の世界感を大事にしているとても良い映画だと思う
  • ヤスタカが『無限未来』という曲名にした理由がよくわかる
  • 黒髪めがねの真剣佑はまじイケメン
  • 髭を生やした賀来賢人もまじイケメン
  • 松岡茉優の演技は本当に素晴らしい
  • 広瀬すずも演技だんだんうまくなってる
  • 野村周平は高校生の役は限界だったけど頑張ってる
  • 上白石萌音ちはやふるの世界観にすごくはまってる
  • 清水尋也の冷たい目が印象に残る

目標と成果

  1. × Django本第5章執筆
  2. x Web連載第3回執筆
  3. ◯ 副業案件
  4. △ DjangoCongress JPの準備
    • 発表資料準備しないと
  5. △ PyCon JP 2018 webサイト構築
    • PaperCall.ioの調査をする必要あり
  6. ◎ ミラクルカップに向けて頑張る

5月に向けて

  • Django本執筆
  • Web連載第3回執筆
  • 副業案件
  • PyCon JP 2018 webサイト構築
  • PyCon Kyushu CfP提出
  • PyCamp講師練習会
  • DjangoCongress JP
  • PyCon APAC 2018
  • RxJSの勉強
  • Perfumeとあなた”ホールトゥワー in 大阪 楽しむ

2018年3月の振り返り

仕事

  • メッセージ多言語対応
  • リファクタリング
  • .format()をf-stringsに置き換え
  • データベース周りの修正

アウトプット

ブログ

連載

イベント

音楽

曲もMVも神々しい。ヤスタカはやっぱり神。

「FUSION」がカップリングに入ってて最高でした。

恒例のnatalieインタビュー

資本業務提携

🎉🎉🎉

目標と成果

  1. Django本第5章執筆
    • もっと時間を確保しないとまずい
  2. x Web連載第3回執筆
    • 時間がとれていなかった
  3. ◎ JS本レビュー反映
    • 無事再校戻しおわった
  4. ○ 読書
    • サピエンス全史(上)
    • カイゼン・ジャーニー
  5. x ジム再開
    • 運動不足でそろそろやばい
  6. ○ DjangoCongress JPの準備
    • CfP受かった・会場準備ちょっとやった
  7. Python Boot Camp in 福島 TA頑張る
    • TAから二次会までがんばった
  8. Perfume x Technology 参戦
  9. ◎ VERSUS 8th Anniversary Special-Reactivate
    • YASUTAKA x TeddyLoid 最高だった

4月に向けて

  • Django本第5章執筆
    • 優先度あげて取り組む
  • Web連載第3回執筆
  • 副業案件
  • DjangoCongress JPの準備
    • スライド準備
    • 会場受付フロー整理
  • PyCon JP 2018 webサイト構築
    • Sessionize調査
  • ミラクルカップに向けて頑張る

「サピエンス全史(上)」を読んだ

サピエンス全史(上)文明の構造と人類の幸福

サピエンス全史(上)文明の構造と人類の幸福

しばらく技術書しか読んでいなかったので、今年は他の本も読んでいこうと思っている。そこでずっと気になっていた「サピエンス全史」の上巻をまず読んでみた。

全体として、

  • 当たり前だと思っていてその理由を考えたことのなかった事象が数多く取り扱われている
  • 現存している証拠から丁寧に説明がなされている
    • 逆に証拠が乏しく断定できないことは可能性を列挙するに留めてあり、論理的でわかりやすい
  • 歴史から現代の社会問題に切り込んでいてよい
    • 歴史を知ることで現代を生きるうえでの教訓が得られる

という点が印象を受けた。

本書のなかで個人的に印象に残った文章は次の2つ。

たいていの社会政治的ヒエラルキーは、論理的基盤や生物的基盤を欠いており、偶然の出来事を神話で支えて永続させたものにほかならない。


「自然な」「不自然な」という私たちの概念は、生物学からではなくキリスト教神学に由来する。

宗教、特にキリスト教について否定的な著者らしい指摘だと思う。この宗教の問題については下巻でも詳しく取り上げられているので、続きを読むのが楽しみだ。

読書メモ

第1部 認知革命

  • まぜ人類は私たちホモ・サピエンス1種しかいないのか?
    • 複数の種が存在して過去ではなく、私たちしかいない現在が特異
    • 進化上の兄弟姉妹を欠いているので、自分たちこそが万物の霊長であると思いがち
  • オーストラリア大陸やアメリカ大陸の多くの動物は、なぜ人類の移住後あっという間に絶滅したのか?
  • なぜ人類の赤ん坊は他の動物と違って、未熟な状態で産まれるのか?
    • 直立歩行のために腰回りを細める必要があった
    • 自然選択によって早期の出産が優遇された(命の危険が少ない)
  • 人類の言語・認知は、口語言語を持っている他の動物となにが違うのか?
    • 想像上の現実「虚構」を生み出すことができる

第2部 農業革命

  • 農業革命によって単位面積当たりの収穫量が急増し、ホモ・サピエンスは指数関数的に数を増やした

    • 人間の脳で覚えきれない大量の数理的データを扱う必要がでてきたため、書記体系が発明された
    • 多数の人間をまとめる大規模な協力ネットワークとして「想像上の秩序」が生み出せれる
  • 「想像上は秩序」はヒエラルキーを成す架空の集団に分ける

  • このヒエラルキーは、論理的基盤や生物的基盤を欠いており、偶然の出来事を神話で支えて永続させたものにすぎない
  • 不正な差別は時が流れるうちに、改善されるどころか悪化することが多い
    • ex) 黒人への差別
  • 社会が異なれば採用される想像上のヒエラルキーの種類も異なるが、性別のヒエラルキーはどこでも共通して存在している
    • 男性が女性より優遇されるケースがほとんどだが、その理由で納得できるものがない
    • この一世紀の間に劇的な変化が起こっており、社会的・文化的性別の歴史にとまどう

奴隷制が非合法になっても、これまでの差別のせいで黒人家庭は貧しく教育水準が低いままだった。そのため良い教育を受けて、良い報酬の仕事に就くことは少なかった。 ホワイトカラーの仕事に就いている黒人の少なさが、彼らが人種的に劣っていることの証拠とされ、偏見は強まっていった。

管理職に女性を増やそうという流れは、逆に男女差別だとこれまで思ってたけど、強引にでもやらないとすでにある差別は解消できないのかもしれないと感じた。

第3部 人類の統一

  • 人類を単一の集団としてまとめるグローバルなビジョン
    • 貨幣
    • 帝国
    • 宗教
  • タカラガイの貝殻は約4000年にわたって貨幣として使われた
    • 「買」「賣」などのお金に関する漢字には「貝」が多く使われている
  • これまで考案されたもののうちで、貨幣は最も普遍的で、最も効率的な相互信頼の制度
  • 帝国とは、二つの重要な役割を持った政治秩序のこと
    • 文化的多様性
    • 変更可能な国境

2018年2月の振り返り

仕事

アウトプット

ブログ

イベント

音楽

ヤスタカの初ソロアルバム。ほんとに神。

収録曲のなかでは

  • Jump in Tonight (feat.眞白桃々)
  • Level Up (feat.banvox)

の2つがお気に入り。

このインタビュー記事が読み応えある。

SQUEEZE開発合宿

目標と成果

  1. x JS本レビュー反映
    • まだ初校があがってこなかった 
  2. △ 筋トレ再開
    • ジムには行けてないけど、皇居ランは継続
  3. ラクロス再開
    • 週1で練習いけてる
  4. △ DjangoCongress JPの準備
    • 会場・受付まわりそろそろ詰めないと
  5. ○ DjangoCongress JPにCfP提出
    • Django 2.0とPython 2->3移行について」というCfPだした
    • SPA x DRFについてでもうひとつ書こう
  6. ◎ “Perfumeとあなた”ホールトゥワー in 幕張

3月に向けて

  • Django本第5章執筆
  • Web連載第3回執筆
  • JS本レビュー反映
  • 読書
    • サピエンス全史
    • 積ん読になってる技術書
  • ジム再開
  • DjangoCongress JPの準備
  • Python Boot Camp in 福島 TA頑張る
  • Perfume x Technology 参戦
  • VERSUS 8th Anniversary Special-Reactivate
    • YASUTAKA x TeddyLoid 楽しむ

2018年1月の振り返り

仕事

アウトプット

N/A

イベント

音楽

映画・ドラマ・アニメ・漫画

徒然

  • ファミマのバターコーヒーが毎日の習慣になった
  • SQUEEZEにKibelaが導入されてコミュニケーションが捗っている

目標と成果

  1. ◯ Web連載第2回執筆
    • 遅れたがなんとか書けた 
  2. × Django本第5章執筆
    • 進捗わろし
  3. ◎ JS本執筆完了
    • 無事初稿へ
  4. △ 筋トレ再開
    • ジムには行けてないけど、皇居ラン再開した
  5. × ラクロス再開
    • Advanceの練習もはじまってないししょうがないね
  6. ◎ pyhack雪山合宿 楽しんでくる
    • 夏山も行けたらいいな

2月に向けて

  • JS本レビュー反映
  • 筋トレ再開
  • ラクロス再開
  • DjangoCongress JPの準備
  • DjangoCongress JPにCfP提出
  • Perfumeとあなた”ホールトゥワー in 幕張

2017年の振り返り

massa142.hatenablog.com

エンジニア

Python

PyCon JP 2017 システム開発

保守・運用がんばった。2018に向けた動きはあまりできなかった。もう少し人手がかからないようにしたい。

PyCon JP 2017 スポンサー

なんとDiamondスポンサーだった。自分がめっちゃ驚いた。社内とPyCon JPとの調整とか事前準備が大変だったけど、めったにない機会を楽しめたと思う。

SQUEEZEのCore Valueの1つである『With Our Community』の考えのもと、来年も引き続きスポンサーをやっていこう。

PyCon JP 2017 にスポンサー・スタッフとして参加してきた #pyconjp - massa142's blog

PyCon JP Reject Conference 2017 開催

去年のPyCon JPが終わったあとからRejectConやるぞって話してたので、なんとか実現できてよかった。また来年もできればいいな。

PyCon JP Reject Conference 2017を開催しました #pyconjp_rc - massa142's blog

Pythonもくもく会 毎月開催

PyCon APACに行ってきたり、PyCon JPの準備で忙しかった8月は開催できなかったけど、それ以外は毎月開催できた。

自分の作業時間確保も兼ねてるけど、来年も引き続き開催してコミュニティに貢献していきたい。

PyCon APAC 2017に参加する

Silverスポンサーとして参加してきた。SQUEEZEで英語に抵抗がなくなったからか、去年のAPACよりも英語でのコミュニケーションが苦じゃなかった。参加者と色々話せるようになってより楽しめた。

来年はCfPかLT応募がんばりたい。

PyCon APAC 2017 に行ってきた #pyconapac2017 - massa142's blog

JavaScript

Okachi.js

毎月継続参加した。毎回アウトプットの場を設けてくれるので、とても自分のためになっている。Okachi.jsから書籍執筆につながっているから、この勉強会(コミュニティ)に感謝しかない。来年も盛り上げていきたい。

Angular

github.com

翻訳手伝ったりした。来年はng-japanのコミュニティにもっと参加していきたい。

あとSQUEEZEのなかのAngularJSの部分をAngularに移行していく。

新しい言語

新しく勉強する言語をRustに決めたけど、今年は結局勉強できなかった。ちょっと余裕がなかった。

Rustは2018年の目標にするぞ。

アウトプット

はてなブログ

今年は44記事だった。毎月の振り返り・読書ログ・イベント参加レポを欠かさなくなったら、思ってたよりも書いてた。

習慣化できていてよい。

Qiita

例年同様Advent Calendar駆動のアウトプットになった。

WikiHub 日報

ゆるく1年間続けてる。日報に書くようことがないと、仕事や勉強でサボってることにすぐ気付けるのでよい。

スライド

今年は登壇機会を増やそうとしていった。Okachi.jsやSQUEEZE社内でLTをやっていってるのが活きている気がする。

執筆

codezine.jp

2017年前半にあった書籍出版の話は途中でなくなっちゃったけど、後半に書籍共著2つとWeb連載1つの執筆がありがたいことに始まった。

キャパオーバーで遅れ気味になってるけど、なんとか全て完成させるぞ。

SQUEEZE

今年取り組んできたことは主にこんなところ。

  • GoでのAPIプロキシサーバ開発
  • お問い合わせフォームのserverless化
  • マイクロサービス化
  • Python3移行
  • 静的ファイルのCDN配信
  • リファクタリング
  • 品質向上
  • パフォーマンス改善
  • スクラム導入
  • CircleCI2.0導入

会社としては

  • 新規プロダクトのリリース
  • 自社ブランドのホテルオープン
  • 旅館、ホテル、簡易宿泊所の運営サポート開始
  • @laugh_kが入社

などがあった。

詳しくは2017年の振り返り - checkpointの日記に書かれてる。

来年はもっとフロントエンドの改善に取り組んでいきたい。

読書

bookmeter.com

ここにある12冊の他にも、電子書籍Angular CLIがわかる本とかWeb連載時のGoならわかるシステムプログラミングを読んだ。

ドラマ

映画

Perfume

2017年参戦記録

2017年のPerfumeを振り返る #prfm - massa142's blog

ラクロス

  • リーグ戦第1戦 vs TLC 10-4
  • リーグ戦第2戦 vs DESAFIO 7-7
  • リーグ戦第3戦 vs RAGGAMUFFINS 10-6
  • リーグ戦第4戦 vs TLC 7-2
  • リーグ戦第5戦 vs DESAFIO 9-6
  • リーグ戦第6戦 vs RAGGAMUFFINS 13-5
  • 入れ替え戦 vs VIKINGS 10-7
  • プレーオフ第1戦 vs VALENTIA 8-7
  • プレーオフ第2戦 vs Stealers 6-26
  • 全日本クラブ選手権初戦 vs OPEC 16-8
  • 全日本クラブ選手権準決戦 vs FALCONS 7-16

二部からスタートだったけど、目標としていた「一部奪還」を達成してチームとしては16年ぶりの全日本クラブ選手権にも出場できた。来年は新主将のもと、また一部で思いっきり頑張ろう。

その他

肉を料理する

Saltbaeに憧れたけど、完全にいっときのマイブームだった。 目標設定はちゃんと考えようという反省。

DJの練習はじめる

ラクロスのオフシーズンにやろうと思ってたけど、執筆で忙しくなったため断念。引き続き来年の目標に。

今年振り返ってみて

良かったこと

  • アウトプットが多かった
  • セレッソファンになった
  • 西武がさしぶりにAクラス
  • 4時までやってるけやき坂スタバを知った
  • DjangoCon mini JPに向けて始動した

悪かったこと

  • 資産管理ができてない
  • 睡眠時間を削ったせいか体調を崩しやすかった
  • 筋トレしなかった