Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい
Google の提唱するMaterial Designチックな Spinner を、React コンポーネント化して公開しました。 リポジトリは以下です。 wadackel/react-md-spinner https://github.com/wadackel/react-md-spinner デモ React MD Spinner - DEMO https://wadackel.github.io/react-md-spinner/ 実際の動きは以下の様にカラフルな円形がくるくる回る感じになっています。 手持ちの iPhone6s で確認している限り、スマートフォンでも必要充分スムーズに動作しています。 使い方 react-md-spinnerの特長として、material-uiの様にインラインスタイルのみで構成されるため、インストールしたら CSS どうしようみたいに悩まずにすぐ使い
こんにちは。エンジニアの安達(@ry0_adachi)です。 今回はReact + FluxをFlux Utilsを使って導入するための話をしたいと思います。 この記事を書こうと思った理由 普段ちょっとしたツールなんかをReactを使って実装したりするのですが、その時にReduxとかでやっているとファイル増えたりしてすごく冗長だなあと感じて、もっと薄く実装できるライブラリを使おうと思った時に手に取ったのがFlux Utilsでした。 この記事ではFlux UtilsにおけるFluxアプリケーションの実装方法に加えて、そもそもReactやFluxって今までのライブラリやフレームワークと比べて何がいいのか？について説明していきます。初歩的な書き方やjsxだったりについては話さないのでドキュメントなどを読んでいただければと思います。 ドキュメント React Flux ReactとFluxを導入
発端 やりたいと言ったら @mizchi がやってくれることになった。 今回の目標 weapons.json · GitHub メインクエスト : この json を使って、Splatoon のブキを一覧表示する機能を作る サブクエスト : 絞り込み機能を付ける サブクエスト : 検索フォームと一覧部分をサブコンポーネントに分けて、それらを管理するルートコンポーネントに state の更新内容を書き戻す 進捗 割と実践的で、構築しながら説明と言う感じだった。実際 GitHub - dolpen/react-tutorial のコミットログを見た方が何をしたかは分かりやすいのではないかと思うので大胆に割愛。 コンポーネントは何を与えられるべきか React 自体は data => view を担当するのが主機能なので、view を出力するコンポーネントの構築に、この data に当たるもの以
各フレームワークの特徴（つらみ）を整理 only jQuery Viewが状態を持ってしまう拡張やテストがしづらい DOMを指定してViewの更新処理を書くのはつらい Backbone.js Viewの更新処理を手動で書かないといけないのはつらい ModelとView間のイベント管理が煩雑になる イベント地獄になりがち 2 Way Data bindingを使ったフレームワーク（AngularJS、Vue.js、Ember.jsなど） コンポーネント毎に状態を持つとつらい 大規模になってくると状態を管理するのが難しくなる 単一方向データバインディング: データに対して、ビューの状態が必ず一意に決まる 双方向データバインディング: データに対して、ビューの状態が一意に決まるとは限らない refs: Introduction To React 今話題のReact.jsはどのようなWebアプリケ
タブ UI のアクセシビリティ対応 この記事は、下記の点に留意してご覧いただきたい。 タブ UI におけるアクセシビリティ対応（主に WAI-ARIA）の参考実装であること React コンポーネントとしての機能性は二の次のサンプルであること アクセシビリティ実装についてのツッコミは歓迎であること ひさびさにPCキーボード的なアクセシビリティ対応が必要そうな性質のサービスを開発することになったので、コンポーネント単位でのアクセシビリティ関連実装を進めている。 React 実装 今回はタブ UI を題材に、React コンポーネントを実装した。 行うべき操作を見通しよくするために、タブ UI を <Tabs> コンポーネント1つで実装した。厳密には <TabList> や <TabPanel> などの要素を分解してコンポーネント化したほうが良いだろうが、今回は簡易実装としている。 キーボード
要約 : 私たちは、React.js と Flux、それに他のいくつかのライブラリを用いて HipChat の Web クライアントを根本的に再構築し、素晴らしい結果を得ました！ 是非試してみませんか？ HipChat がアトラシアンに加わったときのクライアントは、Web、Adobe Air (Windows、OS X、Linux)、iOS、そして Android アプリの 4 つでした。HipChat チームが最初に掲げた目標のひとつが、Air クライアントを OS X、Windows、Linux のネイティブデスクトップクライアントに置き換えることでした。私たちは (その当時は) 小さいチームだったためしばらくはこの仕事で手一杯でした。このように最高のアプリケーションを提供することに集中した影響で、Web クライアントに対しては私たちが行った様々な開発の成果を反映させることができません
■ React.jsでも使ってみようと思ってHTML5+JS勉強会へ行ってきた 最近はWebアプリケーション開発者ではないので、新しいものを追いかけるよりも勝ち組に乗って楽をしたい所存(←以前からそうだった気もするが)。群雄割拠だったJavaScriptのフレームワークもReact.js + Fluxの勝利が見えてきたかなーと思い、ぼちぼち手をつけることにしようとした矢先に、11th HTML5+JS勉強会で増井さん(@masuidriveの方)がReact.jsのことを喋るというので行ってきた。会場は教壇があるせいで勉強会というより講演会だ(し、実際スタイル的には講演会だった)。 事前学習はAjaxを劇的に簡単にするReact.jsとReact + (Javascript || CoffeeScript) + Bower スタータキット。今回の講演資料も前者をベースとしたもの。サーバサイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
