dackdive's blog

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

2016-01-01から1年間の記事一覧

[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 に乗り換えた。 (追記ここまで) (2018/04/15追記) 現在、記事を書いた時と設定方法が変わっているようです。 こちらの方が最新の手順をまとめてくださっ…

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

こちらの記事を読んで。 http://memo.goodpatch.co/2016/07/beautiful-commits-with-emojis/ この記事では、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する

git

ちょいメモ。 別ブランチのコミットを他のブランチにも適用するときに便利な 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最新情報 に行ってきた

行ってきました。

ESLintでReactとES2015の構文チェック(eslint-config-airbnb)

ES2015の構文チェックと言えば ESLint ですね。 ESLint は "The pluggable linting utility" というだけあって、Rules と呼ばれる膨大なチェック項目の中から 自分がチェックしたい項目を取捨選択し、最終的に .eslintrc という設定ファイルを用意する必要が…

webpack-dev-serverの基本的な使い方とポイント

はじめに (2017/08/10追記) この記事では webpack-dev-server を独立したサーバーとして使う場合の方法です。 また webpack 1 系の情報になっており少々古いです。 最新の設定についてはこちらの GitHub リポジトリを参考にしてください。 https://github.…

VimでESLintをグローバルインストールせずに、Syntastic+ESLintでES2015の構文チェックをする

(2016/10/24追記) しばらく Syntastic を使ってましたが、Neomake というより快適なプラグインが見つかったので今はそちらを使ってます。 (追記ここまで) はじめに vim で ES2015 を書いていると、構文チェックもコーディングと並行して行いたいと感じる…

GCPUG In Tokyo & Osaka #1 に行ってきた

行ってきました。 GCPUG イベント初の、東京 - 大阪を TV 中継で結んだ2拠点同時開催となりました。 会場はサイボウズさん。オフィスがとってもおしゃれ。 GCE で Selenium を動かすというセッションが一番の目当てだったんですが、到着が遅れて最後のセッシ…

webpack.config.jsの読み方、書き方

(2017/08/28追記) この記事は webpack v1 系での config について書かれています。 v2 系以降は一部の項目名などに変更があります。 Migrating from v1 to v2 を読んで v2 系への移行を行うか、または私のリポジトリを参考にしてください。 https://github…

GitHubでの開発に便利なツール3選

ツールというか CLI。 全部有名なのでほとんどの方がご存知だと思うが、自分がよく使うものを。 1. hub https://github.com/github/hub git コマンドの機能を拡張したもの。 (参考) インストール Mac の場合は Homebrew から。 $ brew install hub $ which…

ES6とwebpackでReact.jsのチュートリアルをやってみた

タイトルの通り、こちらの公式チュートリアルをES6でやってみました。 https://facebook.github.io/react/docs/tutorial-ja-JP.html また、チュートリアルでは React や Babel などを CDN で読み込んでいるためビルドは不要になってますが、 実際に開発する…

AWS未経験だけどJAWS DAYS 2016のIoTハンズオンに参加してきた

JAWS DAYS に初参戦してきました。 これまで、AWS は業務で必要になるまでとりあえずいいか...と避けてたんですが やはりこれだけ周囲が AWS を使っている中、「いやー仕事で使ったことなくて全然知らないんですよ」という訳にもいかないなあと思っていた矢…