先日当ブログで、『Angular + Firebase事始め – Firestoreのデータを取得し、Firebase Hostingにデプロイするまで』という記事を投稿しました。この記事では、開発環境の構築方法、AngularとFirebase（Firestore）との連携方法、デプロイ方法など主に開発の前段階の内容を扱いました。今回は少し先に進んで、実際にデータを操作する方法を紹介したいと思います。AngularFire (AngularFire2) というAngular公式のFirebase用ライブラリを使ってCRUDを行う処理をまとめてみました。 目次 はじめに AngularFireを使う準備 Firestoreのデータを扱えるようにする データを参照する（Read） データを生成する（Create） データを更新する（Update） データを削除する（Delete） CRUDを

React v17 のリリースが差し迫ってきている今日この頃。私の場合、今年はほとんど React の開発案件に携わることがなかったので、React v16 の機能も完全に追いきれていません。React v17 がリリースされる前になんとか知識だけでも入れておこうと思って、React の公式ドキュメントを日本語に訳しています。前回まで、『Render Props』、『Higher-Order Component』を訳しました（これらは v16 の機能ではないですが…）。今回は、React 16 で新たに導入されたコンポーネントのレンダリング中のエラーをハンドリングするための 『Error Boundaries』 を訳してみました。 In the past, JavaScript errors inside components used to corrupt React’s interna

昨年から Reactl界隈で「Render Props」という言葉をよく目にするようになりました。Render Props は、React のコンポーネントを再利用可能な方法でその状態や振る舞いをカプセル化するためのパターンのひとつです。同様の目的でよく使われるパターンに Higher-Order Components (HOC) がありますが、Render Props は HOC の問題を解決したもので、今後主抽象化パターンの本流になりうると言われています。この Render Props を全然追いきれていなかったので、今回 React の公式ドキュメントの『Render Props』 の部分を日本語に訳してみました。 The term “render prop” refers to a simple technique for sharing code between React co

当初の予定より約1ヶ月ほど遅れて5月4日に待望のメージャーリリース版となるAngular 6がリリースされました。リリース内容は、Angularの公式ブログやChangelogなどで確認することができます。特に公式ブログの記事は、全体をAngular 6の全体を把握するにはちょうどよいかと思います。そのうちAngular Japan User Groupの方々が訳してくれると思いますが、自分もしっかり内容を把握しておきたかったので翻訳することにしました。翻訳したのは、Angular公式ブログの記事『Version 6 of Angular Now Available』です。ぜひ参考にしていただけたらと思います。 Version 6 of Angular Now Available – Angular 6がついに利用できるようになりましたThe 6.0.0 release of Angula

その他にReactにenzymeを連携させるためのenzyme-adapter-react-16や、Jestのスナップショットを行うためのreact-test-renderer、Jestでenzyme-matchersを使用するためのjest-enzymeなどが状況により必要となります。 なお、create-react-appを使う場合は、デフォルトでJestが組み込まれており、特にBabelなどの設定を行う必要はありません。enzymeについては、別途インストールが必要です。 JestについてJestはテスティングフレームワークです。以下のような特徴があります。 JestはJasmine 2をベースに作られていて、JasmineのMatcherがそのまま使えます。Facebook製でReactのイメージが強いですが、他のフレームワークなどでも普通に使えます。Node.js上のjsdomで

前回の記事『フロントエンドの2017年の振り返りと2018年の展望』で触れましたが、今年流行るのではと言われているツールのひとつに「Parcel」が挙げられます。いわゆるビルドツール（バンドラー）です。「設定ファイルがいらない」という強烈なコンセプトを打ち出し、フロントエンド界に旋風を巻き起こしつつあります。私も実際に使ってみましたが、とても使い勝手が良く、使えるツールだと思いました。今回は、このParcelについてざっくりですが、使い方などを紹介したいと思います。 はじめに – ビルドツールの現状まずビルドツールの現状について振り返っておきます。ビルドツールと言えば、様々なものが出回っていると思いますが、やはり元祖と言えるのが魔法の杖と呼ばれたBrowserifyでしょう。require()で読み込むNode.jsのモジュールをブラウザでも読み込めるようにし、さらにモジュールの依存関係を

2017年9月26日（火）にReactの最新バージョンとなるReact v16がリリースされました。前回のv15のリリースが2016年4月7日だったので、実に1年半ぶりのメジャーバージョンアップとなります。「Fiber」として開発されていた新しいコアアーキテクチャーが採用されたことでしょう。v16ではそれほどFiberによる劇的な変化はないようですが、今後Reactの機能を強化していく上でFiberは大きな力を発揮するとのことです。今回、Reactの公式ブログのReact v16のリリースについて書かれた投稿（React v16.0 – React Blog）を日本語に訳してみました。v15から大きな変更はありませんが、それなりに変更点はあります。当記事でぜひ確認してみてください。 React v16.0September 26, 2017 by Andrew Clark We’re ex

