階層メニューやトーストUIが簡単に作れる新技術！　JavaScriptで利用するポップオーバーAPI 2023年5月〜6月にリリースされたChrome 114とEdge 114には、「ポップオーバーAPI」というAPIが搭載されました。 ポップオーバーとはコンテンツの1番上に重ねて表示するUIで、ユーザーにアクションを促したり、補足の情報などを伝えるために画面に表示します。ポップオーバーAPIのMDNのドキュメントではオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを総称して「ポップオーバー」と呼んでいます。 ウェブサイトでよく見かけるポップオーバーですが、実装するには意外と調整や考慮の多いUIです。たとえば、画面の1番上に重ねるためにはz-indexで他の要素との重なり順を調整する必要があります。Escキーを押した時や要素外をクリックした時にポップオーバーを閉じるには、Java

Rails 7.0ではフロントエンドサポートが刷新されます。新たなライブラリが多数導入され、選択肢が増えるため、「Rails公式のものを選べばOK」という戦略が通用しなくなります。 本稿では、Railsでフロントエンドを書くための選択肢について、その歴史と実装を踏まえて比較検討します。 結論から言うと(まだアルファ版なので今後も状況が変わる可能性はありますが、) 新規アプリケーションではSprocketsの役割は無くなりそうです。新しいライブラリとして Propshaft, importmap-rails, jsbundling-rails, cssbundling-rails が登場し、主要な選択肢として以下が提供されます。 (各ライブラリの詳細については後述します) Propshaft + importmap-railsデフォルトの選択肢。Node.jsが不要。トランスパイルを含め、複

新しいRailsフロントエンド開発（1）Asset PipelineからWebpackへ（翻訳） 新しいRailsフロントエンド開発（2）コンポーネントベースでアプリを書く（翻訳） 新しいRailsフロントエンド開発（3）Webpackの詳細、ActionCableの実装とHerokuへのデプロイ（翻訳） 概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Evil Front Part 1: Modern Front-end in Rails 原文公開日: 2017/12/05 著者: Andy Barnov、Alexey Plutalov サイト: Evil Martians 前書き 本記事は、フロントエンドのフレームワークに依存しないRailsプレゼンテーションロジックを現代的かつモジュール単位かつコンポーネントベースで扱う方法を独断に基いて解説するガイドです。3部構成のチュ

ちょっとJavaScriptの投稿があまり区切りの良いところで止まっていないのですが、いろいろ触っていると関連する話題に関心が広がったりしちゃうものです。 JavaScriptに関連して、Node.jsやTypeScript、Reactなどを扱いたくなりました。そもそもPython中心にやっていて、あまり手を広げてどっちつかずになってもいけないのですが、最近の自分の方針は気になったら無駄でも手を出してみて、その無駄もどこかで役に立てばそれで良い。そんな感覚ですので、手を出すことにしました。 ということで、私のMacBook ProにNode.jsをインストールすることからはじめました。ここではその方法についてまとめてみます。合わせて、yarnもインストールします。

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

【脱jQuery！】ネイティブなJavaScript（Vanilla JS）への書き換え方まとめ 2019 12/15 最近では脱jQueryの流れがきている、という情報を目にしてさっそく脱jQueryしてみることに。 ...と思ったのですが、いざやってみるとかなり苦労しました。 なので、今回はその備忘録としてjQueryからネイティブJS（Vanilla JS）への書き換え方をまとめていこうと思います。 というか、本当に脱jQueryしたほうがいいの？ ということは一旦置いておいて、好奇心の赴くままにやっていきましょう。 ちなみに、『Vanilla JS』というのはフレームワークとかの名前ではなく、ただのJavaScriptのことです。 ※ 書きかけの部分やら中途半端なもありますが、ご了承ください。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こちらの記事は、Indrek Lasn 氏により2019年 10月に公開された『 Here Are 6 Front-End Challenges to Code 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek フロントエンドの開発はストレスが多く難しい作業ですが、練習すれば技術をマスターすることができます。 自ら進んで鍛錬と努力をすれば、フロントエンド開発の場面で問題を解決することのエキスパートとなることができるでしょう。 優れたフ

