Angular2の実践的なビューの作り方(Abstract Classを使う) - Mainly Devel Notes
Angular2, TypeScript, Abstract Class, RxJS 【更新】Angular2 rc.0に対応しました。記事の内容とは異なる部分がありますのでご留意下さい。 Angular 2 Advent Calendar 2015の10日目です。 前提環境などは昨日と同じなので、先に軽く目を通しておいていただければと思います。当然TypeScriptが大前提です。 昨日→初心者がAngular2で嵌まったり解決したりサンプルコード書いたりしてみた。 今日は何のために、どういうメリットのためにクラスを継承(extends)するのかに焦点を当てます。 想定する対象読者は↓ 何のためにクラスの継承をするのかよくわからない。 DogやCatがAnimalを継承したら何がウマいのかわからない。 Abstract Classを継承することの意義がわからない。 Abstract Cl
Angular 2アンチパターン集 - Qiita
@armorik83です。Angularアドベントカレンダーの4日目となる本日は、かつて好評だった拙記事"AngularJSアンチパターン集"にあやかって、Angular 2（以下、単にAngularと表記したときは2.0以上4未満を指す）について気をつけた方がよい点――アンチパターンをまとめたいと思います。 Angular 2.xでアンチパターンは起こりうるか Angular 1系とは大きくAPIが変わったAngular 2系。APIが大きく変わった理由として、Web標準により近い構成を取れるようにする目的がありました。例えば、angular.module()ではなくTypeScriptのimport fromをベースとするソース分割の仕組みであったり、ES2015 classを標準としたComponentやServiceの定義であったり、$qではなく標準のPromiseを使ったりなどで
Angular2でObservableを使ってHTTPリクエストを複数送信 | VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで
Observableを使ってhttpリクエストを複数実行する方法を確認しました。 ※Angular2の2.0.0版、TypeScriptを使って確認したものです。（デモはv4.4.3、v2.0.0で動作確認） ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．3つのhttpリクエストをチェインして実行 ２．3つのhttpリクエストをパラレルに実行 ３．デモ １）ライブラリ、サービス、依存性の指定 こちらの記事参照 Angular2でHTTPでサーバーからJSONデータ取得 Angular2のHTTPクライアントはObservableをリターンします。ObservableのflatMapメソッドを使ってHTTPクライアントをチェーンして実行しています。 ※ObservableのflatMapメソッド 例）３つのhttpリクエストを順番に実行 chain() { this._h
無限スクロールの実装 | スタッフネット株式会社
Angular2による無限スクロールの実装 1.無限スクロールとは 無限スクロールは、件数の多いリスト表示に便利なユーザーインターフェースです。 例えば、Googleで検索すると、まず10件分の結果が表示され、残りは複数の画面に分割されます。画面の一番下に、下図のようなページ送りアイコンが表示されます。 求めるデータが１ページ目に無いときは、ページ送りを繰り返しています。この操作を面倒に感じませんか。ExcelやWordのように全体を高速でスクロールしたいと思いませんか。 無限スクロールを使うと、件数の多いリスト表示であっても、画面の切り替えなしに、どこまでもスクロールして表示できます。無限スクロールを体験した人で、いままでのページ送り操作に戻りたいと言う人はいません。 [参考] 無限スクロールのサンプルビデオ 操作性の向上だけでなく、大量の書類・図面・写真などの流し見をして、素早くチェッ
Angular 2を使うならUIはコレで！Ionic 2ことはじめ（正式リリース版対応） | HTML5Experts.jp
Angular 2を使うならUIはコレで！Ionic 2ことはじめ（正式リリース版対応） 榊原昌彦（一般社団法人リレーションデザイン研究所 ...） Web制作してると、また新技術が出たのかと思うと、気づいたら「新常識」が増えてたということに頻繁に出会います。 タスクランナー、SCSS、LiveReload、SPA、PWA、ハイブリッドアプリ。そういった近年のキーワードを一気に体験できるUIフレームワーク「Ionic 2」が先日リリースされましたので、ご紹介します。 編集部注: Angular 2の正式名称は「Angular」ですが、現状だと「AngularJS 1.x」のことを呼称していると誤解される可能性が高いと判断し、本稿では「Angular 2」で統一させていただきます 記事の内容が古くなってたので、2017年8月11日に更新しました Ionic 2の概要 Ionic2は、アメリカ
JavaScript ベスト・オブ・ザ・イヤー 2016
JavaScriptコミュニティは日々進化しています。今日のトレンドも数か月後には陳腐化しているなんてことは日常茶飯事です。 2016年は終わってしまいましたが、何か重要なことを見逃したのではないかと感じているそこのあなた！ 2016年の主要なトレンドをおさらいして、そんな不安を払拭しちゃいましょう。 過去12か月に獲得された Github のスター数を比較して、2016年に支持を集めたプロジェクトを数値に基づいて評価していきます。 2015年はなんといっても React でした。そして、Flux 実装を席巻したのは Redux でしたね。 2016年、JavaScript の人気プロジェクトはどのようなものだったのでしょうか？
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利
ReactユーザーのためのAngular2ファーストステップ - Qiita
Reactはやったことある人向けに、ReactのアレはAngular2だとどうなってるの？というのをまとめていきます。Reactユーザーだった自分がAngular2始めるにあたりこういう情報あればなと思ってたやつです ところでAngular2じゃなくてAngularと呼んでね！とのことなので、以下Angularと呼びますがAngular 2.xを指します。 アプリケーションのブートストラップ React <!doctype html> <html lang="en"> <head> <title>React App</title> </head> <body> <div id="root"></div> </body> </html> import React from 'react'; import ReactDOM from 'react-dom'; class App extends
イベント用の名札シート印刷アプリ「参加者の名は。」を作った - エンジニアをリングする
こんなものを作ってみました。 yoshiko-pg.github.io ConnpassのイベントURLを入力してCreateボタンを押すと、名刺サイズの参加者の名札を印刷プレビューできるようになっています。 （主催するイベントがないけど動きを見てみたい場合、入力欄右下の「demo」を押すと雰囲気がわかるかと。） 右下の印刷ボタンで印刷できます。 管理者や補欠者もお好みで含めることができます。 背景 カンファレンスや勉強会って、普段ネット上でしか知らない人と直接話せる機会でもあると思うのですが、いざその場で顔や名刺を見ても誰が誰かわからないんですよね。。 SNSではよく見るけど顔がわからなくて、でも話したいことがあるときとか、頭の上にアイコンとIDが表示されるメガネがほしい・・・ってたびたび思ったりします。 そんな思いから、自分がスタッフとして関わっているイベントではアイコンとIDの入った
Angular-CLIチートシート - Qiita
@armorik83です。今回はangular-cliについてまとめます。 angular-cli https://cli.angular.io/ Prototype of a CLI for Angular 2 applications based on the ember-cli project. angular-cliはAngularの2.x以上（本稿ではAngularと記述する）を用いたアプリケーションの開発を補助するCLIツールである。 インストール インストールは至って簡単だ。 node_modulesのグローバル空間にインストールするため抵抗がある人もいるかもしれないが、その場合適宜工夫してもらいたい。基本的にコマンドラインツールとして使うので、筆者はあまり問題ないと考えているが、バージョン違いによる挙動の差異があり得るため、チームで運用する際はメンバー間でバージョンについて
Introduction · Start Angular
Angular を勉強する最良の方法は angular.io を読む コード や issue を読む 実際に手を動かす だと思います。ただ残念ながらすべて英語で書かれていますので、はじめてこうしたフレームワークにチャレンジするには敷居が若干高くなるかと思います。 これは私がセミナーのご依頼を受け初心者向けによく利用している教科書を gitbooks に書き起こしたものです。Angular に関する基本的な要素についてはほとんどの部分で網羅しているとは思いますが、細かい説明は書いていません。なので、気になることはご自身で調べると良いと思いますし、やはり angular.io の チュートリアル などはやっておくべきことと思います。そこに行く前のより簡単なものです。 この本を通じて Angular で自身のWebアプリケーションを作ってみたくなれば幸いです。 December 16, 2016
私たちはなぜReactではなくVue.jsを選んだのか | POSTD
Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。 レガシーなDrupalのシステム（qwintry.com） ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム（logistics.qwintry.com） その他、比較的小さめのプロジェクト（ほとんどは、PHPとNode.jsでバックエンドを構築しているもの） プロジェクトの規模についていうと、 Qwintry は世界中で約50万人の顧客が使っています。アメリカとドイツに倉庫を持っていて、アメリカ国内 最大の郵送先 のひとつで、東欧や中東への出荷に注力しています。Qwintryは、アメリカのオンラインストアでグッズを購入する人たちのためのツールです。私たちの倉庫に届いた荷物をコントロールパネルで管理で
初心者向け Angular - albatrosary's blog
Angular を勉強する最良の方法は angular.io を読む コードやissueを読む 実際に手を動かす だと思います。ただ残念ながらすべて英語で書かれていますので、はじめてこうしたフレームワークにチャレンジするには敷居が若干高くなるかと思います。アドベントカレンダーですので初心者向けに利用している教科書をgitbooksに書き起こしました。細かい説明はあまり書かれてませんので、気になることはご自身で調べると良いと思いますし、やはり angular.io のチュートリアルなどはやっておくべきことと思います。そこに行く前のより簡単なものです。 こちら → https://albatrosary.gitbooks.io/start-angular/content/ 章立ては下記の通りです： Introduction Angularとは アプリケーション開発をするための環境 angula
TechFeedを1ソースで全デバイス対応＆Progressive Web Apps化した話
大変ご無沙汰しております。TechFeedの白石です。 前回の記事でお伝えしたとおり、先日2016/11/7、TechFeed初回リリース（7月26日）以来初めてのメジャーバージョンアップを果たしました。 コードベースを大幅に書き換え、Webアプリとモバイルアプリを全て一つのソースコードで実現するようにしました（実際には、一部以前のコードも残っていますが）。ついでにService Workerによるプッシュ通知やオフラインキャッシュ（現在無効化していますが近々有効化）、Web App Manifestの配置なども行い、Progressive Web Apps化も果たしました。 1ソースであらゆるデバイスとブラウザに対応Progressive Web Appsの定義もあいまいな気がしていますが、ぼくらとしては、対応ブラウザ（Android Chromeなど）でWebサイトにアクセスした際に「
Angular AoTガイド - Qiita
はじめに どうも。最近、方々で「build筋」だの「うぇぶぱっ筋」だのと発言して顰蹙を買っている @Quramy です。 さて、皆さんAngularのAhead of Time(以下AoT) Compileは利用していますか？ とても良い仕組みだと思っているのですが、まとめられた記事もまだ殆ど見かけません。 僕自身は少し前に業務案件に適用させたばかりです。折角なので記憶が鮮明なうちに投稿にしておこうと思った次第です。 このエントリは下記の3章構成でお届けします。例によって結構長いので、自分が必要としているテーマに合わせて好きな部分を読んでください。 基本編: AoTの仕組みについてのざっくり解説. 知っている人は読み飛ばしてOK 実践編: 主に僕がAoTに取り組んだ際に行ったこと、ハマったポイントについての説明 発展編: AoT環境を手に入れた後に何をすべきかについて 対象読者 このエント
Ahead-of-Time Compilation in Angular v2 - albatrosary's blog
「Angular v2は事前コンパイルすることができる」ということを聞いても何のことだろうと思ってしまう。何故このように事前コンパイルする必要があるかというと「開発したAngular2アプリケーションをより効率の良いもの」にするためです。この「効率」というものを具体的にコードを書いて見ます。サンプルコードはAngular2チュートリアルを使っています。 事前コンパイルはngcコマンドで行いますが、そのモジュールが@angular/compiler-cliから提供されます。これにtsconfig.aot.jsonというファイルを追加することと、package.jsonに"ngc": "ngc -p ./tsconfig.aot.json",というスクリプトを定義すること、そしてbootstrapを定義しているmain.tsに対してAoT(Ahead-of-Time)ファイルmain.aot.
Angular CLIによるAngular2入門 / Angular2アプリを爆速開発 - Qiita
ついにリリースされましたね、Angular2! Angular2にはCLI(command line interface)の開発環境が整えられており、雛形の自動生成、更新ファイルを自動ロードするなど、爆速な開発が可能になっていることをご存知でしょうか。 このAngular CLIを導入するだけで、様々な開発環境が一気に整います。そのため、gulpだgruntだ、TypeScriptだと様々な環境を整える必要があった今までの開発スタイルが一気に変わる可能性があります。 以下では、Angular CLIを使って共通ロジック[MessageService]からテキストを取得して、そのテキスト表示する画面部品、[HelloComponent]を持ったアプリを作りたいと思います。サービスやコンポーネントを使うのでAngularでの開発のおよその骨格を感じ取っていただけると思います。 では、Angul
JavaScript使いのためのTypeScript実践入門
JavaScript書ける人向けの、実践的なTypeScript入門です。 「書いて学ぶ」をコンセプトとして、TypeScriptの文法全般学べる内容にしてみました。スライド通りコピペで進めて頂ければ、10分くらいでTypeScriptの全容を知ることができると思います。 TechFeed (https://techfeed.io) 開発を行う上で得た知見 (エディタは何を使うか、WebpackやTSのメリット・デメリットなど) も盛り込んであります。 2016/8/26 html5jビギナー部主宰の勉強会で話した内容です。Read less
Angular2 Component or Directive ? - albatrosary's blog
Angular2も含めAngular1.5からコンポーネント指向的な話があり、文字通り@Componentを利用する機会が増えるだろうと思います（Angular2を利用する場合、当然ですが）。ただインジェクションするときに「Componentをdirectivesに書いて」とか「ここはComponentで作るけど、ここはDirectiveにしよう」という話もあり「Component?Directive?ほげ?」みたいな話もあるのでまとめてみる Directives オーバービュー Angular2のディレクティブには3種類ある: Components Structural directives Attribute directives 「Component（コンポーネント）」はテンプレートと実際のディレクティブから成る。３種類のディレクティブの中でも最も一般的なもので殆どの場合、このCom
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
