Comparison with Other Frameworks — Vue.js
Guide Essentials Installation Introduction The Vue Instance Template Syntax Computed Properties and Watchers Class and Style Bindings Conditional Rendering List Rendering Event Handling Form Input Bindings Components Basics Components In-Depth Component Registration Props Custom Events Slots Dynamic & Async Components Handling Edge Cases Transitions & Animation Enter/Leave & List Transitions State
2017年、新規にJavaScriptを書くならどんな設計をするか｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
この記事はJavaScript Advent Calendar 2016の記事です。 今回は、2017年、新規にJavaScriptを書くならどんな設計をするか、というテーマで書いてみようと思います。2017年といっても、しばらくはこんな感じのアーキテクチャでやってきましたので、どんな構成でJavaScriptを設計してきたかという方が正しいかもしれません。基本的にはSPAをベースとしています。 また、最新のイケてる技術バリバリ使ってやるぜ、というよりは、堅牢で、はやりが変わってもメンテができるということを意識してみました。 DOMのレンダリング Virtual DOMを代表とした、DOMのレンダリングを行うライブラリをなにか採用します。特に理由がなければReactでいいと思います。Virtual DOMではありませんが、AngularでもDOM管理においてはさほど違いはありません。この2
2016年最速で成長した次世代JSフレームワーク「Aurelia」の未来
Angular 2、ReactといったJavaScriptライブラリー／フレームワークが盛り上がった2016年。一方で急速にコミュニティが立ち上がり、大きく成長したのが「Aurelia（アウレリア）」です。今後の気になる動きとは？ Aureliaへの取り組みの根幹はオープンソースであることです。オープンソースがもたらす自由、コミュニティの存在とその協力は、多くの人のビジョンに欠かせません。オープンなWebとオープンなプラットホームの、これからの成長は、世界規模のコミュニティが活躍できるような、テクノロジーの民主化を実現するものです。もっと多くの人に、消費者側の考え方ではなく産み出す側・提供する側の考え方を持つようになってほしいのです。これこそがオープンソースの核となる考え方であり、業界の未来だけでなく、文明の未来さえ左右するほど大切なことだと信じています。Aureliaはこの夢の実現に向け
フロントエンドにおいてModel-View-Controllerは死んだのか？ | POSTD
多くのフロントエンド開発者が 一方向のアーキテクチャ を採用し始めている中で、Model-View-Controller（MVC）に未来はあるのでしょうか。 状況を把握するために、まずはフロントエンドのアーキテクチャの進化を振り返ってみたいと思います。 過去4年にわたり、私は多数のWebプロジェクトに取り組み、フロントエンドの構築、そしてフロントエンドとフレームワークの統合に多くの時間を費やしてきました。 2010年以前は、従来のウェブサイトにDOM操作を追加する場合は大抵JavaScript（ jQuery が書かれたプログラミング言語）が使用されていました。当時の開発者はアーキテクチャ自体についてはそれほど気に掛けていなかったと思います。コードベースを構造化する場合、 Revealing module pattern のようなものがあれば十分でした。 現在、多くの議論が交わされているフ
React + Reduxで作ったIsomorphic(Universal) JSなサービス開発の裏側
はじめまして、2016年新卒入社のいちきです。僕は現在、11/14にWeb版がリリースされたばかりのブッキングテーブルというサービスの開発チームでフロントエンドからバックエンドまで一貫して担当しています！ ブッキングテーブルとは？ https://bookingtable.jp/ ブッキングテーブルは全国の飲食店の予約を全てネットで予約が出来る、予約特化アプリです。 既に2016年4月にiOS、Android版が同時にリリースされていましたが、遂に11/14に待望のWeb版がリリースされました！ ブッキングテーブルのWeb版は、Single Page ApplicationやServer Side Renderingなど、フロントエンド技術で様々な取り組みを行っています。 「予約特化アプリを目指す」という目標に対して、エンジニア側からもユーザにとっていかに良いUXを体験してもらえるかを考え
Top 5 Tutorials for Getting Started with React
Update 2017-10-28: This list is outdated. I maintain a better list of react tutorials Recently I found a developer asking this question about React: "What tutorial would you recommend to get started? I'm looking for something super simple." I did a quick search expecting tons of great results, but was a little dismayed by what I found... Many tutorials were outdated - some more than 2 years old (a
フロントエンドエンジニアが絶対読んでおきたいJavaScript最新記事ベスト10
変化の早いフロントエンド界隈でいま押さえておきたい、最新のJavaScript関連記事をKADOKAWAが運営するオンラインメディア「WPJ」からアクセス人気順に紹介します。
非SPAなサービスにReactを導入する - クックパッド開発者ブログ
投稿開発部の外村（@hokaccha）です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション（以下SPA）についてよく語られます。 一方で、SPAを構築するにはコストがかかることも事実で、特にフロントエンドエンジニアが多くない環境では、従来通りサーバーサイドでViewを書きつつ動的な部分だけJavaScriptで処理するというアーキテクチャのほうが現実的な場合も往々にしてあります。 今回はこのような、サーバー側でHTMLを生成し、一部の動的な部分だけをReactで書くためのTipsを紹介します。 なお、基本的にサーバーサイドはRails前提ですが、RailsにおけるReactの開発
Reactの最新動向とベストプラクティス ── HTML5 Conference 2016セッションレポート
Reactの最新動向とベストプラクティス ── HTML5 Conference 2016セッションレポート 小林徹 2016年9月3日に東京電機大学で開催された「HTML5 Conference 2016」のセッションを特集する第二弾は筆者である私、小林徹が登壇した「 Reactの最新動向とベストプラクティス 」の内容を解説します。 Reactの現状 Reactは、2013年にFacebookが公開した、Viewを作るためのJavaScriptのライブラリーです。 https://facebook.github.io/react/ 現在のバージョンはv15.3.2です。 v1.0.0からv14.0.0までのバージョンはありません。 「すでに安定していてプロダクションでも利用できる」ことや「セマンティック・バージョニング（パッチ.マイナー.メジャー）に準拠している」ことを示すために、v0.
JSプログラマーのイラッとする「クセ」はESLintを導入して対処しよう
人によって異なるJavaScriptの書き方もチーム開発では揃っていないと気持ちが悪いし、バグのもとに…。構文チェックツール「ESLint」を導入すれば、スタイルガイドに合わせたチーム開発が捗るそうですよ。 「リンティング（linting）」という言葉に聞き覚えはありますか？ コードの潜在的問題を自動的に確認するためのツール（リンター）を使ったプロセスのことです。このようなツールを使用することで生まれる、重要なメリットがいくつかあります。 コードスタイルの一貫性を保つ：スペース、インデント、ブレース（波括弧）の配置などのコードスタイルの問題をリンターで確認できる。チームの同意を得たコーディングスタイルを設定ファイルに記述しておけば自動的に確認できる 潜在的エラーや良くないパターンを見分けられる：リンターは、重複変数、到達不能コード、無効な正規表現の可能性があるエラーを発見するため、より高度
Ruby on Rails on React on SSR on SPA - ✘╹◡╹✘
amakan での設計を例に、RailsでSingle-Page Applicationをつくるときの自分のやり方をまとめてみます。 Gem 「JavaScriptで書かれたReactのコンポーネントからHTMLを生成する」というのをRubyでやるために、RubyのV8エンジン実装であるmini_racerというGemを使う。この処理を楽に実行するために、react_on_railsというGemも使う。 gem "mini_racer" gem "react_on_rails" View body要素内のHTMLは全てReactで生成するので、layout以外にviewのテンプレートは存在しない。 Controller 初回リクエストの場合はHTMLを返す ページ遷移時に呼ばれるリクエストの場合はJSONを返す 外部サイトからブラウザバックで戻ってきたときにJSONを見せない という要求に
React Storybook で変わるUI開発フロー (Redux Flavor) - Qiita
SPAを考える会 (D3勉強会 2016.10.06) by @kitaly (twitter: @kita_ly) 自己紹介 @kitaly Twitter: @kita_ly ソフトウェアエンジニア REST API開発 (Scala/Play) SPA開発 (TypeScript, Angular.js, React.js) ビズリーチ HRMOS プロダクト開発部 採用管理 (2016年6月リリース) 勤怠管理, 評価管理, その他HR系サービス (Coming Soon..) 過去の発表資料 サーバサイドエンジニアが 1年間まじめにSPAやってみた ビズリーチではDBFluteハンズオンやってます はじめに React / Redux / Webpack 前提の話ですが 他のコンポーネント志向FWなどでも、ユースケースやワークフローは応用可能だと思っています 新しいツール
React/reduxでつくったSPAがリリースされたので学んだことを晒す - Qiita
時系列順に書いているので、話題がアッチコッチいきますが 現場のライブ感を重視しています！ プロジェクトの後半で、すごい優秀な方が入ってきてくれたのでそこからの受け売りも結構混じっています。神様ありがとう。 プロトタイピング 何は無くともまずはプロトタイプを作成しました。 今回はUIライブラリとしてMaterialUIを採用。 superagentを使って外部JSONファイルを読み込んで、Reactコンポーネントとして表示するだけ。 この時点でのコードレビューでの話題は主に、CSSをどうするのか問題。 MaterialUIにコンポーネント自体のstyleは既に定義済みだが、それだけでは足りないレイアウト調整が発生しそうという懸念でした。 結論は、コンポーネント内に直接定義してしまってOK。 実際作業を進めてみたところ、最初の想定よりは補助的なCSS記述は不要でした。 reduxの導入 作成す
ここからはじめるReactの基礎の基礎 - Qiita
はじめに この記事はReactの実装をしたことがない人、JSというとjQueryくらいしかやったことがない人でも理解出来るような内容です。 Reactをはじめるというとチュートリアルからはじめるのが基本かと思いますが、チュートリアルよりミニマムにReactってどんなの？というものを実際に実装して感じようというのが目的です。 ただし、npmはインストール済みが前提なのでnpmの準備は各自お願いします。 この記事ではReactの概念よりも実装を重要視します。なぜReactが良いのか等は他記事に譲らせて頂きます。 Reactを使うとなぜjQueryが要らなくなるのか なぜ仮想DOMという概念が俺達の魂を震えさせるのか 簡単に説明すると、ReactはVirtual DOM (仮想DOM)という概念がキーポイントになり、それによって設計面、速度面に利点があります。特徴としてコンポーネントbaseのU
React Native入門 ─ Hello,Worldからネイティブ連携まで
React Native入門 ─ Hello,Worldからネイティブ連携まで Kameda Shohei（GLOBAL EDUCATIONAL P...） モバイルアプリ開発におけるWeb技術の可能性を探る特集・第一弾でご紹介するのはReact Native。その生い立ち、チュートリアルから、コードベースやUIを記述する言語、パフォーマンスまで解説します。 概要 React Nativeは2013年にFacebook社内のハッカソンで生まれたプロジェクトです。2014年にiOSアプリのFacebook Ads ManagerをReact Nativeを用いて開発し、2015年3月にオープンソースとして公開されました。そして、半年後の2015年9月にAndroidをサポートし、今年のF8では、MicrosoftがReact NativeでWindowsプラットフォーム（PC, Mobile
Webデザイナーの仕事が広がる！ElectronとReactでデスクトップアプリ開発
WebデザインとJavaScriptの技術があれば、デスクトップアプリも自在に作れる時代です。ElectronとReactを使って、SoundCloudの音楽を自由に再生できるデスクトップアプリを作ってみました。 本記事はMark Brown、Dan Prince、Bruno Motaが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 GitHubが開発したElectronは、Webデザインのスキルを存分に活用し、クロスプラットホームで軽快に動くデスクトップアプリを作成できます。この記事では、ElectronをReact、ES6、SoundCloud APIと組み合わせて、デスクトップでお気に入りの曲を流せるスタイリッシュな音楽ストリーミングアプリを作る方法を紹介します。また、この音楽ストリーミングアプリをパッケージ
Removing User Interface Complexity, or Why React is Awesome
Removing User Interface Complexity, or Why React is Awesome I've been studying frameworks and libraries like Ember, Angular, and React the past several months, and given Web Components a lot of thought. These all solve similar problems to varying degrees, and are in conflict in some ways and in harmony in others. I'm mostly concerned with the core problems of data binding and componentizing UIs. A
JavaScriptを中心としたWebアプリ開発の栄枯盛衰まとめ――LiveScriptからAngularJS／React.jsまで
JavaScriptを中心としたWebアプリ開発の栄枯盛衰まとめ――LiveScriptからAngularJS／React.jsまで：15周年記念特別企画 ＠ITが誕生した2000年頃はJavaScriptが不遇だった時代。そこから現在のような人気のプログラミング言語になるまでには、どのような歴史があったのか。15周年を迎えた＠ITの豊富なWeb開発関連記事とともに振り返る。 2015年6月17日に、JavaScriptの最新標準仕様となる、ECMAScript 6（ES6、ECMAScript 2015）が正式に承認されました（参考）。1997年にECMAScriptのバージョン1がリリースされてから6度目のアップデートとなり、これまでの中で一番大きな変更が加えられたことになります。 本稿では、ECMAScript 6が正式に承認されたということもあり、2000年頃の第一次ブラウザー戦争
いまさら聞けないReact、Virtual DOM、JSX超入門
Reactとは――その3つの特徴 「React」はFacebookが公開している、ユーザーインタフェース（以下、UI）を効率的に構築することを目的としたWebフロントエンドフレームワーク（JavaScriptライブラリ）です。 Reactには、次のような特徴があります。 シンプル Reactを使ってUIを実装すると、「アプリケーションがどのように見えるか」を単純に表現できます。 叙述的 コンポーネントの状態がReactによって管理され、データに変更があるときには更新の必要があるコンポーネントだけ更新されるようになります。そのため、効率的にレンダリングさせることができます。 コンポーネントベース 「状態」の管理がカプセル化されたコンポーネントを使って、複雑なUIを構築することができます。コンポーネントの組み合わせでアプリケーションを構築することにより、コードの再利用やテストなどを実施しやすく
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch