サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
JavaScript苦手・・という状況からJavaScript好きになれるロードマップ（多分） 全編ほぼ動画なので、とっても見やすい。挫折しづらい。 全体的な流れとしては、動画見る ▶︎ コードを書いて学習の流れです 個人的に好きなエンジニア系Youtuberのお二人の動画がメインになりますYahoo!出身のエンジニア しまぶーのIT大学さん Web万屋エンジニアチャンネルさん LEVEL ☆JavaScriptってなに？ そもそもJavaScriptって何？フロントエンドって何してるの？ってレベルを解消フロントエンド基礎編 / 約40分 LEVEL ★JavaScript入門編JavaScriptをマスターするならHTMLを知っておかないかん by 弊社マネージャーHTMLの基礎から、JavaScriptの全体像を学習できます。HTML入門編 / 約43分JavaScri
ReactのConcurrent Modeが最初に発表されたのはもう1年近くも前のことです（記事執筆時点1）。Concurrent Modeはたいへん奥深い機能で正式版がたいへん待ち遠しいですが、Concurrent Modeの代名詞として多くのReactユーザーに知られているのはPromiseをthrowするというAPIデザインです。Concurrent Modeでは、コンポーネントがレンダリング時にPromiseをthrowすることで、レンダリングをサスペンドした（Promiseが解決されるまでレンダリングできない）ことを表します。 Concurrent Modeに関しては筆者の既存記事Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理などをご参照いただきたいのですが、ここではPromiseをthrowするということ自体に焦点
こんにちは、虎の穴ラボのH.Kです。 今回はChart.jsで可変の表示要素に対していい感じの色を割り当てる方法をご紹介します。 この記事で解決する課題 取得したデータによって比較対象に当たる要素数が可変になるようなグラフ（Chart.js）に綺麗に色をつける 自動で色を割り振った完成形 Chart.jsとは 簡単にグラフを描画できるライブラリです。 パラメータで受け取った値を元にキャンバス要素にグラフを出力してくれます。 円グラフ、折れ線グラフなど多くの形式で表示することが可能です。 また、自動で縦軸や横軸の値を調整してくれるので、値さえ用意すれば簡単に出力できるのが魅力です。 社内で使用しているツールのグラフ表示に使用しています。 www.chartjs.org 解決方法 早速、解決方法ですが、以下の手法を取ることにより解決しました。 HSL色空間を用いる 要素数から色相の角度を計算し
JavaScriptライブラリー「ParticleJS」を公開しました。「ParticleJS」は大量の粒子（パーティクル）の表現を行うためのライブラリーで、ゲームの演出やスペシャルコンテンツなどの表現制作に役立ちます。HTML Canvasとして動作するので、デスクトップ・モバイルを問わずどのブラウザーでも動作します。 また、「Particle Develop」という専用のデザインツールも用意しています。このツールを使うと直感的な操作でデザインでき、出力したパラメーターを「ParticleJS」にコピペで読み込めます。デザイナーが作成したパーティクル演出をエンジニアが利用するといった連携を想定してます。 MITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。 ParticleJ
コンストラクター ResizeObserver() 新しい ResizeObserver オブジェクトを作成して返します。 インスタンスプロパティ なし。 インスタンスメソッド ResizeObserver.disconnect() 特定のオブザーバーの監視対象の Element をすべて監視解除します。 ResizeObserver.observe() 指定された Element の監視を開始します。 ResizeObserver.unobserve() 指定された Element の監視を終了します。 例 resize-observer-text.html （ソースを参照）の例では、スライダーの値が変更され、それを含む <div> の幅が変更されると、リサイズオブザーバーを使用してヘッダーと段落の font-size を変更します。これは、ビューポートに影響がない要素のサイズの変化にも
ScrollOut detects changes in scroll for reveal, parallax, andCSS Variable effects! Install with npm i scroll-out -s or Download .zip Feature Rich UseJavaScript callbacks,CSS selectors, orCSS Variables to animate elements in and out. You can evencreate sticky headers. Ridiculously Small At about 1kb minified and gzipped, this packs a whole lot of features into a small package. Progressively En
# What is ScrollOut? ScrollOut is aJavaScript microlibrary that detects scroll/resize changes in the browser and assigns attributes and liveCSS Variables to the scrolling element and a list of targets. The ScrollOut library does not handle anyanimation, butit gives you the elements and tools needed tocreateanimations &transitions withJavaScriptanimation libraries or onlyCSS! The general
この記事はJavaScript2 Advent Calendar 2018 の1日目の記事です。 こんばんは。@diescake です。 今年は、JavaScript 経験の浅い新人さんや外注さんをリードする立場として、 とにかく幅広いメンバーのコードレビューをする機会に恵まれたのですが、 事ある毎に Array.prototype.forEach を利用する人が多かったため、初心者向けに要点を整理してみました。 以下 ES2015 以降のバージョンをサポートするブラウザ、あるいはpolyfill を利用していることを前提としています。 結論 配列に対して何らかの操作を行う際は、 filter, find,map, reduce などのメソッドを利用できないか検討し、 いずれのメソッドでも実現ができない場合の最終手段として forEach を選択しましょう。 下記に、いくつかのサンプ
JSDoc でAPI ドキュメントを生成する方法と、一部のドキュメンテーションタグの使い方についてメモする。 環境 OSWindows7 64bitJava 1.7.0_51JSDoc 3.2.2 インストールJava Mozilla Rhino を使った方法でドキュメントを生成するので、Java が必要。 インストール方法は割愛。JSDoc 3GitHub からダウンロードできる。 tags から v3.2.2 を選択して、zip でダウンロードする。zip を解凍したら、解凍後のフォルダにパスを通し、コマンドラインからヘルプを表示できることを確認する。 >jsdoc --help OPTIONS: -t, --template <value> The path to thetemplate to use. Default: path/to/jsdoc/templa
ウェブでオーディオファイルを扱うのは「正気の沙汰ではない（要出典）」と言われており、Web AudioAPIやHTML5 Audio（HTMLMediaElement）を見ると、確かにそっ閉じしたくなる感じです。 そんなオーディオファイルの読み込みからブラウザごとの再生できるファイルの判定など、面倒な処理を任せてしまえるオーディオ関連のJavaScriptライブラリHowler.jsを紹介します。 公式サイト（サンプルあり）：howler.js -JavaScript audio library for the modern web リポジトリ：howler.js -GitHub 使い方 npmなら
先日、私のプロジェクトで脆弱性関連のissueが投稿されたので対策を行いました。 指摘内容は主に「プロトタイプ汚染攻撃」でした。自分では対策を行っていたつもりだったのですが、様々な穴がありました。 プロトタイプ汚染攻撃可能な脆弱性は成功すると他の機能や脆弱性との組み合わせによって、任意のコード実行を可能にする危険度の高いものですが、XSSやCSRFに比べて、初学者が触れられる纏まった対策方法の情報が少ないと感じたので、ここに記そうと思います。 プロトタイプ汚染攻撃とは 日本語の情報としては Node.jsにおけるプロトタイプ汚染攻撃とは何か - ぼちぼち日記 が詳しいですが、まず、前提として、JavaScriptは「プロトタイプベースのオブジェクト指向」を採用しており、原則、すべてのプリミティブ型およびオブジェクトのインスタンスは「プロトタイプ」オブジェクトを参照しています1。 また、プロ
目次 自動セミコロン挿入(Automatic Semilocon Insertion) Restricted Production ASIの害 セミコロンにまつわる論争 で、どっちがいいの?JavaScriptには、 自動セミコロン挿入 という機能があり、行末でセミコロンを省略しても、多くの場合文法的に問題ありません。 しかしながら、JavaScript: TheGood Parts などで指摘されているように、自動セミコロン挿入は有害な機能であるため、JavaScriptのステートメント末尾には必ずセミコロンを付与するというのがフロントエンドエンジニアの共通認識だと思っていました。1 ところが、Bootstrap に含まれるJavaScriptコードを見てみると、基本的にセミコロンが使用されていません。 調べてみると、どうも世の中にはJavaScriptのステートメント末尾にセミ
むかし同じチームだったひとに、JavaScript のセミコロンを省略する派のひとがいて、他の人と「もう日本語かくとき句読点も省略すればいいじゃないの」とか、散々いっていた。でも実はGitHub も省略派らしい。GitHub のJavaScript Styleguide は、まず最初の「新しい JS は CoffeScript で書け」にびっくりするのだけど、さらに読み進めていくと、既存のJavaScript について「なるだけセミコロンは使うな」とある。 Do your best to never use a semicolon. This means avoiding them atlinebreaks and avoiding multi-statementlines. For more info, read Mislav'sblog post. 出来る限りセミコロン
フロントエンドチームの @urahiroshi です。Mercari Advent Calendar 2018 12日目を担当します。 今年の8月から12月にかけて，メルカリ・メルペイのフロントエンドチーム有志で「超速！Webページ速度改善ガイド」の社内輪読会を行いました。 この本の中で，「推測するな，計測せよ」という言葉が紹介されていますが，今回の記事は，輪読会で学んだことのまとめとして，Chrome DevToolsを用いてメルカリWebのパフォーマンス計測と簡単な分析を行ったものです。 なお，現在メルカリWebのアーキテクチャを刷新するための開発が進んでいるため，ここで計測したパフォーマンスの値は大幅に変化していく可能性が高いです。アーキテクチャの刷新後に振り返って見られる楽しみが増えることも、この記事を書いた目的の一つです。 計測方法，環境 計測はGoogleChrome 71.
Mercari Advent Calendar 2018 の6日目はフロントエンドチームの @vwxyutarooo がお送りします。 このタイトルが言いたくて Micro Frontends の記事を書きました。皆さんは Micro Frontends という言葉を聞いたことがあるでしょうか? 私は数ヶ月前まで全く知りませんでした。メルカリのフロントエンドチームにて Micro Frontends に関して考える機会があったので、Micro Frontends とはなんなのか。何をどのように解決しようとしているのかという内容を紹介します。 Micro Frontends とは Micro Frontends という考え方は ThoughtWorksTechnology Radar にて2016年に初めて登場したと言われています。日本語で言うときは複数形は無視して "マイクロフロントエン
こんにちは！dely でフロントエンドエンジニアをしている @all__user です。 この記事は dely Advent Calendar 2018 の8日目の記事です。 Qiita: https://qiita.com/advent-calendar/2018/dely Adventar: https://adventar.org/calendars/3535 昨日は、iOSエンジニアのほりぐち（ @takaoh717 ）が「iOS版クラシルの開発からリリースまでの流れ」というタイトルで投稿しました。tech.dely.jp iOS 版 kurashiru の開発体制の遍歴がよく分かるような内容となっていますので、ぜひチェックしてみてください！ はじめに ここ一年間で Web 版 kurashiru のフロントエンドはRails からVue の SPA へと少しづつ置き換えられ
PlotlyJavaScript Open Source Graphing Library Built ontop of d3.js and stack.gl, Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, andSVGmaps. plotly.js is free and open source and you can view the source,report issues or contribute onGitHub. Plotly Studio: Transform any dataset into an interactive data
$(function () { var e; $(".show-hide").eq(0).show(), e = 1, setInterval(function () { var t; t = e - 1, 0 > t && (t = $(".show-hide").length - 1), $(".show-hide").eq(t).hide(), $(".show-hide").eq(e).show(), e++, $(".show-hide").length <= e && (e = 0) }, 1000) }) 今時jqueryかよとか言わずにお付き合い頂けますと... まだ結構保守の現場だと普通なんですよね。 内容は show-hideクラスのついた要素を1000ms間隔で順番にshow/hideしていくというもの。 何が困ったかって、そう読めなかったのである。 問題部分は長った
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
