massa142's blog

くり返す このポリリズム

「JavaScriptで学ぶ関数型プログラミング」を読んだ

JavaScriptで学ぶ関数型プログラミング

JavaScriptで学ぶ関数型プログラミング

動機

感想

関数型プログラミングのエッセンスを改めて本で学べてよかった。あとはUnderscore.jsを使って解説が進んでいくので、Underscore.jsについてかなり詳しくなれる笑。

ES5しかりUnderscore.jsしかり、2018年のJavaScriptでは必須ではない要素が多いのも事実だけど、関数型の考えとテクニックをわかりやすいコードで体験できるとても良い本だった。

この次は、「付録 A 世の中の関数型JavaScript」でも紹介されているElmを触ってみたくなった。Introduction · Elm Tutorial を今度やってみようと思う。

読書メモ

1章 関数型JavaScriptへのいざない

関数型プログラミングとは、値を抽象の単位に変換する関数を使用して行うプログラミングであり、それらを使ってソフトウェアシステムを構築することである。

  • 関数型のアプローチ: 人間に関するデータの取り扱いに理想的
  • オブジェクト指向のアプローチ: 人間をシミュレートする場合に最適

2章 第一級関数と作用的プログラミング

JavaScriptが第一級関数をサポートしているという事実が、関数型プログラミングの実践を後押しします。

3章 JavaScriptにおける変数のスコープとクロージャ

  • 関数スコープをシミュレートすることで、thisについての理解が深まる
function strangerIdentity(n) {
  // intentionally stranger still
  for(this['i'] = 0; this['i']<n; this['i']++);
  return this['i'];
}

strangerIdentity(108);
//=> 108

i;
//=> 108
// グローバル変数を汚染している

strangerIdentity.call({}, 10000);
//=> 10000

i;
//=> 108
// グローバル変数への汚染は防げたが、このままだとグローバル変数にアクセスできない

function f() {
  this['a'] = 200;
  return this['a'] + this['b'];
}

var globals = {'b': 2};

f.call(_.clone(globals));
//=> 202

globals;
//=> {'b': 2}

クロージャを一言で表すと、自身が定義されたスコープに存在する外部のバインディングを、そのスコープの実行完了後にも使用するために確保している関数のことです。

  • 次はクロージャをシミュレートしてみよう
    • 外側の関数で定義された変数を個別に確保しておき、その変数を、返す関数のthisにバインドする
function createWeirdScaleFunction(FACTOR) {
  return function(v) {
    this['FACTOR'] = FACTOR;
    var captures = this;

    return _.map(v, _.bind(function(n) {
      return (n * this['FACTOR']);
    }, captures));
  };
}

var scale10 = createWeirdScaleFunction(10);

scale10.call({}, [5, 6, 7])
//=> [50, 60, 70];

4章 高階関数

  • 高階関数の定義
    • 第一級データ型である
    • 引数として関数をとる
    • 関数を戻り値として返す
  • 値ではあく、関数を使え
    • どのような引数が渡されても常に定数を返す関数を使用する
  • 関数型スタイルでは実行ターゲットとなるオブジェクトを引数に取る関数を好む
  • 高階関数に渡す引数は返される関数の「設定項目」であると考えてみるとよい

5章 関数を組み立てる関数

  • カリー化
  • カリー化された関数は、論理定な引数が1つ渡されるたびに新しい関数を返す関数
  • 右から左へカリー化することでオプションの引数の個数を固定できるのでオススメ
  • カリー化された関数を使用することによって、「流暢な」インターフェイスを持った関数を生成できる
  • Haskellでは、関数はデフォルトでカリー化されている
  • 部分適用
    • カリー化とは異なり、引数の数は必ずしも一つではなく、複数の引数を扱うこともできる
  • JavaScriptにおいて、関数が可変長の引数を取ることにより複雑化されてしまうカリー化とは異なり、任意の数の引数の部分適用は関数合成の戦略として合理的と言える

6章 再帰

7章 純粋性、不変性、変更ポリシー

  • 関数型プログラミングは、ソフトウェアの創造プロセスにまとわりつく複雑さを最小限に抑えるための構築方法を考える手段
  • 純粋関数
    • 関数自身がコントロールできる範囲外にあるどの変数も変更せず、返さず、そして依存しない
  • Ref: Immutable.js

