【改訂版発売中！】【完全案件特化】JavaScriptをどこまで学ぶべきかの学習ロードマップ＋頻出パーツの作り方8選 - セカヤサBooks
【改訂版発売中！】【完全案件特化】JavaScriptをどこまで学ぶべきかの学習ロードマップ＋頻出パーツの作り方8選 - セカヤサBooks 【お知らせ】 内容を2024年に向けて更新、追加した改訂版を公開しました！ →https://zenn.dev/hideki_climax/books/0e124eb17a67b3 ・HTML/CSSの次は何を勉強すれば良いの？ ・案件が取れない ・未経験だけど転職を考えている ・フリーランスで実績を積みたい そんなあなたの悩み、全て解決します。 JavaScriptをどこまで深めれば案件が獲得できて、収入に繋がるのか。 フリーランスで7年間エンジニアをしてきた僕が思う 「Web制作領域においてJavaScriptで何ができれば良いか」 をまとめました。 そして圧倒的に頻出のUIパーツ8つの作り方を徹底解説しました。初心者でもすぐに実践できます。実際
アクセシブルじゃないクリックイベントを発見する
(() => { "use strict"; const elements = Array.from(document.querySelectorAll("*")); const clickEvents = elements .map((element) => { const listeners = getEventListeners(element); const clickListeners = listeners.click || []; clickListeners.forEach((event) => (event.owner = element)); return clickListeners; }) .flat(); for (const event of clickEvents) { if (event.owner.matches("button, a[href]")) {
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました - ICS MEDIA
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました アニメーションを作る時に、「思いついた演出をすぐに実装したい」「頭の中ではできているのに、コーディングするのが面倒」と思ったことはありませんか？アニメーション作成にはライブラリを使用することが多いと思いますが、使い方を調べて覚えて、ドキュメントからコピペしたり、ひたすらタイピングをして… 私はこれらの問題を解決するために、「Tween24」というライブラリを作りました。Tween24はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装できます。依存ライブラリもなく、単体で動作します。アニメーションライブラリの多くはオブジェクト型でプロパティを指定するためタイピングが多くなりがちですが、メソッドチェーンであればエディターのコード補完機能でスラスラと記述できます。 その他にも、メソ
パラメーターを保持してページ転送をする | iPentec
パラメーターを引き継いでリダイレクトするほかの実装方法としてWebサーバーのリダイレクト設定を入れる方法もあります。 IISでのリダイレクト設定の詳細についてはこちらの記事を参照してください。 実装例 コード 下記のHTMLファイルを作成します。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> var paramstr = document.location.search; document.location.href = "https://www.ipentec.com/"+paramstr; </script> </head> <body> <p>転送ページです。</p> </body> </html> 解説 ページを表示すると
JSでエクセルを扱う ( SheetJS js-xlsx が凄い ) | バシャログ。
どうもfujiharaです。本日はブラウザJSでエクセルを扱える、SheetJS js-xlsx を紹介します。 背景 あるデータをブラウザ上で表示したいが、スプレッドシート(apiを利用)やCSVファイルを編集(エクスポート)するのは 避けたいということで探していたところ、npmにSheetJS js-xlsxというものがありました。 サンプル 今回はエクセルからHTML, CSV(配列)への変換をします。 npm インストール npm install xlsx csv-parse javascript ※IE11対応の場合の箇所追記しました。 import XLSX from 'xlsx'; import parse from 'csv-parse'; //IE11対応の場合は import parse from 'csv-parse/lib/es5'; fetch( '/data/s
Chromeがネイティブlazy-loadをサポート、JSなしで画像を遅延読み込み可能に
[レベル: 上級] Google Chrome 76 がネイティブ lazy-load をサポートするようになりました。 JavaScript のライブラリを利用することなく、ブラウザの標準機能として画像の遅延読み込みが可能になります。 ネイティブ lazy-load は開発版 Chrome (Canary) で試験運用されていました。 自動で遅延読み込み 次の動画は子猫の画像だけを掲載したデモ用ページをスクロールした様子です。 デベロッパーツールの Network パネルで見ると、スクロールに応じて画像が順に読み込まれているのがわかります。 この遅延読み込みは JavaScript で実装しているわけではなく、Chrome の標準機能として実装された lazy-load の機能で実現しています。 loading 属性でネイティブ lazy-load ネイティブ lazy-load を利用
【Labs】スマホ・タブレット・PCを振り分ける
こんにちは（・∀・） JavaScriptでスマホやタブレットそれとPCを振り分ける方法をご紹介します。 Contents 1. ユーザーエージェントで振り分けたい ①スマホ・タブレット・PCで振り分けるサンプル ②スマホやタブレットをもっと細かく振り分けるサンプル 2. デバイスサイズで振り分けたい 1. ユーザーエージェントで振り分けたい ユーザーエージェントで振り分けるJavaScriptです。 ①スマホ・タブレット・PCで振り分けるサンプル JavaScript var ua = navigator.userAgent; if( ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) || ( ua.indexOf('w
パラメーターやリファラ情報を引き継ぎながらリダイレクトを行うJavaScriptコード - Qiita
のようにやってしまうと、リダイレクト元ページURLのクエリパラメータ(URLの「?」の後に続く文字列)とリファラ情報(document.referrer)が拾えなくなってしまうので、 リダイレクト元ページのクエリパラメータをそのままリダイレクト先URLにくっつけ、更にリファラ情報もクエリパラメータreferrerの名前でくっつけてリダイレクトを行うようにした。 リダイレクト先URLに#keyのようにフラグメント部が含まれていることも考慮している。 動作例 たとえば、以下のような状況でリダイレクトコードが動作したとき、 コードを埋め込むページURL http://example.co.jp/product/2359/index.html?quux=corge&grault=garply コードが動作したときのリファラ http://example.co.jp/search?q=book&ca
metaのviewportの値を動的に変更するJavaScript | briccolog
レスポンシブ・デザインのウェブページが一般的になって久しいですが、あまり開発期間や費用をかけられない場合など、「PCで閲覧した場合（＝PCビュー）」と「スマホで閲覧した場合（＝SPビュー）」の二種類の表示のみを設定するということも少なくありません。 例えばPCビュー時の基準の横幅を980px、SPビュー時の基準を320pxとして作成したページがあるとします。単純に考えればCSSのメディアクエリでブレークポイントを一つ設定すればいい話なんですが、 画面幅768pxのタブレット端末で見た場合もPCでの閲覧時と同じように（PCの画面が縮小したような状態で）見せたい。 画面幅320px以上のスマホ端末で見た場合に、画面幅320pxの端末で見ているのと同じ状態（画面を拡大して）見せたい。 というようなご要望を受けることもしばしば。特にレスポンシブということでなければ、普通にmeta[name="vi
JavaScriptでブラウザ判定をするなら「Platform.js」がラク | 綺麗に死ぬITエンジニア
JavaScriptで閲覧者のブラウザやOS等のプラットフォームを判定するのに、皆さんはどうしてますでしょうか。 それぞれ独自にユーザーエージェントから推測するコードを実装している方も多いと思います。 しかし、現在様々なプラットフォームが存在するため、正確にプラットフォームを推測するのは、個人の実装では難しいところがあります。実装できたと思っていても、想定外のユーザーエージェントによって正しくブラウザ名やそのバージョン情報を取得できていない場合もあるかもしれません。 そこで今回は、できる限り正確に、そしてラクにプラットフォーム判定を実装したい人向けに、ユーザーのプラットフォームを判定するJavaScriptライブラリ「Platform.js」を紹介します。 「Platform.js」とはPlatform.jsは、ほぼすべてのJavaScriptプラットフォームで動作する、プラットフォーム検
Tippy.js - Tooltip, Popover, Dropdown, and Menu Library
Tippy.js is the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper. It provides the logic and optional styling of elements that "pop out" from the flow of the document and float next to a target element. Smart: will always float optimally in view Universal: compatible with mouse, keyboard, and touch inputs Customizable: fine-tunable functionality and fully stylab
JavaScriptでコピーをする方法(clipboard.jsの使い方)
この記事は、Advent Calendar、「らいとなデブ SYNCER」の4日目の記事です。利用者が面倒な操作をしなくても、JavaScriptを使って自動的にコピーやペースト、カットをしてあげた方が親切な場合があります。そんな時に便利なライブラリ、clipboard.jsを紹介します。2015年12月現在、Safariは対応していません。
任意の要素に表示/非表示時のアニメーションエフェクトを付与出来るスタイルシート・「tuesday」 - かちびと.net
tuesdayは任意の要素にアニメーションエフェクトを手軽に付与出来るスタイルシートです。上デモのように、CSSによるアニメーションエフェクトを、classを与えるだけでアニメーションによる表示、非表示が出来るようになります。表示確認はResultで。他にも同じようなライブラリはあるのになぜ今更作ったか、に関してですが、既存のものは遷移時間が長く取られていて使いにくいと感じていたため、短時間のライブラリを作ったそうです。また、classもユニークなプレフィックスを付けているので衝突する事もおそらく無いだろうとの事でした。確かに主張の強いアニメーションはストレスになる事も多々ありますね。ライセンスはMIT。 tuesday
javascriptのライブラリを一覧にしてまとめてみた
自分用にまとめていたけどせっかくなので公開。 なるべくフロントエンドで完結してライセンスも使いやすいものを選択したつもり。 全部で100個超。 １番目のURLが本家 or GitHubのページ、2番目のURLが比較的わかりやすいと思った日本語の解説ページになっています。 Node.jsのライブラリもまとめたので合わせて見るといい感じ accounting.js金額のフォーマットを行う カンマ区切りや小数点n桁までなど https://josscrowcroft.github.io/accounting.js/ ace.jsテキストエディタ ハイライト・文字列畳み込み・ショートカットキー 組み込むのが簡単で機能もひと通り揃ってる https://ace.c9.io http://qiita.com/naga3/items/1bc268243f2e8a6514e5 AlertifyJSダイアロ
ZingTouch - A JavaScript gesture detection library
Standard Gestures ZingTouch provides six standard gestures that are completely customizable. Note: These demos are best viewed on a touch capable device. A tap event is a quick start and end of an input. Tap gestures can be configured with the amount of time inbetween a start and end, and the number of inputs it requires. Emits interval - a time measured in milliseconds between the start and end o
黒魔術（JavaScript）まとめ - Qiita
まえがき JavaScript、書いてますか？ JavaScriptは今や世界中の人々に愛されています。 stackoverflowの2016年の調査によるとJavaScriptは地球上で最も一般的に使用されているプログラミング言語だそうです。 JavaScript is the most commonly used programming language on earth. Even Back-End developers are more likely to use it than any other language. link しかしJavaScriptは愛されすぎているが故、しばしば黒魔術のようだと比喩されることも少なくありません。 愛と憎しみが紙一重とはこのことですね。 ということでそんなこんなはどうでもいいのですが、自分もJavaScriptは大好きです。 今回は黒魔術まと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita![[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1ad03e7ca3db867b9bae148223da3caa45c2cb0a/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY1Mjg1MjYlMkZkZTFjOTBmNmE3MjJhODY1ZDI3ZmFkODk4N2RhNTU0ZDhhODY1ZGJmJTJGbGFyZ2UucG5nJTNGMTU4MjI2MzEwMj9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmYmc9RkZGRkZGJmZtPXBuZzMyJnM9Y2Y1Nzc0MWM3NWU5ZTE5OGU4YzhmNDlkYmE3ODAwNGM%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D5ea0723ab227ef82ed24889c21459541%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFNSU4OCU5RCVFNSVCRiU4MyVFOCU4MCU4NSVFMyU4MSU4QyVFNSU4OCU5RCVFOCVBNiU4QiVFMyU4MSVBNyVFNSVCRiU4NSVFMyU4MSU5QXRoaW5raW5nJUU5JUExJTk0JUUzJTgxJUFCJUUzJTgxJUFBJUUzJTgyJThCJUUzJTgyJTgyJUUzJTgxJUFFJUU3JTg5JUI5JUU5JTlCJTg2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MjYyNDg4MTg3OWIwZmRkYzgzYjZmYTZiNzUxYTExOTc%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBrb3p6enomdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz01MjlhYjk2ZGU2MDY4ZTQwZTI4YjM3ZTExNWI2MWQ1NQ%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Db07106cf5051916b4ed59bb4ff91709d)
JavaScript ショートコードテクニック集（ES6含む） - Qiita
オブジェクトのマージ（上書き） - JavaScript｜OAR CODE
AnyChart JS - Interactive Cross-Platform JavaScript HTML5 Charts, Maps, Stocks and Gantts for your project
