Reactのコンポーネントをステートレスに！！！recomposeとは？ ~0からreact習得記 day 09~ これまでのreact習得記は、こちらから閲覧できます。 はじめに 株式会社VRizeでインターンとして勤務しているryo_tです。 短期目標に「１ヶ月でReactのUIを開発できるように」と伝えられたので、Reactはほとんど未経験ですが一歩一歩頑張って行きます。 目的 Higher-order Componentsとrecomposeを理解してコンポーネントに状態を持たせない設計を 行える様にする。 Qiitaで検索してもrecomposeの記事は13件しか（2017年10月12日現在）なかったので、使い方を簡単にまとめてみようと思います。 用語整理 recomposeはHigher-order Componentsを作成・提供するための便利関数ライブラリです。 React

現在JavaScriptを用いて、関数型プログラミングを学ぼうと勉強中... 今回は、その第三弾 勘違いしがちな部分適用とカリー化について区別しつつ、 カリー化について理解を深めることを目標とする。 前回の記事はこちらから↓↓↓ 【JavaScript】即時関数, 無名関数, クロージャについて 【JavaScript】関数を使いこなす(高階関数, 再帰関数)

https://itunes.apple.com/jp/app/block-fm/id968269944?mt=8&at=10l8JW&ct=hatenablog block.fmというエレクトロ、ダンス系の音楽（ラジオ番組）をストリーミング再生できるアプリがあり、私はこのアプリを愛用しています。電車移動やドライブのときに大変にお世話になっています。 最近の普通のストリーミング音楽アプリと違い、ちゃんとした（？）DJやアーティストがラジオDJをしているので選曲が良く、私がファンだったり昔クラブで顔見知りになったアーティストも何人かチャンネルを置いていたり、とても好きなんですよね。ジャンルもきっちりわかれているのもよい。 block.fmはウェブサイトもあります（今は、アプリとほぼおなじUIになったな） ※いきなり音が出ます！ block.fm で、最近リニューアルしたんですよね。 jp.t