8章 フローベースプログラミング

  • チェーン
    • 共通の参照をもつメソッドを連続して呼ぶ
      • _.chain()
      • Promise
  • パイプライン
    • 期待されるデータ値が入力されると、非破壊的変換を行い、そして新しいデータを返す
  • アクション
    • 異なる型の戻り値をもったさまざまな関数を合成するテクニック
    • 内部のデータ構造の管理詳細を隠蔽
    • Reduxのactionにも通じる?

9章 クラスを使わないプログラミング

  • Mixin
    • mixinで定義したすべてのメソッドをプロトタイプにコピー
_.extend(Hole.prototype
    , HoleMixin
    , ValidateMixin
    , ObseerverMixin);
  • mixinベースのプログラミングを行うよりも、まずはプリミティブや配列オブジェクトなどのシンプルなデータ型を試みることをお勧め

builderscon tokyo 2018 に行ってきた #builderscon

はじめに

2018/9/6~201/9/8 に開催された builderscon tokyo 2018 の参加メモです。

builderscon.io

参加経緯

今回はスポンサーとして参加しました。 Pythonエンジニア・コミュニティではないところでも、SQUEEZEのことを知ってもらいたい & 多くの人と交流したいと思って今回スポンサーしました。

スポンサー特典で、インタビュー記事も書いてもらいました。取材してくださった @chocopie116さん @uzullaさん、ありがとうございました!

lantern.builderscon.io

この辺りについては、会社のMediumでまた改めて書く予定です。

参加日程

9/7・8の2日間とも、朝用事があってお昼からの参加。

前夜祭・カンファレンスディナーなどは、こちらも都合があわず残念ながら不参加。

全体を通しての感想

  • スタッフが楽しんでやっているのが伝わってきて、とても気持ちよかった
  • 前夜祭やディナーに来年はぜひとも参加したい
  • 多目的教室1~3は狭くてすぐ満員になっちゃうという不満も聞こえたけど、せっかくなんだからゲストスピーカーや英語トーク聞いたほうがいいのにねという話をスタッフの@yutailang0119とした
    • そういう自分もそこまで英語トークは聞いてはいないのだけど
  • 「知らなかった、を聞こう」というテーマが個人的にとてもよかった
    • どれ聞くか迷った時には、後からスライド読んだらわかりそうなものより自分が詳しくないほうを聞きに行こうという気持ちになれた

聞いたトーク

Algorithms in React

Webサービスにて200週連続で新機能をリリースする舞台裏

  • Mackerelの開発フローについて
  • 週次担当制やあるエンジニアの1週間の様子など、現場の雰囲気が知れてためになった
  • 来週のリリースネタないからリリースしないでおこうという「作り置き」には笑えた

ボクが考える i18n の未来

  • i18nの現状と問題点、それから@kazu_ponさんが考える未来のi18nフレームワークについて
  • 単純な翻訳だけでなく、法律や文化などを考慮するとi18nの現実は厳しい
  • i18nについての記事を色々紹介してもらえて、勉強になった
  • i18nの現実はつらいよなっていうのをみんなで再認識したトークだったと思う

airflowを用いて、複雑大規模なジョブフロー管理に立ち向かう

  • cronの依存関係や、ワークフローの多段化という問題を解決しようというお話
  • airflowについては去年あたりからよく聞くし、Python界隈では広く採用されているように思う

安全なランダムネスの理論と実践

ブロックチェーン(DApp)で作る世界を変える分散型ゲームの世界

ランチセッション (株式会社VOYAGE GROUP)

  • https://ajito.fm/ 堪能した
  • 最近なにかと話題のエンジニアの教育について
  • 「頑張らないReact」については、それVue.jsでよくない?と感じた

なぜエンジニアはパフォーマンス計測しないのか

  • 今回のmy best talk
  • 釣りタイトルからして最高だった
  • 体重増・猫背・頭痛・肩こりに最近悩んでいたので、健康への意識がかなり高まった
  • ガジェットをどんどん購入させようとする悪魔的トーク
  • 以下を勢いで購入してしまった
  • ErgoDox EZもめちゃくちゃ欲しくなった
  • https://www.myfitnesspal.com/jaでカロリーログもはじめた
  • 計測はじめてどう変化があったかを今度まとめたい

