2019-01-01から1年間の記事一覧
案件などでも使えそうな実装だったので、メモがてらブログ記事に残しておく。 例えば、何かしらの記事一覧を取得してきて、3点リーダーで省略した文一覧として表示してから「もっと見る」ボタンで表示するなど、様々な応用例が考えられる。 index.js (エント…
今回、React hooksによるToDoアプリを作って、従来のclassコンポーネントによる書き方と比べて、そのように書き方が変わったかというところを検証してみた。 結果からいうと、React hooksを導入して書いた方が圧倒的に書きやすかった。 コードがはるかにリー…
asyncファンクション asyncファンクションが通常のファンクションと何が違うかは、以下の2つの例を見ればわかる。 function hello(ms) { return new Promise(resolve => setTimeout(() => { resolve('Hello from the other side!') }, ms)) } console.log(he…
Promiseを組み合わせる JavaScriptはPromiseの組み合わせのために、Promise.all()とPromise.race()という2つのビルトイファンクションが用意されている。 Promise.all() Promise.all()はpromiseからなる配列を組み合わせて、それらの処理結果を含むかたちで…
Promiseのthen()メソッドをコールすることは、既存のpromiseにハンドラをアサインするだけでなく新しいpromiseを作ることである。 const newPromise = promise.then(handleSuccess, handleRejection) Promiseチェーン successまたはerrorハンドラがpromiseを…
モダンなJavaScriptでは、非同期処理においてpromiseとasync/awaitが主流となっている。 Webpackはコードスプリッティングをpromiseによって簡便化している ブラウザにはビルトインファンクションであるfetchが存在し、resultをawaitできる ReactではReact.S…
macOS 10.15 CatalinaにアップデートしてMongoDBを起動しようとしたときに直面したエラーの対処法。 エラー内容 MongoDB exit code 100 Read-only system volume in macOS Catalina macOS Catalina runs in a read-only system volume, separate from other …
Reduxイントロ Reduxとはアプリケーションの状態（state）を管理するためのJSライブラリ。 ではアプリケーションの状態とは具体的に何かというと、いろんな目的で後に使用する情報を保持しておくためのグローバルオブジェクト。 小さな例ではページロード時…
HOCとAnt Designとやってきたので、それらのコンセプトを頭に置きながらContext APIというものを学んでみる。 コンポーネントが増えてアプリケーションが大きくなればなるほど、stateやpropsの受け渡しは大変になる。 そんなときに使える手段の一つとしてCon…
コメント追加するUIをAnt designを用いて作成。 ant.design create-react-appでのAnt designの導入 create-react-appの設定をオーバーライドする必要がある。 ant.design eslintの設定 Standardを用いた。 github.com Codesandbox
例えば、複数のコンポーネント間で同じファンクションやロジックを使用している場合、繰り返しが発生していることになりDRYではない。そんなときに使えるのがHigher Order Components (HOC)である。 実はVanillaJSにもHigher Order Functionsが存在していて…
今までPropTypesやTypeScriptによる静的型付けを述べてきたが、今回はFlowを用いた実装をしてみる。 flow.org 次のようなディレクトリ構造で、5つ星評価のUI実装を考える。 . ├── Stars.css └── Stars.js インストール インストール方法は公式ドキュメントに…
Reactでは、状態管理がDOMではなくReact componentで行われる。 Reactなしである場合、例えばformのinput要素の状態を取ってくる場合は従来はDOM操作によって取ってくるという手法だった。 ではどちらの方法がベターであるのか？ この質問に付随して出てくる…
JavaScriptにはBoolean, Null, Undefined, Number, String, Symbol, Objectの7種類のデータ・タイプが存在する。 それらの型をハンドリングする際にFlowとかTypeScriptなどのツールが導入されているわけだが、Reactのプロジェクトでそこまで導入するのが面倒…
new binding /** * new Binding */ const Animal = function(color, name, type) { this.color = color this.name = name this.type = type } const zebra = new Animal('black and white', 'shimauma', 'plant-eating animal') console.log(zebra) 下記のよ…
Implicit binding 次のようなファクトリーファンクションがあるとする。 いわゆる実行時にオブジェクトを返却するファンクション。 /** * Implicit Binding * Left of the dot at call time */ const Person = function(name, age) { return { name, age, sa…
webpack + babelでの開発環境に加えて、eslint + prettierの設定まで。 パッケージのインストール react + react-dom npm install react react-dom ちなみにreact-domはreactをDOM向けにコンパイルするパッケージで、 DOM以外の環境などにコンパイルする際に…
チェックボックス、ラジオボタン、複数セレクト、テキスト入力など。 inputs.vue <template> <div id="app"> <h4>Check Boxes</h4> <input type="checkbox" id="checkbox" v-model="checked" /> <label for="checkbox">This box is {{ checked ? 'checked' : 'unchecked' }}</label> <hr /> <h4>Radio Buttons</h4> </hr></div></template>
たまに見返したいので。dark.min.cssは下記のものを使用。 github.com tobuy.vue <template> <div> <h1>Vue tobuy list</h1> <form @submit.prevent="addItem" autocomplete="off"> <input type="text" v-model="itemToAdd" @keypress.enter="addItem" /> <button>{{ buttonText }}</button> </form> </div></template>
フォームの初期状態 下記のようなファイル構成。 . ├── app.js └── index.html index.html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue form validation</title> </meta></meta></meta></head></html>
rapid prototyping setup VueのSFC (Single File Component) で軽く何かを試したいとき、いちいちvue-cliを使うのは面倒。 そこでvue-cliの一部機能であるcli-service-globalを使うことで、rapid prototypingができて便利。 vue-cliのインストール まずはVue…
Classes Blueprint to create an object with some fields (values) and methods (functions) to represent a 'thing'. class Vehicle { drive(): void { console.log('chugga chugga'); } honk(): void { console.log('beep'); } } class Car extends Vehic…
Interfaces Creates a new type, describing the property names and value types of an object 例えば、今まで学んだことを利用して次のように型定義を行うと、コードが長くなってしまって可読性も低くなる。 const oldCivic = { name: 'civic', year: 200,…
TSでarrayを扱う上で重要なポイント TS can do type inference when extracting values from an array TS can prevent us from adding incompatible values to the array We can get help with map, forEach, reduce, functions Flexible - arrays can still…
ファンクション周りでのannotations/inference使い分け Type annotations for functions Code we add to tell TS what type of arguments a function will receive and what type of values it will return. Type inference for functions TS tries to figur…
重要な概念を2つほど。 Type annotations / Type inference Type annotations Code we add to tell TypeScript what type of value a variable will refer to Type inference TypeScript tries to figure out what type of value a variable refers to 前者…
外部データから取得して一覧表示して、Like付けたり削除できたりできるところまで。 ファイル構成 . ├── App.js ├── Vidly.jsx ├── components │ ├── atoms │ │ └── Like.jsx │ └── molecules │ └── Movies.jsx ├── data │ └── services │ ├── fakeGenreServ…
カウンターコンポーネントを最終的にリファクタリングしたもの。 ファイル構成 . ├── App.jsx ├── components │ ├── Counter.jsx │ ├── Counters.jsx │ └── Navbar.jsx └── index.js ファイルの中身 App.jsx import React, { Component } from 'react' impor…
Lifecycle Hooks ReactのLifecycle hooksでよく用いられるものはだいたい次の通り。 Mount constructor render componentDidMount Update render componentDidUpdate Unmount componentDidUnmount Mounting phase constructor, render, componentDidMountの…
React復習がてら要点をまとめていく。 React学習3で学んだところから、さらに階層深くコンポーネント構成をする、次のようなケースの場合。 . ├── App.jsx ├── components │ ├── Counter.jsx │ ├── Counters.jsx │ └── Navbar.jsx └── index.js Objectやargu…