この資料のアレ。 mizchi.hatenablog.com Reducer は単なる (State, Action) => State の関数で、redux.combineReducers は複数の reducer を名前空間でマップした新しい reducer にするもの。 Rx分かる人、Redux分かる人向けに、 redux.combineReducers を実装して、Rx.Observable.scan で reducer として実際に動くコードを書いた。 const Rx = require('rx') const combineReducers = reducerMap => { const initialState = Object.entries( reducerMap ).reduce((acc, [key, reducer]) => { return Object.ass

と思う次第である。以下理由。 JavaScript, GUI設計の今 JSはそのプラットフォーム特性上、あらゆる言語の使用者の、あらゆる不満が集まる場所で、ヘイトを集めやすい環境だと思う。近年は npm というプラットフォームの登場でエコシステムが生まれ、思いつく限りあらゆるメソッドが適用されてきた。貧弱な言語基盤だが、その中で生き残った方法論が、今一番GUIの課題を上手く扱えている、と自分は考えている。 React/Redux や Angular によって、Flux/MVVMという抽象パターンが枯れてきたように思う。(この際、現場はまだ jQuery だぞ、みたいな話は無視する)。要は View は State の写像である、ということに尽きる。State はシリアライズ可能(JSON)で、Flux Action/Rx.Observable の Event Stream を入力とし、それ

「Roppongi.rb #3 で「RailsエンジニアがReactを始めてSSRとReduxを導入するまで」という発表を行いました - Bit Journey's Tech Blog」あたりの話のなかで触れている、KibelaにおけるJSのビルド環境に関係する設定ファイルなどを公開します。 現在もこのときと基本的な構成は変わっておらず、すでに数ヶ月安定して運用できています。 環境 Rails v5.1 TypeScript v2.5 webpack v3.6 Hypernova*1 webpackerは不使用で、webpack-rails*2を使用 ディレクトリ構成 client/ - フロントエンド用TSコード（.ts, .tsx,.json） spec/javascripts/* - テスト用TSコード なおプロダクション用フロントエンドコードは 100% TypeScript です

Intro テストや仮実装で、適当なランダム文字列が欲しい場合に便利なスニペット。 random string DEMO // with random btoa(Math.random()) // => MC44NzEwODQwMjA1NDA2MTE4 // with crypto btoa(crypto.getRandomValues(new Uint8Array(16))) // => MjQ2LDE0NSwxNzAsMjQ0LDY4LDg3LDMzLDE0NiwxNzcsNjAsMTUyLDE3MSwxNTAsMTcsMTA4LDEwNA== // base64 has `=` remove them btoa(Math.random()).replace(/=/g, "") // => MC45NTM0NTM2OTY3MTc5MDY0 // lower case btoa(Math

はじめに RubyKaigi 2017にてLT発表をしてきました。このエントリーは発表の概要とその他雑多な感想を記します。 タイトルをTypoしているのに全然気が付かないぐらいに緊張していた... LTの内容 LTの内容として、RubyistMagazine、通称るびまの過去資産であるhikiをMarkdownに変換する話をしました。技術的にはそんなに複雑なものではないのですが、色々なパターンが有り地味に大変でした。 今のところ、最新号までのMarkdown化までは終わり、jekyll serverで起動すればお手元の環境でるびまが動きます。 反響 LT発表中に「5,000m」というところを「5,000km」と言ってしまったことで爆笑をかっさらい、その後の懇親会等々でも色々お声がけ頂きました。狙ったわけではないんですが、いいネタになったようで怪我の功名といったところでしょうか。 また、「る

なんども繰り返される話でうんざりなんだけど、繰り返されるたびに反論するのもアレなので、URL貼れるように記事にしておく。 Goが頑なにジェネリクスいらないというだけ他の言語勢から失笑買ってるというのは自覚して— {{alert()}} (@mizchi) 2017年9月19日 頑なに要らないと言ってる人が具体的にどの発言のことを差してるのか分からないけど、コア開発者たちはツールチェインやランタイムの進化を優先していただけで頑なに拒否してたりはしません。今はツールチェインやランタイムが大分進化したから、Goの適用範囲を広げるためにジェネリクスを含めて機能追加も検討し始めようかっていうフェーズです。 あとどの言語にもちょっと公平的な見方ができなくなった痛いファンはいるもので、そういった人たちをいちいちあげつらってこういう言い方で失笑するのは、別に止めはしないけど自分の格を下げるだけだと思う。

あるいは私がDefinitelyTyped (DT) が失敗だと思っている理由、です。 DefinitelyTypedは明確に失敗だと思っているので、あれを避けるのはそんなに難しくないかなと。まず (1) anyを認めて「型がなくてもいいや」という気持ちでいく (2) 中央repoは作らずそれぞれのgemに対して型定義パッチをおくりつける でなんとかなるっしょ。— FUJI Goro (@__gfx__) September 19, 2017 あたりが話の発端です。 DTについては以前いまいちイケてない理由を書いたことがあります。 TypeScriptのDefinitelyTypedは「ダメでもともと、うまく使えればラッキー」くらいの距離感がよい - Islands in the byte stream この時の話を一言でまとめると「ライブラリの作者ではない第三者がメンテしていることが多く

2017年9月18日にWorld Wide Web Consortium(W3C)がウェブでのムービーコンテンツ再生の著作権保護を実現するAPI「Encrypted Media Extensions(EME)」を勧告し標準化することを正式に決定しました。EMEの導入にあたっては反対意見があり議論が紛糾していましたが、EMEに正式なゴーサインが出たことになります。しかし、EME導入に反対していた電子フロンティア財団(EFF)は、オープンな議論がされていないと痛烈に批判して、W3Cから脱退しました。 An open letter to the W3C Director, CEO, team and membership | Electronic Frontier Foundation https://www.eff.org/deeplinks/2017/09/open-letter-w3c-d

I am starting this issue in light of the recent announcement of dropping ReactJS support by Matt. Since I believe the community is moving in the right direction here — this issue is where one could share their thoughts about different JavaScript Frameworks for Gutenberg (that goes into the WordPress Core). 🛳 JavaScript Frameworks! IMHO there are two prominent contenders here. VueJS Preact Other o

Today, we are excited to announce the 1.0 release of the Yarn JavaScript package manager, a major step for the project. In the 11 months since its initial release, Yarn has generated a large following. Currently, there are more than 175,000 projects on GitHub with a yarn.lock file in their root directory. In use by many large and small companies, and across the open source community, Yarn is now r

今年GitHubがGraphQL APIを正式公開したあたりから、GraphQLが去年とかに比べちょっと流行り始めたように感じる。idobataがGraphQL APIを公開したり、Kibelaも公開APIをGraphQLで作ることを宣言している。 利用者側からすると使えるインターフェースの中から必要なものを調べて使うだけなのであまり考えることはないのだが、自分がAPIを提供する立場になると話は変わってくる。REST APIとGraphQL APIはどちらかがもう一方のスーパーセットという風にはなっておらず、どちらかを選択すると何かを捨てることになるので、要件に応じてどちらを選ぶのが総合的に幸せなのか考える必要がある。 以前趣味でGitHub連携のあるサービスを作っており、それを最近GraphQL API v4を使うように移行し、そこでついでにそのサービスのGraphQL APIを書いてみ

Twitterでちらっと見かけたので、自分も良い点と悪い点をまとめてみようと思う。 良い点 電車に乗らなくて良い ミーティング開始の5分前まで寝てられる 人の話し声がしない 話しかけられずに済む 疲れたらいつでもベッドにダイブできる ちゃんとアウトプットしてれば、仕事している様に見せなくてもいい 寝間着で仕事ができる ハイスペックなPCが使える WiFiが不安定みたいなトラブルが少ない 良い椅子が使える ヘッドホン無しで音楽が聞ける いきなり歌い出しても、誰も変な目で見ないし、迷惑がかからない 基本的に引き篭りなので、自宅の環境が快適になる様に腐心した結果、大抵のオフィスより自宅の方が執務環境として優秀であり、自宅より仕事に関する物の水準が高い会社というのをほぼ見たことがない。 そして、日常生活において、歌うというのが精神の健康上とても大事なので、音楽を聞きながら突然歌い出したりしたいのだ

小ネタ。 JavaScript の [1,2,3].map(a => a + 1) が、 Elm だと [1,2,3] |> List.map (\a -> a + 1) で、両方とも左から右に読めるからそんなに変わらないなーと思ってたんだけど、一つ違う点に気づいた。JavaScript で Promise を気持ちよく連鎖してて書いてて、いざ並列実行しようとなった時に const promises = [1,2,3].map(a => a + 1).map(toPromise) Promise.all(promises) のように少し回りくどくなり、なぜ promises.all() と書けないのかと考えたら「配列にメソッドを追加するのが微妙だから」と気づいた（prototype 拡張で不可能ではない）。一般的に言うと既存の型に何か関数を追加できない。 Elm のパイプを使う場合、その制

(注：2017/08/30、いただいたフィードバックを元に翻訳を修正いたしました。) TL;DR — AngularJSのアイデアは、2012年には妥当と言えましたが、2017年においてはそうとは言えなくなっています。JSのエコシステムは、成熟度、柔軟性、および生産性の面で、あっという間にAngularの前を通り過ぎてしまいました。現在では、webpackやフロントエンドのNPM、成熟したツールとライブラリのエコシステムを背景として、 大型チームを有する企業であっても、 ReactやVueなどの軽量なJSライブラリを使用することで、大規模で柔軟性のあるSPAを、適切な設計で維持することが容易になっています。 加えて、Angular 2/4の問題が散見された3年の開発期間や議論の余地があるアーキテクチャの決定方針が、多くの企業にこの新しいフレームワークの採用を躊躇させているようです。 201

Mozilla JapanはなぜWebDINOに？瀧田佐登子さんに聞くMozilla・オープンソースコミュニティ、そしてWebの未来 白石 俊平（HTML5 Experts.jp編集長） 編集長の白石です。 Web技術者であれば一度はその名を耳にしたことがあるであろうMozilla Japanが「WebDINO」と名前を変えた（プレスリリースへのリンク）ことを受け、WebDINOの代表である瀧田 佐登子さんにいろいろと話を伺ってきました。 瀧田さんはWikipediaにも紹介ページがあるように、日本のWebシーンを裏で支え続けていた立役者。90年代の第一次ブラウザ戦争時代にはNetscapeの開発者として活躍し、その後Mozilla Japanを設立して、Mozillaコミュニティを日本に根付かせた方でもあります。 本記事では、WebDINOへの名称変更の裏側のみならず、Netscape時