Using Chrome Developer Tools to hack your way into concerts

  • developer toolを使ってハッキングやっちゃったよーというお話
  • もっとゴリゴリにdevtool使いこなすのかと思ってたいたけど、紹介していたのは基本的な機能だけだった
  • スピーカーの@amyngynがお茶目で、聞いていて楽しい発表だった

Extending Kubernetes with Custom Resources and Operator Frameworks

  • そーだいさんのを聞きにくか迷ったけど、「知らなかった、を聞こう」と思いこちらを聞きに行った
  • ただ結局「なるほどよくわからん」という感じ
  • k8sのことを深くは理解してなかったので、同通レシーバーで聞くべきだったと反省
  • 危機感を感じられたのでよし!としたい

Lightning Talks

  • みんなお祭り感があって、とても楽しかった
  • https://nedi.app/ は実装が進んでて、「おーーーかっこいい!」と思った

おわりに

buidlersconは初めての参加でしたが、めちゃくちゃ楽しめました!

スタッフ・スピーカー・スポンサーの皆様、絡んでくれた参加者の皆様、本当にありがとうございました!!

f:id:massa142:20180910142854j:plain

「Atomic Design ~堅牢で使いやすいUIを効率良く設計する」を読んだ

Atomic Design ~堅牢で使いやすいUIを効率良く設計する

Atomic Design ~堅牢で使いやすいUIを効率良く設計する

動機

  • デザイン・UIについての知識を広げたい
  • SQUEEZEのフロントエンド開発にAtomic Designを取り入れたい
  • @iktakahiro がこの本を持っていたので借してもらった

感想

UIを、化学の原子に見立てて設計する、Atomic Designの考え方・具体的な手順からReactを使った実装まで、UI設計の本質とともに1冊で解説。インターネットテレビ「AbemaTV」のUI設計を担当した著者が、現場実践をふまえて伝授する。

Atomic Designの概念とStorybookを使った開発フローについて、内容がよくまとまっていてざっと学ぶことができた。

おそらく筆者は「現場で使える」ということにこだわっており、具体的なコードをもとにした解説や色々なテストの書き方が紹介されている。それが本書籍の魅力の1つでもあるが、一方Reactに関する説明の比重が高くなってるなーという印象も受けた。

この書籍のなかでは紹介されていないが、TemplatesとPagesという概念がSPAにはそぐわないという意見も多く、Atomic Design から派生しSPAのために設計された Atomic Components というものもある。

Atomic Designはあくまでデザインにおける設計粒度であり、Reduxのような状態管理を考慮する必要があるコンポーネント指向開発では、このAtomic Componentsの考えを参考にするとよさそう。

Ref: A brief look at Atomic Components – Joey Di Nardo – Medium

読書メモ

第3章 Atomic DesignによるUIコンポーネント設計

化学用語のAtoms、Molecules、Organismsというコンポーネントの概念は開発者だけが認識していればよいものであり、一般的な用語のTemplatesとPagesについては、開発者以外の経営者やクライアントと話す際にも説明する必要がある概念だという意味が込められています。


Brad Frost氏によるAtomic Designの説明では、残念ながら、詳細なUIコンポーネントの分割基準は示されていません。かんたんな分類方針が示されているだけです。そのため、5つの層のうちどのUIコンポーネントをどの層に分類すればよいか、具体的な基準は自分たちで決める必要があります。

Atoms(原子)

  • 「それ以上UIとしての機能性を破壊しない最小要素」
  • 適用箇所
    • プラットフォームのデフォルトUI
    • プラットフォームのデファクト・スタンダードなUI
    • レイアウト・パターン
    • セマンティックなデザイン要素

Molecules(分子)

Molecules層のコンポーネントでは、何のために「ボタンをクリックする」のか、何のために「テキストを入力する」のか、機能を組み合わせてユーザーの具体的な動機に応える機能の単位でUIをコンポーネント化します。

Organisms(有機体)

Moleculesはユーザーの関心事に対して機能を提供しましたが、Organisms層はコンポーネントで完結するコンテンツを提供します。

* Molecules: 独立して存在できるコンポーネントではなく、ほかのコンポーネントの機能を助けるヘルパーとしての存在意義が強いコンポーネント
* Organisms: 独立して独立できるスタンドアローンなコンポーネント

