フォーム送信前のバリデーション（検証）は欠かせませんが、あまりリッチな機能ではかえって使いにくくなることもあります。なるべくブラウザーの機能を使って、シンプルなバリデーション機能を実装する方法を解説します。 HTML5ではブラウザーベースのフォームバリデーションを実装するために、新しい属性がいくつか導入されました。たとえばpattern属性はtextarea要素やinputに対して有効な入力値を正…

リアルタイムなAPIを作れるフレームワークFeathersとReactを使って、CRUDなWebアプリを開発する基礎を解説します。 モダンなプロジェクトでは、コードの再利用性を高めるため、フロントエンドとバックエンドでロジックを分けてコードを書くことが求められます。具体的な再利用の用途は、バックエンドAPIにアクセスするネイティブモバイルアプリを作る場合や、モジュール方式の大規模プラットホームにお…

JavaScriptでデータベースといえば非SQLだと思っていませんか？ Node.jsのmysqlモジュールでMySQLを使う方法を解説します。 Node.jsアプリのバックエンドに適しているからか、非SQLのデータベースが話題ですが、流行っていて格好良いという理由だけで次のプロジェクトに採用するわけにはいきません。プロジェクトで要求されることに基づいてデータベース型を選ぶべきです。プロジェクト…

動きの早いJavaScriptフレームワークの世界で、長い歴史と実績を持つCanJSを知っていますか？ その魅力を解説しながら、簡単なWebアプリを作成するチュートリアルをお届けします。夏休みの課題にどうぞ。 CanJSは、長期にわたってメンテナブルなWebアプリの作成に役立つ、革新的なフロントエンドライブラリーです。何十個もの独立したパッケージがあり、必要なライブラリーを選択できるため、100k…

CMSの定番といえばWordPressですが、開発者にとってより柔軟で使いやすいCMSを探しているなら、Node.jsベースのKeystoneJSがおすすめです。KeystoneJSの特徴と使い方、WordPressとの比較をまとめました。 KeystoneJSはコンテンツ管理システム（CMS）で、データーベースと連動するサーバーアプリケーションを構築するためのフレームワークです。Node.jsの…

従来のWebアプリケーションなら簡単なGoogleやFacebookのソーシャルログインも、シングルページアプリケーションに実装するのは意外と大変。実装に戸惑った方へ、ちょっとしたコツを教えます。 シングルページアーキテクチャーを使って開発されたWebアプリケーションを目にすることが多くなりました。このアーキテクチャーでは、アプリケーション全体がJavaScriptとしてブラウザーに読み込まれ、サ…

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

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

Seleniumを使ったNodeアプリの機能テストの手順を解説しながら、テスト失敗時のデバッグを効率よく進めるヒントも紹介します。 Nodeアプリケーションの機能テスト Web開発プロジェクトで機能のテストをするには、起こり得るユーザーの操作リストを基にブラウザーでDOMの遷移をチェックします。仮にコンテンツマネジメントシステム（CMS）を作っているとして、画像ライブラリーのアップロード機能をテス…

開発者なら誰しもJavaScriptをはじめとするコードのメンテナンスが面倒だと感じています。日々変更される標準や構文、サードパーティのパッケージ変更に付いていくのも大変です。 近年、JavaScriptを取り巻く状況は一変しています。JavaScript言語のコアは進化し続けて、基本中の基本である変数宣言の方法さえ変更されているのです。ES6では、letやconst、アロー関数などの変更がコアに…