君は心理学者なのか?

大学時代に心理学を専攻しなぜかプログラマになった、サイコ(心理学)プログラマかろてんの雑記。

JavaScript

localStorageをwrapしてくれるnpmパッケージ、store.jsについて調べた

いきさつ localStrageを使う機会があった。 今までは普通にlocalStrageを使っていたが、 npmにlocalStrageのwrapperがあるのを職場の人が見つけてくれた。 github.com 気になったので少し調べてみた。 概要 ブラウザやそのバージョンによってlocalStrageの扱…

babelで現在のnodeJsのバージョンに合わせてトランスパイルする

** あとで少し追記する babelのinstall yarn init -y yarn add @babel/cli --dev yarn add @babel/core --dev コンパイルするソース class Hoge { constructor() { } } const hoge = new Hoge(); コンパイル 何も入れず、そのままコンパイルしてみる yarn ru…

OSSから設計について学ぶ〜クラスの依存方向について〜

要約 僕が間違ってました。すみませんでした。 いきさつ 「Mapを使ったアプリケーションで、Mapの上にMarkerを立てたい」 という要件を満たすために、leafletというOSSを使うことにした。 リポジトリ github.com 公式サイト leafletjs.com インターフェース…

本当にオブジェクト指向を使う必要があるのか?

タイトルについて すみません、煽りました。 いきさつ オブジェクト指向で設計した時と、 オブジェクト指向を使わなかった時について、 「単純にコード量だけで」比較してみます。 その上で、オブジェクト指向の利点について再度考えてみます。 つくるもの 1…

json-serverが鬼のように便利で、しかも可愛かった

いきさつ APIのmockがほしかった。 今までexpressとかで実際にAPIをつくっていたのだが、 ちょっとめんどくさくなってきた。 何かいい方法がないかな〜と思ってたら「json-server」という良さげなものがあったので試してみた。 github.com install npm insta…

【突然の沈黙】JavaScriptのobjectスプレッド演算子について

いきさつ ソースコードを読んでいたら、 var arr = [1, 2, 3] var arr2 = [4, 5, 6] arr.push(...arr2) とつぜん処理の中で沈黙(...)し始めた。 気持ち悪かったので調べてみた。 ドキュメントを見てみる スプレッド構文を使うと、関数呼び出しでは 0 個以…

Vue.jsにて、特定のroutingの時に後からComponentを読み込む〜ログイン後にコンポーネントを読み込みたいからLazy Loadしてみた〜

いきさつ ログイン前はログインコンポーネントだけ、 ログイン後はアプリケーションに必要なコンポーネントを読み込みたい。 目的は、 ログイン前に読み込むJavaScriptソースコードの軽量化と、 それによるセキュリティリスクの減少。 やりかた はじめ、こん…

Vue.jsでComponentを利用する〜templateのみ〜

いきさつ 職場でVueを使うので勉強する必要がある。 とりあえず vue-cliを使っても良いが、 きちんと理解したいので生で書くことにした。 ルートコンポーネント <html> <head> <meta charset="utf-8"> <title>Vue TEST</title> </head> <body> <div id="app"> <my-component></my-component> </div> <script src="./vue.js"></script> </body></html>

【OSSリーディング企画】BootstrapのJavaScriptを読み解く【その1】

いきさつ Bootstrap、すごい便利。 htmlタグさえドキュメントどおりにおけば*1、 カルーセルは動くわモーダルは開くわアラートは出るわ、、、 いつも本当にお世話になっております。 ただ、、、ただね、 「なんで動くのか」について全然考えたことがなかった…

canvasで画像を表示する

いきさつ canvasを使って画像のリサイズをしたり、 画像のくり抜きがしたかったので、まずはcanvasで画像を表示できるようにした。 手順 1. input type='file'で画像を登録できるようにする <input type="file" id='file'> 2. fileを登録した時にイベントが発火するようにする /** input要…

地下アイドル「私、ぜったい売れっ子アイドルになるんだから!」で学ぶデザインパターン(Observer)〜アイドルとオタクを疎結合にしてみた〜

ある日の地下アイドル 地ア「は〜あ。今日もライブは3人しかこなかったなぁ」 地ア「きょう来てくれたのは、たっくんと、しのぶんと、ゆっきーか」 地ア「この3人、いつも来てくれるんだよねぇ。大事にしなくちゃ」 地ア「私、ぜったいに売れっ子アイドル…

【JavaScript】画像をdrag and dropしてサムネイルを表示する〜DragEvent, DataTransfer, File, FileReaderオブジェクトについて〜

こういうのがやりたかった 手順 簡単に言うと、 DragEventからDataTransferを取得 DataTransferからFileを取得 FileをFileReaderで読み込み、サムネイルとして表示 という手順になります。 1. dropエリアの準備 1-1. まずはdropエリアを作成する imgは後でサ…