スワイプや、タッチイベントを実装する時に下記のようなJavaScriptを書きました。 document.addEventListener('touchstart', ‘要素’, function (e) { e.preventDefault(); // タッチスタート処理 ~~~~ });preventDefault():実行したイベントがキャンセル可能である場合、イベントをキャンセルするためのメソッド しかし、エラー発生 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080 エラーログにある解説ページへ h
// シャッフルしたい配列を用意 var array = [0,1,2,3,4,5,6,7,8,9]; for (var i = array.length - 1; i >= 0; i--){ // 0~iのランダムな数値を取得 var rand = Math.floor( Math.random() * ( i + 1 ) ); // 配列の数値を入れ替える [array[i], array[rand]] = [array[rand], array[i]] } console.log(array);
JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」(以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります)を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。 この記事で学べること デベロッパーツールの使い方 JavaScriptのブレークポイ
標準ライブラリは、大ざっぱに言えばプログラミング言語に標準で備え付けられている機能群です。多くのプログラミング言語では、形態は様々ですが何らかの形で標準ライブラリが備え付けられています。標準ライブラリはプログラミング言語の一部であり、言語のバージョンアップに伴って標準ライブラリに機能が追加されることは良くあります。 この記事ではJavaScriptにおける「標準ライブラリ」がどんなものなのか、その歴史的経緯なども交えながら解説します。「標準ライブラリ? 何それ」という方も「そんなの基本だろw解説されなくても分かるわw」という方もぜひ一読していってください。 なお、記事執筆時点では標準ライブラリに関することは何一つとして標準化が完了しておらず、内容が今後大きく変化する可能性が十分にあります。この記事で概要を理解したあと、いざ使用する際にはご自分で最新の情報を調べたほうがよいでしょう。 お詫び
Try it! Drag tasks across the timeline, resize to change duration, click to view more information Usage Dependencies: momentjs and snapsvg Include it in your html <script src="frappe-gantt.min.js" /> Create an svg element <svg id="gantt"></svg> Initiliaze a new Gantt object var tasks = [ { id: 'Task 1', name: 'Redesign website', start: '2016-12-28', end: '2016-12-31', progress: 20, dependencies: '
完成形 See the Pen mavpjb by epauoh (@epauoh) on CodePen.dark マウスポインター自体が白い点になり、半透明の円が追従してきます。 hover時はマウスポインターが消え、半透明の円が大きくなります。 ※もちろんスマホにはマウスポインターはありません。pcで確認してください。 今回はプラグインを使用しないので、jQueryを読み込むだけでokです。 HTMLも特に必要な記述はありません。 今回はhover要素のみおいています。 CSS a要素にhover時、activeのクラスが付与されるので、 hover時に必要なアクションはそこで指定してください。 #cursor { position: fixed; -webkit-transform: translate(-50%, -50%); transform: translate(-50%,
この他に macOS の Chrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-behaviorプロパティを使えば非常に簡単に実装できます。 body { scroll-behavior: smooth; } たったこれだけの宣言で、JavaScript を一切用いることなく、ページ内リンクをクリックしたときのスクロールにアニメーションが伴うようになります。また、ページ内リンクのクリックだけでなく、可視領域外にある要素がフォーカスされたときや、ページ内検索に一致したテキストがハイライトされたときなど、スクロールが伴う場面すべてに適用されま
「TypeScript」とは、JavaScriptに「型」を指定できるオープンソースのプログラミング言語です。型によりプログラム実行前にエラーを見つけ出すことができるため、大規模なプロジェクトを安全に開発できます。Microsoft社製で、多くのフロントエンドエンジニアに採用されています。 TypeScriptのモダンなビルド環境を作るためにはwebpackやGulp.jsがよく使われていますが、設定ファイルが必要で学習コストは高めです。「TypeScriptのビルド環境がほしいだけなのに、なぜツールの設定に時間をとられるのか?」「TypeScriptを始めるときに苦労したくない」と思っている人も多いのではないでしょうか? 「Parcelパーセル」というツールを使うと、独自の設定ファイルを使うことなくTypeScriptのモダンなビルド環境がわずか3ステップで作れます。 ▼ TypeScr
ご無沙汰しております。ウェブボウズを立ち上げて 1 年が経ちました。皆さま如何お過ごしでしょうか。私は、この 1 年間ひとつもブログポストできていません。さらには私の坊主頭(スキンヘッド)にちなんでウェブボウズという名前をつけた個人ブログでありましたが、5 年間共にしたこの Hair-less style から心機一転して 2019 年は髪を育んでいく方針を固めましたので、もはやボウズでもなくなってます。変わり続けることだけが普遍であると胸に刻んで今年も強く生きていきたいと考えております。 さて、最近 Signed HTTP Exchanges やら Performance Budget やらさまざまな面白いことに関わらせていただいて忙殺と幸せを噛み締めている中でも、Chrome Dev Summit 2019 でも大きくフィーチャーされました Portals という新しい HTML 要素
昨年の途中からちらほら耳にするものの、まだ「なにそれ美味しいの?」なRollupですが、馴染むと手放せなくなる感じ。どんなものか、使い方から、プラグインのつくりかたまで、概観してみたいと思います。 Rollupって何? 複数ファイルに書かれたJavaScriptを、モジュールなどを読み込みつつ、ひとつのバンドルにしてくれるツール。WebPackとかBrowserifyみたいなやつです。依存モジュールの解決や、AltJSのプリコンパイルしたり、など。大きな特徴として、次の点がよく挙げられます。 生成ファイルが小さい ES6(ES2015)ネイティブ ドキュメント類はまだ最低限という感じですが、WebPackかBrowserifyにさわったことがあれば、そんなに迷うことはないかも。ただ、トップページに行っても正直よくわからないので、今のところWikiが一番の情報源です。公式の情報で見るべきとこ
多! そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度:★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ!うちもこんなんやりたい!と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法(CSSのtransformとJSを組み合わせるなど)で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ
Some text distortion experiments using the Blotter.js library. The idea is to distort text as we scroll or move the mouse. Distortion effects have become quite popular over the past two years and now many extraordinary website designs have some unique form of this intriguing trend. Today we’d like to share two demos with you that show how to use Blotter, a three.js and Underscore.js powered API fo
この記事は、社内向けに書いた資料を公開の許可を得て加筆修正したものです。 記事中の具体例やサンプルコードはJavaScript/TypeScriptで書かれていますが、内容自体は言語にかかわらず使えます。 同僚の @shisama にも手伝っていただきました。 はじめに 命名について 条件式について 関数について 変数・定数について コメントについて 2020/11/02 ついに完結! はじめに 読みやすいコードは、コメントがなくても文章を読むように理解できます。 逆に、読みにくいコードはコメントがあってもさっぱり意味がわかりません。 文章を読むように理解できるコードを書くために普段気をつけていることや、コードレビューの際に重点的に見ているところをまとめました。 普段から読みやすいコードを心がけている方にとっては何も目新しい物はなく、当たり前に意識しているであろうことばかりです。 特にプロ
(2021/06/24追記) ES2021の記事を公開しました。 正式仕様リリース! JavaScriptの最新仕様ES2021で追加された新機能まとめ - Zenn (2020/02/03追記) ES2020の記事を公開しました。 JavaScriptの次の仕様ES2020で追加されることが決定した新機能まとめ - ICS MEDIA 本記事ではES2019の新機能を解説しています。記事末尾では、個人的に追加を期待していたけれどまだステージ3の機能についても紹介しています。 ES2019仕様書:「ECMAScript® 2019 Language Specification」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く