Entries from 2019-03-01 to 1 month

ES7: async/await

ES7

developer.mozilla.orgasync関数は実行するとPromiseが返る。 何もreturnしなくてもresolve扱いになるし、何か値をreturnすると、その値をもってresolveされる。 function multiplyBy2(number) { return new Promise((resolve, reject) => { setTimeout(() =…

ES6: Promise

ES6

developer.mozilla.org function multiplyBy2(number) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(number * 2); }, 1000); }); } multiplyBy2(100) .then(multiplyBy2) // 関数名を渡すと、引数入れて処理してくれるから便利 …

ES6: Generator

ES6

developer.mozilla.orggenerator関数とyield構文。 function* greetingGenerator() { yield 'Hello'; yield 'こんにちは'; yield 'Hola'; } const g = greetingGenerator(); console.log(g.next().value); console.log(g.next().value); console.log(g.next(…

Todo+を入れてみた

marketplace.visualstudio.comTodoの開き方 ・cmd + shit + P でCommand Paletteを開き、Todoで検索、Todo:Openを選択 ・もしくは、プロジェクト内にあるTODOファイルを開くショートカット ・Todo作成: cmd + return ・Done: option + D ・Cancel: option + C

Visual Studio CodeをTerminalから開く

・Visual Studio Code を開いて、cmd + shift + P。 ・Shellで検索 ・Install 'code' command in PATH を選択これで、Terminal開いている時に任意のディレクトリでエディタを起動出来る $ code . 参考stackoverflow.com

react-router v4のあれこれ

React用ルーティングライブラリ github.comReact単体だと、URLとアプリの描画状態が紐付いていない。 ルーティングライブラリを導入すると、、 ・特定URLを打ち込むと、特定の画面に遷移 ・特定の画面状態を、URLに反映 が、できるようになる‍♂️web向けに導…

URLの諸々把握

例えばこんなURLがあったとして、、 http://www.foo.com:8000/mac/macbook.php?color=grey#custom よく使うのはこのあたり location.href => http://www.foo.com:8000/mac/macbook.php?color=grey#custom location.hostname => www.foo.com location.search …

react-reduxを使ってみる

React Redux is the official React binding for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update data.Reactコンポーネントが、Reduxの管理するストアからデータを読み、ストアに向けて…

lsコマンドでディレクトリのみ表示

そういうのはオプションで用意されてないんだと🕵🏻‍♂️ 先頭がdの行をgrep $ ls -l | grep '^d' www.cyberciti.biz

Container Component & Presentational Component

react-reduxを使う際に、良しとされているコンポーネント分離の考え方。 最近ではHooksを利用するやり方も?Container Component・ReactとReduxの連携役 ・ReduxからActionやStateを受け取ってPropsとして渡す ・JSXを入れない ・ラップ用のdivを除いて、自…

Reduxメモ

Redux: Fluxの概念を拡張したstate管理ライブラリ・Store: アプリの状態(state)とロジックを保持 ・Reducer: Storeが保持する状態を変化させる関数 ・Action: 状態変化を起こすメッセージオブジェクト補足) ・FluxにはDispatcherの概念があるが、こちらに…

メソッドをバインドする

配下にあるコンポーネントにハンドラを受け渡し、そのハンドラ内でsetStateする場合、あらかじめthis参照を親インスタンスにバインドしておく必要がある。JavaScriptにおいては関数を変数として渡す際、コンテキスト(this参照)については渡されない為。実…

setStateで配列更新するパターン

とにかく、元のstateにある配列を直接いじらないこと。 class Shelf extends Component { constructor(props) { super(props); this.state = { books: [{ id: 0, title: "Never Ending Story" }], controlId: 1, }; } addBook(title) { const { books, contr…

前のディレクトリに戻る

いっつも忘れる🐶 $ cd -

Functional Component & Class Component

Functional Component import React from 'react'; const Cheers = (props) => { return <div>Hello, {props.name}!!</div>; } Class Component ・stateを利用してコンポーネントの状態を記録できる ・ライフサイクルメソッドを利用できる import React from 'react'; c…

webpack is...

webpack = モジュールバンドラー CommonJSのモジュール方式で書かれたスクリプトをまとめて、JSファイルを出力する。 npmパッケージを使う上で、避けては通れないツール。 Loaderという仕組みにより、スクリプトをまとめる前に任意の処理(例: JSXのトランス…

zshでgit reset --soft HEAD^出来なくて焦った

キャレットは使えないんだと🕵🏻‍♂️ ~/w/s/t/src ❯❯❯ git reset --soft HEAD^ zsh: no matches found: HEAD^ ~/w/s/t/src ❯❯❯ git reset --soft HEAD\^ ~/w/s/t/src ❯❯❯ git s M index.js参考 qiita.com

Avoiding Mutation

JSで元のオブジェクトに変更を加えずに処理したい時配列 // 元の配列に変更を加えず、一段階の深さのコピーを返す var shallowCopy = fruits.slice(); // 連結 var array1 = ['a', 'b', 'c']; var array2 = ['d', 'e', 'f']; console.log(array1.concat(arra…

Developer Tools for React & Redux

マストで入れるやつ👨‍🌾chrome.google.comあとはReactタブ選んで左側のターゲットアイコン使って、調べたいエレメントをクリック👆 Redux用はこっち chrome.google.com

Babelの変換をオンラインで試す

ReactのJSX展開が試せたりする🤓

グローバルIPを確認

$ curl inet-ip.info参考 qiita.com

自分のマージコミットを確認する

Git

$ git log --after='2018/10/01' --author=<user_name> --merges --oneline $ git log --after='2018/10/01' --author=<user_name> --merges --oneline | wc -l</user_name></user_name>

Googleの検索結果を英語にする

■ とりあえずページ単位で英語にしたい時https://www.google.com/?hl=enもしくは https://www.google.com/intl/en ■ 常に英語で検索したい時設定 > 言語 を選択 あとはお好きに👨‍💻 参考pc-karuma.net

jsonをpretty print

毎度echo打ってjqするのめんどかった $ echo '{"key":"value"}' | jq . { "key": "value" }ので、たいした処理じゃないけどスクリプト化 $ cd ~/bin $ touch ppj $ chmod 755 ppj#!/bin/sh # ppj = pretty print json echo "$1" | jq ..zshrcに追記、パスを…

配列をpretty print

consoleでまとまった数のデータを調べている時に、縦に見やすく並べたい irb(main):058:0* pp App.limit(5).pluck(:id, :title) (0.9ms) [Shard: master] SELECT `apps`.`id`, `apps`.`title` FROM `apps` LIMIT 5 [[1, "テストゲーム1"], [2, "TestApp2"], …

grepで複数除外

egrepコマンド使ってパターン指定 ~/Desktop ❯❯❯ ls -lg total 0 -rw-r--r-- 1 staff 0 Mar 12 20:35 one.log -rw-r--r-- 1 staff 0 Mar 12 20:35 three.log -rw-r--r-- 1 staff 0 Mar 12 20:35 two.log ~/Desktop ❯❯❯ ~/Desktop ❯❯❯ ls -lg | egrep -v 'one…

tig tips

Git

みんなだいすきtig👨‍💻🥤・過去にリネームされたファイルのコミット履歴を辿りたい $ tig --follow <file_name></file_name>

幸せになれるmycli

ずっと補完してほしいと思ってたらこんなステキなのがあるのね‍♀️インストール $ brew install mycliログイン ~ ❯❯❯ mycli -u root -h localhost -D test_table_join mysql 5.6.42 mycli 1.19.0 Chat: https://gitter.im/dbcli/mycli Mail: https://groups.g…

tsx拡張子が必要だった

コードは合っているはずなのに、どうもTSLintエラーが出るなぁと思ったら、ファイル拡張子が.tsだったというオチ🤷‍♀️参考github.com

zsh & prezto 導入

zsh

zshインストール $ brew install zshログインシェル変更 $ sudo vi /etc/shells # 一番下の行に追加 /usr/local/bin/zsh # 変更 $ chsh -s /usr/local/bin/zshpreztoインストール $ git clone --recursive https://github.com/sorin-ionescu/prezto.git "${Z…