JavaScript
書いた www.npmjs.com notion-sdk-jsとは Notion APIを叩くためのTypeScriptのライブラリ。多分公式。 github.com 何を解決したいのか Pageを作成するAPIを叩く際にJSONを組み立てるのがめんどくさいのが一番だった。 型定義で守られてはいるものの、ドキュ…
最近、仕事でTypeScriptに入門中のひよっこです。 ユニットテストをmocha + power-assert + TypeScriptで書く際、espower-typescriptを導入したのだけど、その際にハマったのでメモ。 前提 TypeScript 3.0.1 power-assert 1.6.0 espower-typescript 9.0.0 起…
動機 今、ほぼすべての自分の情報をScrapboxに集約してる 約1400ページくらいある その中でフォーマットが決まってるものがいくつかある 日記、CFP下書き、スライド下書き等々 そういう場合、テンプレートページを作って毎回そこからコピペしてた が、めんど…
weakモードとは flowtypeの説明は割愛します。 知りたい方は福岡PHPカンファレンスに来て私のトークを聞いてください 冗談はさておき、ざっくり言うとflowtypeはFacebook製のJavaScript用静的型解析ツールです。 ファイルの頭に// @flowを書き足すことでその…
NODE_PATHを足す JavaScriptを書くとき、ディレクトリを掘って階層が深くなったりテストフォルダが別にあるとrequire('../../../../hoge');みたいになってつらい なのでWebpackで固める場合はconfigで、サーバサイドjsの場合はapp-module-pathを使ってNODE_P…
この記事は JavaScriptアドベントカレンダーの1日目の記事です。 qiita.com JavaScriptというよりはChromeの話かもしれませんが、最近エクステンションを作って楽しかったので簡単に作り方を書いてみます。 Chromeエクステンションとは github-label-creater…
やりたいこと お仕事でページごとに必要なモジュールのみimportしたJSを実装し、それぞれコンパイルしたいという場面があった。 イメージ的にはsrc/(pc|sp)/**/*.jsをフォルダ構成やファイル名をそのままpublic/js配下に吐きだすといった感じ。 Webpackは基…
npm run hogeでエラーを出したくない eslintでのチェックやトランスパイルの実行は下のような感じでpackage.jsonに書いてnpm run lint等で実行するようにしてる。 { "scripts": [ "lint": "eslint src/", "build": "babel src --out-dir dest" } } その際、e…
なぜ作ったのか 会社でフロントサイドJSを書く時、Browserifyとnpmでいろいろモジュール入れてゴリゴリやってたのだがファイルサイズがでかくなってしまうことが多々あった。 ファイルが1個ならいいが、吐き出すファイルが1個ではなかったしみんなが修正する…
nodeのコード中で環境変数を書き換えたい そう思って以下の様なことをしてみました。 process.env.LOCAL_ENV = undefined; /* ~略~ */ if (_.isUndefined(process.env.LOCAL_ENV)) { console.log('LOCAL_ENV is not specified'); } しかし何回やってもproces…
文字参照とは 基礎的な話だけどきちんと調べたことなかったので適当に調べてみた。 文字参照とはHTML等のマークアップ文書において直接参照できない文字(例えば文章中に<を入れるとタグが崩れちゃったりする)を表現するために用いられる文字列です。 PHPだと…
環境 OS X 10.10.5 (Yosemite) electron 0.37.7 現象 普通にelectronのチュートリアル通りのアプリケーションスクリプトを書いているのにテキストフォームが入力できずにめっちゃ困ってた。 Issue立ててみて何個かアドバイスもらったものの動かず。。。 Keyb…
はじめに JSで非同期関数を書く時、個人的に意識してる話です。 別にTipsとかじゃないです。 要するにポエムです。 あしからず(´・ω・`) 非同期関数を使いこなす JSを書いたことがある人なら知ってるであろう非同期処理ですが、僕は非同期処理はなるべくPro…
前提 Babel6系でES2015のJSをBrowserifyを使用してコンパイルします。 願い JSをコンパイルする際、Ajax通信で使用するURIを開発と本番で分けたい場面がありました。 なので以下の様なことがしたい。 let uriPrefix = '/api'; if (process.env.APP_ENV === '…
環境 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日目に…。 コードレビューの話をしよう …
はじめに qiita.com この記事は株式会社アイスタイルアドベントカレンダーの1日目の記事です。 今日のお話 新卒研修でSinatraで作られた社内向けツールをLaravel5でフルスクラッチで改修するというものを行いました。 その際、フロントJSの実装はほぼ私が担…
困ったこと 最近今更ながらReact.jsを書いているのだがその際に困ったことについて書く。 コンパイルにはGulpを使う前提です。環境としては以下のとおり React.js v0.14 babelify v7.2.0 問題 GulpでES2015で書いたjsxファイルをコンパイルをすると各コンポ…
LaravelにおけるCSRFトークン Laravel5.1(おそらく以前のバージョンも)ではデフォルトでCSRFトークンによる認証ミドルウェアが有効になっています。 なのでフォームを書くときは以下のようなBladeファイルを書く必要がある。 <form method="POST"> <input type="text"> <input type="submit"> {{ csrf_token() }} </form> こうす…
楽したい ua-parser-jsなるライブラリを使って何も考えずにブラウザ判定できる関数を作ります。 インストール 今回はbowerでインストールします。 $ bower install ua-parser-js --save bowerの他に、npmでも配布されているようです。 自分の作成するスクリ…
困ったこと 例えば以下のような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}&sensor=true"></script> </head> <body> <p>Google Map Sample…</p></body></html>