js

TypescriptでSequelize してみる

はじめに 前回 Sequelize の一番基本的な使い方を紹介したが、typescript で記述可能ならば、以降 ts で書きたいなと思ったので、今回は typescript の環境を紹介したいと思う。 ts で記述するメリットは、型が使えることだけではなく、エディタからの候補表…

Sequelize入門

SequelizeというORMについて知識の整理のため、記録を残そうと思う。Databaseはmysqlを使用する。 今回は、 1. database作成 2. table作成 3. insert, update, delete という基本的なことの整理をしたい 1. databaseの作り方 databaseを作成するのは、sequel…

jsでオブジェクト配列をつかった集合演算

js

はじめに jsで集合演算についてしらべてみた。 調べた限り集合演算の例は[1,2,3]と[2,3,4]の積集合をもとめるといったプリミティブ値の配列が多くて、オブジェクト配列をつかった 集合演算が見つからなかったので、残して見ようと思う。 問題(特定の本の返却…

flow-typedで型情報を管理しやすくしてみた

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

Prettierについて調査

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

WebpackのdevServerを使ってもサーバと通信できるフロント開発がしたい

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

Higher Order Componentについて調査

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

React DnD tutorial翻訳してもっと理解を!!

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

React DnDの公式Overviewを訳して理解を深めたい!

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

webpackで.babelrcっているんだっけ?

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

gulpを使ってReact Electron Webpack環境にLiveReloadを!

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

babelでトランスパイル

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

jsでリファクタリングを学びたい(Nullオブジェクト編)

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

electronでキャプチャーソフトつくってみるpart2

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

electronでキャプチャーソフトつくってみるpart1

js

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

electronでReactを使うためのwebpackの設定

js

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

power-assertとmochaを使ったnodejsのテスト

js

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

expressのルーティング共通処理

js

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

Promiseでループ処理

js

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

underscore.jsを使って特定のvalueをもつkeyのみ取得する方法

js

最近jsを書いているとき、可能であれば関数型プログラミングを心がけている。 そのほうが一時的な変数を書かなくてい済ませるし、 やはり書いていて気持ちがよい笑 今回は、 underscore.jsを使ってオブジェクト内の 特定のvalueをもつkeyのみを取得する方法…