"今" 使えるJavaScriptのトレンド
The document discusses various JavaScript tools and techniques. It covers topics like transpilers like CoffeeScript and Babel, module bundlers like Browserify, task runners like Grunt and Gulp, linting with ESLint, unit testing with Mocha and Assertions, MV patterns like Flux, and components with React. It provides links to documentation and resources for learning more about each topic.Read less
Babelで学ぶECMAScript6（入門編）
ECMAScript 6とは ECMAScriptとはJavaScriptの言語仕様の名称で、各ブラウザベンダーではこの仕様を元にJavaScriptランタイムへ実装を行っています。 2015年4月現在、策定済みの最新バージョンは5（ES5）ですが、次期バージョンとして仕様策定が進められているものがES 6（コードネーム：harmony）です。 2015年4月14日に最終草案（Rev38 Final Draft）がリリースされました。順調に進めば2015年6月頃には策定が完了して、ECMAScriptの正式な標準仕様として公開される見通しとなっています。 April 14, 2015 Rev 38 Final Draft ES6では構文の追加など非常に多くの言語仕様が改善されています。 今からES6で開発するには すでにES6の一部の機能はChromeやFirefoxで実装されていものも存
ES6構文の ... (Spread operator)と { prop } (shorthand property names)について - yutaponのブログ
昨日twitter見てたらこんなのが流れていまして Concatenating arrays in ES6: arr = [...a, ...b, ...c]; // ES6 arr = a.concat(b, c); // ES5 http://t.co/4scyTyhmIo— Axel Rauschmayer (@rauschma) 2015, 6月 3 何だこの書き方〜と気になったので調べてみた。 ... (Spread operator) この三点リーダーのことですが、よく...argsと書いているコードを見かけます。 あまり深く考えずに、argumentsが取得できるのかなと思ってたのですが、...のふるまいを知るとなるほどと思いました。 ...arr で arr(Array型)の要素をイテレートする 困ったときのMDNを見ると、こんなサンプルがあります。 こちらはES5 syn
CodeIQについてのお知らせ
2018年4月25日をもちまして、 『CodeIQ』のプログラミング腕試しサービス、年収確約スカウトサービスは、 ITエンジニアのための年収確約スカウトサービス『moffers by CodeIQ』https://moffers.jp/ へ一本化いたしました。 これまで多くのITエンジニアの方に『CodeIQ』をご利用いただきまして、 改めて心より深く御礼申し上げます。 また、エンジニアのためのWebマガジン「CodeIQ MAGAZINE」は、 リクナビNEXTジャーナル( https://next.rikunabi.com/journal/ )に一部の記事の移行を予定しております。 今後は『moffers by CodeIQ』にて、 ITエンジニアの皆様のより良い転職をサポートするために、より一層努めてまいりますので、 引き続きご愛顧のほど何卒よろしくお願い申し上げます。 また、Cod
jQueryを使わずに～したい、を調べられる逆引きリファレンス・「Plain JavaScript」 - かちびと.net
Plain JavaScriptはjQueryを使わずにDOM操作等を行う方法を調べることが出来る逆引きリファレンスサイトです。jQueryはJavaScriptに詳しくなくても容易にDOM操作を可能にしてくれましたが、様々なニーズに応えていったために肥大化しました。ちょっとしたDOM操作だけならわざわざ重いファイルを読み込まずに実装した方がパフォーマンスを損なわずに済みます。が、その方法がわからない、という方も少なくないかもしれません。そういった方の為に、jQueryを使わずに純粋なJavaScriptによるDOM操作の方法を調べられる、というもの。一部の方には便利な逆引きリファレンスサイトではないかなぁと思います。 Plain JavaScript
Polymer 1.0の挙動変更の影響 - Qiita
Polymerの1.0がリリースされました。今回は、AndroidとAndroid Ware、IoTの比重が大きく、ブラウザ関連の発表が少ないGoogle I/Oでしたが、Polymer 1.0はその中の貴重な発表の1つでした。 Polymerとは何か？ Polymerはフレームワークではなく、さまざまな他のフレームワークの「下」で使える拡張可能なHTMLのレイヤーです。コンポーネントという言葉やコンポーネント的なものはMithril.jsやReact、Angular.jsさまざまなWebMVCで登場しますが、コンポーネント同士の互換性はありません。WebComponentsはコンテナ船のコンテナ的な、どこでも使えるコンポーネントを提供します(コンテナ船のメタファーはGoogle I/Oの説明から)。 1.0は0.5とくらべて、Chrome上で3倍、Safari上で4倍になっているとのこと
ここ数年前から2015/5までのモダンフロントエンドを総まとめしてみた
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は
JavaScriptのグラフライブラリを52種類も集めた「JavaScript Graphs」。グラフの種類や依存ライブラリ、価格などで絞り込み可能
JavaScriptのグラフライブラリを52種類も集めた「JavaScript Graphs」。グラフの種類や依存ライブラリ、価格などで絞り込み可能 数年前に自作のアプリケーションをJavaScriptで作ったときにグラフ機能を実装しようとして、いくつかのグラフ用のJavaScriptライブラリを探して試したことがありました。JavaScriptライブラリを探すのは、それなりに手間がかかるものでした。 もちろん当時からJavaScriptのグラフライブラリの情報をまとめたサイトはいくつかありましたが、最近登場した「JavaScript Graphs」は52種類ものライブラリを集めて、ビジュアルに一覧できるようにしたサイトです。 さまざまな条件で絞り込みができる便利な機能も備えており、条件としては折れ線グラフやドーナッツグラフに対応したものなどグラフの種類、無料や有料、非商用のものなどの価格
Shibu's Diary: HTTP/2とES 6 Modulesで、concatはいらなくなるのか？
渋日記@shibu.jp 渋川よしきの日記です。ソフトウェア開発とか、ライフハックを中心に記事を書いていきます。 ES6 ModulesはHTTP/2によってconcat無しで使えるようになるのか サーバーサイドpushはまあ現実的に使えるのか難しいよね、サーバーサイドpushに夢求めすぎてたよねっていうのは一度は誰もが経験するところではあって、みんな夢は覚めたと思うけど、場合によっては使えるかもねと思うケースは1つあります。起点となるhtmlの最終更新日を見てそれよりも新しいファイルがあれば一括で送りつける、というのは可能かもと思います。サーバ側でシーケンシャルな日付のリストを用意しておけば難しくないですし。ただ、ダウンロード失敗等を考えると、前回ダウンロードに成功したファイルの中の一番新しいファイルの更新日時を送ればより安全かなぁ、と思います。index.htmlがサーバで動的生成され
はじめてのTypeScript開発環境構築（gulp, bower, webpack, tsd, npm）
はじめてのTypeScript開発環境構築（gulp, bower, webpack, tsd, npm） TypeScriptで開発しようとしたとき、いろんな問題にぶつかった。 もともとSIerではVisual Studioさえあればなんとかなる環境で育ってきたため、Web系のさまざまなツールを導入する上で何度も挫折した。 ということで、初心者（私）が初心者向けに「はじめてTypeScriptの開発環境（gulp + bower + webpack + tsd + npm）を構築するときの手順とポイント」についてまとめていこうと思う。 ツールの使い方間違っているよなどの指摘がありましたら、コメントやTwitterで教えてください。 この記事の目標 TypeScriptで開発したい ライブラリも使いたい（今回はjQueryを例にする） Web界隈のツールにも慣れたい 使用するツール（ツール
angularJS と jQuery に関する誤解を解く - nazokingのブログ
最近 angularJS に対する期待の低下が著しくてつらい。 なんだかんだで SPA から jQuery に戻った話 - ボクココ Angularの問題では はてなブックマーク - mizchi のブックマーク - 2015年5月18日 みんな使いどころを間違ってるんや。１年半くらい使ってて不満もあるけど自分のよく使う範囲では angularJS 最強だと思う。 angularJS が向いてるのは Single Page Application ではない angularJS が向いてるのは ◎ フォームのような細かい部品を多用 ＆ DOMツリーとデータスコープがほぼ一致していてユーザの入力をサーバに送ったりする webアプリ。管理画面、マイページ、業務アプリなど △ Single Page Application ← 簡単に作れるけどページ間の連携が必要ないならサーバ側で分けてしまった方
Chrome DevToolsを使ってJavaScriptのメモリリークを検出し、解消する - 人生dat落ち
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
連載 | パフォーマンスチューニング | HTML5Experts.jp
Webサイトやモバイルアプリなどのパフォーマンスチューニングについて、豪華エキスパート執筆陣が幅広く解説していきます。
デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド
クロージャ - JavaScript | MDN
function init() { var name = "Mozilla"; // name は、init が作成するローカル変数 function displayName() { // displayName() は内部に閉じた関数 console.log(name); // 親関数で宣言された変数を使用 } displayName(); } init(); init() 関数はローカル変数 name を作成し、それから関数 displayName() を定義しています。displayName() は init() の中で定義されている内部関数で、その関数本体の内部でしか利用できません。displayName() 自体はローカル変数を持っていませんが、外側のスコープで宣言された変数にアクセスできるので、displayName() では親関数 init() で宣言された変数 name を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Edit fiddle - JSFiddle - Code Playground
圧縮/難読化されたJavaScriptファイルのgit diffをみやすくする - Qiita
Hello, ES6 ~これから迎えるJSのミライ~ - @yoshiko_pg
React概論
shwups-cms.ch