はらへり日記

腹に弾丸

JavaScript

notion-sdk-jsをチョット便利に使えるnpm package書いた

書いた www.npmjs.com notion-sdk-jsとは Notion APIを叩くためのTypeScriptのライブラリ。多分公式。 github.com 何を解決したいのか Pageを作成するAPIを叩く際にJSONを組み立てるのがめんどくさいのが一番だった。 型定義で守られてはいるものの、ドキュ…

espower-typescriptでローカルの.d.tsファイルを読み込ませる方法

最近、仕事でTypeScriptに入門中のひよっこです。 ユニットテストをmocha + power-assert + TypeScriptで書く際、espower-typescriptを導入したのだけど、その際にハマったのでメモ。 前提 TypeScript 3.0.1 power-assert 1.6.0 espower-typescript 9.0.0 起…

テンプレートから新しいScrapboxページを作るためのブックマークレット書いた

動機 今、ほぼすべての自分の情報をScrapboxに集約してる 約1400ページくらいある その中でフォーマットが決まってるものがいくつかある 日記、CFP下書き、スライド下書き等々 そういう場合、テンプレートページを作って毎回そこからコピペしてた が、めんど…

flowtypeからweakモードが無くなってた

weakモードとは flowtypeの説明は割愛します。 知りたい方は福岡PHPカンファレンスに来て私のトークを聞いてください 冗談はさておき、ざっくり言うとflowtypeはFacebook製のJavaScript用静的型解析ツールです。 ファイルの頭に// @flowを書き足すことでその…

eslint-plugin-importでNODE_PATHにパスを足したい

NODE_PATHを足す JavaScriptを書くとき、ディレクトリを掘って階層が深くなったりテストフォルダが別にあるとrequire('../../../../hoge');みたいになってつらい なのでWebpackで固める場合はconfigで、サーバサイドjsの場合はapp-module-pathを使ってNODE_P…

今さら聞けないChromeエクステンションの作り方

この記事は JavaScriptアドベントカレンダーの1日目の記事です。 qiita.com JavaScriptというよりはChromeの話かもしれませんが、最近エクステンションを作って楽しかったので簡単に作り方を書いてみます。 Chromeエクステンションとは github-label-creater…

Webpackで複数のファイルをそのままバンドルする

やりたいこと お仕事でページごとに必要なモジュールのみimportしたJSを実装し、それぞれコンパイルしたいという場面があった。 イメージ的にはsrc/(pc|sp)/**/*.jsをフォルダ構成やファイル名をそのままpublic/js配下に吐きだすといった感じ。 Webpackは基…

npm scriptsでエラーログを表示させたくない話

npm run hogeでエラーを出したくない eslintでのチェックやトランスパイルの実行は下のような感じでpackage.jsonに書いてnpm run lint等で実行するようにしてる。 { "scripts": [ "lint": "eslint src/", "build": "babel src --out-dir dest" } } その際、e…

ファイルサイズをチェックするfslint作りました

なぜ作ったのか 会社でフロントサイドJSを書く時、Browserifyとnpmでいろいろモジュール入れてゴリゴリやってたのだがファイルサイズがでかくなってしまうことが多々あった。 ファイルが1個ならいいが、吐き出すファイルが1個ではなかったしみんなが修正する…

node.jsでprocess.env.HOGEを書き換えようとしてハマった

nodeのコード中で環境変数を書き換えたい そう思って以下の様なことをしてみました。 process.env.LOCAL_ENV = undefined; /* ~略~ */ if (_.isUndefined(process.env.LOCAL_ENV)) { console.log('LOCAL_ENV is not specified'); } しかし何回やってもproces…

HTMLのイベントハンドラ属性における文字実体参照、数字文字参照

文字参照とは 基礎的な話だけどきちんと調べたことなかったので適当に調べてみた。 文字参照とはHTML等のマークアップ文書において直接参照できない文字(例えば文章中に<を入れるとタグが崩れちゃったりする)を表現するために用いられる文字列です。 PHPだと…

