メモブログ

技術的なことを書き連ねるブログ

phpでのコールバックの渡し方

php

javascriptが自由過ぎて、 phpでコールバック渡すのどうするんだ。。ってなったので メモ ここに色々のってる php.net

es-lint-react の 「react/no-access-state-in-setstate」

setStateの中でthis.stateを参照しようとしたら怒られた話。 function increment() { this.setState({value: this.state.value + 1}); } なんでダメかというと github.com setState({value: 1 + 1}) setState({value: 1 + 1}) 連続で使用した時に 1+1 = 2 , …

Vue Cli + Vuetify で バドミントンスコアシートを作った

vue.jsの勉強 & ペーパーレスのために バドミントンスコアシートのwebアプリを作ってみました。 バドミントンやる方は是非使って見てください! badminton.htmlgo.site github.com 苦戦したのは、Vuexのstore内のstateのデータ構造です。 これは何回も作り直…

jsでのカウントの処理(prevとかnext)を汎用的にする

今まで、スライダーとか 「進むボタン」「戻るボタン」 を実装する時に、 class Slider{ constructor(){ this.array = [ 'hoge.jpg', 'huga.jpg', 'baz.jpg', ] this.count = 0 this.length = array.length } prev(){ if(count === 0){ count = length - 1 }…

Vue.js で dataの配列内やオブジェクトのプロパティの値がうまく更新されない時

例えば、以下みたいな時、 配列の各要素を直接更新したい、 オブジェクトのプロパティを新しく追加したい、 data(){ return { items:[10,10,10], obj:{} } }, methods:{ updateItem(){ // 追加されない! this.items[0] += 1 }, updateObj(){ // 追加されな…

javascriptやcssの命名規則のメモ

すぐ名前を忘れるのでメモ 名前 例 用途 スネークケース young_man bemとか? キャメルケース youngMan 関数、メソッド パスカルケース YoungMan Class ケバブケース young-man コンポーネント ケバブは串刺しだかららしい、覚えやすい。 キャメルとパスカル…

Reactのライフサイクル

Reactでライフサイクルについて学ぶ。 毎回、忘れるので忘備録も兼ねて、文章で読んでもイマイチ頭に入らないのでモックで挙動を確認するのが一番いい。 codesandbox.io componentWillMount コンポーネントがDOMツリーに追加される直前に一度だけ呼ばれる 初…

Vue.jsで flickr 画像検索アプリを作る

Vue.jsのRouterやらVuexを覚えるために画像検索アプリを作りました。 Vue CLI を使っています。 この規模だとVuexを使うメリットもそんなに感じられず。 お作法の勉強にはかなりなりました。 ■DEMOページ https://underground0930.github.io/demo/vueFlicker…

Vue.js で 計算電卓アプリを作る

Vue.jsが流行っているので、 ちょこちょこ勉強していたのですが、 簡単なアプリならさくっと出来るなーと思い、 練習がてら電卓アプリを作ってみました。 巷で転がっている電卓アプリはeval()を使いまくっていてとても簡単そうだったのですが evalはあまり推…

話題のapplication bundler 「PARCEL」を試す

「Blazing fast, zero configuration web application bundler」 「高速、設定無しのwebアプリケーションバンドラー」 巷で話題のバンドラー「PARCEL」 よくwebpackの代わりになりうるか? みたいなものをSNSで見かけてはいましたが。 この度を試してみまし…

youtubeがopacity:0 では押せなくなっている

css

よくある使い方として、 youtubeをopacity:0 で隠しておいて、画像なりを敷いておき そこをclickしたら、youtubeのモーダルが再生する みたいな仕様はあるあるだと思う。 これは何が良いかというと、PCはapi使えばyoutubeの挙動を外部から制御出来るのだが、…

javascriptのthisについてまとめる

頭ではなんとなく理解しているけど、javascriptのthisはややこしい なのでちゃんとまとめようと思いました。 そもそも、javascriptにおいて「this」は何を指すか? 色々調べていてとてもしっくりくる説明があった。 thisが呼ばれた関数(メソッド)が所属し…

macで簡易ローカルサーバーを立てる

mac

とりあえず、なにも準備しないで簡易的にローカルサーバーを立てる時、 macOSにはデフォルトで Pythonとphpが入っています。 python --version Python 2.7.10 php -v PHP 7.1.19 (cli) (built: Aug 17 2018 18:03:17) ( NTS ) Copyright (c) 1997-2018 The P…

nodeのバージョン管理をnodebrewからndenvに変更した

nodeのバージョン管理にnodebrewhttps://github.com/hokaccha/nodebrewを使っていた。 とても便利だったのだがプロジェクトごとにnodeのバージョンを変えるのがいちいち手動で面倒だった。 そして、「あれ、このプロジェクト nodeのバージョンなんだっけ??…

.bash_profile と .bashrc の違い

.bashrcしか使っていなかったのと 毎回違いを調べて忘れるのでメモ。ここのリンクに詳しく載っていました、ありがたい。.bash_profile と .bashrc は何が違うの?使い分けを覚える - Corredor ■bash_profile ・bashrcより先に実行される ・ログイン時に1回だ…

cssアニメーションで JQueryのfadeIn fadeOutを実装する

css

最近、脱jQueryの流れがあるので、大好きではあるが今やっている案件は、jQueryを使わないで実装することにした。 そこで以外にめんどくさいのがfadeIn fadeOut。 jQueryでは、 opacity:1 → opacity:0 → display:none display:block → opacity:0→ opacity:1 …

photoshop cc でPSDからテキストデータを抜いてくれるスクリプト『ps_bramustextexport』

【PS_Bramus.TextExport-1.3】なるものを見つけたので共有◆スクリプトダウンロード先 https://www.bram.us/2008/03/16/ps_bramustextexport-13-automatically-export-all-text-layers-from-photoshop-psd-to-a-text-file/◆インストール、使い方 Photoshopの…

gulp(node)でjsonのデータを読み込む時、jsonファイルの修正が都度反映されない件

gulp(node)を使用時、jsonなどの外部ファイルにデータを持っておき、それを読み込んで処理をしたい時があると思います。が、以下のように requireで読み込んだ場合、初期に読み込んだものがキャッシュされてしまいタスクを走らせた後に、jsonファイルを修正…

.gitignoreでフォルダ内を複雑に無視する方法

git

ディレクトリ内にある特定のフォルダのみignoreしたい場合は(今回の場合はhoge) 面倒だが以下のように書いていくしかないみたい。 全体を無視 ↓ その下の特定のディレクトリだけ許可 ↓ その下の特定のディレクトリの下を無視 ↓ その下の特定のディレクトリ…

gulpで引数によって処理を分けたい

例えば、引数によって開発環境ではjsをそのまま、本番環境ではminifyする。 などしたい場合。gulplife.coffee ############ # module ############ gulp = require 'gulp' coffee = require 'gulp-coffee' # coffeescriptを書くのに必要 uglify = require 'g…

モバイルサイト高速化技術 AMP

AMP

最近話題になっているAMP(Accelerated Mobile Pages)を勉強してみました。 AMP AMPページのデモを作ってみたので以下からどうぞ!(スマフォでみてください) ソースはこちら https://github.com/underground0930/AMP_TEST デモはこちら https://underground…

慣性スクロールのアニメーション用jQueryプラグインを作成しました。

最近案件で作った慣性スクロールのアニメーションを なんとかプラグインに出来ないかということで、 ちょっとjQueryプラグインにしてみました。 あまりスマートには出来なかったんですが、スピードとか位置の調整がしやすいので いい感じにスイーンとしても…

mac で VirtualBoxを使い ieの検証環境を準備する

webmem.hatenablog.comkudakurage.hatenadiary.compc-karuma.netpc-karuma.net上記記事にも記述してあるが、ダウンロードする仮想マシンがデフォルトだと、 Windowsのものがダウンロードされてしまうので、macのものに手動で変更する必要がある。https://az4…

vagrantの設定

フロントエンドの開発だけならばnode.jsなりでローカルサーバーを立てればいいが、サーバーサイドのローカル開発環境も欲しい!ってなったとき&Windowsマシンでもlinux環境が欲しいとなったので(MTやWordpressレベルならxamppやmampでいいかも)、 「vagrant…

gulpでbabelを導入する

まだブラウザだったりnodeで対応していない箇所もあるけど、 そろそろES6の勉強もしないとなぁということで、手っ取り早くgulpにbabelを導入することにしました。https://babeljs.io/ インストール npm install --save-dev gulp-babel babel-preset-es2015 b…

Arrayオブジェクトのメンバ

arr.concat(arr2) 2つの配列を結合 var arr1 = ["りんご","バナナ","みかん"]; var arr2 = [1,22,333,4444]; console.log(arr1.concat(arr2)) // ["りんご", "バナナ", "なし", 1, 22, 333, 4444] arr.join(del) 配列内の要素を区切り文字で結合 var arr1 =…

Mathオブジェクトのメンバ

abs(num) 絶対値 document.writeln(Math.abs(-20)); // 20 絶対値 max(num1,num2) 2つのうち大きいほうを返す document.writeln(Math.max(11,2)) // 11 min(num1,num2) 2つのうち小さいほうを返す document.writeln(Math.max(11,2)) // 2 pow(base,p) べき…

Stringオブジェクトのメンバ

indexOf(substr [,start]) 文字列前方(start+1文字)から部分文字列substrを検索 var str1 = "あいうえおあいうえお"; document.writeln(str1.indexOf("えお")); // 3 前から検索 document.writeln(str1.indexOf("えお",-5)); // 3 マイナスにしても0から?…

スライダーのプラグイン slick

色々便利なんだけど、 オートプレイ中に→STOP→別タブに移動→戻ってくる→また動き出しちゃう。というバグがある。【jQuery】高機能で実装も簡単なスライダー-slick.jsの使い方-再生・停止ボタンも付けてみました – Snaplog 今、タブを開いているかいないかを…

EditorConfigの設定

www.tam-tam.co.jpatom.ioeditorconfig.org