JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
ECMAScript 6 compatibility table
V8 SpiderMonkey JavaScriptCore Chakra Carakan KJS Other ⬤ Minor difference (1 point) ⬤ Small feature (2 points) ⬤ Medium feature (4 points) ⬤ Large feature (8 points) Compilers/polyfills Desktop browsers Servers/runtimes Mobile Feature name Current browser ES6 Trans- piler Traceur Babel 6 + core-js 2 Babel 7 + core-js 2 Babel 7 + core-js 3 Closure 2020.09 Closure 2021.08 Closure 2021.09 Closure 20
ES6 チートシート | POSTD
日々の仕事の中で役に立つES2015（ES6）のティップス、コツ、ベストプラクティス、プログラムの見本をご紹介します。コントリビューション歓迎です！ 目次 var vs. let / const IIFEからブロックベースへ アロー関数 文字列 デストラクチャリング モジュール パラメータ クラス シンボル マップ WeakMaps Promises ジェネレータ Async/Await var vs. let / const var の他に、値を格納する let と const という識別子が新たに追加されました。 var とは異なって、 let と const はクロージャのスコープ内で最初に記述されることはありません。 var の使用例です。 var snack = 'Meow Mix'; function getFood(food) { if (food) { var snack
知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ！ 毛根にはこれからもがんばってほしい！いつだって頭を温かいまなざしで見守
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
Homepage | GSAP
GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff. GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff.
ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」第2回は、JavaScriptの高速化について、まずは前編、後編に渡ってユーザーの体感速度を向上させるための方法を紹介します。JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性について詳しく解説します。 今回から複数回に分けて、JavaScriptの高速化をテーマに解説していきます。まずは、ユーザーの体感速度を高めるためのJavaScriptチューニングということで、単純なJavaScriptの構文によるスピードを比較するようなものではなく、主にユーザー視点からの高速化を主眼に解説します。その中で、同期・非同期といったJavaScriptの仕組みやscript要素のasync属性、defer属性などについても触れていきます。 ユーザーの体感速度を向上させる 一概にJavaScriptの高速化といっ
scroll, resizeイベントの負荷を抑制する
Updated 2015.05.29 / Published 2013.11.21 特定の場所までスクロールしたら要素を表示させたり・動かしたり、またはリサイズに応じてレイアウトを再調整したりなど、JavaScriptではscrollやresizeに応じたイベントが頻繁に用いられますが、これらのイベントは断続的に処理を実行することになるので、制作者の意図せぬ形でユーザ側では負荷の高い処理になっているかもしれません。そこで、ちょっとの工夫だけでこれらのイベントの負荷を抑制できるポイントを紹介します。 スクロール時におけるサンプルコード try { //IE9+, Other Browsers window.addEventListener( 'scroll', sample, false ); } catch (e) { //for IE8- window.attachEvent( 'ons
【JavaScript】webサイトのレスポンスが悪くなってしまう前に知っておきたかった記事まとめ。 - k n note
webサイトにダイナミックな仕掛けを施したい！と思った時って、JavaScriptやjQueryを使って「scroll」や「resize」のイベントで発火する処理を書いたりしますよね。 それで、いくつかのエフェクトを実装した後に、「あれ、サイトがもっさりしてる」と感じた経験ありませんか。 そんな経験がある方にはきっと活きる。JavaScriptやjQueryの処理を改善するために知っておきたいTipsを紹介します。 （僕がためになった記事のまとめですので、網羅的ではありません＞＜） ブラウザに思い通りのスタイリングが描写される仕組み JavaScriptをバリバリにチューニングする記事や、描写遅延が起こっている理由に触れる前に、 どうやってブラウザにCSSなどの描写が反映されるのかを教えてくれる記事を紹介します。 これを知ってるかどうかで、局地的だけじゃなくてもう少し広い視野で速度改善に取
IE の window.resize イベントの問題を回避する - latest log
IE の window.resize イベントは、いくつかの問題を抱えています。 function onresize() { (何か) } window.attachEvent("onresize", onresize); うっかり無限ループする(無限に再描画が走る) 重い(特にIE6) 解決していきましょう。 無限ループ/無限リドロー問題 resize イベントハンドラの中で、document.body.innerWidht, innerHeight が変化するような操作を行うと、再度 resize イベントが発生し無限ループする現象が発生します(無限リロリロ)。 無限リロリロを回避するために、resize イベントハンドラ内でイベントをデタッチし、再アタッチを繰り返す方法があります(リアタッチ作戦) function onresize() { window.detachEvent("o
Milkcocoa | リアルタイムアプリ・IoTやるならMilkcocoa
What's Milkcocoa? Milkcocoaを利用すると、自前でサーバを準備せずに弊社が提供するクライアントSDKを介してデータの保存、更新、取得またPub/Sub通信を行うことが出来ます。通信はTLS暗号化され、保存されたデータは自動的にレプリケーションされます。クライアントからの通信はErlangサーバにて処理され、多くのトランザクションに対応することが出来ます。 例えば以下のコードは、Milkcocoaのデータストアにデータを保存する例です。保存したデータはMilkcocoaの管理画面で確認することができます。データは、Milkcocoaのデータベースに保存されるため、データベース用のサーバーを用意する必要はありません。 var milkcocoa = new MilkCocoa('app_id.mlkcca.com'); var dataStore = milkcocoa
[JS]レスポンシブ対応、画像の配置を文字のツラにぴったり揃えるスクリプト -Baseline Element
画像やテキストなど、コンテンツのデザインで重要なのは縦のリズム。 ページ上の指定した要素を文字のベースラインにツラをあわせて配置し、縦のリズムを簡単にデザインできるスクリプトを紹介します。 デモのように罫線を背景にした時には、画像・文字ともに罫線に揃えることも簡単です。
![[JS]レスポンシブ対応、画像の配置を文字のツラにぴったり揃えるスクリプト -Baseline Element](https://cdn-ak-scissors.b.st-hatena.com/image/square/377f2ddc69b2ef9572766d48a6b972e09609fa5a/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015110601.png)
[JS][jQuery] 要素の存在を確認する6通りのコードと実行速度 | きほんのき
JavaScriptまたはjQueryを使い、html要素が存在するかどうか調べる方法はいくつかあります。 jQueryを使ったやり方については、こちらで5つの方法が紹介されています。以下は三項演算子で短く書きなおしたものです。 ( $("selector")[0] )? "有" : "無"; ( $("selector").length > 0 )? "有" : "無"; ( $("selector").get(0) )? "有" : "無"; ( $("selector").size() )? "有" : "無"; ( $("selector").is() )? "有" : "無"; これに加え、IDが設定されている要素の有無を調べるのなら、jQueryを使わずJavaScriptのみで以下のように書くのも良いでしょう。 ( document.getElementById("id")
XFBML Parsing - JavaScript用Facebook SDK - ドキュメンテーション - Meta for Developers
JavaScript SDK: FB.XFBML.parse() This function parses and renders XFBML markup in a document on the fly. This could be used if you send XFBML from your server via ajax and want to render it client side. XFBML enables you to incorporate FBML into your websites and IFrame applications. You can use this function to re-render social plugins using either the XFBML syntax (e.g. <fb:like>) or the HTML5 s
JSLintを使おう！（基本解説とオプション一覧）｜もっこりJavaScript｜ANALOGIC（アナロジック）
概要 JSLintの基本的な使い方 オプション一覧 JSLintを使うときの心構え ここではJavaScriptコードの品質チェックツール「JSLint」について紹介します。 JSLintはWebベースのツールなので、ブラウザがあればすぐにでも利用することができます。 JSLintは、私たちのJavaScriptコードの検証を行い、推奨されない書き方（アンチパターン）や構文エラー、使用されていない変数、未定義の変数の使用といった潜在的な問題が見つかった際に警告してくれます。 コードをJSLintでチェックすることはとても推奨されているそうですよ。また、JSLintはJavaScriptのコードチェックツールとして、デファクトスタンダード（事実上の標準）になっていると思われます。 このブログではコーディングの作法などについても触れていこうと思うのですが、兎にも角にもまずはこのツールを使う「癖
配布用埋め込みタグ開発の注意点 (iframeまわり) - Qiita
<div id ='hoge'></div> <script type="text/javascript"> (function() { var js = document.createElement('script'){ js.async = true; js.src = '//yourOrigin/hoge.js'; document.getElementsByTagName('head')[0].appendChild(js); })(); </script> 要するに、各サイトに//yourOrigin/hoge.js を読み込んでもらいます。 hoge.js は$('#hoge') 内にiframeを作成して埋め込みたいコンテンツをロードしたり、子フレームからのイベントのハンドリングをしたりします。 以下、注意点をつらづら書いておきます cross origin 異なるドメイン間
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1216彩票-官网平台
CoffeeScriptとJavaScriptやPythonやRubyの文法の比較 - Qiita
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
http://jsgirls.org/
