多彩なセレクターはjQueryの特徴の1つですが、DOMトラバースメソッドを使って絞り込む方法を身につければ、もっと効率よくコードが書けます。 DOMトラバースとは、Webページの要素を1つまたは複数選択し、選んだ要素と関係する別の要素へ移動できる技術です。最初に選択した要素に新たな要素を加えたり取り除いたりもできます。 本記事ではjQueryで使えるDOMトラバースメソッドを説明していくとともに…

Loading...

「用意されたUIパーツが足りなかった」「運用中のUIのメンテナンスが困難」。Reactアプリの開発ならReact Stroybookで問題を解決できるかもしれません。 フロントエンドのプロジェクトを始めるとき、きれいなデザインを考えることから始めます。細心の注意を払って、UI部品とステートやエフェクトを考えて描いていくでしょう。しかし、開発の最中でも次々に変更が発生します。新たな要求、予測していな…

Loading...

SkypeのようなビデオチャットがJavaScriptだけで作れる!? WebRTCを手軽に扱えるPeerJSでリアルタイムなビデオチャットアプリを作ってみました。 ※本記事は2016年7月16日に掲載した記事の翻訳を一部更新したものです。執筆時点の情報をベースにしており、最新ではない可能性があります。 WebRTCの登場と、ブラウザーの大容量化によってリアルタイムでP2Pを扱えるようになったので…

Loading...

NodeとGitを使ったシンプルなマイクロブログを作りながら、小規模なサービス開発とテストのコツを学びます。 マイクロという言葉は、現代のプログラミングの世界にはあふれています。マイクロフレームワーク、マイクロサービスなどなど、いろいろあります。個人的にはこの言葉は、余計なものを詰め込まずに、目の前の問題を解決してくれるという意味だと考えています。ある明確な課題の解決のためにあるのです。つまり目の…

Loading...

長いページを分割して読みやすくするページネーション(ページング)。jQueryで手軽に実現するプラグインをまとめてみました。2017年現在の「使える」プラグインの情報です。 長くてかさばるコンテンツを単純に並べて表示しても、情報の見せ方としては今一つです。そこでページネーションが重要になります。長めのコンテンツにとっては特に重要です。 サーバーサイドのページネーションは一般的にページ化されたコンテ…

Loading...

タスクランナーに代わって、ここ最近人気が高まっているビルドツールといえばwebpack。「難しそう」「面倒くさそう」——まだ導入していないなら、いますぐ試してみる価値はありそうです。 webpackは現在のWeb開発シーンにおいてもっとも重要なツールになりました。基本的には自分のJavaScriptファイルにほかのモジュールをバンドル(1つに束ねる)してくれるものですが、ほかにもHTML、CSS、…

Loading...

なんとなくjQueryを使っているけど、実はJavaScriptの基礎がよくわかっていない……。そんなJavaScript初心者のために、変数とデータ型をていねいに解説します。 Webプログラミング言語「JavaScript」を学ぼうと決めたものの、どこから始めていいか分からないなら、この記事がちょっとしたヒントになるかもしれません。プログラミングを習得するのに特別なスキルは必要なく、誰だってゼロ…

Loading...

jQueryだけで他のサーバーのコンテンツを読み込もうとすると、クロスドメインの制限がついて回ります。なぜJSONではなくJSONPを使わなければならないのか確認し、他の解決策も検討してみましょう。 ※本記事は2016年7月15日に掲載した記事の翻訳を一部更新したものです。執筆時点の情報をベースにしており、最新ではない可能性があります。 Webベースのアプリケーションを開発し、権限のないドメインか…

Loading...

カード・タイル状の要素をアニメーション付きで見栄えよく表示する「MixItUp3」。ストックしておくと便利なライブラリーの紹介です。 自分のWebサイトを見やすくするために、コンテンツにフィルターをかけて抽出したり整列したりするのは優れた手段です。たとえば、自分の作品集、アルバム、ブログなどはカテゴリごとに分けたいものです。それを実現してくれるJavaScriptライブラリーが数多くあります。中で…

Loading...

時代はECMAScript 2015(ES6)とはいえ、実はまだES5も追いかけられていない、使いこなせていない…という開発者も意外と多いのでは?  ES5のArrayメソッドを使ってメンテナンスしやすいコードを書く実例を紹介。 JavaScriptのメリットは多様なプログラミングスタイルを選べることです。オブジェクト指向、命令型、関数型のプログラミングもできます。さらに、必要性、好み、チームの意…

Loading...