競技プログラミングの回答メモ。 実際の問題はちょっと違うけど、エッセンスは同じです。 abc013.contest.atcoder.jp 問題 まず、２つの数値が与えられる。それぞれの数値は、時計の長針と短針の位置を指し示す。ここから、２つの針の最短距離を求めよ。 ※ …

前回までは、Elm-architecturの基本について学びました。 chuckwebtips.hatenablog.com 今回はちょっとだけ自分で手を動かしてみます。 トリプルカウンター 作成するのは３つのカウンターです。とはいえ、前回２つのカウンターを作ったのでホントにカンタン…

前回に引き続き、Elm-architectureの例を消化していきます。 chuckwebtips.hatenablog.com 例２ ペアカウンター 前回は単一のカウンターを作成しましたが、今回はペアのカウンターを作成していきます。 github.com カウンターが２つということは、カウンター…

前回まではElm入門と題して、Elmの基本について学びました。 chuckwebtips.hatenablog.com 今回からは、Elmの重要概念となるElm architectureについて学びます。 ここからの学習は、以下のレポジトリに沿って行います。 github.com Elm-architectureとは Elm…

引き続き、Elmの入門記事です。 前回は恒例のHello Worldをしました。 chuckwebtips.hatenablog.com 今回はスタートガイドの残りの部分を消化しつつ、新しいことを学びます。 スタートガイド elm-repl REPLってなんか聞いたことがありますね。 ”値や関数に直…

文字列から特定の文字を消す方法について。 String#deleteを使えばいいわけですね。 ruby-doc.org ただ、引数がややこしかったのでメモ。 参考になったポスト↓ qiita.com gistc156aecd5aa77d629579 引数には、範囲指定や”以外”指定ができるんですね。

前回は、Elmという言語について簡単に学びました。 chuckwebtips.hatenablog.com 今回は、Elmをインストールして実際に書いてみます。 インストール インストールします。 公式：http://elm-lang.org/install Mac用のinstallerをクリック。 エディタ用にシン…

今日から何回かに分けて、Elmに入門してみます。 AltJSの一種で、関数型リアクティブプログラミングであるElm。非常に楽しみです。 Elmとはなんなのか 1. HTML/CSS/JSにコンパイルされる AltJSの一種ということで、HTML/CSS/JSにコンパイルされるようです。…

Reduxのお勉強。いよいよ大詰めです。 前回は、コンテナコンポーネントで作成したpropsを、プレゼンテーションコンポーネントで利用するように追記をしました。 chuckwebtips.hatenablog.com 今回はその中でも、ページ送りのクリックイベントについて見てい…

引き続きReduxの勉強です。 前回はreducerを書いたので、Reduxに必要な部品は全てそろいました。 chuckwebtips.hatenablog.com 今回は、コンテナコンポーネントでpropsに変換したstateや関数を、プレゼンテーションコンポーネントに組み込んでいきます。 Pag…

Reduxのお勉強です。 前回はactionと、コンテナコンポーネントを作成しました。 chuckwebtips.hatenablog.com 今回は、reducerという、stateとactionを受け取ってstateを更新する処理を書きます。 qiita.com 起点となるReducerの作成 まずは全てのreducerの…

引続きReduxのお勉強です。 前回は、ちょっと脇道に逸れて、Webpackとスタイルについて書きました。 chuckwebtips.hatenablog.com 今回こそ、Reduxのactionを書きます。 Stateの設定 そもそも、actionを決めるにはStateを決める必要があります。 ひとまず、…

引き続き、Reduxのお勉強です。 chuckwebtips.hatenablog.com 今回はようやくReduxに触れます。ひとまずactionを書こうと思います。 CSS in JS with Webpack actionの前に、ちょっとだけスタイルを書きます。 今回は、HTMLではなく、JS内にスタイルを持って…

Reduxをもっと頭に定着させるため、今一度チュートリアルを写経しました。 ちなみに前回は写経したはいいものの、Webpackでのビルドが通りませんでした。 chuckwebtips.hatenablog.com 結論から言うと、bebel-preset-reactというパッケージが足りていません…

Reduxのお勉強の４日目です。と言っても、まだまだReactの復習でしかありませんが。 前回は、AppコンポーネントにひもづくSlideコンポーネントとPageコンポーネントを作成しました。 chuckwebtips.hatenablog.com 今回はスライドのデータを用意して、Pageが…

