React v16.3.0: 新しいLifecycleメソッドとcontext API【日本語翻訳】
3月29日に待望のReact v16.3.0がリリースされました。前回のv16.2.0のリリースから約5ヶ月が経ちます。今回の目玉機能はcontext APIと言われていましたが、ライフサイクルメソッドの変更や、ref周りの機能強化などマイナーバージョンアップにしては大きなリリース内容となっています。しっかり把握するためにReactの公式ブログの記事「React v16.3.0: New lifecycles and context API」を訳してみました。 React v16.3.0: New lifecycles and context APIMarch 29, 2018 by Brian Vaughn A few days ago, we wrote a post about upcoming changes to our legacy lifecycle methods, inc
Jest + enzymeで行うReactのユニットテスト（単体テスト）について
その他に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で
React v16.0リリースノート【日本語翻訳】
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
ES2017の新機能「async / await」でPromise（非同期処理）をスッキリ書く
いよいよECMAScript（ES2017 / ES8）のリリースが来月（2017年6月）に迫ってきました。すでに仕様は固まり、あとは承認を待つだけの状態となっているようです。ES2017の目玉機能のひとつが、今回紹介する「async/await」です。Promiseを使った処理をすっきり書くことができるようになります。async/awaitはすでに多くのモダンブラウザでは使えるようになっており、すでに利用している方もいるかと思いますが、ES2017のリリースも間近なことですし、改めて予習の意味もこめて今回async/awaitの使い方などについて紹介していきます。 はじめにJavaScriptの長年の課題として、非同期処理をいかに書くかというものがあります。かつては「コールバック地獄」という言葉が巷で溢れかえっていました。非同期処理の結果をコールバック関数の引数に渡し、そのコールバック関
GitHub Pagesの使い方や機能などをまとめてみた
これまでGitHub Pagesの存在は知っていましたが、特に使うまでには至っていませんでした。プロジェクトのデモページなどもjsdo.itなどを使ったりしていましたが、最近になってやっとGitHub Pagesが使えるじゃないかということに気づき、今更ですがGitHub Pagesについて調べることにしました。いろいろドキュメントなどを見てみると、なかなかGitHub Pagesは面白い機能がてんこ盛りだなということがわかりました。今回はその辺りをまとめてみました。 GitHub PagesとはGitHub PagesはGitHubのサービスのひとつで、GitHub上のリポジトリにアップされたコンテンツを利用してWebページとして公開することができるホスティングサービスです。開発者自身やプロジェクトのためのページ（静的ページのみ）を作ることができます。 GitHub Pages – Gi
あなたはReduxを必要としないかもしれない – You Might Not Need Redux by Dan Abramov | mae's blog
今回は、エンジニア向け読み物サービス「Mybridge」のMybridge AIがランク付けした2016年9月のReactに関する記事の1位だった記事を翻訳して紹介します。Reduxの作者Dan Abramov氏の記事です。内容は、簡単に言うと、「無理してReduxを使わなくてもいいよ」という話です。ただ、使わなくてもいい理由をReduxの特徴を挙げながら述べてくれているので、Reduxについての理解も深まる内容になっています。原文がだいぶフランクな感じで書かれているので、日本語に訳すのが少々難しく、わかりにくい部分もあるかと思いますが、是非読んでみてください。 当記事は、You Might Not Need Redux – Medium (Sep 20, 2016) by Dan Abramovを日本語に翻訳したものです。 人々はReduxを必要とする前からReduxを使おうとします。「
React Nativeアプリの開発環境をコマンド一発で構築する「create-react-native-app」
今月の13日と14日に米カリフォルニア州のサンタクララでReact Conf 2017というReactのカンファレンスが行われました。このタイミングで発表されたのが、今回紹介する「create-react-native-app」です。Reactの「create-react-app」と同様コマンド一発でReact Nativeアプリの開発環境を構築してくれるツールです。これは、これまでなかなか手の出しにくかったReact Nativeアプリの開発を大きく変えてくれる画期的なツールとなるでしょう。今回はこの「create-react-native-app」の使い方を紹介したいと思います。 create-react-native-appとはReact Nativeはご存知の通り、iOSやAndroidのネイティブアプリをReactの作法で開発するためのフレームワークです。Reactでネイティブア
Reactのバケツリレーの回避にJSX Spread Attributesを利用する
Appをルートコンポーネントとし、以下Child1 => Child2 => Child3といった階層構造となっているAppで受け取ったfooとbarという値をpropsを使って、一番下の階層のChild3まで渡している値がChild3まで渡ったら、それをChild3のコンポーネント上で表示する コードは以下のようになります。 import React, { Component } from 'react'; import { render } from 'react-dom'; class App extends Component { render() { return ( <Child1 foo={this.props.foo} bar={this.props.bar} /> ); } } const Child1 = (props) => <Child2 foo={props.fo
【React】コンポーネントをシンプルに書くためのStateless Functional Componentsについて
React v0.14がリリースされてから半年近くが過ぎました。自分としてはやっとReact v0.14で追加された新しい機能についても細かいところまで気にかける余裕が出てきたかなといったところです（v15.0のリリースが差し迫っていますが…）。そんなReact v0.14で新しく追加された機能の中で、最近面白いなと思った「Stateless functional components（SFC: 状態を持たない関数コンポーネント）」について今回は書いてみようと思います。 Stateless functional componentsとはStateless functional components（SFC / Stateless function components）は、React v0.14で新たに追加されたシンプルに書けるコンポーネントとなります。Reactを書いていると、共通ヘッダ
すべてのプログラマーが知っておきたいReactの7つの強み
JavaScriptはこの６年で大きくその地位を向上させてきました。JavaScriptは有名なサーバーサイド言語になり、オフラインファーストSPAは用語として定着し、そしてJavaScriptは他の言語のための有名なコンパイル先となりました。 JavaScriptは、ElectronやReact Nativeのような技術やハイブリッドアプリを通して、ついにはデスクトップとモバイルのプラットフォームとなってきています。 この3年でもう一つ革命が起こり始めました。FacebookのプログラマーであるJordan WalkeがReact.jsを生み出しました。Reactはそれ以来、数百ないし数千ものプログラマーのJavaScriptのコードの書き方を変えてきました。 Reactの途方もない成功の裏にはそれなりの理由があります。 1. バグが出にくいよりシンプルなコードReactはユーザーインタ
ESLintをAtomに導入し、Reactの構文にも対応したAirbnbのJSスタイルガイドを使う
最近周りでよく「AirbnbのJavaScriptスタイルガイド」が良いという話を聞くようになりました。ということで、自分もAtomに導入してみたんですが、これがなかなかいい感じです。多くの開発者の意見を取り入れられて作られているスタイルガイドで、特にReactやES6の構文チェックなどにも対応しているので、とても良い書き方の勉強になっています。けっこうお勧めだと思ったので、今回はAtom限定の話となりますが、ESLintを使った導入方法を紹介したいと思います。 ESLintとはESLintは、2013年6月にNicholas C. Zakas氏によってオープンソースプロジェクトとして公開されたJavaScriptの構文チェックツールです。個別にルールをon/offできたり、独自のカスタムルールを設定できたり、公開されている様々なプラグインを組み込んで使うことができたりします。 ESLin
browserify-shimを使って、CDN経由で外部JSライブラリをrequireする
Browserifyをここ最近よく使うようになってきました。ReactのJSXやES2015のコンパイルもBrowserifyで行えるのでなかなか便利です。今回こちらのブログに自作のjQueryプラグインを導入したのですが、npm経由でインストールして、Browserifyを使ってrequireして読み込むようにしました。ただjQuery本体だけはCDN経由で読み込みたいと思い、browserify-shimを使ってみることにしました。その辺の話を書きたいと思います。 BrowserifyとはBrowserifyはご存知の方も多いと思いますが、ブラウザで使用するJSファイルに対して、requireメソッドを使ったモジュールの読み込みを可能にしてくれるツールです。さらに依存関係を考慮し、複数のJSファイルを1つのファイルにまとめてくれる便利なツールです。 Browserifyインストールはn
Flux UtilsでのFlux実装方法を超シンプルなサンプルを使って解説
先日『Flux Utilsのドキュメント日本語訳』というFlux Utilsのドキュメント英語版を翻訳した記事を投稿しました。Flux Utilsは、Facebook製のFluxフレームワークとでもいうでしょうか。ただ残念なことに、このドキュメントを読むだけでは、Flux Utilsの使い方のイメージを完全に掴むことは難しいと思います（自分がそうでした…）。ということで、Flux Utilsを使って、簡単なサンプルを作ってみました。この簡単なサンプルを通して、Dispatcher.jsだけを使ったFluxの実装方法と比較しながら、Flux Utilsの使い方を説明していきます。 はじめに（Flux Utilsとは） Flux Utilsは、Facebook製のFluxフレームワークとなります。ただ、すべての用途に対応するような完成されたフレームワークではないとFlux Utilsのドキュメ
React v0.14 リリースノート【日本語翻訳】
2015年10月7日（水）に待望の「React 0.14」がリリースされました。ReactはFacebookが開発しているJavaScripのUI開発用のフレームワークです。当ブログでもいくつかReactに関する記事を投稿しています。今回新しいバージョンの理解を深めるために日本語に翻訳してみました。けっこう簡単に訳せるかなと思ったら、意外と骨が折れました。いつものことですが、Google翻訳よりはマシだと思いますので、おかしな訳の部分もあるかと思いますが参考にしていただければと思います。 当記事は以下のページを日本語に翻訳したものとなります。 React v0.14 | ReactReact v0.14October 7, 2015 by Ben Alpert We’re happy to announce the release of React 0.14 today! This rel
Flux – Dispatcherのドキュメント【日本語訳】と実装のポイント
FluxはFacebookの提唱するクライアントサイドのWebアプリケーション（ユーザーインターフェース）を開発するためのアプリケーションアーキテクチャです。FluxはView、Store、Dispacther、Actionの4つの役割に分けられます。今回その中でもFluxの中心となる「Dispatcher」の部分について理解を深めるために、Fluxのドキュメント内のDispatcherの部分を翻訳してみました。Dispatcherがわかれば、Fluxでの実装についてもそれなりにわかるようになると思うので、拙い訳ですが、ぜひ参考にしてみてください。 はじめに – FluxとDispatcher Fluxは「クライアントサイドのWebアプリケーション（ユーザーインターフェース）を開発するためのアプリケーションアーキテクチャ」です。MVCやMVVMなどと同類です。Fluxは役割によってView
Reactの単純なサンプルでFluxの実装を解説
先日『Flux – Dispatcher【日本語訳】と実装のポイント』という記事を投稿しました。Fluxの理解を深めるために、その実装の核となるDispatcherを理解することが大事だと思ったからです。おかげで、ある程度Fluxの理解進みました。今回さらにFluxを実装することで、理解を深めたいと思い、簡単なサンプルを作ってみることにしました。このサンプルを通して、Fluxの実装方法について説明していきたいと思います。だいぶ長くなりましたが、ぜひ参考にしていただければと思います。 Fluxの実装サンプルまずはサンプルを見てください。フォームに入力したテキストを表示させるだけのものとなっています。とても単純ですが、Fluxを使って実装しています。 Flux実装サンプルコード – GitHubFlux実装の説明の前にFluxとは FluxFluxは「クライアントサイドのWebアプリケーション
Relay チュートリアル【日本語翻訳】
先日、Facebookがデータ駆動型のReactアプリケーションの開発を行うためのJavaScriptフレームワーク「Relay」のTechnical Preview版を公開しました。さっそくですが、自分の理解を深めるためにRelayのチュートリアルを和訳しました。せっかくなのでブログにもアップしておきます。誤訳などもあるかと思いますが、Google翻訳よりはマシだと参考にしていただければと思います。原文もつけておいたので、翻訳がおかしなところもなんとなくニュアンスを掴んでいただければと思います。 Relayチュートリアルに行く前に、Relayの基礎知識RelayRelayは、「データ駆動型のReactアプリケーションを開発するためのJavaScriptのフレームワーク」です。RelayはReact同様、Facebook�が開発を進めています。Relayを使うと、サーバから取得したデータを
jQueryで「ページ遷移時に指定要素をフェードイン・フェードアウトさせる機能」を実装
海外のサイトを見るとリッチなユーザーインターフェースが実装されたものが増えてきているのに気付きます。私もその波に乗っていきたいので、今年は、このブログに対して「UIの強化」を目標にいろいろやっていこうと考えています。 その第一弾として、タイトルの通り「ページ遷移時に指定要素をフェードイン・フェードアウトさせる機能」を実装してみました。詳しく言うとサイト内のページ間を移動する際に、テンプレート部分の表示は残したまま、コンテンツ部分（ブログの記事）のみをフェードアウトさせ、ページ遷移後も同様にコンテンツ部分（ブログの記事）のみをフェードインさせるといった機能です。機能の実装は意外と簡単でjQueryとそのプラグインで実現可能でした。 ページ遷移時に#contentの部分をフェードイン・フェードアウトさせる実装方法について以下にまとめてみました。 リンクのクリック時に指定個所をフェイドアウトさせ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
