初めてReactに挑戦するとまずつまずくのは開発環境の設定です。Facrbookが提供しているCLIツール「Create React App」で簡単に始める方法を解説します。 Reactの新規プロジェクトを始めるには、コードを書いてアプリケーションを形にするだけではなく、ビルドツールでローカル開発環境を整え、ユニットテストをしたあと、最終的にビルドします。思っているほど簡単ではないと感じる方に、簡…

Webデザイナーにとってもっとも身近なプログラミング言語といえばJavaScriptですよね。ところがいざ勉強を始めたものの挫折してしまった…という人のために、典型的な失敗例と学習のコツを教えます。 JavaScriptの学習をしても挫折する人の多くは、「JavaScriptは分かりにくい」「自分はWeb開発に向いていない」と言います。悲観的になってあきらないでください。アプローチの仕方を変えるこ…

Webサイトのフォームの作成にはjQueryのプラグインが便利。中でも対話形式の使いやすいフォームを作成できるjQueryプラグインを厳選して紹介します。 ページの更新がなく、指示に沿って記入できるjQuery用のウィザード形式のフォームを作成するためのjQueryプラグインがあります。ユーザーデータを一度に入力させる大きなフォームなら、ウィザード形式に変えることで、小さなステップの入力に分割でき…

テスト駆動開発のメリット、関数型JavaScriptプログラミングでのテスト手法を具体的なコードをもとに解説します。 関数型プログラミングとテスト。個別に試したことがあっても、両方を作業に取り入れた経験はないと思います。単独では無害ですが、組み合わせると耐えがたい誘惑を生み出します。その魅力にとつかれたら、より簡潔で、無駄がなく、メンテナンス性のあるコードを書かずにはいられなります。それほどのメリ…

フロントエンドからサーバーサイドまで、すっかりJavaScriptが幅を利かせている昨今。でもやっぱりJavaScriptは苦手、気に入らない開発者のために、コンパイル言語（altJS）を紹介します。 現代のアプリはかつての単純なWebサイトとは求められるものが違うのに、プラットフォームは相変わらずブラウザーのままで、Webアプリの核となる言語はJavaScriptです。 JavaScriptはす…

Webアプリの開発からリリースまで高速で進められるフルスタックなJavaScriptフレームワーク「Meteor」。シンプルな「三目並べ」を作りながら、ブラウザーゲームの作り方を学びましょう。 Meteorはプロトタイプを簡単に作成できて、開発からリリースまで超高速に進められることで人気のフルスタックWebフレームワークです。リアクティブな特性とDDPを使うことで、シンプルなマルチプレイヤー型ブラ…

JavaScriptでビジュアライズツールを作るには、単にグラフを描くライブラリーを選べばいいわけではありません。データベースやアクセス方法など、検討したいことをまとめました。 データを効果的にビジュアライズするために、またデータを分析するための補助ツールを作るためには、よく考えられたデータ管理フレームワークを持つことが大切です。ツールには、適切なバックエンドストレージ、データアクセスのパラダイム…

イベントやショッピングサイトなど、モバイルサイトにリーダー機能を組み込めればわざわざアプリをダウンロードさせる必要はありません。HTML/CSSとJavaScriptを使ってWebサイトにQRコードリーダーを実装する方法を紹介します。 バーコードやQRコードによって買い物や検索の仕方が変わりました。世界中どこでも商品を手に取ったら、バーコードやQRコードをスマートフォンの無料アプリで読み取り、最低…

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

webpackを使ってアセットをバンドルすることで、HTTPリクエストの回数を削減し、ファイルサイズを縮小できます。Webサイトをもっと快適にするためのチュートリアルです。 webpackが大人気です。GitHubのスター数は30,000を超え、ReactやAngularといったJavaScript界の有名プレイヤーもwebpackを歓迎しています。 webpackの本質はバンドラーであり、web…