dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

follow us in feedly

React 16で導入されたError Boundaryについて

React 16 Beta がリリースされました。 Error Boundary という概念が導入されたそうなので公式ブログをざっくり読んでみます。 はじめに:React 15 までの問題 React 15 まではコンポーネントで発生したエラーをうまくハンドリングしたり、そこからリカバリ…

[Chrome拡張]chrome.storage.localやchrome.storage.syncでストレージに保存したデータを確認・削除する

メモ。 大昔に作った Chrome 拡張に手を加えようと思い立った。 今回は chrome.storage API を使って設定内容をローカルに保存できるようにしたかったんだけど 開発時に保存したデータを確認したり、一旦削除したりするにはどうすればいいのかわからず調べて…

IDDD本もくもく読書会メモ#2(第3章 コンテキストマップ)

DDD

第1回 に続いて第2回も無事に開催することができました。 ※社外からの参加者もお待ちしています(Slack グループ) 教材 実践ドメイン駆動設計作者: ヴァーン・ヴァーノン出版社/メーカー: 翔泳社発売日: 2015/03/19メディア: Kindle版この商品を含むブログ …

"Redux Architecture Guidelines"を読んだ

こちらの記事を読んで。React&Redux でアプリを作る上で基本的だが重要なことが書かれていたので、後で見返すためにメモ。 なお本文は原文記事の完全な翻訳ではなくポイントだけかいつまんで自分の考えも交えたものです。 また、まとめさせていただく上で著…

IDDD本もくもく読書会をやってみたメモ#1

DDD

はじめに 経緯など 【緩募】DDDを勉強したいと言ったら社内外で何人か興味を持ってくださり、集まって書籍を読むだけのもくもく読書会なるものを始めることにしました。一緒に読書に付き合ってくれる方募集中ですので、同じようにDDDに興味のある方はお気軽…

CircleCIにssh接続したら"Permission denied (publickey)"と表示されたときの対処法

メモ。 CircleCI に SSH でログインするため に従い接続しようとしたところ、Permission denied (publickey) が表示された。 $ ssh -p 64543 ubuntu@13.59.112.96 The authenticity of host '[13.59.112.96]:64543 ([13.59.112.96]:64543)' can't be establi…

webpack 3 リリース内容まとめ

2系に上げるかどうかを悩んでいる間に 3.0.0 がリリースされてしまった。 を参考にアップデート内容をメモ。 概要、v2 からのマイグレーション 大きな feature は Scope Hoisting と Magic Comment ぐらい。 v2 からの移行も特別な作業は必要なく、たいてい…

webpack-dev-serverをExpressに組み込んで使う(webpack-dev-middleware, webpack-hot-middleware)

はじめに 1年以上前ですがこんな記事を書きました。 このときは webpack-dev-server をスタンドアロンなサーバーとして使う方法しか知らなかったのですが 既存の Express アプリに組み込んで使うこともできます。 そのためには webpack-dev-middleware およ…

react-autosuggestでサジェスト(Autocomplete)項目を作る

Google 検索や乗換検索サービスとかでよく見るこれ。サジェストと呼ぶのかオートコンプリートと呼ぶのか。 react-autosuggest というライブラリを使って実装してみます。 Codepen にサンプルコードがたくさんあります。 React のみの場合 Basic Usage のコー…

Numeral.jsのlocaleを変更して桁区切り文字をカンマからピリオドにする

日本だと桁区切り文字は,(カンマ)、小数点は. (ピリオド)だけど世界的に見ると国によって異なる。 世界各国での数字の区切り方 | コリス JavaScript で数値を扱うときには Numeral.js を使っていたんだけど、Numeral でも(Moment.js などと同じく)loca…

作って学ぶRedux Middleware

はじめに Redux で非同期処理を行うための Middleware である redux-thunk は、わずか 10 数行のこのようなコードです。 https://github.com/gaearon/redux-thunk/blob/v2.2.0/src/index.js function createThunkMiddleware(extraArgument) { return ({ disp…

Salesforce:JavaScript Remoting(@RemoteAction)をPromiseで扱う

はじめに Visualforce で Angular や React などの JavaScript ライブラリを使ったアプリケーションを作ろうと思った場合、 Apex で定義したメソッドの実行には JavaScript Remoting を使うのが一般的かと思います。 似たようなことを実現するための手段とし…

webpack+ES2015でGoogle Apps Scriptローカル開発するためのテンプレート作った

gapps を使って Google Apps Script をローカルで開発するための方法については 以前 Qiita に書いた し、それにより ES2015 や TypeScript で書いて手元でビルド、みたいなことはみんなやるようになったんだけど webpack を使った構成が探してもあまり見つ…

Meguro.es x Gotanda.js #1 in Drecomに行ってきた

行ってきました。 hyperapp について Jorge Bucaran https://github.com/hyperapp/hyperapp SPA を作るための 1kb の軽量ライブラリ Virtual DOM + Redux/Elm 的な State 管理 + Router Fast React や Vue は framework っぽすぎ "dependencies": {} API ド…

React/Reduxの設計に関する参考記事まとめ

最近悩んでいる React/Redux でそれなりの規模のアプリケーションを作るための良い設計について、 日頃ネットで気になる記事を漁っていたんだけど、積読がたまってきた&Twitter やら Pocket やら Qiita に散らばってしまったのでここらで一旦整理します。 …

Lightning Utility Barを作ってみた

