かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

React 複数のタグを返して render したい

ReactのJSXで複数のタグを返すコンポーネントを作りたい時 JSXはルートが1つのタグでないとエラーになる 例がアレだけど、これはエラーになる function ListData() { // トップの改装に複数のタグあるとエラーになる return ( <li>星宮いちご</li> <li>霧矢あおい</li> <li>紫吹蘭</li> …

React ソートしたときの key にハマる

React入門初心者マンとして引き続きエクセル的なモノを作るチュートリアルをやっています。 今回テーブルをソートしようとしてハマったのでメモ。 react: ^16.8.3 react-dom: ^16.8.3 リストのような配列から作られるエレメントには key を指定する V-DOMはD…

React 切り替えた input タグに focus させたい

React入門初心者マンです。 Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門作者: Stoyan Stefanov,牧野聡出版社/メーカー: オライリージャパン発売日: 2017/03/11メディア: 単行本(ソフトカバー)この商品を含むブログを見る この本…

Haml タグのあるテキスト中のスペースをコントロールしたい

とあるプロジェクトのお手伝いをしていてHamlに入門しました。 雰囲気pugなんであまり変わらないかなとというイメージだったのですが、テキスト中にタグを入れてスペースが必要だったりすると結構メンドーだったのでメモ タグの前後にスペースのあるテキスト…

GAS Spreadsheet 背景色を消したい

GASでスプレッドシートの背景色を白#ffffffではなくナシにしたい (CSSで言うところのtransparent) とき。 setBackground( null ) を使う setBackgroundColorではなくsetBackground。 まるっと1行背景色をナシにするには次のような感じ var sheet = Spreadshe…

git 設定(config)内容を確認したい。

git

お仕事のリポジトリは社用の名前とメールアドレスにしてたかな?と、ふと思いgit configに設定した内容ってどうやって確認するんだったっけ?と忘れてたので備忘録 git config --list --listオプションで設定内容を確認できる。 ショートコマンドは-l $ git …

git コミットログを綺麗にしたい。fixupとsquash

git

チーム開発をしているプロダクトで タイポを修正しただけとか、コミットログが本当にただの履歴になっているままPRをだしたりしてmasterにマージされてしまうとmasterブラントが本質ではないコミットというノイズが混ざり、後から遡って見づらくなったりして…

MySQL 重複したデータを1件だけ残して削除したい

テーブル table_a id name typeID 1 星宮いちご 1 2 霧矢あおい 2 3 紫吹蘭 3 4 神崎美月 3 5 星宮いちご 1 6 大空あかり 1 7 藤堂ユリカ 2 8 有栖川おとめ 4 9 星宮いちご 1 10 霧矢あおい 2 このテーブルからnameとtypeIDが重複されているデータを最初の1…

MySQL グループ化した条件で取得したデータを削除 / 変更にハマる

テーブル table_a id name typeID 1 星宮いちご 1 2 霧矢あおい 2 3 紫吹蘭 3 4 大空あかり 1 table_aのtypeIDカラムのデータが重複してるレコードを削除しようとして次のようなSQLを発行しました。 DELETE FROM table_a WHERE typeID IN ( SELECT typeID FR…

MySQL 複数のコラムをGROUP BYして条件にしたレコードを取得したい

MySQL 5.7 以上でGROUP BYしてレコードをまるっと取ってくる方法は分かりました。 複数のカラムをGROUP BYして検索条件にしてレコードを取ってきたいと思います。 テーブル table_a id name typeID 1 星宮いちご 1 2 霧矢あおい 2 3 紫吹蘭 3 4 神崎美月 3 5…

MySQL GROUP BYしたらエラーになった

お久しぶりのMySQL。 MySQLで重複してるデータを取ろうとしました。 SELECT * FROM table_a GROUP BY name HAVING COUNT(*) >= 2; Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'test.table_a.id' which is n…

docker内のMySQLに接続したい

docker-compose upで立ち上げたアプリで使用してるMySQLにアクセスしたメモ。 尚dockerの事はよくわかってない。 アプリの起動 $ docker-compose up MySQLのホストとポート番号の確認 $ docker ps 現在起動中のコンテナの一覧が出力されるのでmysqlのコンテ…

JavaScript タイプライターみたいなエフェクト作ってみた。

単純に文字列を1文字づつ追加していくだけのものですが See the Pen Text Typewriter with Javascript Promise by KIKIKI (@chaika-design) on CodePen. ※ 表示エフェクトはForkしたものですが、表示ロジックは丸っと作り直ました PromiseはsetTimeoutを繰り…

JavaScript jQueryを使わずに要素選択するやつのメモ。

雰囲気で使ってたから、ちょうどいい機会だしと思い簡単に調べてみたメモ document.getElementById id名で要素を選択して取得する idは#idNameではなく、idName Elementを返す idはHTML上ではユニーク(な筈)仮にidが重複して存在している場合は最初にマッチ…

JavaScript classListでクラス属性を操作するゾ

Element.classList classListは配列のように扱えるDOMTokenListオブジェクト // HTML: <div id="main" class="c1 c2 c3"></div> const main = document.getElementById('main'); const classList = main.classList; console.log( classList ); // => DOMTokenList(3) ["c1", "c2", "c3", value: "c1…

RubyをアプデートしてRails 5 をインストール

1.Homebrew 自体をアップデート $ brew update 2. rbenv, ruby-build をアップデート $ brew upgrade rbenv ruby-build 3. rbenv で Ruby をアップデート インストール可能なRubyのバージョンを表示 $ rbenv install -l Ruby をインストール $ rbenv install…

CSS アニメーションのメモ

transitionとkeyframes-animationの指定。よく忘れるからメモ。(書けば比較的覺えられる筈… transition transition: <property> <duration> <timing-function> <delay> transition-property, transition-duration, transition-timing-function, transition-delay プロパティをスペース区切りでまとめて指</delay></timing-function></duration></property>…

JavaScript クッキー操作できるjs-cookie使ってみた

インストール # 1. ダウンロードして使う GitHub からスクリプトをダウンロードしてスクリプトタグで読み込む <script src="/path/to/js.cookie.js"></script> # 2. CDNを使う <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script> # 3. NPMでインストール npm $ npm install js-cookie --save yarn $ yarn add js-cookie 読み込み import Cookies …

Webpack 4 で Cannot assign to read only property 'exports' of object エラー

こんにちは、Webpackでのbundle化初心者です。 今までgulpで分けたJSファイルをconcatして一つにまとめていました。gulpのconcatだとファイル名を01-みたいなprefixをつけて結合順をコントロールしてました。webpackだとその辺りも解決してくれるっぽいので…

Webpack 4 production モードで console.log を削除したい

gulpでは本番環境用にconsole.logを削除するのにgulp-strip-debugした後にgulp-uglifyでminify化すれば削除できていました。 webpackで、productionモードの時だけconsole.logを削除する方法のメモ 環境 node v10.15.0 webpack v4.29.0 1. UglifyJsPlugin ug…

JavaScript async / await で並行処理

前回のあらすじ 直列処理 async / await 、非同期処理を順番に実行(直列処理)を簡単に書くことができます。 async function sleepSquareFunc(x) { return new Promise((resolve, reject) => { setTimeout(() => { resolve( x * x ); }, 1000); }); } async f…

JavaScript 今更の async / await

async function は Promose を返す returnすると返される値がPromise.resolveされる throwすると値や例外がPromise.rejectされる 何も返さないと関数終了時にundefinedがreturn(resolove)される // return = Promise.resolve() async function resolveFunc()…

Node.jsでFetchAPIを使いたい

node v11.4.0 fetchを使ったJavaScriptファイルをnodeの実行しようとしたらfetchなんて無いよってエラーになりました。 node.jsには現状デフォルトでFetchAPIが入っていないようです。 node-fetch を使う $ yarn add node-fetch JavaScriptファイルでnode-fe…

[WIP] Firebase Cloud Firestore 接続情報が漏れるとパケ死しないか気になっていたので調べてるメモ

最近Compass漁ってNuxt+Firebase とかReactNative(Expo)+FirebaseとかのHands-onに色々と参加していました。 フレームワークで生成した静的ファイル(HTML+CSS+JavaScript)をFirebaseやNetlifyにデプロイすれば簡単にFirebaseと連動したWEBサービス・アプリが…

Nuxt で Firebase を使う (Cloud Firestore & Hosthing)

株式会社ROLOさんが主催しているJavaScript Buildersで受けたHands-onでやったことを復習も兼ねて調べながらメモ。 1. Nuxtのプロジェクトを作成 $ npx create-nuxt-app <Project Name> $ cd <Project Name> create-nuxt-appをインストールした覚えがないのですが、npxコマンドだとそのま</project></project>…

WordPress PHP7.3にしたらデフォルトテーマでno more memoryってWarningが表示された件

PHP7.3のバグphp.iniでコメントアウトされてる `;pcre.jit=1` を `pcre.jit=0`として有効にすればOKっぽい。(今の所...

WordPress taxonomy.phpのページ現在のページのtermを取得したい。

get_queried_object()はカスタム投稿タイプの時、保証されていないっぽいからget_query_var()でtermのslugを取得してget_term_by('slug', $termSlug, 'taxonomy');するのが良いっぽい!

yarn globalにインストールする時に気をつけること

yarn runでローカルパッケージが実行できるのが便利でyarnをメインで使っています。 フリーランスで色々なプロジェクトに関わっていると、プロジェクトごとにモジュールのバージョンを揃えておいたほうが安全なので基本的にパッケージはプロジェクト配下(ロ…

WordPress PHP 7.x でデータベース接続確立エラー

php.iniを開いてdefault_socketをチェックしよう。WordPressはmysqli.default_socketが設定されてないとデータベース接続確立エラーになるみたい。

MySQL mysql.socketがどこにあるか探したい。

`$ mysql_config --socket` で探せる