Ref: Atomic Design の理解 : molecules と organisms をどのように分割するか - Frasco

我々が学んだことのひとつは、モジュールがどのグループに属するかを決めるに当たっては、より柔軟であるべきということです。討論でチーム全体を巻き込むよりは、新しいモジュールを導入するデザイナーや開発者が、molecules もしくは organisms のどちらになるのか最終的に決めるべきです。残りのメンバーは、強くそして事実に基づいた異議がなければ、その決定を受け入れるべきです。

Templates(テンプレート)

Templates層の目的は、コンポーネントがページ上で正しくレイアウトされるかを確認することです。

  • コンテンツとプロダクトのUI機能を分離するためのレイヤー

Pages(ページ)

Templates層のコンポーネントに実際のコンテンツを流し込んだものがPageです。

  • 実際のコンテンツに影響されるため、カプセル化も再利用もされない
  • Templatesを介してコンテンツやルーティングをコンポーネントに接続させる

第4章 UIコンポーネント設計の実践

第5章 UIコンポーネントのテスト

あわせて読みたい

2018年8月の振り返り

仕事

アウトプット

ブログ

イベント

音楽

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

ラクロス

  • vs FALCONS 7-15 lose
  • vs STEALERS 6-10 lose
  • vs FALCONS 8-11 lose

目標と成果

  1. Django本執筆
    • 再リスケとなったので仕切り直してがんばろう
  2. △ Web連載第4回執筆
  3. △ PyCon JP 2018 スタッフ業務
  4. △ PyCon JP 2018 発表準備
  5. ○ リーグ戦に向けて体を絞る
    • 絞れてきているので継続する
  6. 積読本消化
    • JavaScriptで学ぶ関数型プログラミング
    • 「エンジニアの知的生産術」
    • 「Atomic Design ~堅牢で使いやすいUIを効率良く設計する」
    • 読んだので感想ブログ書こう
  7. ○ 日報を書く習慣を戻す

9月に向けて

  • builderscon tokyo 2018
    • スポンサーとしての参加なので単純に楽しむ
  • PyCon JP 2018
    • スポンサー・スピーカー・スタッフとして参加
    • すべてのポジションを全うして楽しもう
  • Perfume 7th Tour 2018 「FUTURE POP」 参戦!
  • PyCamp講師練習会
  • 9/27 西武 vs ソフトバンク
    • 10年ぶりの優勝をなんとか!
  • フロントエンドのモダン化

2018年6月7月の振り返り

前置き

7月は忙しすぎて振り返りを書く余裕なかったので、今回は2ヶ月分まとめて。

仕事

  • TypeScriptアップグレード
  • Airbnb Official連携機能リリース
  • 不動産オーナー向け機能リリース
  • システム移行実施

アウトプット

ブログ

寄稿

イベント

音楽

初恋

初恋

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

バチェラー・ジャパン シーズン2

ラクロス

  • vs VALENTIA 12-4 win

age++

29歳になりました。

目標と成果

  1. × Django本執筆
    • 遅れてしまっていて申し訳ない 🙇
    • 今週MTGでスケジュールの再確認をする予定
  2. ○ Web連載第3回執筆
  3. ◯ 副業案件
  4. x PyCon JP 2018 webサイト構築
  5. x PyCamp講師練習会
    • 9/26に改めて企画
  6. △ RxJSの勉強
  7. ◎ PyCon JP 2018 CfP提出
    • Pythonで解く大学入試数学」が採択された 🎉
  8. ○ リーグ戦に向けて体を絞る
    • 引き続き皇居ランがんばろう
  9. × 積読本消化

8月に向けて

  • Django本執筆
  • Web連載第4回執筆
  • PyCon JP 2018 スタッフ業務
  • PyCon JP 2018 発表準備
  • リーグ戦に向けて体を絞る
  • 積読本消化
  • 日報を書く習慣を戻す

2018年5月の振り返り

仕事

  • 手間いらずとの繋ぎこみ
  • 在庫管理機能
  • Listingに関する新規UI作成
  • pre-commit導入
  • django-rest-framework-jwt導入
  • Djangoテスト高速化
  • TypeScriptのコンパイル・オプション厳格化
    • "strict": true
    • "noImplicitReturns": true
    • "noUnusedLocals": true
    • "noUnusedParameters": true
  • TypeScriptアップグレード