Spring'17 から利用可能になった Utility Bar を作ってみたので、その手順を残しておきます。 とりあえず Hello, World! と表示するところまで。 こちらの記事が参考になりました。 一応、公式の Implementation Guide とやらもあるみたいだけど、 https://r…

FlowtypeのUtility TypesでESLintエラーを出さないようにする

ちょいメモ。 Flowtype の Utilty Types を使っていて type Exact<T> = T & $Shape<T>; などと書いたら ESLint でエラーになった。 error '$Shape' is not defined no-undef eslint-plugin-flowtype は導入済みで、各バージョンは以下の通り。 $ npm list --depth=</t></t>…

ctrlp.vimでファイルを検索するときのウィンドウサイズを変更する

Vim

前回に続き、ctrlp.vim についてのメモ。 ctrlp.vim でファイルを検索するとき、そのままだと候補の一覧がウィンドウ下部にmax10件ぐらいしか表示されない。 ここのサイズを変更したい。 設定方法を調べてみたところ、この Issue に書いてあった。 Not enoug…

ctrlp.vimでnode_modulesなどのフォルダを除外する

Vim

ちょいメモ。 Vim で Atom や VSCode のような Ctrl + P によるファイル検索ができるようにする ctrlp.vim というプラグイン。 便利なんだけど、node_modules があるプロジェクトで使うと起動が遅かったり node_modules 内のファイルまで検索対象になってし…

JIRAの課題フィルタで一度に表示する課題数(ページサイズ)を変更する

ちょいメモ。 課題フィルタで一度に 50 件ずつしか結果が表示できないのを変更したい。 (画像は https://ja.confluence.atlassian.com/jiracoreserver070/searching-for-issues-777015942.html より引用) と思って調べてみたところ、 Expanding Issue Filt…

WEB+DB PRESS Vol.97のReactサンプルアプリをReduxで書き直した

WEB+DB PRESS Vol.97作者: 外村和仁,小林徹,古川陽介,佐藤歩,yoku0825,是澤太志,一野瀬翔吾,加藤颯史,のざきひろふみ,うらがみ,水嶋淳貴,久田真寛,久保達彦,伊藤直也,遠藤雅伸,ひげぽん,海野弘成,はまちや2,竹原,倉岡洋義,WEB+DB PRESS編集部出版社/メーカー…

webpackでReact/Reduxを本番環境用にビルド(production build)する

はじめに React に限らず、JavaScript を使ってると本番環境用のビルド(以後、production build)として圧縮や難読化を行う必要があります。 webpack にはそのためのプラグインとして UglifyJsPlugin があるのは知っていましたが、 単純にこのプラグインを…

Inside Frontend #1に参加したメモ

こちらのイベントに行ってきました。 AMA(休憩時間中の質問コーナー)という取り組みが非常に良かったです。 以下、話を聞きながら手元でメモしてた内容。 Web over ServiceWorker by @jxck__ Capability against Native/Low API Installable Performance P…

react-lightning-design-systemをVisualforceで使う

件名の通りですが少しハマりどころがあったのでメモ。 普通に react-lightning-design-system を使おうとすると SVG アイコン使用時に Unsafe attempt to load URL エラーが表示されます。 Unsafe attempt to load URL https://zakiyama-dev-ed.my.salesforc…

webpack2でTree Shaking以外に何ができるようになったのかメモ

メモ。 webpack 2 正式リリース(バージョンは 2.2)だとか Tree Shaking という機能がいいらしい とかは目にしていたけど 結局 v1 -> v2 とメジャーバージョンが上がって Tree Shaking 以外に何が変わったの?というのがよくわからなかったので調べてみた。…

gulpタスクに.envで定義した環境変数を渡すならgulp-envでなくnode-env-fileを使う

はじめに タイトルの通り。 gulp タスクに .env のようなファイルで定義した環境変数を渡したくて、 gulp-env と node-env-file を比較した。 結論としては node-env-file の方が使い勝手が良かった。 それぞれの使い方 node-env-file // gulpfile.js var gu…

[Vim]NeomakeでFlowを実行したときにexit code 64が表示されたときのメモ

Vim

Vim の Lint チェックに Neomake を使っていて、実行時に Neomake: flow: completed with exit code 64. と表示されてしまったときのメモ。 Flow のバージョンは 0.37.4。 原因と解決策 https://github.com/neomake/neomake/blob/master/doc/neomake.txt#L31…

react-lightning-design-systemのDatepickerを日本語表記にする

メモ。 react-lightning-design-system の Datepicker の月や曜日の部分を日本語にしたい。 locale のようなプロパティはないが、内部的に Moment.js を使っているので以下のようにして変更できた。 (2017/01/20追記) 普通に moment.locale('ja'); だけで…

SlackのOutgoing WebhookとGoogle Apps ScriptでBotを作ったときにつまずいたところメモ

Bot

Slack の Bot にメンションしたら Outgoing Webhook で GAS のスクリプトを実行するようなものが作りたくて とりあえず連携するところまで作ったんだけど、思ったよりハマったところがあったのでメモ。 基本的な作り方に関しては、こちらの記事の通りに作成…

[Apex]レコードが承認プロセスでロック中かどうか判定する

メモ。 レコードの ID を元に、そのレコードが現在承認プロセスの最中で、かつロックされているかどうか Apex で判定したい。 ここを参考にできた。 apex - Check if a record is in approval process - Salesforce Stack Exchange Approval.isLocked(id) を…