You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications. Introduction The Vanilla JS team maintains every byte of code in the framework and works hard each day to make sure it is small and intuitive. Who's using Vanilla JS? Glad you asked! Here are a few: FacebookGoogleYouTubeYahooWikipediaWindows LiveTwitterAmazonLinkedInMSN eBayMicros
最近、なんというか、フロントエンド勉強会に出席する度に、「フレームワークじゃねぇんだ! MVC設計がな! 」とか言い続けている気がする。たくさんフレームワークが出てきて、○○フレームワークの問題とか、開発の困難の話を聞く度に、自分の設計を棚に挙げて、「これは、フレームワークがスケールできないせいだ!」「jQueryが糞」とか言ってて、「何言ってんの?コイツ?」みたいな気分になる。 最近になって、なんでこの状況がいつまでたっても変わらないんだろう? って理由が分かってきた。フロントエンドできない人が、フロントエンドやりすぎなのだ。 なんでフレームワーク使うの? そもそも、なんでフレームワークを使うか?ってことに答えられない人が多い気がする。というか、大抵「上司が決めたから」とか「チームで決まっているから」という答えが返ってくる。そもそも、フレームワークを強制して学習させる環境になっている現場
対象読者 JavaScriptフレームワーク・ライブラリの選定に悩んでいる方 本格的にJavaScriptを触るのが初めてという方 jQueryでの大規模なフロントエンド開発に限界を感じている方 必要な環境 Node.jsがインストールされていることが推奨です。 React.jsとは何か React.jsは最近注目を浴びているFacebook製のライブラリで、MVCアーキテクチャでいうViewにあたる機能を提供します。 前提として、JavaScriptの世界でMVCのVといえば、紛れもなくDOM(Document Object Model)のことを指します。特に何も意識しないで作った場合、都合の良いDOMからデータを引っ張り出しては別のDOMを書き換えるといった、行き当たりばったりな作りになりがちです。そこで、MVCの考え方を導入することにより、データを画面とは独立した構造体として切り出し
Vue.js が辛くなってきた。 ひとまず現状の辛さをダンプ 今日チームで改めて話し合って辛さがハッキリしてきたので、それをつらつらと書いてく。 (今のチームは僕を含めて Rails プログラマが多くて、フロントエンドを専門にやってる人はいない。) グローバル変数大量問題(もしくはイベント地獄問題) たくさんの状態(変数)が必要 && 複数 DOM にまたがるレンダリングがしたい。 今は、左ペインで選択して右ペインに出す、みたいな事をしている。 左ペインはタブで様々な種類の項目を選べて、選択したものを右側でリスト化して表示している。 これをやろうとするにあたって、方向性が2つあると思っていて 左ペインと右ペインでコンポーネントを分けて、親玉 ViewModel に変更を通知して親玉がレンダリング制御する -> イベント地獄 左ペインと右ペインの上位の親玉 ViewModel をつくって全て
V8 JavaScript を用いたイベント駆動I/Oの実現 全てのリクエストに対して"Hello World"と返答するNodeで書かれたWEBサーバの例です。 var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n'); }).listen(8124, "127.0.0.1"); console.log('Server running at http://127.0.0.1:8124/'); このサーバを走らせるには、コードを example.jsというファイル名で保存し、下記のように nodeコマンドを実行してください。 % node example.js
HTML5 Canvasのフレームワーク「CreateJS」(基本的な使い方は入門サイトをご覧ください)について、2015年2月10日に開催されたCreateJS勉強会 (第5回) でライトニングトーク「CreateJSとNode.jsを使ってサーバーでCanvas要素を使おう」を発表しました。今回はそのスライドを元に、サーバーサイドでCreateJSを使うメリットを紹介します。 デモ 今回紹介するnode-easelを使ったデモです。スマホ画面にTwitterのアイコンが、PC画面には白い矩形が表示されています。スマホで選んだTwitterのユーザーのアイコンがPC側でアニメーションします。画像加工はサーバーサイドで動くCreateJSを使って行われています。 Section1. Node.jsとモジュールについて Node.jsはブラウザではなくサーバーサイドで動くJavaScript
5. (それなりに) 正しい認識 'Node.js' === ‘ノンブロッキングI/Oを持つJavascript CLI実行環境' • CLI、Google V8 • シングルスレッド+イベントループ • ノンブロッキングI/O • 高い次元でのモジューラビリティ • リアルタイム (関係ない) 6. どうでもいい知識 正式名称は「Node」です When referring to the software or the project in general, it's Node.js or simply Node. It is a proper noun, so capitalize it. The .js appears with the first use, to disambiguate from other things called "Node", and Node (with
歌舞伎座.tech#6「VirtualDOMとReact」 - connpass に参加して来たのでメモ。 すべてのCSSに死を!これはJSerの叫び!- @kyo_ago スライド: CSSに死を!これはJSerの叫び! #kbkz_tech CSSが辛い CSSはカプセル化とか継承とか、プログラムからの概念がそのまま持ってこれない ReactStyle js-next/react-style JS内にStyleを埋め込むことができる そのままオブジェクト的に入れられる Template Stringsと合わせればその場でCSSを入れることができる styles=にスタイルを入れる セレクタをあまり考えなくていい style属性でスタイリングする 擬似要素、擬似クラスが全滅 :hover :active などが使えない。 CSSの継承などの概念が消える 自分で頑張る必要がある ユーザプレ
普段Javascriptをよく書いているのですが、設計が今の自分の弱点だなぁと思い、 積読になっていた JavaScriptデザインパターン – オライリー・ジャパン を引っ張りだして勉強したことを紹介していきます。 内容に関して何か間違いや問題があったらご指摘ください。 デザインパターンとは デザインパターン – wikipedia “ソフトウェア開発におけるデザインパターン(型紙(かたがみ)または設計パターン、英: design pattern)とは、過去のソフトウェア設計者が発見し編み出した設計ノウハウを蓄積し、名前をつけ、再利用しやすいように特定の規約に従ってカタログ化したものである。” デザインパターンというのは、テンプレートの様なものと考えるとわかりやすいかもしれませんね。 また、Javascriptデザインパターンでは次のように提唱されています。 パターンは実績のある解決策で
ページが読み込まれた時にDOMを調査してimg要素を自動で探し、設定したブレイクポイントに応じて最適な画像ファイルを表示するスクリプトを紹介します。 SVGとPNGが混在しているページでも無問題、SVGはベクターなのでそのまま拡大、PNGはそのサイズ用の画像ファイルを表示する賢い仕様になっています。 Rimg -GitHub Rimgの特徴 Rimgのデモ Rimgの使い方 Rimgの特徴 100%フロントエンドのコード(バックエンドは一切無し)。 単独で利用できるスクリプト、jQueryなどは必要ありません。 しかも、超軽量(6.0KB)。 UA判定やクッキーなど、環境に依存して判定するものは使用していません。 画像や背景画像をレスポンシブ対応にし、最適な画像を表示します(Retinaディスプレイ、リサイズ対応)。 スクロールして画像が表示されたらロードするLazy Loadに対応。 ス
連載目次 プッシュ通知を秒間1万4000ほど送るには 前回の「大量データ処理時に知っておきたいAmazonDyamoDB活用テクニック4選」では、Pusna-RSのデータ永続化に使っているDynamoDBの活用テクニックについて解説しました。今回は、そのDynamoDBからAPNs/GCMへのデータ送信までを高速化させた方法を紹介します。 Pusna-RSの配信機能とは 連載第1回「プッシュ通知の基礎知識&秒間1万を超えるプッシュ通知基盤のアーキテクチャと仕組みとは」の際に概要をお伝えしましたが、配信機能はPusna-RSの中で実際にプッシュ通知を行うための機能で、以下の【3】に当たる箇所です。 Pusna-RSではこの一連の流れを最適化させるためにNode.jsのStream APIを活用しています。今回は、このStream APIの活用について紹介していきます。 あらためてNode.j
知ってる人には今更と思いますが、今まで知らなかったのでメモメモ。 AppleScriptの代わりにJavaScriptを使えるようになってました。 Yosemiteからの新機能だそうです。 JXAとも呼ばれています。宇宙航空研究開発機構とは無関係です。 (追記:JXAは公式の略称です →Introduction to JavaScript for Automation Release Notes) 詳しくは Appleの公式ドキュメント か、「参考」にあるリンクへどうぞ。 もう一つ記事を書いたのでこちらもよかったらどぞ。 Macのキーボード入力、マウスクリックをJavaScriptで (JXA) Script Editorで使う方法 まずScript Editorを使う方法を説明します。 好きなテキストエディタを使いたい場合は飛ばしてください。 (でも「用語説明」の表示の仕方は覚えておいて
デスクトップやスマホで、ページの領域を超えてスクロールするとバウンドするような感じになりますよね。その時にちょっとしたイースターエッグをアニメーションで表示する単体で動作する軽量スクリプトを紹介します。 Overscroll Overscroll -GitHub Overscrollのデモ Overscrollの使い方 Overscrollのデモ デモはオーバースクロールのゾーンがある、OS XのChrome, Safariでご覧ください。 WindowsやIE, Firefoxにはオーバースクロールのゾーンがないため動作しません。 デモページ 領域を超えてスクロールすると、ひょこっとイースターエッグが表示されます。 天地、どちらもOKです。 OS Xが手元にない場合は、下記の動画でデモを確認できます。 デモの動画 Overscrollの使い方 Step 1: 外部ファイル 当スクリプトを
2015年02月05日16:34 カテゴリ 今、クライアントサイドのJavaScriptを書く前に知っておきたいこと ~ 2014年トレンド総まとめ 皆さんこんにちは。adingoにてFluctという広告配信システムの管理画面を中心にクライアントサイドの開発を行っております、大関です。 今回は、先日、社内のエンジニア向けに開催した「2014年のJavaScriptのトレンド総まとめ」というコンセプトの勉強会の内容について紹介します。 JavaScriptトレンド総括(2014) from Tetsuharu OHZEKI それでは、スライドに書ききれなかった前提事項について、何点か補足と解説をします。 補足と解説 前提: なぜ「2014年」なのか JavaScriptを用いた開発、特にWebフロントエンドとも呼称されるクライアントサイドJSのトレンドは、非常に速いサイクルでの進化を見せて
社内向け資料。自分が書いたコードを説明するために資料作る羽目になった。 昔のことはうろ覚えで雰囲気で書いてる部分もあるので、そこらへん勘弁。 古の時代(~2010) 前提としてJavaScriptは名前空間がwindowの一つしかない。 昔Prototype.jsがあった。もうみんな忘れたけどあの時期はプリミティブなオブジェクトのprototypeを生やしまくって、それが衝突しまくってprototype良くない的な雰囲気が生まれたり生まれなかったりした。 その反省があってか(歴史的に若干微妙な気がするが) jQueryは名前空間を一つに集約した。いわゆる jQueryPlugin は、jQueryのプロトタイプにヘルパを生やしまくっていた。グローバルを汚すのは駄目だけどjQueryの名前空間を汚すのはいいよね、ぐらいの考え。 jQuery非依存なライブラリは、「GoodParts」として、
2014 年に学んで良いと思ったベスト 5 を雑に書き連ねます。 自分が良いと思ったタイミングが今年という話なので、それらのリリース時期とは無縁です。 2 月頃から仕事で使い始めました。 それまでは、見よう見まねで npm パッケージを作ったり Grunt タスク作ったりする程度でした。 最初は、クライアントJSのために簡単な Web-API や Socket-API を付属できるようにする、程度の学習に留めるつもりでした。 しかし、The Substack Pattern に代表されるような「小さい機能の処理を組み合わせて大きな機能を作る文化」に好意を持ったこと、フロントエンド周りの良いツールが多いこと、npm の使い勝手の良さ、などで、全体的に好きになりました。 まだまだ使いたいなぁ、と考えております。 来年は、「小さいWebアプリを手なりですぐ作れる」モジュール構成の一式を用意したい
みなさんは普段Node.jsをどのように使っていますか? サーバーサイドで動くJavaScriptであるNode.jsは、Socket.IOと連携してリアルタイムなウェブコンテンツを作ったり、webpackやgulpのようなフロントエンドエンジニアのツールとして使われたりとさまざまな場面で活用されています。 Node.jsで大規模な開発をする場合、TypeScriptを採用して開発の生産効率性・保守性を上げるのもオススメです。WebStormやVisual Studio Codeを使えばコード補完が効くためプログラミングの効率が劇的に向上し、TypeScriptの静的型付けによってコンパイル時型チェックが行われるので安全性が増します。Node.jsを使って中・大規模なシステムを構築するときはTypeScriptを検討するといいでしょう。 今回はNode.jsをTypeScriptで記述する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く