仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう｜ハイクラス転職・求人情報サイト AMBI（アンビ）
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう 最近のJavaScriptフレームワークで利用される「仮想DOM」について、リアルDOMの違い、メリット・デメリット、仮想DOMを使ったフレームワーク開発などを、ダーシノ（bc_rikko）さんが解説します。 はじめまして、ダーシノ（@bc_rikko）です。さくらインターネットでフロントエンドエンジニアをする傍ら、NES.cssというファミコン風CSSフレームワークを開発しています。 さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか？ そういったフレームワークで使われている、仮想DOMについて知っていますか？ 「聞いたことない」「聞いたことはあるけど、どう実装されているかは知らない」「熟知している」。いろいろなレベルの方がい
これからは今まで以上に、jQueryが必要なくなるかもしれない
3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 現在のブラウザ事情 jQueryに替わる、JavaScriptの選択肢 マイクロライブラリの台頭 IE9への対応はポリフィルで NodeListの反復 jQueryは遅いのか？ jQueryについて私が嫌いなもの $なしでは生きていけない？ 現在のブラウザ事情 jQueryが2006年にリリースされてから、DOMとブラウザのAPIは飛躍的に向上しています。2013年に「You Might Not Ne
JavaScript入門者が初めて作る！シンプルなクイズアプリのチュートリアル
JavaScriptの構文を勉強したら、何か作ってみたくなりますよね。手軽で楽しく応用しやすい、シンプルなクイズがおすすめです。 Web開発を学んでいる人から「どうすればJavaScriptでクイズを作れますか」という質問を頻繁に受けます。新しいことを楽しみながら学んでもらうのには、クイズが適しているためです。 JavaScriptを使ったクイズのコーディングは、JavaScriptの良い勉強になります。イベントの処理方法、ユーザーインプットの取り扱い、DOM操作、フィードバックの返し方、スコアのトラック方法（たとえばクライアントサイドに保存）などを学べます。基本的なクイズができたら、ページ区切りを追加して機能を充実します。追加できる機能はこの記事の最後に取り上げます。 この記事では、JavaScriptでクイズを作るステップを説明します。Webサイトに合わせて適宜改変してください。完成形
フロントエンドが嫌い
ウェブフロントエンドの技術の進歩と興亡の速度には目を見張るものがある。 browserifyが生まれ、Gruntが生まれ、Gulpが生まれた。 そしてその全てが死んだ。 Webpack, Babel, Flow, 今栄えている技術だってそのうちに死ぬだろう。Reactだって例外ではない。 一部はもう死につつあるし、少し前にあれだけ持て囃されたTypeScriptも今や消えつつある。Coffeeは全エンジニアから嫌われた。 そんな万華鏡のように目まぐるしく変わる情勢に追い付かんと研鑽を続ける者等がいる。アーリーアダプターを自称し最新技術のケツを追いかけQiitaにクソを垂れ流す彼らこそ我らがイケイケウェブフロントエンジニアである。 最新技術に目を凝らし、やれ新たなこれイケてるだの古臭いあれはイケてないだのと宣いチュートリアル記事を量産する彼らであるが、彼らの存在は決して無駄ではなく、生まれた
JavaScript初級者から中級者になろう
JavaScript。「ジャヴァスクリプト」と読みます。主にWebページに動きを与えるものです。 現在では結構多くのページに使われていますが、その多くはとてもレベルが低く不適切なものです。もっと質の高いJavaScriptを使える人が増えるといいなという思いから、このページを作りました。 初級者の基礎知識 本文を理解するにはJavaScriptの知識がそれなりに要るので、JavaScriptがそもそもあまり分からない人は、この辺を読んでみましょう。 基礎第一回 基礎第二回 基礎第三回 基礎第四回 基礎第五回 基礎第六回 第一章 オブジェクト オブジェクトとは オブジェクトの実体 配列のコピー オブジェクトと関数 第二章 DOMの基礎 HTMLと木構造 DOMとは 基本的な操作とテキストノード 木構造の操作：ノードの除去 木構造の操作：ノードの追加 木構造の操作：さまざまな機能 木構造の操作
Webスクレイピングのノウハウを公開します | 東北ギーク
photo credit: the local eye sore : man scraping illegal billboard, castro, san francisco (2014) via photopin (license) こんにちは。リスペクトの木村です。 今回は「スクレイピング」についての話題をお送りします。 スクレイピングとは ウェブスクレイピング（Web scraping）とは、ウェブサイトから情報を抽出するコンピュータソフトウェア技術のこと。ウェブ・クローラー(Web crawler) あるいはウェブ・スパイダー(Web spider)とも呼ばれる。 ウェブスクレイピング – Wikipediaより 要するに、「APIを利用せずにWebページのHTMLデータを収集して、データを抽出したり整形する技術」の事を指します。 収集方法も様々で、最近ではkimonoのようなサ
私がscriptタグについて知っていること全て : 知られていない属性や実行順序など | POSTD
<script src="//typekit.com/fj3j1j2.js"></script> <!-- This second script won’t execute until typekit has executed, or timed out --> <script src="//my.site/script.js"></script> ローカルスクリプトとリモートスクリプトを組み合わせても同様に操作することができます。 機能的には、Webページの前の部分で重いスクリプトのロードがあると、サイトの表示が明らかに遅くなることを意味します。さらに、ページの最後の方で表示されるスクリプトは、それまでに存在するされたスクリプトの動作に依存することを意味します。 先行する全てのscriptタグがロードされ実行されるまで、ページ上の要素は表示されません。つまり、パフォーマンスへの悪影響を覚
JavaScript の難しさとは何か - mizchi's blog
JSの学習コスト高いかという問題、言語のコア自体はシンプルだが細かい == とかのハマりどころが多いのと、言語機能自体がシンプルすぎてエコシステムを理解してモジュールを扱うところに辿り着くのが大変、という問題に分類できる— 現場の声 (@mizchi) 2016年8月15日 jQueryの学習コストは、DOMはツリーなんだよという概念の獲得と DOM API の抽象サブセットを覚えるというだけで、2016年現在は jQueryによるUI設計論(ここが高まるとBackboneとかその辺)みたいなものに手を出す必要がないなら、そんなでもないんだろうな— 現場の声 (@mizchi) 2016年8月15日 Reactが難しいと言われる場合、仮想DOMという概念がやや難しい、というか非常にCS的なアルゴリズムとデータ構造が背景にあって、その上で単純なトップレベルAPIとアルゴリズムを理解してないと
最近話題になったイケてるWebサービス・アプリ12選（2016年1月編）
コピースロット 「コピースロット」は、3つのキャッチコピーの一部分を組み合わせて1つのキャッチコピーが作れるWebサービスです。 回っているスロットの部分をクリックするだけで、誰でも簡単に面白くてユニークなキャッチコピーを作成することができます。 つくったキャッチコピーは”#コピースロット“というハッシュタグと一緒にTwitterに投稿できます。一時期このハッシュタグが、Twitterのトレンド入りするなどして話題となりました。 ili（イリー） iliは、話した言葉を自動で音声翻訳をしてくれるウェアラブル翻訳デバイスです。 ボタンを押しながら話すと、自動的に外国語に翻訳してiliがそのまま喋ってくれるので翻訳者がすぐ隣にいる感覚になると言います。開発元は、指輪型のウェアラブルデバイスの「Ring」を開発したLogbar Inc.。ポイントとしては、ネットの接続が不要で翻訳することが可能だ
フロントエンド、サーバサイド、インフラの具体例
Webエンジニアの種類は、概ね フロントエンドエンジニア：見える部分を作る人 サーバサイドエンジニア：動的な処理を記述する人 インフラエンジニア：各種サーバ環境を整える人 に類別できる。 ただし、人によってその担当領域が異なるため、明確な線引はできない。 （サーバサイドエンジニアがインフラをやったりフロントをやることも大いにあり得る） 「クライアント・サーバ」の概念との関係付けをするならば、下記画像のようになると言えるが、普段そういうことを意識することはあまりない。 フロントエンジニア： 上記画像の「ビュー」に直接関与する部分を作成するエンジニア クライアントサイドに送るデータ（HTML、CSS、JS等）を記述するエンジニア サーバサイドエンジニア： 上記画像の「処理」部分を記述するエンジニア DBアクセス・各種ファイルへのアクセス・その他目に見えない動的な処理を記述するエンジニア インフ
次期「Safari 10.0」で新しく追加される機能まとめ
2016年後半にも登場が予定されているAppleの新OS「macOS」および「iOS 10」などの標準ブラウザとなる「Safari 10.0」の新機能や仕様がAppleの開発者向けページで公開されています。 Safari 10.0 https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html 【Web API】 ◆IndexedDBのサポート IndexedDBを実装することで、W3Cの勧告基準に完全対応。これにより、オフラインで使用するWebアプリケーションの構造データを保存するためおよび、クライアント側で大量のデータをキャッシュするリクエストを行うAPIを利用可能に。 ◆プログラマティックな切り取りとコピーに対応
Reactのバケツリレーの回避にJSX Spread Attributesを利用する
Appをルートコンポーネントとし、以下Child1 => Child2 => Child3といった階層構造となっているAppで受け取ったfooとbarという値をpropsを使って、一番下の階層のChild3まで渡している値がChild3まで渡ったら、それをChild3のコンポーネント上で表示する コードは以下のようになります。 import React, { Component } from 'react'; import { render } from 'react-dom'; class App extends Component { render() { return ( <Child1 foo={this.props.foo} bar={this.props.bar} /> ); } } const Child1 = (props) => <Child2 foo={props.fo
オンラインゲーム開発のいにしえの技術 | GREE Engineering
開発本部の堀口です。昨年は git による分散作業パターン を書き、つい先月は 札幌での講演 を行い、当文章ではゲーム開発の設計に関するネタです。 昔話交じりのポエムですが２０日目としてよろしくお願いします。 オンラインゲームとは 20 年ちかく前に Quake というゲームがリリースされ、一見すると単なる一人称視点のシューティングゲームにしか見えないが、プレイヤー自身の Quake の世界を公開し、来場者と遊ぶことができた。当時でいえば、自分のホームページに CGI 掲示板を設置するのと似ていたと思う。 Quake は、ゲーム世界のふるまいと世界の変化を伝える入出力が非常に良く分離されており、参加するプレイヤーはその世界の中に現れた自分の分身となるアバターの行動のみを制御し、アバターの目の代わりに世界の変化を、わずかな情報にしてプレイヤーに伝えた。プレイヤーの目の前にある端末では、その情
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ソーシャルゲーム開発における運用とそのツール
GlassFish 4.1 で始める Webサービス & MQ 通信―(2) JAX-WS - notepad
コンポーネント指向のUI開発時に起きがちな密結合・複雑化問題をStoreパターンで解決する
anime.js