JSオジサンで発表した資料です。
先日、私はBrightonで開かれたJavaScriptのカンファレンスFFConfで「(ここにライブラリやフレームワークの名前を入れる)を使おう。これこそ最強中の最強中の最強だ!」と題して話をしました。 ここに、そのプレゼンテーションの内容を書き起こします。もっと注目されるべき、最近のモバイルデバイスのフレームワークにかかるコストに関して、議論を広げる一助となればと思います。 2015年11月16日更新 – テーブルに1行、プロダクション環境下のReactについての行を追加しました。良いニュースをお伝えしますと、これはvanillaよりも3倍遅いですが、TodoMVCに関して言えば速いと言えます!PolymerのTodoMVCサンプルも最新バージョン1.2.2にアップデートされ、同様により速くなりました。 読むよりも見たい方へ、講演のビデオはこちらです。(必要なら、 スライドも入手できま
フォームへの入力チェック(バリデーション)を行ってくれる、jQueryプラグインの【jquery.validate.js】を利用したのでまとめておきます。 今回フォームはこんな感じです。 date_select.html <html> <head> <title>validate</title> <meta charset="utf-8"> </head> <body> <h2>validate</h2> <form class="form-signin"> <table class="usertable"> <tr> <th>名前</th> <td><input name="myname" type="text" value="" /></td> </tr> <tr> <th>電話番号</th> <td><input name="num" type="text" value="" /><
Node.jsはシングルスレッド、ノンブロッキングI/O、イベントループなどの特徴があり、「向いていること」と「向いていないこと」があると思います。 言語選定の際に使えるメモとして、Node.jsの構築事例も加えてまとめてみました。 Node.jsに「向いていること」 処理が短時間でイベント処理が重要なアプリ 例えば、チャットアプリなどの大量のアクセスのあるリアルタイムなネットワークプログラミングが得意 シングルCPUのサーバー シングルCPUの環境化でもその性能を十分使い切れるため、比較的性能の小さいサーバ上で大きなパフォーマンスを発揮できる Node.jsに「向いていないこと」 CPU負荷の高い処理 CPUリソースを大量に必要とするJavaScriptの処理を行うとイベントループが回らない状態になり、イベントハンドリングが行えない状態に陥る。このため、CPU処理が大量に必要とされるアプ
投稿推進部の外村(@hokaccha)です。 クックパッドブログの開発でRails上にECMAScript6などのモダンなJavaScript開発環境を導入した経験を元にノウハウを紹介したいと思います。 RailsはSprocketsというgemでJavaScriptやCSSをコンパイルする仕組みが提供されています。Sprocketsによるasset管理の仕組みは非常によくできており、AltJSのトランスパイルやファイルの結合、minifyなど、assetのコンパイルに必要な機能を一通り備えています。 しかし、JavaScriptにおけるモジュールの依存関係の解決や、ライブラリの管理などについてはモダンなJavaScript開発と乖離してきているのが現状です。そこで、Railsでも以下のようなことを実現できることを目標に環境を作りました。 ECMAScript6のシンタックスを使う モジュ
今日の記事は、Visual Studio / Visual Studio Code Advent Calendar 2015 11日目のエントリーです。 Visual Studio / Visual Studio Code Advent Calendar 2015 - Qiita 12月の9日時点で結構埋まってるのに11日だけ空いてたので、ちゃっかり登録しちゃいました。 去年はかなりタフなAdvent Calendarばかり書いちゃったので今回は軽い感じでいきます。 基本的に初学者に優しいブログを目指していますので技術的難易度は低めです。 で、最初に「Visual Studio CodeでJavaScript開発しよう」ってタイトルで書こうと決めて、この数日前に更新されたVS Code拡張のDebugger for Chromeを使ってgulpでbrowserify使ってsource ma
そんな訳で、JsDocについて少し調べたので、備忘録としてここに残しておくとします。 はじめに - JsDocについて Java開発者の方々ならば、JavaDocというのは馴染み深いを通り越して、もはや聞き飽きているかもしれません。同様にFlashのActionScriptにはASDoc、PHPにはPHPDocなるものがあります。ちょっとした規模のアプリケーションを開発すると、後々の保守を考慮してこういったAPI仕様書を作成し、後から「あれ、ここの処理って何の為にあるんだっけ?」となっても、ソースコードを直接追いかけることなく、概要を大まかに確認できるようにしておくのが慣例かと思います。※あくまで慣例です。実際にやっているかどうかは・・・(ry JsDocは、名前のとおりJavaScriptのAPI仕様書を指し、JavaDocと同様にHTMLドキュメント形式で出力されたもので、Webブラウ
AngularJSは、JavaScriptのライブラリです。――というと、多くの人は「ああ、なるほどね……」と思うでしょう。そして、そこで急速に興味を失う人も多いかも知れません。 「JavaScriptのライブラリ? まぁ、どんなのか知らないけど、特にいらないよ。jQueryがあるし、それで十分だからね」――そう思いませんでした? 皆さんが今まで知っているJavaScriptライブラリは、基本的に「JavaScriptを便利にするもの」でした。「DOMの取得や属性の操作がjQueryなら格段に簡単に書けるよ」というようなことでライブラリを導入していくことになった人も多いでしょう。 これらは、プログラマが自分で作成するプログラムを考え、それを書いていくことを楽にしてくれる、というものでした。作成する処理は自分で考える。それを作るのが楽になる――それが今までのライブラリでした。 では、Angu
【160325追記】この記事はAngular 2 alpha時代に初稿を仕上げ、それ以降は変更にあわせて保守を続けていましたが、そろそろ差が大きくなってきたため改稿版として別の記事を用意しました。今後はそちらをご覧ください。 @armorik83です。初日である昨日は、このアドベントカレンダー最大のサプライズとして@btford氏に寄稿していただきました。アドベントカレンダーの立ち上げ直後からオファーし、日本の「アドベントカレンダー」という特殊なTech系の事情を説明し、Angular 2のカレンダーをぜひ飾ってほしいという旨で依頼したことを覚えています。直前になって、時差で向こうはまだ11月なため日本のカレンダー開始に気付いていなかった、という笑い話も乗り越え、公開にこぎ着けたことを喜ばしく思います。 Thank you so much for contributing! Angular
みなさんは普段JavaScriptを使って開発する場合、インデントはどのようにしていますか? タブ、スペース2個、スペース4個・・・などいくつかの選択肢があります。 個人で開発している方は問題ありませんが、チームで開発している場合は意見が分かれ議論になることもあるでしょう。プロジェクト開始早々インデント論争でチーム内の雰囲気を悪くしたくはありません。 本記事はそんなインデント論争の1つの解決策となるべく、ブラウザベンダーやプロダクトで定めているJavaScriptコーディングのインデントルールを調べてみました。 この記事のポイント* 海外のJS界隈ではスペース2個のインデントが多数派 ESLINTなどの設定ファイルからコーディングルールを調べられる なぜインデント論争が起こるのか? そもそもなぜインデント論争が起こってしまうのでしょうか? それはそれぞれ一長一短のため好みが分かれてしまうか
この記事でWeb開発の未来を垣間見ることができるでしょう。UIの構築やサーバ、データ・エンドポイントの新しい見解を得ることができると思います。ここで、ブラウザとサーバコードの両側を含めたフルスタックな話をしていきます。これを読めば、 完全に機能するGitHubリポジトリ で紹介されたすべてのコードの検証や実行ができるようになります。皆さまが開発者として次の資質を持っていることを前提に話を進めていきます。 JavaScript中級者 HTML中級者 クライアント/サーバ間通信の基礎知識 JSONの基礎知識 Node.jsの基礎知識 上の知識がなくても、 おそらく この記事の進行についていけるでしょう。しかし、知識がないと私の紹介するコードを現実的なシナリオあるいは重要なシナリオに応用するのは難しいでしょう。インターネットは情報の宝庫なので、理解に必要な概念などをたくさん提供してくれます。必要
概要 自分用に使い勝手の良い、はてブviewerをReact/Reduxで作って公開しました。 ※GoogleFeedAPI停止につき現在利用できません。申し訳ありません。 Pasta - Hatena Bookmark Viewer - ひとまず復旧したようです。 デスクトップ版をもご利用ください。 blog.bokuweb.me スクリーンショット どんなものか 登録したキーワードに関連するニュースを配信する『Zite』というアプリがあるんですが、配信される記事が英語のみなので、こいつの日本語版を作ろうと思い着手しまた。当初はReact Nativeでスマホアプリを作り始めたんだけど、先にWEB版を作ってしまったほうが変なところで躓かずにすむんじゃないかと思い、こちらを先に実装することにしました。 ただリリース直前で気づいたんですが、公式にも同様の機能の『関心ワード』なるものが実装され
JavaScriptエンジニアへのIoTのすすめ:Node.jsとArduinoでスマートデバイスのプロトタイプをしてみよう Tomomi Imura(Slack) ここ、HTML5Experts.jpでも今年になって IoTやWoT関連の話題がことかかず、みさなんも関心を持ち始めていることかと思われます。 私もフロントエンド・エンジニアではありますが、もともと関心があったことと、去年からデータ・ストリームのPaaS (platform as a service) 会社であるPubNubで働いていることもあって、IoTを避けずには通れなくなり、電子工作を始めるようになりました。 そこで、最近東京・渋谷で行われた、東京Node学園で登壇した際に話したテーマ、Hardware Hacking for JavaScript Developers から、ArduinoとNode.jsを使ってプロト
この記事では、シンプルなTodoアプリのAngular 1のコンポーネントを、Angular 2のコードにアップグレードする方法を見ていきます。APIの違いや文法のテンプレートを比較することで、それがAngular 2へのアップグレードに何らかのヒントを与え、難しさが軽減すると感じてもらえることを願っています。 注意:Angular 2は、まだ”アルファ”の状態なので、APIやこれまでの技法は変化するかもしれません。しかし、この記事は残し、コードをアップグレードしていくつもりです。 Angular 1..x Todoアプリ この小さなコンポーネントを、Angular 2で書き換えてみます。まずは、このアプリの機能は以下の通りです。 Todoリストにアイテムを追加する アイテムを削除する機能がある アイテムが完了するとマークをつける機能がある 未完了のものと、合計のTodoの数を表示する こ
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強(僕の中で)JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
トレンド(世界):すべての国/過去12か月/基準としたキーワードを外さずに数値を取得 トレンド(日本):日本/過去12か月/基準としたキーワードを外さずに数値を取得 Highcharts 公式サイト:Interactive JavaScript charts for your webpage | Highcharts デモサイト:Demos / Stock Demos / Maps Demos / Gantt Demos GitHub:https://github.com/highcharts/highcharts npm:https://www.npmjs.com/package/highcharts CDN:https://code.highcharts.com/highcharts.js ライセンス:商用利用は有償、非営利向け無料ライセンスあり(詳細後述) 推薦しておきながら入門記事
Important: PhantomJS development is suspended until further notice (more details). PhantomJS is a headless web browser scriptable with JavaScript. It runs on Windows, macOS, Linux, and FreeBSD. Using QtWebKit as the back-end, it offers fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG. The following simple script for PhantomJS loads Google homepag
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く