dackdive's blog

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

React

React公式ドキュメントの「You Might Not Need an Effect」を読んだ

少し前に話題になっていた以下のドキュメントをようやく読んだ。 beta.reactjs.org 記事を書いた時点でドキュメントはまだベータという位置づけ。 長いので先に目次を。 ⭐ は中でも特にへえ〜って思ったやつ。 はコメント。 How to remove unnecessary Effec…

TypeScript: ReactNode型とReactElement型とReactChild型

メモ。 ReactNode ReactElement ReactChild の関係性、何回か調べている気がするので整理しておく。 @types/react の型定義 https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts を参照した。 図で、ReactNodeArray → A…

TypeScript: ReactのContextに型をつける(useContextと16.3以前のLegacy Contextも含む)

TypeScript + Reactでコンポーネントを書くとき、Context を使っているコンポーネントに対してどう型を書くのが正解か迷ったので、調べたことをメモしておきます。 調べるきっかけとなったコンポーネントは React 16.3 以前の Legacy Context を使った書き方…

React 16.3.0で追加されたStrictModeコンポーネントについて

2018-04-01のJS: TypeScript 2.8、React 16.3.0、TensorFlow.js - JSer.info を読んで。 React 16.3.0 から StrictMode コンポーネントというものが追加されたらしい。 公式ドキュメントを読んでみます。 StrictMode とは StrictMode はアプリの潜在的な問題…

electron-react-boilerplateでCSSフレームワーク(Lightning Design System)をインストールするとエラー

Chatter Desktop という Electron アプリ を作っていて真っ先にハマったところのメモ。 Lightning Design System という CSS フレームワークを入れようとしたところ、以下のエラーとなった。 $ git clone --depth=1 https://github.com/chentsulin/electron-…

LDSとdesign-system-reactをBabel&webpackな環境に導入する

メモ。 ちょっと前から Lightning Design System(LDS)の React 実装が公式から出てます。 Lightning Design System for React で、ようやく入れてみようとドキュメントを頼りにやってみたところ色々手こずったので、手順をまとめておきます。 はじめに des…

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

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

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

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

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

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

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

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

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

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

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

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

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…

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

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

Material-UIでrefを使う

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

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

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

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

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

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

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

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

行ってきました。

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

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

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

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