本連載「モダンなフロントエンド開発者になるためのSPA超入門」では、フロントエンド開発のアーキテクチャである「SPA（Single Page Application）」について、開発に必要となる各種フレームワークの特徴や、サンプルアプリ開発を通じたSPA開発の流れ、フレームワークによる作り方の違いなどを紹介します。 サンプルアプリ開発では、SPA開発において人気がある「React」「Angular2」の使用を予定しています。第1回目である今回は、SPAの特徴と取り巻く環境、フレームワークを紹介します。 SPAとは SPAはAdobe FlashやMicrosoft SilverlightといったリッチなUIを提供できるRIA（Rich Internet Application）に代わるフロントエンド開発の技術として、ブラウザの進化やHTML5の登場などによって誕生したアーキテクチャです。H
業務システムのUI構築に採用されるJavaScriptコントロール「Wijmo」。軽量で高性能な製品を提供しつづける舞台裏を開発者に聞く［PR］ 業務アプリケーションの開発でWebとモバイルへの対応を進めようとするとき、大きな課題の1つとなるのが、Webやモバイルに合わせた優れたユーザーインターフェイスをどう構築するのか、でしょう。 デスクトップアプリケーションとして作り込まれてきた業務アプリケーションのユーザーインターフェイスを、Webブラウザ対応にし、しかもモバイルデバイスの小さな画面とタッチ対応へ再構築することは容易な作業ではありません。 HTML5/JavaScriptのユーザーインターフェイスコントロールである「Wijmo」（ウィジモ）は、こうした課題を解決できる機能を提供します。 Wijmoは、業務アプリケーションでよく使われるExcelライクなグリッドコントロール、オートコン
この記事でWeb開発の未来を垣間見ることができるでしょう。UIの構築やサーバ、データ・エンドポイントの新しい見解を得ることができると思います。ここで、ブラウザとサーバコードの両側を含めたフルスタックな話をしていきます。これを読めば、 完全に機能するGitHubリポジトリ で紹介されたすべてのコードの検証や実行ができるようになります。皆さまが開発者として次の資質を持っていることを前提に話を進めていきます。 JavaScript中級者 HTML中級者 クライアント/サーバ間通信の基礎知識 JSONの基礎知識 Node.jsの基礎知識 上の知識がなくても、 おそらく この記事の進行についていけるでしょう。しかし、知識がないと私の紹介するコードを現実的なシナリオあるいは重要なシナリオに応用するのは難しいでしょう。インターネットは情報の宝庫なので、理解に必要な概念などをたくさん提供してくれます。必要
皆さんはAngularJSに興味がありますか？ この記事では、AngularJSのための最適なツールと選りすぐりの情報をリストにまとめています。Angularを使ってアプリケーションの開発をする際には役立つ内容です。 Webアプリケーションを動的に設計したいWeb開発者の多くは、 フレームワークとしてAngularJSを選択するようになってきました 。AngularJSの開発者が新たにAngularJSプロジェクトを立ち上げる場合、本格的にWebサイトを開発しようとすると、非常に多くのツールが必要になります。 AngularJS初心者の場合は、まず始めに AngularJSの良書 を何冊か読むと良いでしょう。 私たちは、オンラインでAngularJSを学習するための、膨大な AngularJSのチュートリアル リストも作成しています。 AngularJSでWebアプリケーションを開発する際
3. JS: インスタントサーチのスクリプト この節がいちばんの肝です。 まず、lists = document.querySelectorAll('.line-shell-main-users-li');で検索対象を取得します 次に、for文内でinnnerTextでタグ内の文字列を取得します 最後に、.hiddenクラスをトグルします searchUsersList = function(event){ var i, id, name, lists, input_text = $(this).val(); console.log(input_text); // listのdomを取得 lists = document.querySelectorAll('.line-shell-main-users-li'); for (i = 0; i < lists.length; i++){ id
こんにちは。 6月から役職が変わりフロントエンドリーダーからCTOになりました、先生です。 もうAngular1.4にアップデートしましたか？ Angular1.4になりマテリアルデザインを意識したアニメーション関連の変更や実装がおこなわれました。その分Breaking Changesもあるのでアップデートには注意する必要があります。 今日はそんなAngularJS 1.4を使って、マテリアルデザイン風にページ遷移するアニメーションを作ってみたいと思います。 今回のデモ デモは下記リンクになります。 各メンバーをクリックするとスムーズにアニメーションして詳細ページに遷移します。まずは触ってみてください。 http://frontainer.com/ligblog-sample/angular-morphing-animation/#/ 必要なもの AngularJS1.4 – https:
最近 angularJS に対する期待の低下が著しくてつらい。 なんだかんだで SPA から jQuery に戻った話 - ボクココ Angularの問題では はてなブックマーク - mizchi のブックマーク - 2015年5月18日 みんな使いどころを間違ってるんや。１年半くらい使ってて不満もあるけど自分のよく使う範囲では angularJS 最強だと思う。 angularJS が向いてるのは Single Page Application ではない angularJS が向いてるのは ◎ フォームのような細かい部品を多用 ＆ DOMツリーとデータスコープがほぼ一致していてユーザの入力をサーバに送ったりする webアプリ。管理画面、マイページ、業務アプリなど △ Single Page Application ← 簡単に作れるけどページ間の連携が必要ないならサーバ側で分けてしまった方
AngularJS x TypeScript でちょっと本格的な TODO アプリを作ってみる – AngularJS + TypeScript ＃2 wakamsha 2015.05.18 426 5735224110 2015年5月23日 controllerAs について追記しました。 はじめに とりあえず何かアプリっぽいものを作ってみようということで、定番の TODO アプリに挑戦してみようと思います。 ググればいくらでも情報は出てきますが、この記事では以下にあるようないかにもチュートリアルっぽいものからもう一歩踏み込んで、より実践的かつ規模の大きな案件にも応用出来るような作りを目指してみます。 AngularJS 1.2 日本語リファレンス | js STUDIO AngularJS • TodoMVC サンプルコードはこちらからどうぞ。 wakamsha/angular-dem
JavaScriptを書いていたらブラウザがくっそ重くなる症状に出くわした。あぁ、噂のメモリリークですわ。 先人の知恵に頼るマン。それっぽい記事が見つかる。 javascriptのメモリリーク対策(随時更新) - Qiita Shibu’s Diary: JavaScriptのメモリリークを10倍速で発見する Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools Writing Fast, Memory-Efficient JavaScript - Smashing Magazine angularjs - How to catch memory leaks in an Angular application? - Stack Overflow 上の記事はProfiles + Take Heap
フレームワーク対決！Angular VS React仮想パネルディスカッション 吉川 徹 特集企画「アプリケーションアーキテクチャ最前線」では、さまざまな視点からアプリケーションアーキテクチャをエキスパートたちに語っていただきます。今回は、今話題のAngularJSなどのJavaScript MVCフレームワークの台頭と進化、そして新しいアーキテクチャであるFluxとそのフレームワークであるReactなどについて、既に先行して学んでいるエキスパートたちにその知見を聞いてみました。 今回はフレームワーク対決ということで、エキスパートたちがAngularとReactという陣営に分かれ、それぞれのフレームワークについて疑問点をぶつけたり、議論したりする仮想パネルディスカッションという形式でお伝えします。単なるパネルディスカッションとは違って、キーワードは「プロレス」です。まさかりの投げ合い、di
リッチなWebアプリケーションを作る上でJavaScriptフレームワークは欠かせませんが、 次々と新しいものが出てきてどれを使えばいいかわからないという方も多いと思います。 様々なフレームワークでシンプルなToDoアプリケーションを公開している TodoMVCというサイトがありますが、 大規模なアプリケーションをつくろうとした時、これでは少しシンプル過ぎてイメージが湧きにくいのではないでしょうか。 なので、もう少し実用的なToDoアプリケーション TODO-Module (source) というのを作ってみたので公開します。 また、このAPIを使ったSPA（シングルページアプリケーション）のクライアントも作りました。 TODO-Module-AngularJS (source) TODO-Module-Backbone (source) TODO-Module-Marionette (s
(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体どれを使えばいいのか？何が違うのか？何から調べていいのか迷うことがあります。 そこで、現時点で事実上全てとなる、９大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ
AngularJSのエキスパート達が語る、AngularJSの使いどころとつらいところ（前編）。Deverlopers Summit 2015 JavaScriptのフレームワークの1つとして注目されている「AngularJS」は、どんな用途に向いているのか、学習コストはどれくらいか？ 使いにくいところは？ などの疑問をAngularJSのエキスパート達が次々に答えてくれるセッション「AngularJSの今とこれから」が、2月19日に都内で行われたイベント「Developers Summit 2015」で行われました。 ふだんなかなか聞けない、AngularJSを現場で使っている人たちの本音が詰まっていたセッションの内容をダイジェストで紹介しましょう。 AngularJSのFAQ 川田氏 今日は、AngularJSを使って開発している方、AngularJSの本を執筆している方々に、Angu
ThinkfulはWeb/スマートフォンアプリの技術などを学ぶことができるオンラインスクール。プロフェッショナルな開発者がメンターとして1対1で伴走するため、他の同様サービスよりも続けることができる。 Javascript ベストプラクティス パート1 2つのパートに分けてお届けする「ベストプラクティス」のパート1では、MozillaのWebエバンジェリストであるChristian Heilmannが提供する人気のスライドショーから内容を抜粋しています。JavaScriptにはひどく扱いにくい特徴がいくつかありますが、それはこれまで以上にソフトウェア開発において重要になっています。この「ベストプラクティス」ではより読みやすく、効率の良いコードを書く手助けとなるサンプルコードやその使用例を紹介していきます。 もしWeb開発についてもっと学びたいと思うのであれば、私たちが提供しているフロントエ
判決： まあまあ（でもないか） 一体何の話なのか？ 私は2年間、Angularにのめり込んでいました。 それぞれの考えを持つさまざまなチームによる、10以上のAngularベースのプロジェクトを見守り、関わってきました。 1年目はフレームワークの採用、APIの変更、ドキュメントの改良、コミュニティの形成を注視して過ごし、徹底的に習得しました。 2年目は実務に全面的に携わり、チームメンバーの意見を聞きました。 私の意見は、 Angular.jsは大多数のプロジェクトには“まあまあ”だが、本格的なWeb アプリ開発には不十分である ということです。 “本格的なWebアプリ”とは？ “本格的なWebアプリ”というのは、長期の 保守が可能 で、最新の一般的なブラウザで 実行できる 、 スムーズなUX を備えた、 モバイルフレンドリー なアプリのことです。 専門家が開発したWebアプリは単なるアプリ
はじめに Vue.jsは、シンプル・軽量・高速という特徴を持つデータバインディングライブラリとして最近注目を集めています。LINE社でもアプリ内WebViewの実装技術の選択肢の一つとしてVue.jsを採用しています。2014年11月27日にリリースされたLINEスケジュールは、Vue.jsを使って実装しているSPA（Single Page Application）の代表例です。 本稿は日本語記事がまだ少ないVue.jsの基本機能の紹介を目的とした「基礎編」として、公式ドキュメントの内容を元に解説します（執筆時点のバージョンであるv0.11の内容です）。 Vue.jsとは Vue.jsは、双方向バインディングによるModelとViewをつなぐ仕組み「ViewModelレイヤー（MVVMパターン）」を提供するJavaScriptのライブラリです。 Vue.jsの基本概念は以下のようになってい
LAMPに代わる構成として注目のMEANスタックの基礎知識とインストール、ひな型作成：MEANスタックで始めるWebアプリ開発入門（1）（1/3 ページ） MEANスタックを用いたWebアプリの開発方法について紹介していく連載。初回はMEANスタックの特徴と構成要素MongoDB、Express、AngularJS、Node.jsの概要、インストールの仕方とひな型の作成方法を解説。 連載目次 今でもよく使用されていますが、以前からWebアプリ開発ではLAMP環境がよく使用されていました。LAMPとは、一般的なWebアプリを開発するのに人気の高いオープンソースソフトウェアを組み合わせたもので、以下を用いたシステムのことです。それぞれの頭文字を取って「LAMP」と呼ばれています（参考）。 OS：Linux Webサーバー：Apache HTTP Server データベース：MySQL プログラ
小川充氏とはhtml5jエンタープライズ部で久しくして頂き「エンタープライズとHTML5」というテーマで色々と議論させて頂いております。大変尊敬できる方であり自分が backbone.js を触ったのも同氏のブログを読んだのがきっかけの一つでもありました。最近ではエンタープライズにおけるAngularJSというテーマで勉強会などさせて頂いています。 今回のエントリーは同氏のブログ「なぜAngularJSを薦めるのか ー 個人的な思い」を読んで自分なりのエンタープライズ像を書こうかと思った次第です。書いているうちに「中二病」のような書き方になりましたが気軽ブログ的に記載します。尚「エンタープライズ限定」ですのでよろしくお願いします。 なぜAngularJSを薦めるのか ー 個人的な思い - I am mitsuruog AngularJSはエンタープライズ向きか 「AngularJSはエンタ
コードリーディング AngularJS初心者です。 コードリーディングという形で、AngularJSで実装されたWebサービスのソースコードを題材に使って、その動きや機能がどのように実装されているのかを、ソースコードのレベルで解析していこうと思います。 ※時間のある時に、随時追記していきます。 題材「FMTube 」について コードリーディングの題材とするのはこちら。 ゆーすけべーさんが、AngularJSの勉強中に作成したサービスだそうです。 FMTube! アーティストの名前を入れると、楽曲リストを順番に再生してくれます。 素晴らしいです。勉強させて頂きます。 ソースコード ソースコードですが、Webサービスとして公開しているので、当然、Webブラウザから確認することができます。 メインロジックは、こちらに記述されています。 http://yusukebe.github.io/FMTu
社内のライトニングトーク用に Qiita:Team に書こうとしていたものですが、誰かの参考になればと思い、こちらにアップします。対象は 「エンタープライズ系ではない」「スクリプト言語系の」WEB系エンジニア/プログラマ です。 流行り廃り、好みがあると思いますが、これらは実際に、私が試してよかったものです。サービスであったりライブラリであったり粒度がバラバラではありますが、参考まで^^; 「最近の」というタイトルですが、私的に最近、活用しているという意味で、サービス自体は昔からあるものもあります。 ① Heroku Heroku を利用すると、Ruby(on Rails)、PHP、Node.js、Python 等のサーバ側アプリケーションをホスティングすることが出来ます。デプロイ方法は Git で push するだけ です。 商用でちゃんと使おうとすると、無料枠の構成では難しいですが、デ
![[WEB開発] 私的な最近のおすすめサービス/ツール 14選 〜2014年版〜 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a05c54efc4e23b8f321cec1bcae63bb87257553f/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCV0VCJUU5JTk2JThCJUU3JTk5JUJBJTVEJTIwJUU3JUE3JTgxJUU3JTlBJTg0JUUzJTgxJUFBJUU2JTlDJTgwJUU4JUJGJTkxJUUzJTgxJUFFJUUzJTgxJThBJUUzJTgxJTk5JUUzJTgxJTk5JUUzJTgyJTgxJUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkzJUUzJTgyJUI5JTJGJUUzJTgzJTg0JUUzJTgzJUJDJUUzJTgzJUFCJTIwMTQlRTklODElQjglMjAlRTMlODAlOUMyMDE0JUU1JUI5JUI0JUU3JTg5JTg4JUUzJTgwJTlDJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1hYzRkNzQ2NGU1M2VlZDNkZTQwYTYxNDNlZmQ1MjZkOA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBoa3VzdSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZDQ2MDhlM2MxY2U1Y2E4MzU0YTFiOWMzNmI0MGNkZWE%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44KG44KB44G_%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Dd239fddef9fb1a234fbc44b218471eb6)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