electronでテキストフォームが動かない

環境 OS X 10.10.5 (Yosemite) electron 0.37.7 現象 普通にelectronのチュートリアル通りのアプリケーションスクリプトを書いているのにテキストフォームが入力できずにめっちゃ困ってた。 Issue立ててみて何個かアドバイスもらったものの動かず。。。 Keyb…

これからのJSの非同期処理関数は全てPromiseを返させるべき

はじめに JSで非同期関数を書く時、個人的に意識してる話です。 別にTipsとかじゃないです。 要するにポエムです。 あしからず(´・ω・`) 非同期関数を使いこなす JSを書いたことがある人なら知ってるであろう非同期処理ですが、僕は非同期処理はなるべくPro…

Babel + Browserifyで環境変数を使用する

前提 Babel6系でES2015のJSをBrowserifyを使用してコンパイルします。 願い JSをコンパイルする際、Ajax通信で使用するURIを開発と本番で分けたい場面がありました。 なので以下の様なことがしたい。 let uriPrefix = '/api'; if (process.env.APP_ENV === '…

Laravel5.1でsuperagentを使用する際の注意点

環境 Laravel 5.1 superagent 1.7.2 ajax通信にsuperagentを使用したい JS弱者なりに「jQueryから自立したい…!」と感じ、Ajax通信を$.ajaxでなくsuperagentというものを採用しました。 かのexpressやstylusを開発したTJ作ということもあり、とても使いやす…

オール◯ター感謝祭もどきアプリで社内イベントを乗り切る

はじめに この記事はアイスタイルアドベントカレンダー24日目の記事です。 qiita.com 納会の紹介 弊社では毎年、夏と冬に社員を労う納会なるものが開催されます。 (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(…

レビュアーを選ぶ話

はじめに この記事はアドベントカレンダー15日目の話です。 qiita.com 大遅刻になってしまったのは社内宴会での新卒芸を用意していたからで、まぁいろいろ言い訳はあるのですがそちらのことはアドベントカレンダーの24日目に…。 コードレビューの話をしよう …

JSでカスタムイベントを作る

はじめに qiita.com この記事は株式会社アイスタイルアドベントカレンダーの1日目の記事です。 今日のお話 新卒研修でSinatraで作られた社内向けツールをLaravel5でフルスクラッチで改修するというものを行いました。 その際、フロントJSの実装はほぼ私が担…

Babelで書いたReactのJSXがNo Display Nameになる

困ったこと 最近今更ながらReact.jsを書いているのだがその際に困ったことについて書く。 コンパイルにはGulpを使う前提です。環境としては以下のとおり React.js v0.14 babelify v7.2.0 問題 GulpでES2015で書いたjsxファイルをコンパイルをすると各コンポ…

LaravelのAjax通信でCSRFトークンを扱う

LaravelにおけるCSRFトークン Laravel5.1(おそらく以前のバージョンも)ではデフォルトでCSRFトークンによる認証ミドルウェアが有効になっています。 なのでフォームを書くときは以下のようなBladeファイルを書く必要がある。 <form method="POST"> <input type="text"> <input type="submit"> {{ csrf_token() }} </form> こうす…

ua-parser-jsでブラウザ判定をする

楽したい ua-parser-jsなるライブラリを使って何も考えずにブラウザ判定できる関数を作ります。 インストール 今回はbowerでインストールします。 $ bower install ua-parser-js --save bowerの他に、npmでも配布されているようです。 自分の作成するスクリ…

Google Map APIのMap生成をjQueryで行う

困ったこと 例えば以下のようなHTMLを作り、<div id="map_canvas"></div>の部分にMapを生成しようと思う。 <html> <head> <title>Google Map Sample</title> <script src="js/jquery.min.js"></script> <script src="http://maps.googleapis.com/maps/api/js?key={Your Google Map API Key}&amp;sensor=true"></script> </head> <body> <p>Google Map Sample…</p></body></html>