In this tutorial, we'll walk through how to build a React component that uses the Google Maps API. Integrating React with external libraries like Google or Facebook APIs can be confusing and challenging. In this discussion, we'll look at how to integrate the Google Maps API with React. In this post we'll deal with lazily-loading the library through building complex nested components. This post is

前々回に モダンなフロントエンド開発環境をつくる という記事を書きましたが、その中で使った WebPack-Dev-Server を捨てたのでその背景と、Step-by-Stepの導入フローを書いてみます。 WebPack-Dev-Server を捨てた理由 大きく次の問題がありました。 Scssで@importされているファイルを変更しても、正しくビルドされない TypeScriptのimportは問題ない ビルド時にマップファイルが生成されず、バグが発生したときにそのまま調査に入れない ビルド結果がインメモリでサーブされるため、ビルドされたソースを確認するには別途 webpack コマンドを打たなくてはいけない 特に1番目のものがクリティカルで、CSSを適用する段階では毎回webpackコマンドを打って実際にビルドしなくてはならず、使い物にならなかったためです。 この3つの問題をすべて

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? JavaScriptにはむしろもっと抽象化がもたらされるべき - Qiitaという記事で、もう少し踏み込んだ話を書いてみました。 某所でReact.js界隈の人に聞きたいというフレームが発生したのだが、はてなブックマークでコメントしたらIDコールされたので、反論をここに書くことにした。(最近は技術系記事はQiitaにしか書いてないので)。 あくまで僕が考えるなので、JavaScript界の人達が本当はどう思っているかはわからない。そもそもJavaScriptを本格的にさわり始めたのごく最近なので、JavaScript界では異端かもしれな

Web アプリを構築したくて久し振りに React を触ってみると、前に少し触っていたのにすっかり忘れてしまっていました。圧倒的に記憶力が低いので、継続的に触っていないと中々覚えられません…。 今だと Angular2 がグイグイ来てたりしてますが、それよりも一度触ったことのある React+Redux を使った方が学習コストを抑えられるな、という訳で再度勉強中です。 改めて色々と調べていると、redux-sagaという Redux の Middleware が非同期処理を書きやすく出来るぞ！との事だったので、まずはシンプルなカウンターサンプルの実装をして感じを掴んでいきたいと思います。 最後の 参考 にもあげていますが、そもそも redux-saga とは一体何者なんだ？というところにおいて、以下の記事が大変参考になりました。 redux-saga で非同期処理と戦う - Qiita ま

Redux has no doubt captured the hearts of the React community but many questions still remain - how do we actually structure Redux applications effectiv…

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Step forward Understanding Service Worker Registration & Lifecycle at Frontend Meetup Tokyo vol.2 2016/5/18 Jxck

https://pickfm.net pickfmとは テック系Podcastにでてくる話題を可視化し、好きな箇所をピックアップして聴けるwebサービスです。 下の画像はwada.fm Episode 52の話題を表示した様子です。このように、タイムライン状に表示された話題から聴きたい箇所をピックアップして再生することができます。 これをどう実現しているかというと、ディープラーニングを用いて音声認識をしてうんぬんとかそんなことは１ミリもありません。 Podcastを聞きながら内容をふせんに書き出す それをスプレッドシートに起こす スプレッドシートをcsvにエクスポートする csvをスクリプトでElasticSearchに投入 このように非常にローテクな残念仕様となっております。 作った動機 「あの話、また聴きたいな」と思っても探しだすのが困難で、あっちこっちと這いずり回らないといけないのを

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

Karmaを使うことでフロントエンドの単体テストを楽しくかつ機能的に行うことができます。 ステップを通して少しづつ理解できるように執筆しました。 また、最後に重要だろうと思われる補足内容を記載しました。 Karmaの導入に一役買えれば幸いです。 テスト全体の流れについては以前書いた記事フロントエンドにテストを導入を参照してください。 Karmaとは ブラウザ上で 単体テストを実行するためのテストランナーです。 テストを実行するだけでなくファイルの変更監視や結果のレポートを出力してくれたりと単体テストに必要な機能が一通りそろっています。 特定のフレームワームに依存しておらず汎用的に使えるツールで、プラグインを使った機能の拡張が強力です。 前提 Nodejs,npm,chromeが導入済みであること 流れ Karmaは4つの大きな機能（プラグイン）が存在します。 Step 3 〜 Step 6

LoopbackのライトなREST API開発環境とReact.jsを使ってサクっとするにはというような内容です。 こちらは、React.js meet up #3のLTで発表したスライドです。 http://reactjs-meetup.connpass.com/event/26229/

Created by Jay Phelps and myself for use on our projects at Netflix, redux-observable is middleware for redux that is inspired by redux-thunk. redux-observable allows developers to dispatch a function that returns an observable, promise or iterable of action(s). When the observable emits an action, or the promise resolves an action, or the iterable gives an action out, that action is then dispatch

The King is dead. Long live the King! I love jQuery. Its minimalism, quality and consistency allowed me to do anything with a few lines of code (often just a single one). It brought a clean syntax to an inconsistent language. It offered an abstraction over incompatible browsers. It was solid. It was freaking fast. It made me feel like a powerful hacker. And I loved that a 12 year old kid could tea

Or packages you should know to create a Redux production applicationWarning: This article is about front-end applications and nothing about server rendering. What’s going on?Redux & React are currently mainstream technologies in front-end. Every self-respecting front-end developer knows this fact and tries to dive into them to understand what they are and how to deal with them. Because it seems re

#はじめに 「サカナクションのライブのオセロのやつ」は、上のこれです。 2013年のライブのアルデバランの時の写真です。 くっきりとしてないので見えにくいかもしれませんが、 ボーカル山口一郎の姿が、後ろのスクリーンでオセロの表裏を使って表現されてます。 今回はこれをprocessingで作る手順を紹介します！ ちなみに、完成品は下のような感じに動きます！ こんな感じにオセロがクルクルしています！ #ちなみに、Processingとは processingはプログラムでお絵描きできるやつです。 （参考：プログラミング初心者でも大丈夫！Processingでデジタルアートを作ろう） modeを選べば、JavaやJavascriptやPythonなどでも書けるので、便利です！ #コードの説明 [Github] OthelloScreen このProcessingのプロジェクトはGithubにあげ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに （2017/08/10追記） この記事では webpack-dev-server を独立したサーバーとして使う場合の方法です。 また webpack 1 系の情報になっており少々古いです。 最新の設定についてはこちらの GitHub リポジトリを参考にしてください。 https://github.com/zaki-yama/redux-express-template （追記ここまで） JavaScript のビルドに webpack を使っている場合、ローカルでの開発には webpack-dev-server を使うと便利です。 通常の webpack コマンドも --watch （または -w）オプションつきで実行することにより ファイルの変更を検知して自動でリビルドを行うことが可能ですが、 webpack-dev-server は上記に加えて ローカルサーバーも起動してくれ