アウトプット

ブログ

スライド

書籍

イベント

音楽

目標と成果

  1. × Django本執筆
  2. x Web連載第3回執筆
  3. x 副業案件
  4. x PyCon JP 2018 webサイト構築
  5. = PyCon Kyushu CfP提出
    • PyCon Kyushuは都合がつかずに不参加
  6. x PyCamp講師練習会
  7. ◎ DjangoCongress JP
  8. ◎ PyCon APAC 2018
    • 参加ブログ書こう
  9. x RxJSの勉強
  10. ◎ “Perfumeとあなた”ホールトゥワー in 大阪 楽しむ

全般的に業務とDjangoCongressの準備で忙しくて、他をやる余裕が全然なかった。
諸々に迷惑をかけてしまっているので、反省して今月は挽回したい。

6月に向けて

  • Django本執筆
  • Web連載第3回執筆
  • 副業案件
  • PyCon JP 2018 webサイト構築
  • PyCamp講師練習会
  • RxJSの勉強
  • PyCon JP 2018 CfP提出
  • リーグ戦に向けて体を絞る
  • 積読本消化

DjangoCongress JP 2018 にスタッフ・スピーカーとして参加してきた #djangocongress

はじめに

2018/5/19 に開催された DjangoCongress JP 2018 Day1 にスタッフ兼スピーカーとして参加してきました。

DjangoCongress JP 2018って?

djangocongress.jp

DjangoCongress JPは日本で開催されるDjango Webフレームワークのカンファレンスです。 DjangoCongress JPは、Djangoでアプリケーションを開発している人、Djangoを学んでいる人などDjangoに関わる全ての人が参加できます。 参加する全ての人がDjangoについて交流し、出会い、学び、楽しみ、深い理解を得ることを目的にしています。

すでにあるまとめとか

スタッフとしての感想

代表の @hirokiky がブログでも書いてあるけど、

  • 「最小でイベントを作ること」「5年続く1年目になること」というビジョンを共有して、やらないことを明確にした

のがとてもよかったと思う。

DjangoCongress JP 2018ってイベントを開催した話 - Make組ブログ

  • スタッフが燃え尽きなかった
  • 当日の仕事も少ないから、スタッフが発表を聞くことができた
  • 動画配信がないので、みんなが会場でのその瞬間に集中していた
  • 規模を抑えたので知り合いにはすぐ気づけるし、みんなの顔が見えるあたたかいイベントにできた

自分は会場・受付を主に担当してたけど、会場提供してくださったサイボウズさんの施設・運営・おもてなしが素晴らしくてとても助かりました。本当にありがとうございます!

あと個人的には @jbking が作った「Djangoの使用状況 アンケート結果」が美しくてとても好き。

このアンケート結果はwebからでも見れるよ 。

スピーカーとしての感想

slideship.com

Django REST frameworkの機能をいくつか取り上げて、

  • 基本的な解説
  • 実際に使ううえでのつらみ
  • 解決策

という流れで発表しました。

当日の質疑応答で多くの質問をもらえたり、Twitterやブログにも反応を書いてくださってみなさんありがとうございました。

そういった反応を見ると

  • Django REST frameworkは幅広く使われている
  • けど話す場がなくて、各々悩みながら使っている

ということを感じました。

スライドでは「つらみ => サードパーティで解決」という流れが多くなってしまったのが若干心残りでした。質疑応答ではみんながどういったところで悩んでいるか色々聞けたので、次回DRFについて話す機会があれば普段心がけている設計についてなどももっと話したいなあと思ってます。

全体を通しての感想

f:id:massa142:20180526170452j:plain

  • めちゃくちゃ楽しかった!!!
  • Day2のスプリントは力尽きてた
  • Djangoコミュニティの結束が強まったと思う
  • チケットが1日で売り切れてすごかった(小並感)
  • Twitterハッシュタグが盛り上がってて面白かった
  • GeoDjangoとかパスワードハッシュなどDjangoCongressならではのニッチな発表があってよかった
  • 今年の雰囲気を大事にして来年もぜひ開催したい