Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか -VueとReactのデベロッパ用ロードマップVue.jsとReact.jsを習得するために、どのように学んでいけばよいのか、次に何を学べばよいのか、その指針となるロードマップを紹介します。 【追記】 Angularのロードマップを追加しました。 基礎知識（HTML, CSS, JavaScript）、制作者として必要なスキル（Git, HTTPSプロトコル, Terminalなど）をはじめ、Vue.jsとReact.jsで何を学ばなければならないのかが、まとめられています。 拡大画像: Vueのロードマップ
FN1602005 | AngularJS: 送信ボタンでフォームの入力データを扱う | HTML5 : テクニカルノート
ID: FN1602005 Technique: HTML5 / JavaScript Library: AngularJS 1.4.9 AngularJSを使って、フォームの送信ボタンが押されたとき、入力データをどう扱えばよいのかご説明します。送信の処理は、JavaScriptコードでAngularJSのコントローラを定めて行います。 01 フォームの入力に応じてフィールドの枠色が変わりメッセージを示す 本稿は「AngularJS: フォームの入力が正しくないとき送信ボタンを押せないようにする」で、フォームに送信ボタンが加えられた作例のコード001に手を加えます。フォームに正しく入力しないと、場合によってメッセージが示され、送信ボタンが押せません(図001)。 図001■フォームに正しく入力しないと送信ボタンが押せない 02 フォームの送信ボタンが押されたら入力データを表示する 送信ボタ
フォーム | AngularJS 1.2 日本語リファレンス | js STUDIO
入力要素(input、select、textarea)は、ユーザーにデータを入力してもらうための手段です。 フォームは、関連する入力要素をグループ化するための入力要素の集合です。 Angularはフォームと入力要素の検証サービスを提供するため、ユーザーに不正なデータを気づかせることが可能になっています。 この機能は、ユーザーに対してどのようなエラーなのかが即座に返されるため、より快適なユーザー体験を提供します。 快適なユーザー体験を提供する役割を担うクライアントサイドの検証は、 容易に迂回出来てしまうため、送られてくる値は信用出来ないという事を忘れないで下さい。 サーバーサイドでの検証は、セキュアなアプリケーション構築のため必須です。 シンプルなフォーム CSSクラスの使用 フォームへの紐付けと状態の制御 検証のカスタマイズ カスタムフォーム制御の実装(ngModel使用) シンプルなフォ
AngularJSでのバリデーションの基本 | tsuchikazu blog
この記事は、AngularJS Advent Calendar 2014 - Adventar の19日目の記事となります。前日は、@albatrosaryさんのYEOMANにあるAngularJS関連ジェネレータをご紹介します - albatrosary's blogです。YEOMANのジェネレータしか使ってこなかったので、他のも触って違いを感じてみたいです。 今日は、AngularJSの基本的なバリデーションの話です。AngularJSの初心者向けの記事になります。最近、仕事でもAngularJSを触り始めているので、少しずつノウハウを公開していきたいと思います。 AngularJSはバリデーション周りで便利な仕組みが色々と用意されていますが、それを拾い集めるのがなかなか大変なため、基本的なことをまとめてみました。 前提 環境 AngularJS 1.3 やりたいこと メールアドレスが
AngularJSとBootstrap3を使ってページング | VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで
AngularJSとBootstrap3を使って一覧データをページングで表示するサンプルコードを作成しました。 デモとコードサンプルはこちら。 Bootstrap3によるCSS設定、AngularJSのビルトインフィルター、カスタムフィルターなど様々な機能を使用していてコードが少し長くなっているので、３段階のステップに分けて作成しています。 ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．配列データをオフセットと表示個数を指定して表示 ２．配列データをページングで表示 ３．ページリンクのCSS設定 一覧情報をページ化して表示するには、オフセット（配列内のどのデータから表示するか）と表示個数を制御する必要があります。 まず、AngularJSのフィルターを使って、配列内のデータからオフセットと表示個数を指定して表示するサンプルを作成します。 表示個数は、下記のようにビルトイ
[Mac] Angular開発環境構築 - Qiita
私がMacでAngular開発を始めた時の環境構築手順をまとめました。 1. Node.jsのインストール 最初にNode.jsのインストールをします。Node.jsのバージョン切り替えを簡単に行えるようにするため、私はnodebrewを使ってインストールしています。 nodebrewを使ったインストール手順については、下記の記事をご参照ください。 [Mac, Homebrew] Node.jsのバージョン管理ツール、nodebrew導入手順 nodebrewを使用しない場合は、公式サイトからダウンロードできます。 2. (お好みで)Yarnのインストール 私はYarnを使っています。お好みでインストールしてください。 下記のコマンドでインストールできます。
![[Mac] Angular開発環境構築 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1379d8281393d5c33bfe619179c3857635b9a4b3/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCTWFjJTVEJTIwQW5ndWxhciVFOSU5NiU4QiVFNyU5OSVCQSVFNyU5MiVCMCVFNSVBMiU4MyVFNiVBNyU4QiVFNyVBRiU4OSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MDA3ZTRjNzNhYjMzMjJmZDM5ZjVjODdkMTRiYjk2MGE%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtaWktY2hhbiZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZmE4ODVmOWYzNWVlNjQ0NWFmMzQ5NzM1ZmE4YjljM2M%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D1c52f53f8f8ce295a6c6857793d149ea)
Angular をやるのに欠かせない VSCode Extension - Qiita
2017/07/11(Tue) 時点の情報に基づいています Angular をやるのに Visual Studio Code (以降 VSCode) は相性ばっちりで、デフォルト設定でもほぼストレスなくプログラミングできるのが素晴らしいですが、以下の VSCode Extension をインストールすれば、さらに効率アップが図れます。 Angular Language Service Angular 本家が開発している Extension で template に対してプロパティ補完をしてくれる強力な Extension です。存在しないプロパティを指定すればエラーチェックがかかって教えてくれます。 Path Intellisense ファイルパスを補完してくれる Extension です。例えば Component の templateUrl や styleUrls に外部の HTML
AngularJSのMVWパターンを理解する - Qiita
12/4の記事（AngularJSを使ったWebアプリのアーキテクチャ設計）で書くと言ったまま放置していたので、AngularJSのMVCパターンについて書いてみたいと思います。 AngularJSのMVCについては、12/19のお前のAngular.jsはもうMVCではない。と言われないためのTutorialというすばらしい記事がありますが、本記事ではもう少し抽象的な内容を扱ってみようかと思います。 MVW（Model-View-Whatever）パターンとは MVCパターンには、MVC2、MVP、MVVMなど数多くの派生パターンがあります。 目的は同じなのに派生パターンがたくさんあるのは、それぞれのプラットフォーム固有の問題（フレームワークの違いや、サーバサイドかクライアントサイドかの違いなど）によってMV*の*の役割が異なるからです。 AngularJSは公式ページで"Superhe
AngularJS で ViewModel を定義するという設計パターン - Qiita
AngularJS で ViewModel オブジェクトを作り $scope へバインドする、ということをやってみました。これが嬉しいシチュエーションとしては、 一画面に複数のUIコンポーネントがある。 Controller を分ける程でもない。もしくは面倒。 Factory や Directive 等に分割するのも面倒。 といったところでしょうか。もしくは何も意識していないと Controller が肥大化する傾向があるので、ソースの可読性があがったりとか。ちなみに副作用やパフォーマンスなどは検証していません.. 今回の投稿の前提となる AngularJS のバージョンは 1.3.8 です。 実装 完成イメージはこんな感じです。 Controller を書く ViewModel のメンバーは 変数 name age message とメソッド hello() とし、その ViewMode
実践！AngularJS | 前編 Controller間で値を共有 1
実践！AngularJS 前編 Controller間で値を共有 1 AngularJSを多少使い始めた人がぶつかりがちな問題を、さまざまな方法で解決していきます。今回は$scopeオブジェクトを使い、コントローラー間で値を共有する様子を見てみましょう。 はじめに このシリーズは、AngularJSを使うときにぶつかりやすい問題について、さまざまな解決方法を紹介するものです。ある程度AngularJSを理解している人に向けた記事ですので、AngularJSについて基本から知りたいという人は、CodeGridの過去のシリーズ「攻略！AngularJS」を参照してください。 AngularJSを用いて、ある程度の規模の開発をした場合、あるコントローラーの中に別のコントローラーを作る機会がよくあると思います。そのときに、親のコントローラーと子のコントローラーの間で値を共有したいと思うことがあるで
数値データに桁区切り文字を付けるには？（number／currency）
AngularJS TIPS 数値データに桁区切り文字を付けるには？（number／currency）
AngularJSの1.3から1.4へのバージョンアップ - Qiita
@tsuchikazuです。半年ほど仕事でAngularと戯れています。 3/21に開催されたng-japanでは、あと1週間後ほどでリリースされるとアナウンスされていたAngular 1.4 あれから10週間ほど経った5/27。ついに、Angular1.4の安定版がリリースされました。 Developer Guide: Migrating from 1.3 to 1.4とCHANGELOGから、Breaking Changeを中心に簡単にまとめましたので、公開します。 概要 Angular1.4では、主にngAnimateの大きなリファクタリングと、ngMessagesの機能改善、$cookiesへの新しいAPIが追加されました。 ngAnimateのリファクタリングは、今まで存在していたissueやバグフィックスと、より便利なアニメーションを提供するための新APIのために行われました。
ng-inspector - The AngularJS inspector pane for your browser
ng-inspector is a browser extension for Chrome, Safari and Firefox that adds an inspector pane to help you develop, debug and understand your AngularJS applications. Crypto users will benefit from these browser extensions in order to get the most out of their research. There are similar browser extensions for crypto users and traders that helps them with cryptocurrency trading and help them to tak
別ファイルやJavaScriptでメッセージを管理するには？（ng-message-include／ng-message-exp）
別稿「TIPS：式の真偽に応じて表示を切り替えるには？」では、ng-messages／ng-message属性を利用することで、検証エラー時にメッセージを表示する方法を紹介しました。本稿では、引き続いてng-messages属性で利用するメッセージを別ファイル（テンプレート／JavaScript）に外部化する方法について解説します。検証メッセージのように、アプリで共通して利用するメッセージについては、個々のテンプレートで毎回準備するよりは、本稿の方法を利用することで再利用でき、メッセージにも統一性を持たせられるでしょう。 メッセージを別ファイルに分離する メッセージ情報（＝ng-message属性のリスト）は、リスト1に示すように、別ファイルとして切り出すこともできます。
Angularで国際化対応 - 闘うITエンジニアの覚え書き
単純な翻訳ならテンプレートの記述がシンプル。（タグに "translate" 属性を付けるだけ） 翻訳辞書もjson記述で、ネストにも対応している為、ページやカテゴリ毎に分類して管理もできそう。 また、動的な言語切替にも対応しており、切り替え方法もシンプル。（ TranslateServiceの useメソッドを呼ぶだけ ） 無理やりデメリットを挙げるとしたら、言語ファイル(json)の切り替えを行う際に、HTTP通信が発生する事ぐらいだが、 通信が発生するのは最初の1回のみなので、全く気にならない。(サイズが大きくなる場合の確認は必要かもしれないが。) ng new my-app && cd my-app ng generate component header ng generate component top ng generate component page1 ng genera
HTML5 - テクニカルノート一覧
スクリプティング | CSS3 | Sass | jQuery | Angular v6 v5 | React | Vue.js Vue CLI Vuex | D3 | three.js | RxJS 6 v5.5 | TypeScript | トラブルシューティング | リファレンス | 数学 | スクリプティング FN1202002 <canvas>要素で定めた領域に図形を描く FN1202005 EaselJSで図形を描く FN1203001 EaselJSで描いた星形を回す FN1203005 EaselJSのマウスクリックとドラッグ&ドロップ FN1203006 JavaScriptでオブジェクトに設定した関数のスコープ FN1204005 EaselJSで外部ビットマップファイルを読込んで回す FN1205001 EaselJSでインスタンスをクリックした座標で回しながらドラッ
攻略！AngularJS 1.5 | 第1回 AngularJS 1.5とは
はじめに 本シリーズは、2014年に連載した攻略！AngularJS（執筆当時はバージョン1.2.7）を、本記事執筆時点（2016年9月現在）での最新バージョンである、1.5系に合わせて書き直したものです*。現在の状況に合わせ、加筆・修正しています。 *注：今後のバージョンアップ 近々、バージョン1.6がリリースされるかもしれません。その際は再度動作を検証し、記事も合わせてアップデートする予定です。 バージョン1.2系からバージョン1.5系に至るまでいろいろな機能が追加され、不便だったところが改善されてきました。それによって、アプリケーション自体の設計方法なども、当時と比べると変わってきたように思います。フレームワークとしては安定しており、エンタープライズ業界でも注目されつつあるようです。 ちょうど記事公開の本日、Angular 2がリリースされましたが、安定的に運用できるバージョン1.5
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG