dackdive's blog

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

follow us in feedly

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…

webpack3リリース内容まとめ

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開発

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

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 …

JavaScript(ES2015&React)で画像を扱う:リサイズとプレビュー表示

はじめに web サイト/アプリケーションで画像のアップロード機能などを実装する場合、 最近のスマホのカメラで撮影した画像はサイズが数 MB にも及ぶので、あらかじめクライアント側で送信可能なサイズまで縮小する必要があります。 今回はそのような画像の…

HubotをES2015で書いてHerokuにデプロイする

今さらながら Slack bot を作りたくて、フレームワークは Hubot を選んだ。 Hubot はそのままでは CoffeeScript で書く必要があるんだけど、ES2015 もやっと覚えたばかりなのに CoffeeScript の勉強はしたくない。 ということで、ES2015 で書くための手順を…

Emoji Prefixに学ぶgitのコミットの分け方

git

こちらの記事を読んで。 この記事では、Emoji Prefix というコミットメッセージに関するルールについて紹介している。 どんなルールかというと、「コミットメッセージの先頭には、コミットの内容に合った Emoji をつけましょう」というものらしい。 Prefix …

reveal.jsで外部Markdownファイルを読み込む

いつも忘れるのでメモ。 index.html 内に直接書くのではなく、別途用意した Markdown ファイルをスライドにしたい。 body に以下のように記述する。 <body> <div class="reveal"> <div class="slides"> <section data-markdown="./index.md" data-separator="^\n\n\n" data-separator-vertical="^\n--\n" data-separator-notes="^Note:"> </section> </div> </div> ... </body> こうすれ…

ES2015時代のJavaScriptテストツールまとめ

最近になって JavaScript を勉強中です。 ES2015 と React にもちょっとずつ慣れてきましたが、テストについては Karma とか mocha とか名前は聞くけど何が何なのかよくわかってなかったので、軽く整理してみます。 JavaScript テストツールの大まかなカテゴ…

AsciiDocによる継続的ドキュメント開発〜1.インストールと基本的な使い方

はじめに ドキュメントを書くための言語としておそらく今一番ポピュラーなのは Markdown だと思いますが、 かっちりした仕様書やユーザーマニュアルなど、より本格的なドキュメント作成にはやや機能不足と感じることがあります。 私も以前、ドキュメントを G…

[git]複数のcommitをまとめてcherry-pickする

ちょいメモ。 別ブランチのコミットを他のブランチにも適用するときに便利な cherry-pick コマンドですが、 複数のコミットをまとめて cherry-pick してしまいたい時がたまにあります。 そんなとき $ git cherry-pick [cherry-pick の始点となるコミット]..[…

Summer '16 開発者向けWebセミナー のメモ

Summer '16 開発者向けWebセミナー | Salesforce Developers 割とちゃんと観た。 UI の新機能(Lightning Experience) ホーム画面のカスタマイズ Lightning App Builder で作ったページが(ようやく)LEX とモバイル両方で使用可能 オブジェクトの日付項目…

HTML5とか勉強会 - React最新情報 に行ってきた

行ってきました。