目次 はじめに HTMLレンダリング HTMLレンダリング ：ブラウザでHTMLを受け取り画面表示 HTMLレンダリング ：JavaScriptでレンダリングして画面表示 HTMLレンダリング ：WEBページの初期表示の各段階 サーバーサイド側の処理 サーバーサイド側：Node.jsという実行環境＆開発環境 クライアントサイトレンダリング クライアントサイトレンダリング：リアルDOMと仮想DOM サーバーサイドレンダリング おまけ：参考にしたリンクなど はじめに Web開発で「フロントエンドはモダンな感じでやりましょう。jQueryではなしに。」ということになったのですが、その時の僕は「モダンな感じ」なるものが示す「最新の技術動向」に疎くて話についていけませんでした、。 反省し、WEBフロントエンドとサーバーサイドあたりの技術動向のアウトラインをざっくりと整理してみることにしました。 よく

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

スクロールに連動して、ページ上の要素をアニメーションで表示するライブラリはいくつかあります。その中でもかなりの超軽量で、他スクリプトへの依存が一切ないスクロールアニメーションのライブラリを紹介します。 しかも実装は超簡単。手間がかかりそうと思っていた人は、ぜひお試しを。 Sal.js Sal.js -GitHub Sal.jsの特徴 Sal.jsのデモ Sal.jsの使い方 Sal.jsの特徴 vanilla JavaScript vanilla JavaScriptで書かれており、他のスクリプトへの依存はありません。 超軽量 2.26KBの超軽量スクリプト。 パフォーマンス パフォーマンスにフォーカスして設計。 実装が簡単 外部ファイルを加えて、HTMLにdata属性を加えるだけの簡単実装。 ライセンス MITライセンスで、個人でも商用でも利用できます。 Sal.jsのデモ デモでは、S

どうもですよ、はやちですよ٩( ᐛ )و 以前、こちらの記事でご紹介したPixi.js。 今回はパーティクルを使用して、ちょいと「雪が降ってる風」の演出を実装する方法をご紹介します( ˇωˇ)☝ 導入方法 npmはこちらからインストールしてお使いください。 npm install pixi.js 実装方法 それでは実装方法ご紹介します( ˘ω˘)☞三☞ｼｭｯｼｭｯ 土台の設定 はじめに表示するCanvasを用意します。 Canvasはサイズと背景色も設定できます( ˇωˇ)☝ let app = new PIXI.Application(800,600,{backgroundColor : 0x1099bb}); document.body.appendChild(app.view); 複製させる画像の数を決めておきます( ˇωˇ)☝ //表示をする画像の数 let totalSprite

これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i

GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 春ですね！人の配置がリファクタリングされ、コードもリファクタリングの季節です。 では僕がここでモダンなJavaScriptとES2015の利点を語る役をやるので、みなさんはチームを説得する役をやってください。 JavaScriptの歴史 まず最初にJavaScriptの歴史を踏まえることで、今学ぶべきものとその理由を確認しましょう。 なぜ2016年の記事でES2016ではなく、ES2015なのか、と疑問に思った方もいるかもしれません。それは、ES2015がただの年次アップデートではなく、これから始まる毎年のメジャーバージョンアップの起点

スマホ・タブレット・デスクトップのブラウザがさまざまな機能（WebGL, Canvas, rem unit, async属性、タッチイベントなど）に対応しているか判別し、その判定を利用することができる超軽量（1kb）スクリプトを紹介します。 ModernizrはHTMLとCSSの機能で判別を行っていましたが、それを更に拡張した感じです。 Feature.js Feature.js -GitHub Feature.jsの特徴 Feature.jsの使い方 Feature.jsの特徴 Feature.jsは、ユーザーが利用するスマホ・タブレット・デスクトップのブラウザの機能を判別し、利用することができます。 WebGL, Canvasをはじめ、単位にremが使えるか、async属性は利用できるか、といった実用的なものが多数揃っています。また、いくつか補足事項があります。 touch タッチイベ

はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ

ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer

ここ最近、CSSに対する考え方が広がりを見せています。皆さんの中には、その転換点を見つけようと、Christopher Chedeauの”CSS in JS”という講演を聞いた方もいるでしょう。2014年11月にNationJSで行われたこの講演は、CSSにおける重大な分岐点となりました。まるで高エネルギー粒子が衝突した後のように、それを機に、数ある多様な考え方が、各々の方向へ渦を描くように広がったのです。その例として、 React Style と jsxstyle 、 Radium を挙げましょう。これら3つは、Reactのスタイリングにおける最新かつ最良、そして最も実行しやすいアプローチに含まれており、 各々のプロジェクトのReadmeファイルでも、 そのように言及しています。もし”発明”が、 adjacent possible（一歩先にある可能性） を探ることの一例であるのなら、Ch