Reduxのお勉強です。 前回はすべての親要素となるAppコンポーネントを作成しました。 chuckwebtips.hatenablog.com 今回は子要素を作成したいと思います。 今回作成するものはスライドです。スライドなので、各々のページと、それを格納するスライドの親子コ…

Redux練習記録です。 前回は基本的なセットアップを行いました。 chuckwebtips.hatenablog.com 今回からは実際にReactを書いていきます。 Reactの基本となる、コンポーネントを作成します。 コンポーネントディレクトリ Reduxを利用する場合のコンポーネント…

前回までで、Reduxチュートリアルの写経が終わりました。 chuckwebtips.hatenablog.com でも、やっぱりまだ分かってなくて、というか実はReactだってまだまだ書けなくて、まとめて理解を深めるために、なんか作ります。 得意のスライドでも作ります。 今回は…

Nodeの標準パッケージであるfsに、lstatという関数があります。 これを使えば、任意のファイルの状態を調べることができます。 File System Node.js v5.9.0 Manual & Documentation 以下のように、第一引数にパスを指定して、第二引数にコールバックを指定し…

Nodeを書いていて、ディレクトリを削除したいときがあるかもしれません。例：ビルド前にディレクトリクリーン。 そんなときに使えるのがrimrafというパッケージ。 github.com Unixコマンドのrm -rfと同じ挙動が実現できます。 でも、Nodeの標準パッケージにf…

Reduxのチュートリアルを終えました。と言ってもただの写経でしたが。。 写経したコード↓ github.com Webpackでビルドを試みましたが、ダメでした。 何か漏れがありそうです。 というわけで、動かないけど、チュートリアルは消化しました。。 所感 大枠はつ…

Reduxデビューしました。 chuckwebtips.hatenablog.com ザックリとした概観は理解したと思うので、手を動かしていきます。 今回からは公式チュートリアルを消化していきます。まず、書いたのが、Read Meにあるインクリメント・デクリメントを行うRedux実装で…

します。 手始めにQiitaのそれっぽいポストを読みます。この記事は、その勉強メモになります。 1日目 Reduxとは qiita.com 背景 Reactの登場によって、Reactに非同期とDOM操作を任せられるようになった。ただし、State（状態）の管理は開発者に委ねられてい…

webpack上でglobを使う方法について、業務で触れることがあったのでメモ。 インストール なにはともあれインストール。 $ npm init -y $ npm install webpack glob ディレクトリ構造 ディレクトリを以下のように作りました。 src/にJSファイルが格納されてい…

こちら読みました。 qiita.com 前回は、globの基本的な使い方を学んだので、今回は失敗ケースについてメモします。 chuckwebtips.hatenablog.com 自力エラーイベントを発動 glob.Globインタンスを作成して、インタンスの持つemitメソッドを呼び出します。 gi…

業務でglobに触れることがあったのでメモ。ここでのglobとは、npmパッケージとしてのglobです。 globとは wikiによると、以下のように書かれています。 In computer programming, in particular in a Unix-like environment, glob patterns specify sets of …

CSSのflex-wrapを最近知ったのでメモ。 display: flex; で要素を横並びにしつつ、２行や３行にしたいときがあるじゃないですか。そんなときに便利です。 flex-wrap指定なし まず、flex-wrapの指定が無いバージョン。display: flex;のみ指定。flex-wrapの値は…

あまり無いとは思いますが、文字列を部分的に反転させたいときの方法。 StringをRangeで範囲指定しつつ、reverseメソッドを使います。 gist477aacaa5609a4115db4 reverseには破壊的な方もありますが、反転部分は単なる参照なので通常の方で。 参考URL ruby-d…

JavaScriptのSourceMapってあるじゃないですか。実はきちんと理解してないんですよね。 ってことで調べました。 SourceMapとは SourceMapとは、コンパイル前とコンパイル後の対応関係を記したファイル。だそうです。 Json形式で記述されています。 なぜSourc…

gitコマンドでcherry-pickというコマンドを覚えました。 git cherry-pickは、あるコミットを取得して現在のブランチに反映するコマンドです。 例 1. masterにいる状態 現在、masterブランチにいます。 2. ブランチ作成 新しいブランチを作成して、そのブラン…