付録: JavaScriptチートシート JavaScriptの言語機能に関するチートシートです。 言語機能 コメント データ リテラル 文字列 データアクセス 演算子 関数と挙動 コントロールフロー モジュール その他 ガイド プロジェクト構造 言語機能 コメント コメントの書き方について。
JavaScript Primer - 迷わないための入門書
付録: JavaScriptチートシート JavaScriptの言語機能に関するチートシートです。 言語機能 コメント データ リテラル 文字列 データアクセス 演算子 関数と挙動 コントロールフロー モジュール その他 ガイド プロジェクト構造 言語機能 コメント コメントの書き方について。
モダン JavaScript チートシート
Skip to the content. モダン JavaScript チートシート 画像クレジット: Ahmad Awais ⚡️ イントロダクション 動機 このドキュメントはモダンなプロジェクトでよく見られる JavaScript のチートシートと最新のサンプルコードです。 このガイドは読者に JavaScript をゼロから教えるものではありません。 基礎知識は持っていて、モダンなコードベースに慣れる（例えば React を学ぶ）のに苦労している開発者を助けるためのものです。 説明の中で JavaScript の諸概念が使われています。 また、議論の余地のあるポイントについてときどき個人的な tips を載せますが、その際はあくまでも個人的なおすすめであることを述べるように気をつけます。 メモ: ここで紹介されている概念のほとんどは JavaScript 言語のアップデート（ ES2
（JavaScript）即時関数の形にモヤモヤしているあなたに - Qiita
仲間内で行った説明が好評だったので、Qiita用に纏めてみました。 即時関数って？ 通常の関数は、あらかじめ定義しておいて後で実行する形をとりますね。対して即時関数は、その名の通り関数定義後にそれを即実行するものです。無名関数でこのメソッドを使用することによって、名前空間の汚染を気にせずに変数を使えるといったメリットがあります。以下のような書き方が主流だと思います。
JavaScriptのES2021で追加された新機能まとめ
2022/06/22追記 最新仕様ES2022がリリースされたので、新しく記事を書きました。 JavaScriptの仕様はECMAScriptで、ECMAScript 2015（ES2015）、ECMAScript 2016（ES2016）...というように毎年進化を続けています。 これまでの仕様はES2020でしたが、先日2021年6月22日にES2021が正式仕様として承認されました。 22.06.2021 Ecma International approves new standards - Ecma International ブラウザ対応も完了しており、全モダンブラウザ（Google Chrome・Firefox・Safari・Microsoft Edge）でES2021の全機能が使えます。 本記事では、ES2021すべての新機能をまとめて紹介します。 大きな数値を_区切りで書け
JavaScriptを単体テストする流行りのフレームワークJestを試してみる - Qiita
Jestとは JestはJavaScriptの単体テストのフレームワークです。 https://jestjs.io/ja/ テストランナーだけでなく、モック機能やカバレッジの取得を使用することができます。npmのトレンドとしては２０１９年から伸びてmochaを超えるものとなっています。 https://www.npmtrends.com/jest-vs-jasmine-vs-mocha-vs-qunit この記事は公式のサンプルコードを弄ってその挙動を確認するものとなっています。 また、実験環境は以下の通りです。 OS:MacOS Catalina 10.15.6 node.js: v14.10.1 簡単なはじめ方 jestを使用するためにnode.jsのプロジェクトを以下のように作成します。 # package.jsonを作成する npm init -y # package.jsonにj
Babel · The compiler for writing next generation JavaScript
Babel is a JavaScript compiler.Use next generation JavaScript, today. Babel 7.24 is released! Please read our blog post for highlights and changelog for more details!
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
モダンJavaScript概論 − Node, npm, ECMAScript, Babel, Webpack | Hypertext Candy
2020.04.30 モダンJavaScript概論 − Node, npm, ECMAScript, Babel, Webpack この記事では、モダンな JavaScript を書くための前提として知っておくべき、いくつかのキーワードを紹介します。想定読者は、初心者 〜 jQuery なら書けるレベルの開発者です。これから React や Vue.js を学びたい方、または Web 開発の世界に飛び込む新人さんなどの学習の助けになれば、と思います。 「モダン」な JavaScript ここで言う「モダン」とはどういう意味でしょうか？ 「モダン JavaScript」という表現は数年前から目にしますが、大抵 ES2015（JavaScript の 2015 年バージョン）以降の JavaScript を指しているようです。確かに、const / let やアロー関数などの文法的な改善、A
JSer.info
JSer.info #702 - typescript-eslint v8がリリースされました。 Announcing typescript-eslint v8 | typescript-eslint ESLint 9のサポー...
ボックスを満たした写真を表示·imgLiquid MOONGIFT
imgLiquidはボックスを満たす形で写真を表示するJavaScriptライブラリです。 四角い枠の中に画像を表示する場合、上下左右の大きさが合わないと空白ができてしまいます。それは致し方ないのかと思っていましたが、imgLiquidを使うとかっこうよく解消してくれます。 上がTrue、下がFalseにした結果です。いい具合に隙間がなくなっているのが分かります。 オフにした時は上下左右のいずれかに隙間が空いてしまうのに対して、imgLiquidを使うと画像をぴったり埋めるように表示されます。余計な空間がなくなるだけで随分すっきりとした印象になるのではないでしょうか。 imgLiquidはJavaScript/jQuery製のオープンソース・ソフトウェア（GPL/MIT License）です。 MOONGIFTはこう見る スマートフォンが広まるのにあわせて写真コンテンツが増加しています。そ
Googleマップをもっと簡単に使おう·gmaps.js MOONGIFT
gmaps.jsはGoogleマップを使いやすくするJavaScriptライブラリです。 GoogleマップではJavaScriptのAPIも提供されていますが、使い勝手が良いとは言えません。活用していくならばもっと使いやすいgmaps.jsを利用しましょう。 まず普通の表示。GMapsに位置情報を渡すだけです。超簡単。 イベントも取れます。クリックやドラッグなど様々なイベントが使えます。 マーカーの追加も分かりやすいです。マーカーにイベントをつけるのも簡単。 HTMLコンテンツを表示するのも手軽です。 HTML5の位置情報取得にも対応しています。 住所を検索してジオコーディング。 ドローです。指定は大変ですが。 オーバーレイ表示です。 ルート検索です。二つの位置情報を渡すだけです。 ルート検索をさらにポイントごとに表示していくこともできます。 こちらは静的なマップ。画像として表示できます
1行のコードで既存のテーブルにソート機能を追加·Table Sorting MOONGIFT
Table Sortingは既存のHTMLテーブルにソート機能を追加するJavaScriptライブラリです。 業務システムなどでテーブルを表示すると常に足らない機能を求められます。その第一が並べ替え機能でしょう。DBを操作しても良いですが、もっと単純に解決したいならTable Sortingを使ってみても良さそうです。 デモです。 カラムのクリックでソートが実行されます。 金額部分もきちんとソートされます。 JavaScriptのコードです。単純にクラスを指定するだけ。 HTMLのコードです。数値部分にも特に設定を行っていないところに注目。 Table Sortingは既存のテーブルを渡すだけで自動的にソート機能を追加してくれます。オブジェクトの型も判断して並び替えてくれるので手間いらずです。 Table SortingはJavaScript製、GPL v3のオープンソース・ソフトウェアで
HTMLのリスト、テーブルをソート、フィルタリング、検索可能に·List.js MOONGIFT
List.jsはリストやテーブルを検索やソート可能にするJavaScriptライブラリです。 HTMLではよくリスト表示やテーブル表示を行います。一旦表示したデータを並べ替えたり絞り込んだりできる便利なライブラリがList.jsです。 基本のサンプルです。データがリストになって並んでいるのが分かるかと思います。 名前でソートしました。 カテゴリで絞り込んで表示しています。 検索です。インクリメンタルに絞り込まれます。 こちらはテーブルのサンプル。行ごとに削除、編集が出来ます。 曖昧検索です。多少文字が違っていても絞り込んでくれます。 データを動的に生成するサンプルです。1,000行程度であれば77msで生成できます。 検索です。こちらは12ms。高速です。 List.jsはデータをJSONで渡すことも、素のHTMLを対応させることもできます。検索で絞り込んだりデータを追加、編集するのも容易
JavaScriptを使ってExifデータを読み取る·exif.js MOONGIFT
exif.jsはJavaScriptを使って写真のExifデータを読み取るライブラリです。 スマートフォンの普及によって写真データをオンライン上に扱うケースが増えています。そんな写真のメタデータであるExifをJavaScriptで扱ってしまおうというのがexif.jsです。 サンプルです。写真を指定するとそのExifから位置情報を読み取ってGoogleマップにマーカーを立てています。 コードです。FileReaderでデータを読み取った上で解析しています。 exif.jsは位置情報のみならずホワイトポイントやフラッシュ、シャッタースピードなどExifで取得できるデータが網羅されています。これだけのデータが取れれば、面白い使い方が考えられそうです。 exif.jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFT
画像を生成せずにサムネイル風に小さな画像を表示·jQuery NailThumb MOONGIFT
jQuery NailThumbはWeb上でCSSによる画像サムネイル風表示を実現するjQueryライブラリです。 Webサイトで画像を縮小して表示したい場合、ImageMagickなどのサーバサイドの技術を使うのが一般的です。しかしjQuery NailThumbを使えばクライアントサイドだけで高度なサムネイル風表示を実現します。 デモです。左側が元画像、その右側にサムネイル化した画像が表示されています。 正方形の他に縦横比の固定、横幅優先といった指定もできます。 縦長の画像の場合、横幅優先にすると自動的に左右に空白が入ります。 こちらは切り取りです。 他にもサンプルが多数あります。 画像の量にもよりますが思ったよりも負荷は少ないように感じられます。jQuery NailThumbはCanvasで画像生成という訳ではなく、CSSを使って画像を擬似的に縮小表示しています。その際の配置やサイ
Hatena-Textbook/javascript-event-driven.md at master · hatena/Hatena-Textbook · GitHub
JavaScript によるイベントドリブン アジェンダ JavaScript の言語について DOM について イベントについて jQuery について MVC アーキテクチャについて まずはじめに Just moment! Web で JS を使うとき、HTML の知識が前提となることが多い http://www.kanzaki.com/docs/htminfo.html 少なくとも「簡単なHTMLの説明」は押さえておきたい。 目的 講義時間は限られているので JS を学ぶ上でとっかかりをつかめること リファレンスを提示します。概念を理解 言語的部分、DOM 及びイベントドリブンなプログラミング 覚えようとするとクソ多いのでリファレンスひける部分は覚えない JS とはどんな言語であるか? 基本クライアントサイド=ブラウザで動く 実装がたくさんある はてなのエンジニアはみんな誰もがある程
JavaScriptだけで作られたInstagramビューワー·instagram.js MOONGIFT
instagram.jsはHTML/JavaScriptのみで開発されたInstagramビューワーです。 写真が大好きな人たちがたくさん集まっているInstagram。そんなInstagramのWebベースビューワーがinstagram.jsです。 トップページです。JavaScriptだけで認証できます。 Instagramの認証です。 戻ってきました。 こちらは大きな写真とサムネイル一覧のビューワーです。 instagram.jsはiOSアプリのInstagramを真似たWebアプリケーションです。面白いことにサーバサイドの仕組みはなく、JavaScriptだけで動いています（OAuthもJavaScriptのみです）。サーバサイドがなくともここまで出来るのか、と思える面白いソフトウェアです。 instagram.jsはHTML/JavaScript製のソフトウェア（ソースコードは公
HTML5でゲームを作ろう。アクションゲームに向いたフレームワーク·EntityJS MOONGIFT
EntityJSはアクションゲーム開発に向いたHTML5/JavaScriptゲームフレームワークです。 EntityJSはJavaScriptを使ったゲームを開発するためのフレームワークです。アクションゲーム開発に向いているようです。 デモのゲームです。 矢印キーで移動したりジャンプします。 ちょっと複雑なステージです。梯子は上矢印で登れます。 針に当たると死んでしまうので注意。 EntityJSの特徴としてはフレームワークがRubyで提供される点にあるでしょう。そしてゲームのベースを生成したり、テストしたりサーバになったりするのをRubyが行います。チュートリアルも揃っているので試してみたいと言う方はぜひ。 EntityJSはRuby/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る JavaScriptのゲームはまだまだ発
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptが辿った変遷 - Qiita
http://harmonic.me/blog/?p=139