The following is a guest post by David Khourshid about how he uses Sass and the 7-1 pattern to style React components. React being all over the place these days, I am very glad to have him talking about his experience here. Chances are, as a frontend developer, you’ve heard of Facebook’s library for building user interfaces, React. Of course, an important part of building UI is styling it, as well

(Korean, Japanese) Redux is a surprisingly simple library for managing application state with a Flux-like architecture. Here at Affirm, we are particularly interested in Redux’s time-travel capabilities. Our core business is offering transparent consumer loans, so it’s incredibly valuable to be able to replay the entire loan application process from the user’s perspective. Redux is more of a set o

最近、JSを書く時はBabelを使ってES6で書いている。 mochaでテストを書く場合も下記で簡単に導入できる。 $ npm i -D mocha babel $ $(npm bin)/mocha --compilers js:babel/register そんな感じでTestiumとmochaで下記のようにテストケースを書いて、テストを実行するとエラーが出た。 // test/home.js 'use strict'; import injectBrowser from 'testium/mocha'; describe('Some page', () => { before(injectBrowser()); it('should display "Hello World"', () => { this.browser.navigateTo('/'); this.browser.as

Talk about ECMAScript 6 at YAPC::Asia Tokyo 2015 http://yapcasia.org/2015/talk/show/44721562-10e4-11e5-88a0-d7f07d574c3a https://www.youtube.com/watch?v=oSPv5IPDSxERead less

Electronプログラミング入門 — インストールからミニブラウザ構築まで 古川陽介 Electronとは、デスクトップクライアントを作るためのフレームワークです。クロスプラットフォームで動作することをサポートしているため、Electronで作ったアプリケーションはMac、Windows、Linuxの環境でも動作します。Atomと呼ばれる GitHub社製のエディタがあります。 ElectronはAtomを作る際にフレームワークとして作られました。以前はAtomShellと呼ばれていましたが、Electronとして名前を変更し、2016年にはversion 1.0がリリースされるまでに成長しました。 ElectronはJavaScript / HTML / CSSを使ってクライアントアプリケーションを作成します。中のアーキテクチャはChromiumとNode.jsで作られており、Web開

おはこんばんにちは、かとじゅんです。 久しぶりにブログを書く…。最近、趣味でAngular2やらReactやらやっています。やっとWebpackになれました…。 さて、今回のお題は「FluxとDDDの統合方法」について。Angular2を先に触っていましたが、FluxといえばやはりReactだろうということで途中で浮気してReactで考えています。Angular2でもできるはずですが、今回はReactで統合方法*1について考えてみたいと思います。一つ断っておくと、FluxはDDDと統合することを想定していない設計パターンなんで云々とかはここでは考えていません。それはこのブログ記事を読む読まないに関わらずご自身で判断されてください。ソースコードについては、Githubへのリンクを一番下に書いてあるので興味がある人は参考にしてみてください。 Fluxって何？ まず基礎ということで、Flux i

ドメインを変更する場合、GoogleやYahooの検索ボックスを利用した際に表示される順位が下がってしまうのでは！？と不安になる。 そんな不安を消してくれる検索エンジン対策が、「SEO　ドメイン変更」「SEO 301」「リダイレクト SEO」とかで検索すると該当する記事がたくさん見つかって、紹介されていた。 レンタルサーバ「heteml」でドメイン変更 .htaccess RewriteEngine On RewriteCond %{http_host} ^www.olddomain.com RewriteRule ^(.*) http://www.newdomain.com/$1 [R=301,L] できた！以上。 なのですが、ググったときの備忘録。 301リダイレクトによるサイト移転時に知っておくべきこと 知識編 海外SEO情報ブログ「301リダイレクトによるサイト移転時に重要なTIP

Qiitaのスライドモードは、mizchiが勝手に作った！？─Incrementsの縛られない開発スタイルを聞いてみた 馬場 美由紀（HTML5 Experts.jp編集部） 及川卓也さんや田中洋一郎さんをはじめ、著名なエンジニアが次々と入社していることで話題のIncrements。8月にはさらにCSSのコードフォーマッターであるStylefmtの作者・morishitterこと森下雅章さんを迎えるなど、さらに開発陣営を強化しています。 今回はさっそく森下さんにも加わっていただき、白石俊平編集長を聞き手に、CTOの髙橋侑久さん、フロントエンドエンジニアmizchiさん、デザイナーの東峰裕之さんに、「Qiita」の開発環境や開発スタイルなどについて聞いてみました。 特定領域でとんがってるスペシャリストが増えてきた 白石：まずは、自己紹介とQiitaの開発チームでの役割についてお聞かせください

HTML5 Conference 2016 http://events.html5j.org/conference/2016/9/session/#session_id_h1

ブックマークしました ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください Twitterで共有

phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python はじめに 「webpack インストールしといてー」, 「gulp 導入して watch しながら開発してー」, 「React だから ES6 でコード書いてー」 最近こんな会話が当たり前のように現場で飛び交っています. フロントエンドの開発者には HTML, CSS に特化している人 (coder, markup engineer) JavaScript は得意だけど CSS はちょっと弱い人 (javascripter) HTML, CSS, JavaScript 全てを統べる者 (frontend

(注記：7/15、いただいた翻訳フィードバックを元に記事を修正いたしました。) 子供の頃、私の興味は互いに関係性のない様々な分野に及んでいました。数学も歴史も大好きでした。 ルネッサンスマン 、つまり 博学者 と言う、複数の分野に秀でた人になりたいと思っていました。これはとても難しい課題で、私は突如として、器用貧乏な人になってしまう危機に直面したのです。 私は特定の分野に特化しなくては、と考え始めました。そうすればたとえルネッサンスマンにはなれなくても、少なくとも、器用貧乏にならなくても済むと思ったのです。どうしたらソフトウェア開発をするのに必要な広い知識を保ちながら、1つの分野で専門性を高めることができるのでしょうか。 この記事では、過去5年間、私が良いJavaScript開発者になるために使ったテクニックとリソースの概要をお伝えしようと思います。 最近の多くのWeb開発者は、ある共通の

ReactとCordovaを使って、ブラウザ向けのWebUI + Androidで動くスマホアプリ を提供するサービスを、一人で作ってみた話です。 サマリー 作ったもの 最大の課題:作業量 一人で作りきるために意識したこと 取り組み1: Cordovaを使って、Web UI/スマホアプリのコードを共通化する 取り組み2: レイヤードアーキテクチャを採用し、共有できるコードを最大化する 取り組み3: ユニットテストを書く まとめ 作ったもの jiji2.unageanu.net 自分だけの取引アルゴリズムで、誰でも、いますぐ、かんたんにFX自動取引を開始できる、システムトレードフレームワークです。 アルゴリズムの作成、バックテスト、リアル口座での自動取引まで、これ一つで可能。 取引アルゴリズムはRubyで記述。メール送信や取引タイミングのPush通知も、APIを呼び出すだけで実現できます。

2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact

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

Facebookが提供しているJavaScriptライブラリ・React.jsは「Yahoo!」「Airbnb」「Reddit」「Netflix」などで採用されています。 日本でも注目され始めているので、React.jsを使ってみたい方は多いのではないでしょうか。 これからReact.jsを学ぶ方の参考になるReact.jsの入門資料（サイト・記事・スライド）を12個ご紹介します。 他のJavaScriptフレームワークからReact.jsに乗り換えようか迷っている方の参考になる資料も紹介しています。 React.jsの学習の参考になるサイト・記事 今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference / HTML5 Expert.jp https://html5experts.j

2018年4月25日をもちまして、 『CodeIQ』のプログラミング腕試しサービス、年収確約スカウトサービスは、 ITエンジニアのための年収確約スカウトサービス『moffers by CodeIQ』https://moffers.jp/ へ一本化いたしました。 これまで多くのITエンジニアの方に『CodeIQ』をご利用いただきまして、 改めて心より深く御礼申し上げます。 また、エンジニアのためのWebマガジン「CodeIQ MAGAZINE」は、 リクナビNEXTジャーナル( https://next.rikunabi.com/journal/ )に一部の記事の移行を予定しております。 今後は『moffers by CodeIQ』にて、 ITエンジニアの皆様のより良い転職をサポートするために、より一層努めてまいりますので、 引き続きご愛顧のほど何卒よろしくお願い申し上げます。 また、Cod

この記事は “Exporting An Indie Unity Game to WebVR” の抄訳です。 ツールをダウンロードしたりインストールをすることなく VR コンテンツをすぐに楽しめる WeVR は、未来における VR コンテンツアクセスの鍵を握っています。少なくとも、私たちはそう考えています。私たちは Jump と呼ばれるマルチプラットフォームなデジタルゲームの定額サービスを構築しています。Jump では、デスクトップやモバイル、ゲーム機、そして VR デバイスに向けた Web 技術のみで作られ「Web ネイティブ」ゲームを配信しています。私たちはビジネスを Web ネイティブな技術、HTML5、WebGL、JS、そして早晩リリースされる WebAssembly に賭けたのです。そしてWeb がバーチャル・リアリティに対して、いかに強力な存在であるかを示すことにしました。そのた

2015年10月7日（水）にReactの最新バージョンである「React v0.14」がリリースされました。今回のバージョンでは、「Reactはnpm経由で使用し、browserifyやwebpackのようなツールを使ってコードを一つのバンドルの中にビルドする開発方法」が推奨されています。今回の記事では、browserifyを使った方法になりますが、npm経由でReactを使う方法について詳しく紹介していきたいと思います。 はじめに 今回の記事を書くにあたり、簡単なサンプルをReact v0.14で作りました。フォームに入力したテキストを出力するだけのものです。 ソースコードもGitHubにアップしているので、参考にしていただければと思います。 maechabin/react0.14-sample – GitHubまた最新バージョンのReact 0.14については、以下を参考にしてください

React.jsについての基本的なところを書いていきます！ 公式読めばわかるようなことが多いですがReact.jsに興味をもつきっかけにでもなれば...。 v0.12.1で確認しています。 こっちは一人で書くように作ったものなので書きたい人はVirtualDOMに書くといいと思います。 (書く人がいなくて1人で書いているわけではない) この記事は古いので下記の更新情報も参考にしてください http://blog.koba04.com/post/2015/03/05/react-js-v013-changes/ http://blog.koba04.com/post/2015/09/22/react-js-v014-changes/ http://blog.koba04.com/post/2016/03/09/react-js-v15-changes/ http://blog.koba04.