Works by

プログラミング等IT技術関連でメモする

【React】redux-loggerでActionやStateのログを出力する

redux-logger ReduxではRedux Middelwareという様々な機能拡張が有志の手によって提供されています(プラグインのようなものです)。これから紹介するredux-loggerもRedux Middlewareの一つであり、これを使えばRedux上のActionディスパッチやStateの変化を…

【React】React+JSXを用いてUIコンポーネントを作成する①

前回の記事でJSXについて書いたので、今回は簡単なUIコンポーネント作成の流れをメモします。 前準備 create-react-appをインストールし、Reactプロジェクトを作成します(アプリの立ち上げも行っておきます)。 $ brew install node $ npm install -g creat…

【Shell】ターミナル上で蒸気機関車を呼ぶ

蒸気機関車とは 蒸気機関車(じょうききかんしゃ)とは、蒸気機関によって動く機関車のことである。日本では Steam Locomotive の頭文字をとって、SL(エスエル)とも呼ばれる。また、蒸気機関車、または蒸気機関車が牽引する列車のことを汽車とも言う[1]。…

【React】JSX

※ここで述べるJSXはReact.jsで利用されるものを指します。 JSXとは JSXはFacebook社が開発した、Reactの内部でHTML記述をより簡潔に書くためのJavaScript拡張構文です。 ReactではHTMLの出力を主にJavaScript上で定義します。というのも、Reactはコンポーネ…

【AngularJS】AngularJSで任意のイベント通知を送信・ハンドリングする

AngularJSのイベントハンドリング JavaScriptでは多くのイベントをハンドリングする手段がありますが、AngularJSも独自にイベントハンドリングするための機能を備えています。 例えば、AngularJSでのスクロールイベントのハンドリングは以下のように行います…

【React】ReactとVirtual DOM

React ReactはFacebook社が開発するWebUIに特化したJavascriptのライブラリです。WebアプリケーションのアーキテクチャをMVCで構成した場合、ReactがサポートするのはViewの部分になります。Reactを用いることで効率的にUIコンポーネントを描画したり、UIコ…

【】

【】

【Java】Java8で文字列をBase64変換する

java.util.Base64 Base64.Encoder (Java Platform SE 8) Java8より、Base64によってバイトデータをエンコードできるBase64クラスが実装されました。 このUtilityクラスを利用することで、Java上で容易にBase64エンコード/デコードが利用できます。 Usage imp…

【Java】Jacksonを使ってJSON文字列←→オブジェクト変換を行う

Jacksonとは github.com JacksonはJavaで使えるJSONライブラリです。 JSON形式の文字列をJavaのオブジェクトに直接マッピングしたり、逆にJavaオブジェクトをJSON文字列に変換できたりします。 HTTPレスポンスをパースしたりオブジェクトをBase64エンコーデ…

【OAuth】Google/Facebook/TwitterのOAuth認証APIに設定するリダイレクトURLにパラメータを含める

Google/Facebook/Twitter のOAuth API Using OAuth 2.0 to Access Google APIs | Google Identity Platform | Google Developers ウェブ - Facebookログイン - ドキュメンテーション - 開発者向けFacebook Oauth with the Twitter API — Twitter Developers …

【AngularJS】未コンパイル状態のHTMLテンプレートが一瞬表示されるのを防ぐ

テンプレートのちらつき AngularJSのHTMLテンプレートを用いたページを表示したときに、一瞬だけ元のテンプレート表記がちらついてしまう場合があります。 例えば、以下のようなコードでHTML上の{{message}}に動的に文字列を挿入しようとしたとき、下の画像…

【AngularJS】$httpによる通信を任意のタイミングで中断する

$httpのタイムアウト AngularJSではHTTPリクエストを投げるためのサービス$httpが提供されていますが、 引数configのプロパティtimeoutを設定することで、HTTPリクエストをタイムアウトさせることができます。 timeout – {number|Promise} – timeout in mill…

【AngularJS】プルダウンの一部を動的に選択不可能にする

メモ。 AngularJSではselectタグにng-optionsを指定するとIterableオブジェクトの要素からなるプルダウンを作成できますが、その一部をdisable状態にすることができます。 HTML <div ng-app="myApp"> <div ng-controller="NgOptionDisableCtrl"> <select ng-model="num" ng-options='number disable when number === 3 for number in numbers'></select> </div> </div> JS let mod = ang…

【JavaScript】反復可能なオブジェクトをArrayとして扱う

Array.from Array.fromメソッドは、配列型オブジェクトや反復可能なオブジェクトをArray型にキャストするために用います。 // 配列 let ary = Array.from([1,2,3]); console.log(ary);// [1, 2, 3] // Set let set = Array.from(new Set(["a",2,{}])); conso…

