Reactの大きな特徴の1つは、ファイルを自由に構造できることです。自由ゆえ、パッと見て理解できる構造にならないこともあります。そのためStackOverflawや類似サイトでは、どんなファイルの構造にするか数多くの質問が寄せられています。ファイルの構造は主観的で、正しい答えがありません。本記事ではReactアプリを作成するとき、私が考えるツール選び、ファイル構造、コンポーネントの分解方法を解説し…

関数が呼び出されたかどうやって確認しますか？ Ajaxコールのテスト方法は？ setTimeoutを使ったコードは？テストで困ったときに使えるのがテストダブルです。 テストダブルは、難しいテストを簡単に実行できる代替コードです。 これまではSinon.jsがJavaScriptのテストダブルを作成するには不可欠なツールでしたが、最近、testdouble.jsという新しいライブラリーが話題になって…

ブラウザー上でVRコンテンツを表示できるWebVR。React Nativeをベースに開発された「React VR」でWebVRアプリを作ってみました。 React VRは、Facebookが開発したJavaScriptライブラリーで、WebVRアプリケーションを作成できます。A-Frame by Mozillaとの違いは、WebVRシーンの作成にHTMLではなく、JavaScriptを使うことで…

久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？  モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しい…

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

ReactやAngularと並び、ここのところ人気が高まっているVue.js。Axiosを組み合わせれば外部APIを使った Webアプリも手軽に開発できます。 JavaScriptのアプリケーションを作っていると、よくリモートソースからデータを取得したり、APIを使いたくなったりすると思います。最近、公開されているAPIを見ていたら、ソースからデータを取得して処理するのに良いものがたくさんあること…

XMLやJSON、既存のページ内のtable要素など、あらゆるデータからグラフを作成できるJavaScriptライブラリー「AnyChart」。その魅力と使い方を解説します。 多くのデータを扱うサイトを運営しているなら、JavaScriptの図表作成ライブラリーなどを利用して、視覚的な表現をしますよね。そうしたライブラリーは多数あるものの、できることに大きな違いはありません。ではどうやって最適なラ…

新しくプロジェクトを始めるときに開発者を悩ませる、フレームワーク選び。ReactとAngularをあらゆる点で比較しながら、どう選ぶべきか？ の基準を考えます。 AngularとReactのどちらを選びますか？ JavaScriptのフレームワーク選びで多くの開発者が悩んでいます。始めたばかりの初心者も、次のプロジェクトで使うフレームワークを検討中のフリーランサーも、企業戦略を立てるITアーキテク…

Web開発のプロジェクトで毎回必要になるつまらない作業にムダな時間を費やしていませんか？ 自作の自動化ツールで今すぐ脱却しましょう。 JavaScriptの開発者にとって、新しいプロジェクトを始めるときに繰り返しで退屈なプロセスが多くあります。プロジェクトごとにpackage.jsonファイルを追加し、標準的な依存オブジェクトを持ってきて構成し、適切なディレクトリ構造を作り、そのほかのファイルを追…

書き慣れたJavaScriptでシェルスクリプトを書けば、ちょっとした面倒な作業を自動化できます。 クライアントのWebサイトをSSLにアップグレードしました。証明書はワンクリックでインストールできるので難しくなかったのですが、SSLへ移行後、混在コンテンツの警告がたくさん出ました。WordPressのサイトなので、修正にはテーマディレクトリのアセットをHTTP経由でインクルードしているファイルを…