flowで型を導入後、毎回importするのが面倒だなと感じるようになってきた。 flow-typedをつかえば型情報をグローバルに定義できるようなので、これでimport文書く手間をカットしたり型情報をうまく管理できるのでは... ということで今回は、flow-typedをつか…

最近エディタをsublimeからvscodeに変更しました。 その中でPrettierも適用することになったので、こいつのことを理解しようとおもうようになりました。 はじめはimport内のタブサイズが4になってたりと思うどおりに動かなくて断念かと思ったが、再インスト…

はじめに 自分はReactやReduxを使ってWebアプリを開発するときにWebpackのdevServerにお世話になる。devServerを使えば、ソース変更時に自動でブラウザをリロードしてくれて便利だからである。 しかし、devServerを使った場合、localhostで動かしてるwebサー…

はじめに Higher Order Componentについて学習。 atomic Designと呼ばれるものを実現するよい手法なのだろうと感じ、 使い方を少し学ぼうと思ったので、その記録を。。。 ゴール MyButtonを拡張して、MyCustomButtonコンポーネントをつくる。 ポイントは、st…

はじめに React DnDは、Reactアプリでドラッグ&ドロップを楽に実装できるライブラリである。 React DnDのOverviewの翻訳を前回記述した。 そこで、Overviewを呼んだだけでは実装イメージがつかめなく、使い方がわからないということを指摘をした。 なので、…

React環境で、ドラッグ＆ドロップ操作をどうやって扱えばよいのだろうかと思ってると、 React DnDというライブラリを見つけた。便利そうではあるが、いくつかのブログを見てもよくわからないし、DecoratorやHigher Order Componentの考え方も登場し正直難し…

他人のwebpackの設定をみてると人によっては.babelrcがあったりなかったりする。 どっちが正解なんだと思うことがあったが、別にbabelrcがあってもなくてもよい。 webpack.config.jsでbabelの設定するか、babelrcで設定するかの違いということがわかったので…

electron開発してると、毎回トランスパイルして起動というのが面倒だなと思ってくる。 webpackのHot Module Replacementを使えばもっと早くできるようだが、僕には理解できなかった。 だがしかし、gulpを使えばそれなりに実現できる！！ とわかり挑戦してみ…

今回はいつも以上に基本的なこと。 webpackを使って複数のjsを単一ファイルにトランスパイルしてきたが、トランスパイルはbabelの仕事。 だからbabel単体を利用して、トランスパイルするにはどんな環境構築作業が必要なのかを備忘録として残しておく。 ただ…

リファクタリングについて学びたく、「Java言語で学ぶリファクタリング」を読んでる。タイトル通り、Javaで記述されているが、js(ES6) + flowで書いてみて、リファクタリングの技術とflowの理解を深めようと思う. 今回取り上げるリファクタリング内容は、4章…

キャプチャーソフトを作成中に、録画経過時間を表示する機能が必要になった。フラグのON/OFFでタイマーの開始・リセット出来るならば、他のアプリにも活かせるかもと思い、タイマーコンポーネントを作ってみた。 要件 タイマーつくる propsであるisRecordを…

electronに最近はまってます(笑)。キャプチャーソフトも作れるということなので、 reactとmaterial-uiを練習かねて、つくりました。 electronのキャプチャー機能と動画保存機能を実装してみたかっただけなので、 ものすごく単純です。この調子で仕上げていき…

はじめに mochaでテスト実行するときに、flowの記述が残されたままだとテストできない。 だから、前までは前処理としてflowの記述を取り除いたフォルダを作成し、 そのディレクトリに対してテストを実行させていた。 しかし、余計なフォルダを作成させずにmo…

はじめに electron。javascriptでデスクトップアプリケーションを作れるフレームワーク。 使ってみたかったけど、なかなかよい作りたいものも思いつかずsample demo appで遊ぶくらいでした。 最近ちょっと良いアイデアも思いついたので、思い切ってelectron…

そんなにプログラミングするわけではないが、 javascriptは本当に色々変更が激しいなと最近感じてる。 今回は、eslintとflowを使って静的検証が行える環境構築手順を残そう。 eslintを実行させると、flowのチェックと結果を取得できるようにする 目次 eslint…

以前Promiseを使ったループ処理について記述したが、これは再帰関数を利用していた。 普段扱いなれているfor文でループ処理はかけるのかなと感じていたが、 どうやらasync/awaitを使えばできることがわかったので、残しておく。 jQueryの$.ajaxからPromiseへ…

今日は確率について。僕は数学は割と好きな方だったけど、確率にはあまりよい思い出はない。久しぶりに確率の勉強をしていて、気にかかることに出会ったし、数式使ってみたかったのでブログに載せようと思う。 プログラミングのための確率統計1第2章の冒頭に…

昨年decodeではじめて和田卓人さんの講演を聞いて、テスト駆動開発というものを知りとても興味が湧いた。テスト環境づくりは多くのサイトで紹介されているのだけど、自分の備忘録として環境構築手順を残しておこうと思う。もちろんアサーションツールには、p…

nodejsでHTTPサーバーを立てるときに利用するexpress。 色々なルーティングを記述していくと、いずれのルーティングでも共通処理を噛ませたいという気持ちになる。 共通処理というのは、セッションが切れていたときにログイン画面に戻す処理のことで、今まで…

背景 昨年度年末に引っ越しをしたときに、ダンボールの数が20個近くになったのだが、 そのうち5箱が本だった。また多いだけではなく、重いので運ぶのも大変だった。 これからも本は増えていくだろうと考えると次なる引っ越しもつらいと思い、 所有している全…

javascriptで通信処理を記述するときに使用するPromiseオブジェクト。 だいぶ慣れてきたが、ループ処理についてはよくわからず立ち止まってしまったので解決を考えてみたいと思う。 満たしたい要件 ループ内の処理はPromiseを返却する ループ回数を指定でき…