TNW Conference 2025 is moving to NDSM, Amsterdam 🎟 Secure your 2-for-1 tickets now! If you’re one of the millions of people using Google Chrome on a daily basis, you know how much it can slow down your computer. As websites and online tools ask more and more from computers, browsers have quickly become a big burden — especially when they don’t do a great job at memory management. The Chromium tea
脱jQuery AngularJSやVue.jsでは、DOMの直接操作は推奨されません。 そうなると、jQueryはAJAXでしか使わなくなります。 であれば、AJAX専用のライブラリにまかせてしまって、jQuery依存を外したくなってきます。 というわけで、AJAXだけをやってくれるライブラリとして、SuperAgentを導入してみましょう。 HTTPリクエストに特化したライブラリです。 Node.jsとブラウザ両方で使うことができます。 作者はExpress, Stylusの開発などで有名なTJです。 superagentの良さ かわいい。 ブラウザでの導入方法 まず、下記URLにアクセスし、ファイル名superagent.jsとして名前をつけて保存してください。 https://wzrd.in/standalone/superagent@latest scriptタグでsuperag
近年、JavaScriptでコードを書こうとすると、お膳立て7割、コード書き3割みたいな事態がざらにあります。「お膳立て」の例としては、Gulp, Babel, Sass, PostCSS, WebPack, Rollup, Browserifyほか数限りなく。 たしかに、一旦フロントエンド開発に慣れてしまえば、お膳立てにかける時間は短縮することが可能です。でも、これを初学者に強いるのはツラすぎる...! 覚える方はともかく、 教える側がツライ。 今回、未来なJavaScriptやCSSの文法で書いても、よしなにとりなしてくれるWebサーバ「Felt」を作ったので、ご査収ください。 (2016/7/19 関連ツールとの比較を追記しました) GitHub: https://github.com/cognitom/felt npm: https://www.npmjs.com/package/
仕様やUI(画面)は現行バージョンと異なる可能性があります。 Cacooの最新版についてはこちらからご確認ください。 こんにちは、Cacooプロジェクトマネージャの平山です。今回は、Cacoo開発チームが現在注力していること、近い将来Cacooにもたらされる大きな変化について皆様に報告したいと思います。 2009年にCacooが生まれてから約7年間、僕たちはCacooの編集画面にFlashという技術を使ってきました。 FlashはWeb上で高度な表現を、環境に左右されることが少なく実現できる技術として、CacooのようなリッチなUIを備えたアプリケーションやエンターテイメントに長い間利用されてきました。しかし昨今ではFlashの抱える脆弱性によるセキュリティ面での懸念が指摘されることも多く、Flashが利用できない、あるいは利用しづらい環境も見られるようになりました。一方でWebの標準的な
以下のコードを実行した結果を予想してみてほしい。 function foo() { return typeof null === "undefined" ; } for ( var i = 0 ; i < 1000 ; ++i ) { console.log( foo() ) ; } typeof nullの結果は"object"なので、"undefined"と===で比較するとfalseになる。したがって、関数fooは必ずfalseを返すはずである。1000回実行しようと常にfalseを返す関数は常にfalseを返すはずである。 では実際に実行して確かめてみよう。 実行(何度かクリック) コンソールにコピペするのとは挙動が違うが、何度もクリックすると、なぜかtrueを返すようになる。おそらく、コンソールにコピペすると毎回JITが走るので、挙動が違うのだろう。 ちなみに、workaroun
ECMAScript 6(2015年6月に公開され、今もなお比較的新しい JavaScript)の大目玉である イテレータ と ジェネレータ。なかなかに複雑で巨大な仕組みになっていてややこしいです。 そこで今回は イテレータ を、順を追って理解できるように解説したいと思います。 Qiita: JavaScript の イテレータ を極める!(この記事) Qiita: JavaScript の ジェネレータ を極める! また、実用的なサンプルを「3. 実用サンプル」に示しました。 初めにこちらを見て、何ができるのかを知ってから読み始めるのもオススメです。 (2017年3月現在、オープンなページでの使用はまだ避けたほうがいいかもしれませんが、実装は確実に進んでいます。ECMAScript 6 compatibility table) 1. ことばの定義 1.1. イテレータ (Iterator
ジェネレーターは処理を抜け出したり、後から復帰したりすることができる関数です。ジェネレーターのコンテキスト(変数の値)は復帰しても保存されます。 JavaScript のジェネレーターは、特にプロミスと組み合わせることで、非同期プログラミングのための非常に強力なツールとなり、コールバック地獄や制御の逆転などのようなコールバックの問題を、完全に解決できるわけではないものの、軽減することができます。しかし、これらの問題は非同期関数を使用すると、さらにシンプルに解決することができます。 ジェネレーター関数を呼び出しても関数はすぐには実行されません。代わりにその関数のジェネレーターオブジェクトが返されます。イテレーターの next() メソッドが呼び出されると、ジェネレーター関数の処理は、イテレーターから返された値を特定する最初の yield 演算子か、ほかのジェネレーター関数に委任する yiel
« 前のページ 次のページ » コレクション内の各アイテムに対する処理は非常に一般的な操作です。JavaScript では簡単な for ループから map()、filter() にいたるまで、コレクションに対する反復処理の複数の方法を提供します。 イテレーターとジェネレーターは、コア言語の内部に反復処理が直接的に取り入れられており、for...of ループの動作を簡単にカスタマイズできる仕組みをもたらします。 詳細についてはこちらもご覧ください: Iteration protocols for...of function* と ジェネレーター yield と yield* JavaScript では、イテレーターはシーケンスおよび潜在的には終了時の戻り値を定義するオブジェクトです。 より具体的に言うと、イテレーターは、次の 2 つのプロパティを持つオブジェクトを返す next() メソッ
Electronアプリでxssを発生させると任意のコードが実行できるらしいのでrm -fr /を試してみます。 想定 web版とelectron版のあるチャットアプリケーションという設定です。攻撃者が用意したリンクをクリックすると、PC内のすべてのファイルを消し去るというシチュエーションを考えてみます。 用意 環境はホストmac OSX、ゲストにubuntu14.04環境をvagrantを利用し用意しました。 expressでリストとフォームからなる脆弱性のあるチャットをつくります。エスケープ処理をしてないので、任意のコードが実行できる状況です。 'use strict'; const path = require('path'); const express = require('express'); const app = express(); const ejs = require(
春ですね!人の配置がリファクタリングされ、コードもリファクタリングの季節です。 では僕がここでモダンなJavaScriptとES2015の利点を語る役をやるので、みなさんはチームを説得する役をやってください。 JavaScriptの歴史 まず最初にJavaScriptの歴史を踏まえることで、今学ぶべきものとその理由を確認しましょう。 なぜ2016年の記事でES2016ではなく、ES2015なのか、と疑問に思った方もいるかもしれません。それは、ES2015がただの年次アップデートではなく、これから始まる毎年のメジャーバージョンアップの起点となるバージョンであり、またES5から飛躍的に仕様が増えたバージョンであるからです。 簡単に(雑な)歴史を紹介します。 ブレンダン・アイクによってNetScapeに実装/搭載された古の時代〜IE6 (1996~2005) ES3: 一時はシェア7割を誇ったレ
Babelは最低限の機能をIE8以降で、フル機能をIE10以降でサポートします。 (実際にはIE9以降から使用することを推奨します) 当初Babelは6to5と呼ばれていましたが、ECMAScript7の仕様なども取り込むようになったため、バージョンを想定しないBabelという名前に変更されました。 Babelの特徴 Babelと同じように「トランスパイルすることでJavaScriptのコードを出力する」ツールにはTypeScriptやCoffeeScriptなどがあります。 それらと比較するとBabelは「ECMAScript標準仕様をベースにしている(*)」という特徴があります。 (*) 実際にはJSXもサポートしているため、必ずしもECMAScript標準仕様のみをサポートしているわけではありません。 このため、「いずれ標準実装される仕様を先取りできる」、「Babel自体が廃れても同
概要 非同期な処理を同期的に書ける関数タイプが実装された。 基本 「async」キーワードに続けて関数定義を書くと、async関数となる。 async function afn1() { } afn2 = async () => { } obj = { async afn3() { } } async関数を呼び出すとプロミスが返される。 console.log( afn1() ) // <Promise> このプロミスは、async関数が終了するとその返り値で解決され、例外が起こると棄却される。 async function afn4( flag ) { if ( flag ) return 'Yes' else throw 'No' } afn4( true ).then( v => console.log( v ) ) /// "Yes" afn4( false ).catch( v
Since I installed revealjs using bower, my path to print-pdf.js plugin is bower_components/reveal.js/plugin/print-pdf/print-pdf.js and my slides are served using simple http server running at localhost:9000. But when I tried this first time, I got the blank slides because reveal.js load the slide content via ajax after loading the index.html and as per the plugin phantomjs won’t wait for the ajax
こんにちは、ほそ道です。 現在ほそ道が携わっているプロジェクトチームではES6コードで開発をしておりまして、 変数定義はlet、constを使用しております。varは使いません。 さらにletは撲滅していき、すべてconst化していく方向性を共有しています。 今回は、let、constの挙動と、なぜconst化するのか、constの盲点について。 次回以降はどうconst化していくかのレシピを何回かに分けて紹介していきたいと思います。 2.Object.freeze編 3.immutable.js編 4.コレクション一発代入/一発返却編 5.条件分岐一発代入/一発返却編 目次はこちら let/constの挙動について varとlet/constの比較 重複定義 まずはvarについて。
アロー関数とは 基本構文 通常の無名関数との違い thisの扱いに注意 jQueryでコールバック関数としてアロー関数を使う場合 アロー関数で即時関数 まとめ 参考リンク アロー関数とは ES2015の新構文の一つ「アロー関数」とは、無名関数の省略記法です。無名関数ではない、いわゆる「関数宣言」には使うことができません。また、後述しますが無名関数とアロー関数とは完全に等価というわけではないため、取り扱いにはいくつかの注意が必要です。 //従来の関数式 var fn = function (x) {/* 関数本体 */}; //上記の関数式の無名関数部分(右辺)をアロー関数に置き換えたものが以下です。 var fn = (x) => {/* 関数本体 */}; //次の様な「関数宣言」をアロー関数に置き換えることは出来ません。 function fn(x) {/* 関数本体 */} 基本構文
※このお話はたぶんフィクションです。実在の人物や団体とはあんまり関係ありません。 序 planetter.comをバージョンアップすることにした。数年前にリリースしてからずっと放置していたけど、そろそろ手を付けないとやばいと思った。 しかしウェブの世界はドッグイヤーだ。3年も経てば何もかもが変わっている。しばらく開発から遠ざかっていた僕には、最近の技術トレンドなんてさっぱりわからない。 まずは自分自身をアップデートするところから始めよう。 Atom 最初はIDEだ。以前はEclipseを使っていたけど、いまはもうウェブ系言語の進化速度に追いつけていないようだった。ウェブ開発用のIDEならいまはWebStormが人気のようだ。有料だけど、最新の技術に対応しているし、使い勝手もいい。 でも最終的にはAtomを選んだ。IDE(統合開発環境)ではなくエディタなので、これ自体は単機能だけど、不足分は
MySQL 5.7.12 で突如登場した MySQL Shell とか X DevAPI とか X Protocol とかが面白そうだったので調べてみました。 Document Store とかも同じ文脈で語られてて、それぞれの用語が何を表してるのかややこしかったので、まずその辺から。 X Protocol mysqlx プラグインを使用することで追加されるサーバー/クライアントプロトコル。ポート番号は 33060。 詳細→ https://dev.mysql.com/doc/internals/en/x-protocol.html X DevAPI 各プログラミング言語用の新しいAPI。Document Store用のAPIも含む。今のところ、MySQL Shell JavaScript, MySQL Shell Python, Java, .Net, Node.js 用の API があ
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
はじめに 最近、フロントエンドのライブラリ乱立問題について盛り上がってました。 自分はnobkzさんの以下の文に全てがまとまっていると思います。 僕の最初の違和感は、「技術的な流行り」に乗ることに何の価値があるのだろうか?ということである。もちろん、最新のツールやフレームワークはより何かが良くなってるかもしれない。しかし、 それをあなたのプロジェクトで採用するには何の価値があるだろうか? 「最近のフロントエンドへの違和感 - nobkzのブログ」より 裏を返せば、新しいライブラリの内容、特に「どのような問題を解決するためにこのライブラリが生まれたのか」という思想を把握しておくことは重要だと言えます。 つまりは、 "How?(ライブラリの使い方)" よりも "Why?(なぜそのライブラリが必要なのか)" を学んでおこう ということです。この記事では どのような既存の問題・要求を どう解決して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く