前回投稿した�『jsdo.itでアクセスの多かったUIデザインに役立つJavaScriptコード紹介』という記事では、jsdo.itというサービスのウィジェットを15個表示させることにしました。ウィジェットはJavaScriptのdocument.write()が使われていたため、15個も表示させるとページがこれでもかというくらい重くなり、投稿も半ば諦めモードになりかけました。最終的にはdocument.write()が書き出すiframeを取り出し、遅延ロードさせるという方法でなんとか乗り切りました。その辺の話を詳しく書こうと思います。 jsdo.it上のコードをページに埋め込むjsdo.it内で書いたコードは、ウィジェットとしてブログなど好きなページに埋め込むことができるようになっています。jsdo.itのそれぞれのページに設置してある「ブログに埋め込む」というボタンを押すと、ページに

自分はReactのビルドにBrowserifyを主に使用しており、昨年には『Reactをnpmでビルドする方法 browserify (watchify) + babelify編』という記事も書きました。ただ、ここ最近のwebpackの人気っぷりはすさまじいものがあり、「React + webpack」という組み合わせが今後のスタンダードになってもおかしくないという状況なので、今回はwebpackでReactをビルドする方法をまとめてみました。 webpackとは webpackは、browserifyと同様、複数のファイルの依存関係を顧慮してビルドを行うツールです。Browserifyとの大きな違いは、対象となるのがJSファイルだけでなく、CSSファイルや画像などに及ぶというところでしょうか。また最終的に生成するファイルも複数にわけることもできたりします。プラグインがすでに含まれていたり

Angularを勉強していると、至る所でTypeScriptの知識が必要になってきます。ということで、TypeScriptの公式ドキュメントにお世話になる機会も増えてきています。前回はClassの説明ページを日本語に訳しましたが、今回はDecoratorの説明ページ（Decorators・TypeScript）を日本語に訳しました。Angularでは、単なるクラスをAngularで使えるコンポーネントとしてその役割を担わせる時などにデコレータを使用したりします。けっこう大事な部分でもあるので、日本語に翻訳することにしました。ぜひ参考にしてもらえればと思います。 Introduction: はじめにWith the introduction of Classes in TypeScript and ES6, there now exist certain scenarios that req

Angularではアプリケーションを構築する際に使用する言語としてTypeScriptが主流となっています。そしてAngularでは至る所でTypeScriptのclassを使うことが求められます。ES2015にもclassがありますが、実際にTypeScriptでclassを書いてみると、ES2015のclassの感覚では書けないことがわかりました。C#やJavaのclassに近いという話ではありますが、念のためTypeScriptのclassがどんなものか把握するために、TypeScriptの公式ドキュメントの「classの部分（Classes・TypeScript）」をしっかり読んでみようと思い、今回日本語に翻訳してみました。 Introduction: 始めにTraditional JavaScript uses functions and prototype-based inhe

WordPress 4.7では、これまでプラグインとして提供されていたWP REST APIが機能として組み込まれ、標準でREST APIが使えるようになりました。このことにより予想されることは、PHP以外のプラットフォームで、WordPressのブログテーマやWordPressの機能を使ったサービスが今後どんどん生まれてくると言うことです。 ちょうど自分の扱っている新規事業の企画でブログメディアを作ることになりました。新しいメディアを運営する上で、技術的にも注目されるようなものを作りたいと思ったので、今回このWordPressのREST APIを使って、React + Reduxベースでブログを作ることにしました。爆速なブログができあがったので事例として紹介させてください。 LifeGadget（ライフガジェット）人々の日常生活に役立つ情報（ライフハック術、ガジェット、アプリ、サービスな

2016年9月16日に長らく開発が進められていたAngular 2の正式版がリリースされました。自分はどちらかというとReactの人間なので、Angular 2に関してはまだまだ知らないことが多いです。そんな折、TwitterかFacebookを見ていた時に自分のタイムラインに「React vs. Angular 2 | React vs. Angular 2 | hack.guides()」という実に興味深いタイトルの記事の情報が流れてきました。内容はともかく、コードの比較などもあり、しっかり読んでみたかったので、日本語に訳してみることにしました。特にAngular 2の部分が知識不足でうまく訳せてない部分もあるかと思いますが、ぜひ参考に読んでみてください。 当記事は、React vs. Angular 2 | hack.guides() by Hristo Georgievを日本語に翻

Reactを勉強し始めた頃は、その概念はわかったとしても、実際にコードを書いてみようとすると、どう書いていいかわからず手が止まってしまう人もいるかと思います。jQueryをバリバリ書いていた人でも、Reactを書こうとすると最初は戸惑ってしまうっていうのはよく聞く話です。ある意味Reactの書き方は特殊です。まずは書き慣れる必要があるかと思います。今回の記事では、初心者向けとしてReactの実装でよく使う基本的な構文を紹介します。今回紹介する構文を覚えれば、ほぼほぼReactの仕組みも理解できるようになり、その後の学習も楽になるかと思います。ぜひ参考にしてみてください。 ファイルを読み込む時の構文ReactでUI（ユーザーインターフェース）を実装する際は、一般的にnpm経由でreactとreact-domをプロジェクトディレクトリ内にインストールして、ファイルに読み込んで使うようにします。