サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
円安とは
ginpen.com
const nodeList = document.querySelectorAll('.target'); const arr = Array.from(nodeList); console.log(arr); 利用可能なのは以下の2種類です。 配列風オブジェクト 反復可能なオブジェクト あと第2引数に関数を受け付けて、 map() みたいなマッピングが可能です。
配列とかおれおれAdvent Calendar2018 – 04日目 その名の通り find() で見つける (find) ことができます。 オブジェクトの配列相手に使うのが普通。 基本的な使い方 引数に真偽値を返す関数を与えます。 const users = [ { id: '101', name: 'Alice' }, { id: '102', name: 'Bob' }, { id: '103', name: 'Charlie' }, ]; const id = '102'; const targetUser = users.find((v) => v.id === id); console.log(targetUser); // => { id: '102', name: 'Bob' } この例だと (v) => v.name === id の部分が find() の第1引数「真偽
配列とかおれおれAdvent Calendar2018 – 02日目 JavaScriptの配列のインスタンスを保ったまま中身を全て削除したい場合、 length に 0 を設定するだけで実現できます。 仕様 length の変更で要素が削除されることについて、配列特殊オブジェクト Array Exotic Objects の項に記載があります。 9.4.2 Array Exotic Objects … whenever the value of the length property is changed, every own property whose name is an array index whose value is not smaller than the new length is deleted. This constraint applies only to own
というわけでお探しのはこちらです。 Understanding transform:matrix() https://understanding-transform-matrix.ginpei.info/ スマホでも存分にご理解頂けます。 見た目 こんな感じ。 pic.twitter.com/GsxurJJbKI — 高梨ギンペイ (@ginpei_jp) November 13, 2018 この動画だけでも十分理解できそう。 matrix() とは 動かして完全理解して頂きましたら、改めてこの関数を紹介したいと思います。 matrix() は、 transform で使える各種関数すなわち translate(), scale(), rotate() 及び skew() を置き換え得る最強の関数です。配列の reduce() 的な立ち位置、といえばJavaScriptに明るい皆さまに通じ
library/wordpress が公式に提供されているのを昨日知りました。WWW+PHP+WordPressなパッケージみたい。DBは library/mysql を使うとして、この二つでさっくり環境が用意できました。 $ docker run --rm -d --name my-mysql -e MYSQL_ROOT_PASSWORD=passwd -v `pwd`/db:/var/lib/mysql mysql $ docker run --rm -d --name my-wordpress --link my-mysql:mysql -p 80:80 -v `pwd`/wp:/var/www/html wordpress これで http://localhost を開くと、WordPressの初期設定が始まります。DBの初期処理にちょっと時間がかかるので、エラーが出てもちょっと待
// @ts-check を書くと、JSファイルでもTSとしてvalidateしてくれるそうです。 JavaScript Programming with Visual Studio Code Type checking 普通のJavaScriptコードでも、 `//@ts-check` を付けておくとVS CodeがTSっぽく型を見てくれるんだって。これ便利だ。https://t.co/bciWQKhYft pic.twitter.com/twczq1klX1 — 高梨ギンペイ (@ginpei_jp) August 16, 2018 (@tsのひとごめん。) DOMノードどーすんの問題 引数もらって計算して結果を返すだけの関数ってならこれすげー便利で良いんだけど、 querySelector() 使うと対応が面倒な感じになる。これどうしたら良いかなあ。というかTSでもよく分からないや…
書いたぞ。 ginpei/docker-rails-example 日本語版の方をセルフ転載します。最新版はGitHub↑のほうで。 関連: Docker公式イメージでWordPress環境を用意する。 | Ginpen.com →English DockerでRailsアプリを作ったり動かしたりするサンプルとチュートリアルです。 Windowsの方 コマンドプロンプトやPowerShell入力時、 `pwd` を %CD% に置き換えてください。 じゃないと例えばこんな感じのエラーになります。 docker: Error response from daemon: create `pwd`/app: “pwd/app” includes invalid characters for a local volume name, only “[a-zA-Z0-9][a-zA-Z0-9_.-]”
Chrome用とFirefox用です。 GitHubでソースコード公開してます。 ginpei/devtools-z-index 見た目 Chrome版。 Firefox版はサブペインじゃなくてパネルとして追加するのでちょっとアレです。仕方なかった。 はじまり コードスニペット版。これはこれで手軽でよろしいね。 ページ中の要素を `z-index` の数字が大きい順に一覧表示するやつです。https://t.co/gNGkdP03ta pic.twitter.com/v0VRNKCKel — 高梨ギンペイ (@ginpei_jp) June 11, 2018 Chrome版について https://chrome.google.com/webstore/detail/bcnpmhefiohkpmjacfoanhbjhikegmoe/ Elementsパネル内に “z-index” ペインを追
現代的JavaScriptおれおれアドベントカレンダー2017 – 19日目 良いか??? 概要 Array#map() じゃなくて Map というビルトインコンストラクタです。 辞書 (dictionary) みたいなノリで使えます。 const map = new Map(); map.set(100, 'Number 100'); console.log(map.get(100)); // => "Number 100" for (let [key, value] of map) { console.log(`[${key}] = [${value}]`); }
最近思うところあってブラウザー拡張を作って公開しました。(Macが対応していない絵文字を使っているので、変に見えます。いずれどうにかする。) 仕事中についSNS見ちゃうのを止めるやつです。 Chrome → Stop SNS – Chrome Web Store Firefox →Stop SNS – Add-ons for Firefox Edge → 未公開 ソース → ginpei/stop-sns: Chrome, Edge, Firefox extension that helps you to spend less time on SNS. スイッチオンにしてTwitterとかを開くと止められます。 作ったものについてはそのうち記事に書きたいと思ってます。あとブラウザー拡張の作り方についてもちゃんとした形にしたいなと思って準備中。 それはそれとして、作成中に得た知見のひとつ、互
input イベントを使います。 時間差なしで入力値が取れる。わあかんたん。 jQueryを使った例。 change イベントは入力を終えてフォーカスを外した際に発火するのに対して、 input イベントは入力の度に発火します。 対象要素 <input> <textarea> <select> … IE、Edgeでだめ contenteditable 属性付きの要素 … IEでだめ <select> は change イベントを使います。この場合は変更したらフォーカス残したままでも、すぐ発火する。(よね? しない環境ある?) <select> のデモ contenteditable は、逆に change イベントが発火しない。 contenteditable のデモ チェックボックスとかはだめ MDNによると、歴史的経緯により <input type="checkbox"> とかは cl
現代的JavaScriptおれおれアドベントカレンダー2017 – 22日目 概要 配列とか Map とかは for-of 文を使って、添え字アクセス? [] を使わずにぐるぐるできます。 const arr = ['Hello', 'World', '!']; for (let item of arr) { console.log(item); } 普通のオブジェクトでは使えないけど、インターフェイスを追加すれば使えるようにもなります。 使い方 普通の for 文を使って配列で arr[i] する代わりに for-of でいきなり値を取ってこれます。
現代的JavaScriptおれおれアドベントカレンダー2017 – 21日目 概要 基本的な使い方は Map や Set と一緒です。キーに使われるオブジェクトの参照カウントを増やさないとかそういうアレで、「弱い参照」で保持します。メモリリーク対策とかに。 Map 、 Set との違い 基本は Map 、 Set と同様なんだけど、キーが弱い参照(後述)になります。 できること: get() (WeakMap) set() (WeakMap) add() (WeakSet) has() delete() できないこと: size forEach() clear() keys() 他 キーはオブジェクトのみ Map は何でもキーに使えたんだけど、 WeakMap はオブジェクトだけです。 まあ意味ないしね。 弱い参照? JavaScript界隈では新しい概念のはず。 プログラム内で使ってる情
const data = { id: 123, name: 'Alice' }; const { id, age } = data; console.log(id); // => 123 console.log(age); // => undefined 右辺のオブジェクトから合致する名前のプロパティの値を代入します。 (id) 右辺にないもの (age) を指定すると undefined になり、また右辺にあるもの (name) を必ずしも左辺に用意する必要はありません。 かんたん、かんたん。 初期値 = で、値が undefined だった場合の初期値を設定できます。
// Promiseオブジェクトを返す関数 function doLater() { return new Promise((resolve, reject) => { const result = 123 setTimeout(() => resolve(result), 1000); }); } doLater() .then(result => { console.log('(1/2)', result); return doLater2(); // Promiseオブジェクトを返す関数 }) .then(result => { console.log('(2/2)', result); }) .catch(err => { console.error(err); }); わかっちゃえば簡単だと思うんだけど、慣れないと戸惑うかも。 旧世代: コールバック 非同期処理やるとなると、コー
現代的JavaScriptおれおれアドベントカレンダー2017 – 11日目 概要 Promise を使った非同期の処理をさくさく書けるやつです。 簡単な例としては、まず Promise オブジェクトを返す関数↓があったとして、 // 指定ms待つ function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } function sayAfterSleeping(message) { console.log('ぐー……'); sleep(1000) .then(() => { console.log('むにゃ……'); return sleep(1000); }) .then(() => { console.log('あ、ごめん寝てた。えっと……'); return sleep(1000); })
現代的JavaScriptおれおれアドベントカレンダー2017 – 02日目 かつて変数宣言といえば var でしたが、今なら他に let とconst も使えます。 基本的な使い方は一緒。 要約 できるだけ const を使おう const が適さない場面では let を使おう var を積極的に使うべき場面はない let と const はブロック { ~ } がスコープになる var は関数 function(){ ~ } がスコープ const の参照先は変えられないが中身(オブジェクトのプロパティ等)は変えられる それでは以下、こんなに長くなるはずじゃなかった記事です。 var vs let 変数のスコープ(有効範囲)が異なります。 var は関数単位のスコープになりますが、 let ならブロック単位のスコープになります。 例えばこんなやつ。
今年はES2015等の話をします。一部ES5.1とか2016、2017とか。現代的な設計や書式の話はしません。ちなみに去年はVue.jsを始める話でした。 頑張って仕様書読んでるけどなかなかつらい。各記事内容がアレなの見つけたらどんどん教えてください。 Babelを使って現代的JavaScriptを始める。 varよりすごいletとconst。 アロー関数でさくさくコールバック。 JavaScript待望のクラス。 華麗にgetterとsetterを使いたい。 メソッドをメソッドっぽく定義しよう。 動的にプロパティ名を設定できるようになりました。 引数の初期値って便利だよね。 累乗演算子 ** って知ってる? 非同期やるならPromiseでらくらく。 非同期やるならasync/awaitでもっとらくらく。 テンプレート記法で簡単文字列組み立て。 テンプレートを自作しよう 分割代入、画期的な
現代的JavaScriptおれおれアドベントカレンダー2017 – 1日目 基本的にIE以外の現代的なブラウザ(つまり更新されているもの)では、特に何もしなくても現代的なJavaScriptをだいたい利用することができます。 それでも古い環境に対応するため、あるいはより先進的な記法を使う場合、Babelの力を頼りましょう。 Babel · The compiler for writing next generation JavaScript 前提知識 CLI npm package.json Babelとは 「次世代JavaScript記法のためのコンパイラ」です。コンパイラじゃなくてトランスパイラという表現を使う人もいます。 Babelは「黒い画面」で動くツールで、これを使うと新しい文法で記述したJSファイルを変換して、古い文法で構成されたものを生成することができます。そしてそれは古い環
知り合いに聞かれて気づいたんですが、Google Chromeのv61からスクロールの取得方法が変わったっぽい。とりあえずこんなコードで取れます。 なんだこれ Chrome 60までとか未対応のやつは document.documentElement.scrollTop が常に 0 を返すので、 || で繋げてやるとどっちに対応してる環境でも動きます。 事前にUAから分岐して要素を分けて、みたいなことしてると駄目なので、こっちがおすすめです。そんなに実行コストかからんでしょ。知らんけど。 Chromeは変わったけどSafariはまだ変わってないので、対応しときましょう。 あとEdgeも document.body の方みたい。IEは document.documentElement だったのに。はしごを外されちゃったね。 scrollingElement なるものが で、ちらちら見てたら
正直あんまりわかってないけどまあ解決したのでメモしておく。 ざっくり 管理者権限のPowerShellで npm install --global windows-build-tools したら解決した。 https://www.npmjs.com/package/windows-build-tools 環境 node v4.5.0 Windows 10 なお現在node.jsの最新バージョンはv8.4です。 問題: “VCBuild.exe”がないと言われる 何かをインストールしようとしたとき、こんなエラーが出ました。 C:\Users\Ginpei\project\foo>npm install > [email protected] install C:\Users\Ginpei\project\foo\node_modules\jsdom\node_modules\contexti
Vue.js始めるおれおれアドベントカレンダー2016 – 12日目 昨日のフォームのやつで「ファイルはアレだよ」という話になってたので、アレするのを試してみました。 デモ コード コードは抜粋しか記載してないのでGitHubの方で確認してください。 選択したファイルをプレビュー表示 ファイル情報の取得 App.vue <input @change="file_change" ref="file" type="file" multiple /> <ul v-if="form.files.length > 0"> <li v-for="(file, index) in form.files"> #{{index + 1}} <ul> <li>名前: {{file.name}}</li> <li>サイズ: {{file.size.toLocaleString()}} bytes</li> <l
Vue.js始めるおれおれアドベントカレンダー2016 – 17日目分(28日公開) これこれ。 vuejs-templates/webpack: A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction. インストール vue-webpack-boilerplate自体は特にインストール作業はなさそうなんだけど、その前にvue-cliが必要です。
Vue.js始めるおれおれアドベントカレンダー2016 – 11日目 昔書いたjQuery版の真似をして一通りやってみます。と言ってもVueはまだよくわかってない感じがあるので何か違う感じあったら教えて欲しい感じです。 前提 Vue v2.1.4 Vuex v2.0.0 Vuexの state で情報を持ちます。ただの data でもいいよね。 state.js const Vuex = require('vuex') module.exports = new Vuex.Store({ state: { // ここに値を記述 } })
data: { sending: false }, methods: { form_submit (event) { this.sending = true axios.get(url, data) .then(res => { this.sending = false console.log(res.status, res.statusText, res.data) // => 200, "OK", { message: "You just sent the data!" } }) .catch(error => { this.sending = false throw error }) } } もっとVueに繋げる vue-resourceはVueと密に繋がって、 this.$http.get() みたいな感じで使うそうだ。 axiosは完全に独立しているけれど、 this から参照で
$ ./node_modules/.bin/eslint src/* /my/impressive/path/08-vue-lint/src/App.vue 8:40 error Extra semicolon semi 11:3 error Expected indentation of 2 spaces but found 1 tab indent 12:4 error Expected indentation of 2 spaces but found 2 tabs indent 13:3 error Expected indentation of 0 spaces but found 1 tab indent 13:4 error Unexpected trailing comma comma-dangle 14:3 error Extra semicolon semi /my/i
Vue.js始めるおれおれアドベントカレンダー2016の記事一覧です。 最近になって初めてVue.jsを触ってみたんだけど、割と良い感じだったのでもうちょっと色々やってみようかなと思って今年はこれにします。去年はDOMの話でした。 Hello Worldから体験してみる。 ガイドを読んで基本文法まとめ。 フォームを繰り返して出力するときに属性値を変えようとしてちょっと詰まった。 TODOリストができたのでチュートリアル形式でお送りします。 Vuexをさっくりインストールしたけどまだよくわからない。 computedすごいぞ賢いぞ! vueifyを使って良い感じにコンポーネントを扱えるようになったよ。 ESLintプラグインでVueの書式に合わせて書こう。 ただの文字列をコンポーネントに渡す話。 Vueで「スクロールに合わせて何かする」のってどうするんだろ。 Vueでフォームの値を取得する方
去年まで JavaScriptおれおれAdvent Calendar 2014やります。ひとりで。 … 設計方面の話。半分弱を欠席。 JavaScript おれおれ Advent Calendar 2013やります。ひとりで。 … フロント側。四日目で挫折。 CSS おれおれ Advent Calendar 2012やります。ひとりで。 JavaScript おれおれ Advent Calendar 2011やります。ひとりで。 … JavaScript Coreの話
DOMおれおれAdvent Calendar 2015 – 24日目 最終日です。 jQueryでやってる事をjQueryなしでやるとしたらどうするのってやつです。 $(selector) → document.querySelectorAll(selector) querySelector()を使うとjQueryみたいにセレクターで要素を取得できるよ。(DOMおれおれAdvent Calendar 2015 – 02日目) これが一番基本ですね。 // jQuery var $el = $('.foo'); console.log($el.length); console.log($el[0]); // DOM var els = document.querySelectorAll('.foo'); console.log(els.length); console.log(els[0])
次のページ
このページを最初にブックマークしてみませんか?
『Ginpen.com | Powered by JavaScript and JapaneseSushi』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く