Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

「まだ早い!!」 @armorik83です。時間ができたのでng-japan終了後、ようやくAngular 2を触ることができました。導入が想像以上にきつく、ES6やコンパイルといった昨今のJS事情に詳しくなければ、alpha段階で触るのは避けたほうがいい、というのが現段階での印象です。 足を踏み入れたのが早すぎるだけで、時間が解決するものだと思っています。 (150415追記: かなり解決されてきたので書きました → どうしても今Angular 2 with Babelを触ってみたい人のためのビルドスクリプト) 何が険しいか 文章化する体力が残されていないので箇条書きで。 traceur-compiler npm i angular2して落ちてくるAngular 2のJavaScriptソースがすべてtraceur-compilerのランタイムに依存している すでにES5化されているため
Angular2 Advent Calendar 12日目 です。 僕は ionic が好きなので、ionic の話をしたいと思います。 ionic ionic は AngularJS ベースの UI フレームワークです。CSS/JavaScript の UI コンポーネント集という点に留まらず、cordova を同梱してハイブリッドアプリを作成することが可能です。また、デバイス上でのデバッグツールや、痒いところに手が届くコマンドラインツール等(例えば地味に面倒くさいアイコン用画像をリサイズとか)のエコシステム全体を包含する環境になっているという点が特徴的で、僕が好きなところでもあります。 弱点は Angular に密結合している点です。UIパーツがディレクティブで定義されているので、「ionic の UIコンポーネントは使いたいけど、Angular 以外のJSフレームワークを使いたい」み
皆さんはじめまして、@creativewebjpです。Angularは初めてですがよろしくお願いします。 最近、Ionic 2 を使い始めたので Ionic 2 のことを書こうと思って参加しました。しかし、Angular 2 がベータになる前に怒濤の勢いで破壊的変更をおこなっていたのですが、それが Ionic 2 にも影響を与えているようで、最近は Ionic 2 の変更が多くエラーが多発します。自分は初心者なので対応が難しい状況で、もう少ししたら Ionic 2 もベータになると思うので、それから本格的に使おうと思っています。 それで、Ionic 2 のことだけだと内容がないので Ionic 2 を使いたいと思った理由も書くことにしました。なお、自分は、Webの開発・運営していて、Googleアドセンスで収入を得ています。 今日みたら、ionic-frameworkは2.0.0-alph
Template-driven Forms in Angular 2 Original: Template-driven Forms in Angular 2 Written by: Pascal Precht Translated at: 04/07/2016 Angular 2におけるテンプレート駆動フォーム Angularはフォームを組み立てるのに3つの異なる方法を用意しています。 1つはテンプレート駆動、アプリケーションコードを一切必要としない方法です。 そしてローレベルAPIを使ったDOMを一切必要としないモデル駆動の方法と、 最後はハイレベルのAPI、すなわちFormBuilderを使ったモデル駆動の方法です。 これらの異なる手段からわかるように、目標を達成するための道具がいくつもあるかもしれないのは当然のことです。 しかし混乱を招いてしまうので、この記事ではAngular 2
注) この記事は試行錯誤の記録です。従って間違いが数多く含まれている可能性が高いです。もっと良い方法を知っている方はぜひ教えてください。 現段階の結論 注) 現在は、rollup.jsでバンドルしています。 system.jsを利用しています。 tsconfig.json, typing.jsonを適切に記載してからtscとuglifyjsを利用して minifyすることで、最終的なfootprintを5kbまで減らすことができました。 (system.jsでxhrが大量に走る問題は下記(system.jsの項)の通りmapとpackageの記載を削除することで解決しました。) 結局、現在はgithubでコミュニティベースで活発に開発されているmgechev/angular2-seed(Angular2公式Githubアカウントのangular/angular2-seedとは別もの)の環境
プリミティブ型 プリミティブ型としてNumber, Boolean, String, Void, Null, Undefinedが用意されている。 ソースコード中では以下のように書かれる。 number boolean string void(変数としては定義不可) null(同上) undefined(同上) 宣言では小文字を使う。(JavaScriptにNumber, Boolean, Stringという型が存在しており、TypeScriptでは暗黙で変換されるが小文字で書いておく。 Any型 従来のJavaScriptの変数型。 コンパイルエラーにならない。 濫用すべきではないが、JSONを扱う場合や、止むを得ずチェックを回避するためキャストするなどの用途にも使用。
タイトル通りのことをやっていきます。だいぶコアな内容ですがめちゃくちゃ開発捗る組み合わせなのでお勧めです。 参考にしたのはこのページです Using TypeScript with AngularJS and Web API 長くなるので2つに記事を分けます 環境構築 VisualStudio2013で進めていきます。無料のVS2013 Express for Webでも問題ないです。 VS2013のセットアップが済んだら、TypeScript for VisualStudioをインストールします TypeScript for Visual Studio 2012 and 2013 VS2013→TSforVSの順番でインストールしないとテンプレートが読み込まれないことがあるので、すでにインストールしていたら再インストールしたほうがいいかもです。 ここまで出来たらVS2013を起動して新し
(150522追記)最新のチュートリアルをまとめたAngularJSモダンプラクティスを掲載しました。この記事は2014年2月に掲載したとてもふるい記事です。最新記事をどうぞご覧ください。 この記事は記録のため残します。 AngularJSはチュートリアルに沿ってただ書くだけにするとすぐFat Controllerになる、とは他でも指摘されていますが、複数のコントローラを実装し始めた辺りから問題となってくるのが処理の重複です。すぐにでも一つのファイルにまとめて参照したいところです。 この記事(お前のAngular.jsはもうMVCではない。と言われないためのTutorial)やこの記事(AngularJSをTypeScriptで書くときのあれこれ)にはずいぶんと助けられましたが、ここで自分なりのTypeScriptでの書き方についてまとめておきます。 Factoryの例 クラスやメソッドの
概要 フロントエンド(CSSテク,DOMの概念など)にそこまで明るくない人向けに JSだけでWeb画面が作れるようにフレームワーク(mofron)を作成しました。 React,Angular的な話は出てきません。 経緯 jQueryプラグインしんどい 親切な誰かが作ってくれた様々なjQueryプラグインをありがたく活用しています。 CSSなどを知らなくても優れたデザインと機能を持ったUI部品を構築できて非常に助かっています。 ただ、セレクタ(id名やらclass名やら)がとても面倒くさいです。。 HTML側で定義したid名などをJS側で一致させるように指定する必要があります。 動的にタグを生成したりすると、もっとややこしくなってきて手に負えません。 じゃReact,Angularに乗り換えましょうか?? 専業タイプと兼業タイプ Web開発に携わる人には専業タイプと兼業タイプがいると思ってい
ちきさんです。 Scalaのfor yieldみたいなことをRxJSで表現できないかと思ってやってみました。 ひとまとめの複数の非同期処理のうち、一つでもエラーになったら他の全ての非同期処理を破棄するRxJSのコードです。 デモ → http://jsbin.com/xerufem/10/edit?js,console エラーが一つもなければ出力に HELLO と表示されますが、そうでなければ (empty) と表示されます。ランダムに結果が変わるので何回かRUNボタンを押して動作を確認してみてください。 以下、JS Binのコードに少しコメントを足したものです。 ScalaのSomeとNoneに相当するものがObservable.ofとObservable.emptyになります。 const Observable = Rx.Observable // 9割の確率で成功する。 functi
@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を使ったりなどで
社内勉強用資料。 Tree Shakingとは? ESモジュール形式で書かれたコードをbundleして一つのファイルにする時に、exportしているけどどこからもimportされていない、使われていないコードを削除する機能のことです。 もともとはrollupというBundlerに実装されていた機能ですが、webpackの次バージョンであるwebpack2にも実装されているということで試してみました。 webpack2のTree Shakingの仕組み Tree-shaking with webpack 2 and Babel 6 上記記事に詳しく書いています。簡潔に説明すると、まず、ESモジュール形式で書かれたJSファイルを全て結合し、そのタイミングでどこからもimportされていないexport文を消してしまいます。あとは、コードをminifyするタイミングで完全に取り除かれるという感じ
こちらの記事は、主にVue.js v2向けの記事となります。 Vue2は、2023年12月31日でEOLとなるため、それに伴い本記事は近日中にクローズする予定です。 こちらVue.js #4 Advent Calendar 20174日目の記事です~。 どもども。ソニックムーブっていう会社で、マークアップしたりJavascriptをちょいちょい触ったりしているココエっていいます。 最近Vue.js絡みの仕事ばっかりやっていて、初心者の方にVue.jsの使い方を教える機会がでてきたので、こんな記事を書いてみようと思いました。 やっぱり最初の難関がコンポーネント作成ですよね。 チュートリアル見ながら、コンポーネント作ってみたけど、なんかうまくいかなーーーい!という方は、後述する、コンポーネント作成がうまくいかないときにチェックする5つのことをチェックしてみてください。 お役に立てればこれ幸い。
まさあき(@masaaakikunsan)です。 最近よく、「Storybookを導入しよう」「Storybookがいい」と言う話は聞きますが、意外となぜ必要なのか、どう使うのか、という記事がみつからなかったので、基本的な使い方をサンプルと共に紹介します。 TL;DR StorybookでUIコンポーネントのカタログを作ることができる カタログのおかげでデザイナーと認識の齟齬が生まれなくなる アドオンを追加するとStorybookがかなり便利アイテムになる Storybookとは ざっくり言うとコンポーネントのカタログです。 コンポーネントライブラリの参照ができ、各コンポーネントの様々な状態の表示などができるものとなります。 また、アプリ外で実行されるため、UIコンポーネントを単独で開発でき、コンポネの再利用、テストの容易性、開発スピードを向上させることができるのが魅力です。 Storyb
テストされるファイル Jasmineは「○○.spec.ts」なファイル名のファイルを勝手に実行してテストしてくれる。 立派。 describe テストはこの下に記述する。 第一引数はテスト環境の説明。 第二引数はテストの処理を行うラムダ。 describeを複数書けば、それぞれ独立したテスト環境でテストできる。 テスト専用の環境を逐一立ち上げて、その中でテストするイメージ。 実際のテストは第二引数で渡したラムダの中で行う。 describeを入れ子にすることもできる。 例 describe('キャッシュがない場合のテスト', () => { キャッシュがない状況を作る処理 実際のテスト1 実際のテスト2 実際のテスト3 describe('しかもサーバが死んでるときのテスト', () => { サーバが死んでる状況を作る処理 実際のテスト1 実際のテスト2 実際のテスト3 }); });
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く