【React】Virtual DOM

Virtual DOMとは Virtual DOMは、WebUIライブラリとして有名なReactの持つDOM操作上の概念です。 ReactがDOM要素の更新を高速化するために設けられています。

【JavaScript】オブジェクト・配列・関数引数の末尾カンマ

末尾カンマ JavaScriptでは、配列リテラルの末尾要素後ろに対してカンマを記述することを許容しています。またECMAScript5にてオブジェクトリテラルの末尾カンマが、ECMAScript2017にて関数引数の末尾カンマが許容されるようになっています。 // 配列末尾カ…

【AngularJS】$rootScopeに対してイベントリスナを登録・解除する

メモ。 Angularでは`$rootScope.bind`経由でスクロールやページ遷移等に対するイベントリスナーを登録することができます。 angular.module('myApp', []) .controller('MyController', ['$rootScope', function($rootScope){ $rootScope.bind('scroll', func…

【AngularJS】Serviceを用いた画面遷移時のパラメータ受け渡し

画面遷移時にパラメータを受け渡す AngularJSでは画面遷移が発生する(厳密には画面遷移というよりng-viewによる一部HTMLの差し替え)と、多くの場合Controllerも遷移先のViewに合わせて切り替わります。 このとき、遷移前に利用していたController上のパラ…

【html】ファイルダイアログから複数ファイルをアップロードする

<input type="file" multiple> HTMLでは<input type="file">タグを用いることでファイルダイアログを開く機能をページに埋め込むことができますが、デフォルトではファイルを一つしかアップロードできません(ファイルダイアログで一つしかファイルを選択できない)。 HTML <input id="input_file" type="file" /> JS function onChange(event) { /…

【JavaScript】Spread Operator

Spread Operatorとは JavaScriptではECMA2015からSpread Operatorと呼ばれる仕様を導入しました。これは、配列やオブジェクト、関数に渡す引数を展開するための糖衣構文です。 // 配列を展開 let num_array = [4, 5, 6]; console.log([1, 2, 3, ...num_array…

【html】相対配置・絶対配置

position html要素の配置方法には複数の種類があり、指定した配置方法によって要素の配置のされ方が異なってきます。 html要素の配置方法はプロパティpositionで設定でき、以下の4種類の中から選べます。 static 初期値。配置方法指定なし。 top/bottom/lef…

【html】インライン要素内の画像に発生する余白を除去する

vertical-align: bottom インライン要素内に記述したimg要素で表示された画像は、デフォルトではテキストのbaselineに合わせて整列されます。 HTML <p><img src="image.png"></p> CSS p { background-color: #CCCCCC; } レンダリング結果 そのため、画像のみをインライン要素に含めると、…

【html】インライン要素ボックスに対するプロパティ指定の特徴

inline要素 <div>などのブロックレベル要素とは異なり、<span>などのインライン要素はコンテンツを分断せずにタグを挿入することができます。 <p>キャンペーン実施中!詳しくは<a href="#">こちら</a>!</p> レンダリング結果 キャンペーン実施中!詳しくはこちら! このとき挿入されたインライ</span></div>…

【AngularJS】$httpでformによるPOSTリクエストを再現する

AngularJSの$httpメソッドでHTTPリクエストを発行する時、 コンテンツの形式をサーバ側と一致させなければサーバ側に正しくデータを受け取ってもらえない。 例えば、サーバ側がformタグのsubmitによってデータが送られていること想定しているとする。 HTML <html> <head></head></html>…

【AngularJS】入力フォームの値を正規表現でバリデーションチェックする

ng-pattern HTML5ではinputタグに対して様々な値チェック機構を標準で備えている。 特に、inputタグの属性typeを指定すると、一部のtypeに対しては HTML5標準の入力規則が適用される。 <html ng-app="myApp"> <head> <meta charset="utf-8"> <title>input test</title> </head> <body ng-controller="myController"> <form id="formExample"> </form></body></html>

【git】tracked状態のファイルのみaddする

git add -u メモ。 新規ファイルや削除済みファイルなど、gitがトラッキングしないファイル変更差分をステージングしたくないときに使う。 # 変更差分 $ git status On branch hoge-branch Changes not staged for commit: (use "git add <file>..." to update wha</file>…

【】

【CSS】Normalize.cssでブラウザ間スタイル間差異を小さくする

【HTML】マージンの相殺

上下で隣り合うマージンは重なり合う HTMLタグに設定するマージンは、隣り合う上下のマージンは重なり合い相殺されるという特徴を持ちます。 例えば以下の2つのようなタグが上下に並んでいるとします。 上のタグの下マージンは30px、下のタグの上マージンは2…