Angular 2で10万行書いた人にナマの声を聞く─奥野賢太郎×白石俊平
Angular 2で10万行書いた人にナマの声を聞く─奥野賢太郎×白石俊平 白石 俊平（HTML5 Experts.jp編集長） 2016年9月のAngular 2リリースは、2016年のWeb業界で、最も重要なトピックの一つだったと言っても過言ではないでしょう。 本稿では、Angular 2を正式リリース以前から仕事で使い倒していた奥野賢太郎さん（armorik83）と、不肖白石が、Angular 2開発を実際にやってみている同士で語り合ってみました。 実際にAngular 2開発で苦労してきた二人のナマ声です。今後Angular 2を仕事で採用しようと考えている方々には必見の内容です（って、自分が出ている記事を紹介するのも微妙ですが…）。 編集部注: Angular 2の正式名称は「Angular」ですが、現状だと「AngularJS 1.x」のことを呼称していると誤解される可能性が高
「AngularJS」と「はてブAPI」で作るChromeアプリの作り方を完全公開！ -
どうも、まさとらん（@0310lan）です。 今回は、Googleが提供する「Chromeブラウザ」で動作するアプリケーションを作ってみたいと思います。 「なんだか難しそう…」と思うかもしれませんが、ざっくり言ってしまうと普通に「Webページ」を作るのと変わりません。 そこで、簡単なサンプルアプリを作りながら、自分だけのChromeアプリ開発に挑戦してみましょう！ ■Chromeアプリとは？ 開発を始める前に、まずは予備知識としてChromeアプリの「種類」についてご紹介しておきます。 実は、「Chromeアプリ」と言っても、いくつか異なる種類があります。 例えば、「Appspector」というChromeアプリは、ブラウザの機能を拡張することで、表示されているWebページがどんな技術を利用して作られているのかを表示できるようになります。（https://chrome.google.com
Redux入門【ダイジェスト版】10分で理解するReduxの基礎 - Qiita
ReduxのGithubドキュメントを基に入門用記事として書いたものを、簡潔にまとめました。 もと記事はこちらです。 Redux入門 1日目 Reduxとは Redux入門 2日目 Reduxの基本・Actions Redux入門 3日目 Reduxの基本・Reducers Redux入門 4日目 Reduxの基本・Stores Redux入門 5日目 Reduxの基本・Data Flow Redux入門 6日目 ReduxとReactの連携 Reduxとは Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワークです。Reactではstateの管理するデータフローにFluxを提案していますが、ReduxはFluxの概念を拡張してより扱いやすく設計されています。 Reduxはstateを管理するためのライブラリーなので、React以外にもAngularJS
npm i angular2してHello World!するところまで - Qiita
【160325追記】この記事はAngular 2 alpha時代に初稿を仕上げ、それ以降は変更にあわせて保守を続けていましたが、そろそろ差が大きくなってきたため改稿版として別の記事を用意しました。今後はそちらをご覧ください。 @armorik83です。初日である昨日は、このアドベントカレンダー最大のサプライズとして@btford氏に寄稿していただきました。アドベントカレンダーの立ち上げ直後からオファーし、日本の「アドベントカレンダー」という特殊なTech系の事情を説明し、Angular 2のカレンダーをぜひ飾ってほしいという旨で依頼したことを覚えています。直前になって、時差で向こうはまだ11月なため日本のカレンダー開始に気付いていなかった、という笑い話も乗り越え、公開にこぎ着けたことを喜ばしく思います。 Thank you so much for contributing! Angular
React初心者のためのreact-routerの使い方 - ハッカーを目指す白Tのブログ
2015年1月、React ConferenceにてReact.jsでネイティブアプリが作れるようになると発表された。この発表を受けて最近何かと話題のReact.jsだが、リリースされたのは2013年であり、2009年にリリースされたAngularJSや、2010年のBackbonejsなどの他のjavascriptフレームワークに比べると新しく、まだネットに日本語の情報があまりない。ということで、React.jsのデファクトルーティングライブラリであるreact-routerの使い方についてまとめてみた。 目次1.そもそもreact-routerとは 2. react-routerのインストール方法 3. react-routerの使用例 4. react-routerのコンポーネント一覧 5. Routerのrunメソッド 1. そもそもreact-routerとはreact-rout
React.jsではなくRiot.jsを採用した話、運用中サービス『GAMY』でリニューアル - Qiita
今回、ゲーム攻略コミュニティ『GAMY』というサービスでRiot.jsを採用しました。 知る限りでRiot.jsで実装されたサイトの中でも最大規模のサービスだと思います。 これまではjQueryとjQueryプラグインを使っていましたが、デザインのリニューアルを機に、全部書き換えることにしました。 ドキュメントも兼ねてアウトプットしていきます。 Riot.jsとは Riot.jsは今流行りのReact.jsに似た仕組みを持っている、それで非常に軽量なJavaScriptライブラリーです。 最近GitHubのリポジトリが**/muut/riotjsから/riot/riot**にお引っ越しして、これからがより注目なライブラリーです。 詳しくはこちら↓ Riot公式 Riot.js 2.0 情報まとめ GitHub 捨てることを前提としたライブラリー選定 最初は今ブームの２大フレームワークとなっ
CodeIQについてのお知らせ
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
Microsoft And Google Collaborate On Angular 2 Framework, TypeScript Language | TechCrunch
Microsoft And Google Collaborate On Angular 2 Framework, TypeScript Language Here’s a partnership that may come as a surprise to many: Microsoft and Google are working together to help make Angular 2 — the next (and somewhat controversial) version of Google’s JavaScript web app framework — better. Angular has been using its own AtScript superset of Microsoft’s TypeScript for a while now. TypeScrip
エンタープライズで使える！実践から学ぶJavaScript MVCフレームワークの選び方
エンタープライズで使える！実践から学ぶJavaScript MVCフレームワークの選び方 酒巻瑞穂（html5jエンタープライズ部） 現在エンタープライズシステムの開発現場では、シングルページアプリケーション（SPA: 単一のWebページで構成されているWebアプリケーションのこと）アーキテクチャの採用が模索されるなど、根本的な開発パラダイムにおいて大きな変化が起きようとしています（全体的にどのような変化があるかはエキスパートNo59の佐川夫美雄さんの書かれた「JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例」によくまとまっています）。 こうした変化の一部を支えているのが、JavaScriptによるMVCフレームワークです。数あるフレームワークの中で、実際にどのフレームワークを採用するかというのは、開発コストだけではなく学習・運用コストにも関わる、非常に大きな
AngularJS 嫌いな人が多い昨今について - tokuhirom's blog
最近 AngularJS 嫌いという言説が多いですが､そういうことを仰る方々は主に先鋭的な JSer のように思います｡ ただ､僕なんかの場合には､ユーザー向けの画面の構築などには AngularJS を使って書くことは最近はほとんどなく､JS を書くといえばもっぱら管理画面です｡ 管理画面の JS を書くにあたっては AngularJS way にのっかってやると非常に楽ですよね｡管理画面を書いたりする上では vue-js とかで頑張って書くと見通しが悪くなったりしますし､こった動きなどは必要ないというところで angular.js ワリといいなと思っています｡ もっといいものがあれば移りたいですが､コストをかけずに作りやすい管理画面を作るという意味ではやはり AngularJS にまだメリットがあるなあ､と思っています｡ 2.0 が出た時にこまるというのもありますが､実際は angul
書籍「AngularJSリファレンス」の感想とおすすめの活用方法 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 書籍「[AngularJSリファレンス] (http://www.impressjapan.jp/books/1114101042)」を@zoetroさんから献本いただきました。ありがとうございます。 そこで、御礼ととも個人的な感想を書いておきたいと思います。 本書を読む前 まず、この本を読む前の私のAngularJSの経験をまとめておきます。 jQuery、Knockout.jsなどでのJavaScript開発経験あり AngularJSを最近の開発で利用 AngularJSのcode schoolで基礎を把握 後は公式サイトを中心に
Google Compute Engine、サーバサイドからクライアントまでJavaScriptで開発できる「MEANスタック」のワンクリックデプロイ機能をサポート
Google Compute Engine、サーバサイドからクライアントまでJavaScriptで開発できる「MEANスタック」のワンクリックデプロイ機能をサポート WebアプリケーションのサーバサイドからクライアントまでJavaScriptで開発できる「MEANスタック」が海外では少しずつ話題になってきています。MEANスタックとは、次のソフトウェアの頭文字をとったものです。 MongoDB：NoSQLデータベース Express：Node.js対応のフレームワーク AngularJS：Webアプリケーションのクライアント用JavaScriptフレームワーク Node.js：サーバサイドJavaScriptエンジン オープンソースであるLinux、MySQL、Apache、PHP/Perlの組み合わせが「LAMPスタック」と一般に呼ばれるように、JavaScriptを軸にした上記の4つの
JavaScript フレームワークがデータバインディングを実現する４通りの手法
最近流行りの JavaScript MV* フレームワークは、どれもデータバインディングをサポートしているが、実現方法はフレームワークによって異なる。 この記事では、各種フレームワークがどのようにモデルの変更を検知しているかを次の 4 つのパターンに分類して紹介する。 モデル クラス方式 (Ember.js、Backbone.js、Ractive.js、Knockout.js など) 力ずく方式 (AngualrJS) モデル書き換え方式 (Vue.js) Object.observe 方式 (Polymer) パターン名は私が勝手に名づけたものだけど、このへんの雰囲気が理解できれば、フレームワークごとの個性が分かるだろうし、利用イメージもわきやすいんじゃないかと思っている。 1. モデル クラス方式 「モデルとして扱えるのはフレームワークが用意したモデル クラスのインスタンスだけ」という
KnockoutJSの長所／短所とAngularJSとの比較 - Qiita
KnockoutJSを使った開発を1年ほど前に行っていました。 元々はプロトタイピングだけに使う予定でしたが、使い勝手が良かったのでそのまま本開発に取り込みました。 最近、少しAngularについても調査をしていたので、Knockoutと比較できる部分も書きだしてみました。 KnockoutJSの長所／短所、そしてAngularJSとの比較となります。 長所：双方向のデータバインディング Knockoutの最大の長所は、間違いなく強力な双方向のデータバインディングと言えます。 この凄さを試したければ本家サイトのExample各種を試すと良いかもしれません（参考URL）。 あるいは自分自身でサンプル・アプリケーションを作るといいでしょう。 すぐに虜になるはずです。 DOMとJSのモデルを紐付けて、整合性をとる処理を全てフレームワーク側が吸収してくれます。 JS側の記述がシンプルになるので、ア
Best Practices for Building Angular.js Apps
Update 2016–04–17: I wrote this article almost 2 years ago for Angular 1.x. This article is still tremendously popular somehow, but I want to warn that it may not be the best for Angular 2.x or other methods of building JS front-ends. I have spent almost all my time writing CLI code since I wrote this, so I have really no context to say if this is still the best practice I considered it to be in 2
Type Script + AngularJS でサイト制作 備忘録
ども。 おひさしびりです。 ということで、最近はもっぱらTypeScript + AngularJSでサイトを制作する毎日で、 「あれ。あれどうだったけ？？」と出てくるのは必然で（笑） 忘れない様に、今回はAngularJSの方を軽くまとめてみました。 https://angularjs.org iScroll + AngularJS Angular JSで構築したサイトでiScrollを使おうとすると、上手く機能しなかったりします。 その際は、Angular JSのディレクティブを使用すると良いでしょう。 ディレクティブは、AngularJSのHTMLコンパイラ($compile)に、そのDOM要素やその子要素に変形や特殊な振る舞いを割り当てるように伝える事が可能となります。 カスタムディレクティブは ng-hogehoge と任意の名前を設定することが可能です。 呼び出す際はngHog
AngularJS勉強会 ng-mtg#6に登壇してきました | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ご無沙汰しています。ハカセこと林です。7/25(金)にサイバーエージェントさんにてAngularJSの勉強会に登壇させていただきました。 今日はその様子と当日の内容をご紹介したいと思います。 ng-mtgって？ と、その前に。 ng-mtgとは、AngularJS Japan User Groupという有志団体が運営する勉強会です。 以前LIGで行ったAngularJS勉強会に管理人の方がいらしていて、この度登壇のお声がけを頂きました。 今回登壇したのは第6回目のng-mtg#6です。 参考：AngularJS Japan User Group http://angularjs-jp.doorkeeper.jp 参考：ng-mtg#6※既に終了しています http://angularjs-jp.doorkeeper.jp/events/12996 発表テーマ 登壇者は私を含めて3人でした。
Веб студія CodeWeb ᐉ Web агентство розробки та створення сайтів
Веб студіяБудь-який вид бізнесу, а тим паче його розвиток неможливо уявити без взаємодії з людьми, які є потенційними партнерами або клієнтами. У сучасному світі всі питання, що стосуються бізнес-завдань і залучення замовників вирішуються через Інтернет. Замовити сайт веб студії Codeweb, можна з повним циклом розробки. Наше агентство займається проектуванням і розробкою багатозадачних ресурсів, са
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
イベント駆動AngularJS / 今から書くAngular 2.0
jasonmore.net
