Node学園 21時限目でECMAScript as a Living Standardという発表をした
Node学園 21時限目 -ES Modules Meetup-でECMAScript as a Living Standardという発表をしてきました。 スライド: ECMAScript as a Living Standard ECMAScriptの仕様策定は大きなプロジェクトですが、 大部分の作業がGitHub上で見られる形でやり取りされています。 そのため、大きなGitHubプロジェクトとそこまで変わらない感覚で見ることができます。 また標準仕様を作るのでConsensusを取ったり、フォーマルなやり取りもあります。 tc39/proposals: Tracking ECMAScript Proposals tc39/ecma262: Status, process, and documents for ECMA262 tc39/tc39-notes: These are the
JavaScript Primer - 迷わないための入門書 #jsprimer
JavaScript Primer 迷わないための入門書 Tweet Watch Star Twitterのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように書かれています。 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「はじめに」から読んでみてください。 書籍版 このウェブサイトの内容はアスキードワンゴから書籍として出版されています。 書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。 書籍版は次のサイトから購入できます。 Amazon 達人出版会（電子書籍版
第2回 Webセキュリティのおさらい その2 XSS | gihyo.jp
前回は、Webアプリケーションにおける受動的攻撃の代表例として、以下の4つを挙げました。 クロスサイトスクリプティング（XSS） クロスサイトリクエストフォージェリ（CSRF） オープンリダイレクト クリックジャッキング 今回は、これらのうち、XSSについてより掘り下げて解説していきます。 XSSはどのようにして引き起こされるのか XSSとは、動的にHTMLを生成するWebアプリケーションにおいて、データをエスケープせずに出力しているために、生成されるHTMLに攻撃者の作成したHTML断片やJavaScriptコードが埋め込まれてしまう脆弱性です。 たとえば、検索画面にてユーザーが「HTML5」という文字列を入力すると、http://example.jp/search?q=HTML5というURLで検索結果が表示されるWebアプリケーションがあったとしましょう。検索結果の画面では、ユーザーが
第1回 Webセキュリティのおさらい その1 | gihyo.jp
はじめに みなさんこんにちは、セキュアスカイ・テクノロジーのはせがわようすけと申します。 周知のとおり、ここ数年のブラウザの機能強化は目覚ましいものがあり、CSS3やSVGを含むHTML5ブーム以降のブラウザ内での表現力の向上や、JavaScriptエンジンの最適化による実行速度の向上は、数年前では考えられないような目を見張るものがあります。また、HTML5の仕様策定後の現在でも、WHATWGやW3Cではさまざまな議論が継続的に行われており、これまでブラウザ上に存在しなかったような多様なAPIの仕様が生み出され、各ブラウザに日々実装されています。 利用者視点だけでなく、以下のような開発者視点での需要に応えるフロントエンド開発環境の改善も、ここ数年でかつてないほど大きく進んでいます。 CoffeeScriptやTypeScriptに代表されるaltJSと呼ばれる言語処理系の登場 ES2015
SVGでプログラマブルな書体を作る話｜dwango creators' blog（ドワンゴクリエイターズブログ）
こんにちは、2016年度にデザイナー職で新卒入社しました@Ln_northです。新卒研修も終わり、現在はOJTのもとで生放送チームにジョインしています。 さて、Googleのロゴが変わっていくらか経ちますが、このロゴはSVGを使うと少ないデータ量で表現できるというニュースが話題になりました。 この記事を見た際に、厳密には視覚調整が入るはずなので、正確に幾何的図形とは一致しないだろうという感想も抱きました。しかし、SVGで文字を生成するということには非常に興味を持ちました。今までにも、文字のアウトラインを使ったアニメーションや表現はありましたが、文字自体を生成するというものは見たことがなく、そしてSVGはJavaScriptで操作することができるため、書体の印象が動的なフォントを作ることができると考えたからです。 どういうことかというと、例えば であるとか、 といったことができるかもしれない
JavaScript Plugin Architectureというプラグイン設計について学ぶ無料の電子書籍を書いた
JavaScript Plugin ArchitectureというJavaScriptのプラグイン設計についての電子書籍を書きました。 この書籍はJavaScriptのライブラリやツールにおけるプラグインアーキテクチャについて見ていく事を目的としたものです。 以下の形式で読むことができます。 Web版 PDF形式 ePub形式 Mobi形式 GitHub上にソースコードも公開されているでので直接Markdownファイルを読むこともできます。 MarkdownよりはWeb版の方が見やすいのでそちらをオススメします。 Twitterのハッシュタグは#js_plugin_book 更新情報はRSSやリリースノートから見ることができます。 v1.0.0 最初に書くと決めたプラグインアーキテクチャが揃ったので1.0.0としてリリースしました。 JavaScript Promiseの本の時と同じく、継
Vue.jsにreduxを載せた話｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
概要 先日とある案件でVue.jsを用いたアプリケーションを開発することとなりました。 一般に同種のフレームワークと比較してVue.jsは、学習コストが低く気軽にはじめやすいということがメリットとして語られています。 ただ、今回の案件のようにMVC系フレームワークを用いて開発する際にネックとなっていたのが、コンポーネント間のデータ共有についての最適解が見つけられていないと感じていたことでした。 もちろん、適切にモデルを設計すればコンポーネント間のやり取りに責任を持つ、親コンポーネントとでもいうべき層を実装することでこの問題は解決できると思います。 しかし実案件では往々にして親コンポーネント層の実装が個々人の裁量に陥りやすく、結果的にコンポーネント間データ共有の方式が統一出来ていないケースも出てきてしまいました。 コンポーネント間で共有したいデータ=アプリケーションの本質となるデータは、もっ
Airbnb JavaScript スタイルガイド() {
javascript-style-guide 常に気をつけたい、JavaScriptへの正しい接し方 View on GitHub Airbnb JavaScript スタイルガイド() { 元文書:https://github.com/airbnb/javascript 常に気をつけたい、JavaScriptへの正しい接し方 Note: this guide assumes you are using Babel, and requires that you use babel-preset-airbnb or the equivalent. It also assumes you are installing shims/polyfills in your app, with airbnb-browser-shims or the equivalent. 注意: このガイドはあなたがB
小さく始める JavaScript のテスト - Qiita
書かないと怒られるし、書きたいとは思っているが、書くまでの敷居がやたらと高くなってしまった気がしている人へ。 最小のテスト 本質的にテストを書くのにフレームワークはいらない。 assertion だけあればいい。 isomorphic にしたいなら、 node の assert モジュールすら使わず console.assert だけで書ける。 // assert function assert(actual, expected) { console.log('.'); console.assert(actual === expected, '\nact: ' + actual + '\nexp: ' + expected); } function TestSum() { assert(1+2, 3); } // exec TestSum(); あとは普通にこのスクリプトを node/io
Six nifty ES6 tricks
In this blog post, I show six tricks enabled by new ES6 features. At the end of each section, I point to related material in my book “Exploring ES6” (which is free to read online). Enforcing mandatory parameters via parameter default values # ES6 parameter default values are only evaluated when they are actually used. That lets you enforce that a given parameter be provided: /** * Called if a par
Reactの考え方 | React 0.13 日本語リファレンス | js STUDIO
これは、元はReactの公式ブログへ投稿されたものです。 個人的な見解になりますが、ReactはJavaScriptを使用した大規模で高速なWebアプリケーションを開発する、 最も優れた方法であると考えています。 これは、FacebookとInstagramにおいて、我々にとって良い結果をもたらしてくれています。 Reactの優れた点の1つに、アプリケーションの構築を、どのように考えさせるかという事が挙げられます。 このページでは、Reactを使用した検索可能な商品データのテーブルを構築する過程を通して、学んでいきます。 まずは、モック作りから ステップ1: UIをコンポーネント階層に分割 ステップ2: Reactの静的版の構築 ステップ3: UIステートの必要最小限構成 ステップ4: ステートを使用するべき場所の特定 ステップ5: 別(逆)データフローの追加 最後に まずは、モック作りか
はてなブログ編集画面JSのページャ見どころ紹介 #pagernight - hitode909の日記
昨日，ページャNightという勉強会で，はてなブログのJSの見どころを紹介するLTをした．(昨日の日記)． 資料公開しようかと思ったのだけど，発表資料そのまま公開しても意味不明なので，エントリに書き直すことにした． たとえば，このLGTM画像は発表資料の1枚目で，もし発表資料をそのまま公開したら，こういう謎の画像を解説もないまま見ることになっていたはず． JSのページャいっぱいある はてなブログの編集画面には編集サイドバーというのがあって，写真とかAmazon検索とかTwitterとかinstagramとかあれこれ貼れるようになってる． Amazon検索しても画面遷移するわけじゃなくて，ウェブ2.0という感じで，XHRでJSONを取ってきて，HTMLを組み立てて表示，クリックすると選択，貼り付けを押すとエディタに挿入される，という仕組み． 編集サイドバーから貼れるサービスは10種類くらいあ
step by stepで始めるKarma - Qiita
Karmaを使うことでフロントエンドの単体テストを楽しくかつ機能的に行うことができます。 ステップを通して少しづつ理解できるように執筆しました。 また、最後に重要だろうと思われる補足内容を記載しました。 Karmaの導入に一役買えれば幸いです。 テスト全体の流れについては以前書いた記事フロントエンドにテストを導入を参照してください。 Karmaとは ブラウザ上で 単体テストを実行するためのテストランナーです。 テストを実行するだけでなくファイルの変更監視や結果のレポートを出力してくれたりと単体テストに必要な機能が一通りそろっています。 特定のフレームワームに依存しておらず汎用的に使えるツールで、プラグインを使った機能の拡張が強力です。 前提 Nodejs,npm,chromeが導入済みであること 流れ Karmaは4つの大きな機能（プラグイン）が存在します。 Step 3 〜 Step 6
知られてそうで知られてない少し知られてるECMAScript 2015 (ES6)の新機能: Days on the Moon
Kyoto.js #10で「知られてそうで知られてない少し知られてるECMAScript 2015 (ES6)の新機能」というライトニングトークをしたので、そのスライドに当日しゃべった内容や補足を追記して以下に掲載します。 自己紹介 nanto_vi 情報規格調査会SC 22/ECMAScript Ad hoc委員会 editional issueの報告 ECMAScript 2015 (ECMA-262 6th Edtition) クラス構文 アロー関数 ブロックスコープ Promise etc... 2015年にECMAScriptが大幅に改定されました。クラス構文やアロー関数の追加はあちこちで取り上げられているので皆さんご存知でしょうが、ここではあまり取り上げられていない地味な新機能を紹介します。 Unicodeの符号位置 // 🍣 '\uD83C\uDF63'; // ES5 '
GitHub - vuejs/awesome-vue: 🎉 A curated list of awesome things related to Vue.js
Learn Vue 3: Step by Step on Laracasts Vuejs 2 Authentication Tutorial on Auth0 blog Create a GitHub File Explorer Using Vue.js on Scotch.io Vue.js Tutorial on Vegibit Vuex introduction video - James Browne from London Vue.js Meetup #1 Hybrid App Example with Laravel and Vue.js in Portuguese by @vedovelli Vue.js Introduction Turkish Language on oguzhan.in Vue.js VideoTutoral Series in Spanish (3-8
JavaScript の イテレータ を極める！ - Qiita
ECMAScript 6（2015年6月に公開され、今もなお比較的新しい JavaScript）の大目玉である イテレータ と ジェネレータ。なかなかに複雑で巨大な仕組みになっていてややこしいです。 そこで今回は イテレータ を、順を追って理解できるように解説したいと思います。 Qiita: JavaScript の イテレータ を極める！（この記事） Qiita: JavaScript の ジェネレータ を極める！ また、実用的なサンプルを「3. 実用サンプル」に示しました。 初めにこちらを見て、何ができるのかを知ってから読み始めるのもオススメです。 （2017年3月現在、オープンなページでの使用はまだ避けたほうがいいかもしれませんが、実装は確実に進んでいます。ECMAScript 6 compatibility table） 1. ことばの定義 1.1. イテレータ (Iterator
React+FluxでTodoMVCを作ってFluxについて学んでみた - yutaponのブログ
ちょっと前にReactを使って簡単なアプリケーションを作ってみたのですが React入門用に簡単なアプリケーション作ってみる - yutaponのブログ 今回はFluxアーキテクチャについて学びたいと思ったので、TodoMVCを題材に写経してみました。 構成・ロジックは参考にしつつ、ES6構文で書くようにしてます。 参考にしたコードはfacebook/fluxのexamplesのコードになります。 flux/examples/flux-todomvc at master · facebook/flux · GitHub https://github.com/facebook/flux/tree/master/examples/flux-chat 作ったコードはここに置いていて、 https://github.com/sskyu/react-flux-todomvc-example/tree
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - juliangarnier/anime: JavaScript animation engine
anime.js
初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ
