dackdive's blog

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

follow us in feedly

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) を…

[Salesforce]カスタムオブジェクトのメタデータをCSVに変換する

動機 開発時、特定のカスタムオブジェクトの項目一覧をさっと確認したい。 基本的にメタデータを git 管理しているので、src/objects/MyObj__c.object のようなローカルの XML ファイルをパースして 人が読める形式に加工できれば十分。 Node 界隈のパッケー…

npm run + Tabキーでnpm scriptを補完する

知らなかったのでメモ。 参考:npm run should have autocomplete prompt for available scripts · Issue #8030 · npm/npm # zsh の場合 $ npm completion >> ~/.zshrc ~/.bashrc も可。 $ npm run <TAB> build-storybook storybook test 楽になった。</tab>

Material-UIでrefを使う

メモ。 以下のようなコンポーネントの <input type="text"> 項目を Material-UI の TextField に置き換えようと思ったが ref で参照しているのをそのまま TextField でも使えるのか迷った。 import React, { PropTypes } from 'react'; export default class AddTodoForm extend…

API Blueprintによるドキュメント開発環境【2016年冬】

ここから少しアップデートしたのでメモ。 リポジトリ 特徴 markdown -> html への変換には aglio、ローカルサーバーは --server オプションを使う ローカルで markdown ファイルを html に変換するのに aglio を使うところは以前と同じ。 改めて調べてみると…

React(v15)&ReduxでMaterial-UIを使ってみる

メモです。 基本的な使い方を試してみた。 リポジトリ Redux の basic チュートリアル にそって作った Todo アプリをベースに、Material-UI を適用してみる。 https://github.com/zaki-yama/redux-todo-app/pull/2 (Material-UI 適用前のコードには base と…

eslint-config-airbnbのルール内容を確認する

ESLint はあまり深く考えず eslint-config-airbnb を導入していて、そんなに問題はないんだけども たまにこちらが期待したルールが無効になってたり、逆にそんなに守らなくてもいいと思われるルールが有効になってたりして、ふと 「あれ、xxx っていうルール…

[Vim]SyntasticによるESLintチェックが遅いのでNeomakeに乗り換えた

(2017/01/23追記) この後 Flow を導入しようとしたら色々問題が発生したので、Neomake から ALE に乗り換えた。 (追記ここまで) Vim の Syntax Checker として有名なのは Syntastic ですね。 最近は JavaScript を書くことが多いので、この Syntastic を…

Reactでフォームの項目をどう扱うか問題

メモ。 なんの話か React でフォーム項目を簡潔に書く方法がわからない 管理されたコンポーネントで書こうとすると、項目の数だけ state と対応するイベントハンドラが必要になる 親に渡す必要がある、とかだとさらにしんどい // 基本形 class MyFormCmp ext…

npm installしたパッケージの更新確認とアップデート(npm-check-updates)

タイトルの通り。 npm install --save なり --save-dev なりして package.json に書き込まれたパッケージのバージョン、どうやって定期的にアップデートしていけばいいかわからなかったので。 新しいバージョンがリリースされているかどうかの確認と、実際に…

Dreamforce'16 Developer Keynoteのメモ

今年は行けなかったので Dev Keynote だけざっと見ました。 以下、雑多なメモ。 キーワード Lightning Einstein Salesforce DX Lightning Winter'17 以降の新機能についてデモしながら一通り紹介、といった感じ。 (デモは 13:40 頃から) Lightning Data Se…

package.jsonのパッケージバージョンに記載される ^ (キャレット) とは?どうしてつくのか?

$ npm install --save react などのコマンドでパッケージをインストールすると、package.json にはインストールした(その時点での最新)バージョンが記載されますが そのとき "dependencies": { "react": "^15.3.2" } というように、バージョン番号の前に ^…

Hubotに管理画面のような静的ページを追加する

メモ。 ブラウザから /admin にアクセスしたら管理画面みたいなものが開いて Bot の簡単なカスタマイズができる、みたいなことがやりたくて 特定の URL で静的なページを返すようなことができるのか調べてみました。 結論から言うと robot.router が Express…

Slackのチャンネルのメンバーからランダムで一人選ぶBotを作る

タイトルの通り。 GitHub の PR のレビュアーを、開発チームの特定のメンバー数名から一人指名したい 開発チームの一部のメンバーで持ち回りでやらないといけないタスクがあって、毎回誰がやるか決めるのめんどい といったことがあって、せっかくなので bot …