サイ本こと『JavaScript 第6版』全800ページを読破し、1万行のesaにまとめてわかった5つのこと - #がみぶろ
しがないラジオのgamiです。 JavaScript界隈では有名な、オライリーのサイ本こと『JavaScript 第6版』という鈍器、もとい書籍を読みました。 JavaScript 第6版 作者: David Flanagan,村上列出版社/メーカー: オライリージャパン発売日: 2012/08/10メディア: 大型本購入: 12人 クリック: 252回この商品を含むブログ (18件) を見る 2012年に発行された、約800ページもある、かなり内容の多い本です。 僕は本を読むときにesaに要約しながら読み進めるのですが、サイ本のまとめesaは全体で「約1万行」という修行みたいな分量になっていました。 サイ本、3年越しくらいでやっと読み終わったあああああ！！！esaにまとめながら読んでたけど、コードも含めて約23万字、1万行の分量になっててesaが悲鳴あげてたw今度感想ブログ書く。多くの人
frontend-tooling-survey-2018-results#js-knowledge
Front-end development Blog and Portfolio for Ashley Watson-Nolan – Senior UI Engineer at Just Eat Update 12/09/2019 The results for the 2019 edition of the Front-end Tooling Survey are now available. If you'd like to view them, check them out here. Update 25/07/2018 Since publishing the initial results, I've updated the survey after receiving 5,461 responses and updated the article and results dat
WebデザイナーのためのVue.js事始め
WebデザイナーのためのVue.js事始めVue.jsはサクッと小さく始められるJavaScriptのフレームワークです。「びゅー」と読みます ;) これまでWebデザイナーがjQueryで作成したような動きもVue.jsでも加えられるのですが、jQueryとは違ってHTMLに条件文を加えたり、アニメーションをCSSで設定することで、JavaScript自体のコードをあまり書かなくても実装できちゃいます。jQueryからの乗り換えを考えている方はぜひ検討してみてくださいね！ Vue.js の使い方Vue.js は公式のドキュメントが日本語に対応しており、こちらを読むだけで基本的な使い方は理解できるはず。じっくり読んで、ご自身でもコードを書いて動作を確認し、身につけていくといいでしょう。 最初の一歩目の例として「JavaScript で定義したテキストを HTML に表示させる」というスーパ
ajaxでマルチパートを使わずにファイルアップロードする方法 - Qiita
1. はじめに 今回はajaxでマルチパートを使わずにファイルをアップロードする方法について説明したいと思います。 （ポイント） JQueryなどの外部ライブラリは利用せず、素のJavaScriptのみで実現する XMLHttpRequestとFile(Blob)を利用する multipart/form-dataではなく、ファイル種別に応じた任意のcontent-typeでデータを送信する HTTPリクエストのBODYはファイルデータそのもの（バイナリ）となり、multipart/form-data（たとえばbase64）のエンコード、デコード処理が不要となる サーバ側のアップロード処理がこの方法に対応している必要がある 2. ソースコード <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>upload</title>
jQueryが必要とされなくなってきたのは, Reactなどの他のフレームワークが登場したせいではなく, 標準DOM APIが進歩したおかげです
jQueryが必要とされなくなってきたのは, Reactなどの他のフレームワークが登場したせいではなく, 標準DOM APIが進歩したおかげです JavaScript Advent Calendar 2017 - Qiitaの2日目の記事です. 何故この記事を書こうと思ったか JavaScriptの定番ライブラリであるjQueryは, 最近以前と比べて必要とされなくなってきました. その理由はよく, Reactなどの他のフレームワークが登場したせいだと勘違いされています. しかし, jQueryが必要とされなくなってきた理由は標準DOM APIの進歩によるものです. この記事ではそれを書いていきます. なお, この記事ではReact Nativeについて触れる必要がないため, React DOMのことも一緒くたにReactと記述します. また, 私がweb開発を開始したのは3年前ぐらいから
2018年も業界標準！知っておくべきJavaScriptフレームワーク＆ライブラリの基本の"キ"
JavaScriptは、Webそのものの歴史とほとんど変わることはなく、20年以上に渡って使われ続けてきた壮大な言語です。それというのは、今後も使われ続けていくであろうJavaScriptがほかのプログラミング言語に比べ、類まれな底力を持っていることの現れだとも言えます。 もちろん、これほどまで、JavaScriptが使われ続けているのには理由があり、時代に合わせて使いやすくするため、多くのフレームワークが登場したという点がポイントです。 フレームワークの登場によって、JavaScriptを直書きするよりもはるかに効率よく、Webアプリケーションを作成することができるようになりました。 そこで今回は、JavaScriptフレームワーク初心者の方向けに、JavaScriptフレームワーク＆ライブラリの基本をまとめていきます。 JavaScriptやフレームワーク・ライブラリの基本をおさらい
high-performance-sticky-sidebar.html
サイドバーをスクロールに合わせて、ぴたっとくっつける快適に動作する超軽量スクリプトを紹介します。 コンテンツが長い・短い場合はもちろん、サイドバーが長くてビューポートをはみ出す場合にも期待通り完璧に対応します。スクリプトは単体で動作し、jQueryのプラグインとして動作させることも可能です。 スクロール時にすべてのサイズを計算するのではなく、必要なサイズだけを再計算。 スクロール時のラグやジャンクを発生せず、リフローを起こさずにスムーズに動作。 サイドバーとコンテナのサイズが変更された時は、それらのサイズを正確に再計算。 特定の状況下でフックするために、イベントトリガーを用意。 コンテナが長くても短くてもサイドバーを扱うことができます。 他のスクリプトへの依存はなく動作。 jQueryやZeptoのプラグインとして利用することも可能。 実装はスーバー簡単！ Sticky Sidebarのデ
ES Modules入門 - JavaScriptのモジュールを使う方法 - ICS MEDIA
JavaScriptには、モジュールという仕組みがあります。ECMAScript 2015のModulesの標準仕様として策定されており、現在はすべてのブラウザで利用できます。この機能は、ES2015 Modules、ECMAScript Modules、ES Modules、ESMなどと呼ばれています（以下、ES Modulesと記載します）。 webpackやViteなどのフロントエンドのツールを通して、すでにES Modulesを使っているエンジニアも多いと思います。この記事では、ブラウザネイティブで使えるES Modulesに焦点をあて、ES Modulesの導入で解決できる課題と利点を紹介します。 HTML+JSではモジュールの仕組みがなかった JavaScript自体には他のJSファイルを取り込む標準的な仕様が昔は存在しませんでした。外部JSファイルを読み込みたい時に、HTML
UX向上の鍵！マイクロインタラクションにも使えるアニメーションプラグイン11選
モバイルアプリケーションはもちろん、Webサイトにおいてもアニメーションはエンゲージメントを高めるうえで強力なツールです。 jQueryが流行していたころはjQueryに標準で搭載されているアニメーションを使ったりjQueryプラグインを導入するのが一般的でしたが、現在ではjQueryをベースとしたものに限らず、さまざまなアニメーションプラグインが公開されています。 フルスクリーンで背景が動くアニメーションから小さなホバーエフェクトまで、アニメーションはいたるところで使われています。 今回は、フロントエンドエンジニアやWebデザイナーが知っておきたい、マイクロインタラクションにも使えるアニメーションプラグインをご紹介していきます。 プラグインのメリットは、簡潔に読み込みコードと設定を書き込むだけで、だれもが簡単に導入できる点です。 ぜひ、お気に入りのプラグインをピックアップしていきましょう
放置されがちなJavaScriptライブラリーをどうやって最新に保つのか？
古いjQueryを使い続けていませんか？忘れられがちなJavaScriptライブラリーを最新に保ち、セキュリティを高める方法を考えます。 最近、セキュリティ研究者の調査によって、13万3000のWebサイトが最新でないJavaScriptライブラリーを使用していること分かりました。調査結果は『Thou Shalt Not Depend on Me: Analysing the Use of Outdated JavaScript Libraries on the Web（Webサイトにおける最新でないJavaScriptの使用率に関する分析）』として、報告書にまとめられPDFで公開されています。決して楽しい読み物ではありません。対象のWebサイトのうちの37％が、直接的もしくは広告主のようなサードパーティサービスを通じて、安全ではないJavaScriptを読み込んでいました。 これを知って
結局VanillaJSである。 - nobkzのブログ
anond.hatelabo.jp nida3001.hatenablog.com 上記のブログに刺激されて私もフロントエンドというかJavaScriptに対する思いを綴ったポエムをば。しかし、なんか書くのダルいので、大分大雑把にかくぞ。 さて、さっそく結論を述べよう。今のフレームワーク論争やらに対する解決策はVanillaJSを使うってことである。 フロントエンドSPAのフレームワークについて まず、今のほとんどのフレームワークが使えないってのはそのとおりである。その話してみよう。その理由は、「フロントエンド」 ってのは一括りにできないからである。「ハッカーと画家」のとある言葉をアレンジして言えば「フロントエンドはユーラシア大陸のようなものである」。フロントエンドが関わる範囲が大きすぎるのである。ヨーロッパもあればアジアもあれば中東もあるという感じである。 範囲が大きすぎて、フレームワー
アニメーションやグラフ等、SVGを使ったJavaScript＆jQueryプラグイン11
2016年11月24日 JavaScript, jQuery, SVG 今やCSSだけでも多彩なアニメーションを取り入れることができますが、JavaScriptとSVGを使うことで、より美しく自由度のきく表現が可能です。今回はSVGを使った、便利なJavaScriptライブラリーやjQueryプラグインを紹介します。 ↑私が10年以上利用している会計ソフト！ ラインアート 1. DrawSVG See the Pen Simple usage by Leonardo Santos (@lcdsantos) on CodePen. Webサイト｜GitHub｜デモ SVGのパスを使ってラインをアニメーションさせるためのプラグイン。2kbと軽量です。デモ画面右下の「RETURN」ボタンをクリックして試してみてください。 var mySVG = $('#my_svg_element').draw
【今日のバグ取り】 JavaScript でコールスタックが溢れていたのをどうにかした話 - 無駄と文化
lazex さまのはてブコメントを受けて、animation プロパティを使った改良版を書きました。完全にこっちの方が良いので、参考にするならばどちらかというと新実装の方で。 lazex さま、ご指摘ありがとうございます。 JavaScript のコールスタックが溢れていたのをどうにかしたら JS 要らなくなった話 先日、とあるサイトを見ていたら JavaScript でエラーが出ているっぽいのを見つけました。 Chromeで見たときのエラーの内容はこんな感じ、 jquery.min.js:2 Uncaught RangeError: Maximum call stack size exceeded どうやらコールスタックがいっぱいになって溢れているようですね。 スタックトレースを辿っていくと、以下の箇所がエラーの原因のようでした。 $(document).ready(function()
サーバサイドJavaScriptとjQueryでスクレイピング
jQuery でスクレイピングできたらセレクタ使えるし便利かなーと思ったりしたんですが、Rhino と env-js を使うと超簡単にできたのでレポートしてみます。 Rhino と env-js って何ぞい？ Rhino ってのは Java で書かれた JavaScript エンジンです。Rhino を使うとコマンドラインから JavaScript を実行できます。 Rhino には DOM が無いので単体では jQuery を実行することはできませんが、env-js という DOM ライブラリを使用するとこの辺はクリアできます。 env-js の中に jQuery を使ったサンプルがいくつか入ってますので、Java とか JavaScript とか詳しい方はそちらを見てもらった方が早いと思います。 使ってみる まず env-js をビルドしないといけないのでその辺の手順から説明します。
FullCalendar - JavaScript Event Calendar
npm install @fullcalendar/angular import { Component } from '@angular/core' import { CalendarOptions } from '@fullcalendar/angular' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { calendarOptions: CalendarOptions = { initialView: 'dayGridMonth', events: [ { title: 'event 1', date: '2019-04-01' }, { title: 'e
[JS]jQueryのプラグイン33+1選 -2008年6月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 iPod-style Drilldown Menu iPod風に切替わるドリルダウンメニュー。 iPhone Lock Slider
Re:一晩で覚えるjQueryの逆引き基礎サンプル7つ (でぃべろっぱーず・さいど)
一晩で覚えるjQueryの逆引き基礎サンプル7つ*ホームページを作る人のネタ帳 jQueryに書くとほってんとり入りできるらしいので便乗。というかリンク先で紹介されているサンプルコードにちょっと意義異議あり。 一個のサンプルは非常に単純な構造になっておりますゆえ、jQueryをすでにやったことがある人にとって必要ないものだということをあらかじめご了承くださいませ。 ということであれば、「jQueryらしい」書き方をした方が良いかなと思います。 で、僕ならこう書くってことで。 全般的に使われている$(document).ready(fn)は、$(fn)でショートカットできます。 $(document).ready(function(){alert('hoge');}) は、 $(function(){alert('hoge');}) こう書けると。 まあ、これはどうでもいいや。短く書けるって
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to Replace jQuery with Vue — SitePoint
Bootstrap Card Component: a Complete Introduction — SitePoint
Railsでajaxを用いた簡単なインクリメンタルサーチを実装する - Qiita
