Google Chromeにヘッドレスモードが実装され、コマンドラインやNode.jsからChromeを操作できるようになりました。ユーザー行動をシミュレーションしてテストする方法を解説します。 Webサイトに変更を加えるとき、ユーザーの取りうる行動を繰り返し試して、一貫したユーザー体験を実現できているか確認します。一貫性を保ちながら手軽に試すために、スクリプトで自動化するライブラリーを使って前提…

Brian Greig

フロントエンド開発者（JavaScript）であり、データ分析とビジネスインテリジェンスの専門家です。

まるでjQueryみたい！ネイティブなDOM操作メソッドもこんなに進化していた！

2017/09/05

Giulio Mainardi

120

「脱jQuery」をめぐる議論は何年も前からありますが、jQueryの使い勝手のよさは無視できません。ところが、WHATWGのDOM StandardではjQuery風の使いやすいAPIが考案されています。 jQueryがリリースされた2006年当時、人気になった理由の1つは、jQueryを使えばDOM要素を簡単に選択、移動し、コンテンツを変更できたからでした。当時はIE7に悩まされ、ECMASc…

Giulio Mainardi

フロントエンド開発を勉強中です。

面倒なJavaScriptの日付の処理は「date-fns」でラクに片付けよう

2017/08/09

Edwin Reynoso

単純そうに思えることでも意外と面倒なのがJavaScriptでの日付の処理です。素のJavaScriptよりも使いやすくラクに処理できるコンパクトなライブラリー「date-fns」を紹介します。 JavaScriptで日付を扱うと、素のDateメソッドは冗長な記述になり、整合せず、バグが発生しがちです。そこで日付操作に適したライブラリーが役立ちます。ライブラリーとJavaScriptのDateとの…

Edwin Reynoso

若手のWeb開発者で、ツールよりも素のWebプラットホームを改善することでWeb全体を改善したいと考えています。多くのひとが嫌っているDOMを究めるために、JavaScriptにのめり込みました。

きれいで読みやすいJavaScriptを書くデコレーターの基本を先取り

2017/08/04

Graham Cox

194

わかりやすく見通しのいいコードが書ける、デコレーターの基本と使い方を解説します。 ES2015の登場とトランスパイラーの普及により、コードや記事の中で言語の新機能を見かけることが増えました。とりわけ難しい新機能がJavaScriptのデコレーターです。デコレーターはAngular2に採用されたことで人気が高まりました。デコレーターは現時点ではAngularではTypeScriptで使うことができ…

Graham Cox

イギリス出身のソフトウェア開発者。15年近い経験を持ち、主な使用言語はJavaとJavascriptだが、ほかにも幅広い言語をカバーしています。

GumroadとJekyllでたった30秒でミニマルなECサイトを立ち上げる方法

2017/08/02

Jon Persson

Jekyllで作ったサイトにGumroadを組み合わせれば、データ販売サイトを簡単に立ち上げることができます。「Jekyllで購入ボタンなどの動的なウィジェットを超簡単に作る方法」では、Jekyllで作ったサイトに動的なウィジェットを追加する方法を学びました。今回はこの知識を使って、JekyllベースのWebサイトを、簡単にオンラインでデータを販売できるGumroadと結びつけて、わずかな時間で…

Jon Persson

スウェーデンのフロントエンド開発者でありオンライン起業家です。Jekyllのような静的サイト生成ツールを熱烈に支持しています。http://jonp.ioでフリーランスとしてWebデザインの仕事も請けています。

Jekyllで購入ボタンなどの動的なウィジェットを超簡単に作る方法

2017/07/24

Jon Persson

静的サイトジェネレーター「Jekyll」を使って、ブログやサイトで使い回せる動的なウィジェットを簡単に作る方法を紹介します。静的なサイトを生成するツール「Jekyll」は、軽量ですがマニアックなツールだとWebデザイン界隈で認識されています。しかし、その印象はJekyllの一部でしかありません。できることが多く、技術者ではないユーザーやクライアントが簡単なサイトを作れる強力なツールです。クライ…

Jon Persson

スウェーデンのフロントエンド開発者でありオンライン起業家で、Jekyllのような静的サイト生成ツールの熱烈な支持者です。http://jonp.ioにて、フリーランスとしてWebデザインの仕事も請けています。

ちゃんと知ってる？JavaScriptのイベントバブリングを学ぼう

2017/07/05

Giulio Mainardi

116

イベントが発生したとき、親やさらに先の要素にも同じイベントが発生する「イベントバブリング」。バグをなくし、思い通りに制御できるようになるために、しっかり理解しましょう。 JavaScriptを使っている人なら、「イベントバブリング」を聞いたことがあると思います。ある要素が別の要素にネストされて、両方の要素がクリックなど同じ「イベント」のリスナーを登録しているときにイベントハンドラーが呼ばれる順番の…

Giulio Mainardi

フロントエンド開発について少し勉強中です。

Stack Overflow風サービスも手軽に作れる「Telescope Nova」を使ってみよう

2017/06/16

Jelena Jovanovic

ReactとMeteorを使ったモダンなフレームワーク「Telescope Nova」を使えば、自分好みにカスタマイズしたStack Overflow風のソーシャルサービスを手軽に作れます。 Telescope Novaは現在、Vulcan.jsにリブランド中です。この記事では掲載時のままTelescope Novaと表記しています。 Telescope Novaは、ソーシャルWebアプリを手早く…

Jelena Jovanovic

Vanila.ioの共同創始者で、Web開発者です。TwitterとInstagramで最新情報を配信しています。

jQuery不要！センスのいいナビゲーションをJSでサクッと実装する方法

2017/06/15

Albert Senghor

129

WPJでも使っているアニメーション付きのスティッキーナビゲーションメニュー。いまならjQueryや専用ライブラリーに頼らなくても、たった数行のJavaScriptで実装できます。 Webページのナビゲーションメニュー作成には、考えるべきことがたくさんあります。どこに配置するか、スタイル、レスポンシブのデザイン、アニメーションなど。さらにセンスよく実装したいですよね。ここまで読んで、jQueryプラ…

Albert Senghor

JavaScript/Reactが大好きです。最新の技術を使って、楽しみながらすばらしいWebプロダクトを開発しています。

意外と簡単にできる、JavaScriptでオブジェクトの配列を並べ替える方法

2017/04/03

Olayinka Omole

あれ、どうやってやるんだっけ…？というときのためにメモしておくと便利な、ちょっとしたTips。オブジェクトの配列を特定の順序でソートしたいとき、すぐに思い浮かぶのはJavaScriptライブラリーを使う方法です。しかし、その前に覚えておいて欲しいことは、ネイティブのArray.sort関数を使っても、きれいに並べ替えができることです。この記事では、JavaScriptで簡単にオブジェクトの配列を…

Olayinka Omole

ソフトウェア開発、デザイン、エレクトロニクス工学、人工知能に興味があるナイジェリア・ラゴスのエンジニアです。ツイートしたり、学術研究をしたり、写真を撮ったり、デザインしたりコードを書いたりして、日常を楽しんでいます。