[B! javascript] n314のブックマーク

ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19

ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と

n314 2022/09/05

GSAPというのがあるのか。

javascript

リンク

JavaScript ライジングスター 2021 - Qiita

2022 / 2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2021年に最もホットであったJavaScriptライブラリのランキングを発表しました。選考基準は累計スター数ではなく、『2021年の一年間で増えたスターの数』です。過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年の総合ランキング1位はVue.js、2020年の総合ランキングはDenoです。以下は2021年のランキング、2021 JavaScript Rising Starsの日本語訳です。 JavaScript ライジングスター 2021 6回目のJa

n314 2022/01/11

知らないものが増えてきた

javascript

リンク

Webフロントエンドの開発効率を高く保つための考え方

これまでいろんな現場でWebフロントエンド開発をしてきて、メンテナンスしやすく効率の高いWebフロントエンド開発をする上で重要になる考えが自分なりにまとまってきたので記事にしてみます。 Worse is Betterという考え方自分が見てきた中でWebフロントエンドの開発効率が落ちてしまう一番の要因は、きれいで理論的には優れているアーキテクチャを構築しようとしてそれ自体がもたらす複雑性を支えきれないというパターンです。少し前にフロントエンドにClean Architecture（以下CA、あの同心円の図を指すのは誤用に近いですがここではそれに乗ります）を導入する記事が流行ったと思いますがあんな感じです。ああいったクラスベースでDIが重要となる設計手法はサーバーサイドのJavaでSpringを使うのとは違ってReactがサポートしているものではないため、CAの実現自体に高い設計スキルが必

n314 2022/01/10

最後にAngularやElemに触れているのもいいな。

javascript

リンク

Node.jsのスーパープログラマ達の今 - @ledsun blog

僕がNode.jsを熱心に勉強していた頃に、スーパープログラマとして憧れていた人たちが、今何をやっているのか調べてみました。 github.com Express.jsなんかを作っていたtjは、Go言語がメインに書いているようです。 OSS活動自体あまりやっていなさそうです。 github.com Browserifyをつくっていたsubstackは、主にrustを書いているようです。サーバーを書いていた人はGo言語に、CLIを書いていた人がrustに行くのかもしれません。 github.com Babelを書いていたsebmckもrustです。 github.com Rad VaggはGo言語とPythonのようです。 github.com tjfontaineはOSS活動がほとんど無くなっています。ここからはNode.jsを去っていない人たちです。 github.com Guill

n314 2021/11/27

興味深い

javascript

リンク

JavaScriptのバンドルとトランスパイルが不要なモダンWebアプリ | POSTD

筆者はES6以前のVanilla JSがあまり好きではありませんでした。そこで、バニラJavaScriptをなるべく書かなくていいように、2000年代を通じてさまざまなアプローチを追求してきました。最初はRJS（Ruby-to-JavaScript）、次はCoffeeScriptでした。どちらのアプローチも、バニラJavaScriptより楽しく書けるソースコードを、ブラウザが実行できるバージョンのJavaScriptへトランスパイルするものです。ある程度は、うまくいっていました。とはいえ、これは明らかにその場しのぎの手段に過ぎず、ブラウザがより洗練されたJavaScriptを理解できる日を待ちわびていたのです。ただ、そんな日が来ることはなく、永久にその場しのぎでやり過ごすのかと思われる時期がしばらく続きました。しかし、幸いなことにJavaScriptは改善を続け、2015年にはES6

n314 2021/11/15

ファイルを分割したまま読み込みたい。

javascript

リンク

kintoneのフロントエンド刷新に向けた取り組み - Cybozu Inside Out | サイボウズエンジニアのブログ

こんにちは。kintone開発チーム Webエンジニアの村田です。本記事では kintone のフロントエンドの刷新をはじめるに至った経緯と、その取り組みについて紹介します。はじめになぜフロントエンドを刷新するのか小さくはじめる Proof of Concept リリース戦略を考える移行前と移行後の技術スタック既存資産の再利用 Closure Library製の複雑なコンポーネントを再利用する E2Eテストを再利用するスタイルを再利用しない開発体制フロントエンドエキスパートチームの支援アクセシビリティチームの支援生産性向上チームの支援これからの活動おわりにはじめに現在 kintone 開発チームでは、フロントエンドの開発に使用している Closure Tools (Closure Compiler、Closure Library、Closure Templat

n314 2021/09/03

Closure Toolsはずっと続いてほしいなあ。まあ昔からある機能で十分だから更新停止しても問題無いといえば問題ないんだけど。

javascript

リンク

mouseover 中に表示される DOM のデバッグ | blog.jxck.io

Update 2024-03-30: Chrome 123 から "Emulate a focused page" が追加された。これを用いれば良いため、以降の全ての方式は古くなった。 Apply other effects: enable automatic dark theme, emulate focus, and more https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page マウスが乗ってないと出ない UI も、そこに Tab などでフォーカスを移し、その状態で Dev Tools の "Emulate a focused page" を有効にすれば良い。 Intro 先日、後輩が「mouseover 中にしか表示されない DOM のデバッグ」に手こずっ

n314 2021/08/21

javascript

リンク

フロントエンドのパフォーマンスチューニングを俯瞰する - 30歳からのプログラミング

去年からフロントエンドのパフォーマンスについて断続的に学んでいるが、自分の頭のなかにある知識はどれも断片的で、まとまりを欠いているような感覚があった。知識と知識がつながっておらず、各施策が何のために行われるのかも、必ずしも自明ではなかった。何となく「パフォーマンスに効果がある」と言ってしまうが、それが何を指しているのかは実は曖昧だった。このような状態では新しい知識を得ていくのが難しいというか、効率的に行えないように思えた。議論の背景が分からないし、文脈や問題意識を上手く掴めないから。何の話をしているのかよく分からない、という状態になりがち。書かれてあることの意味は分かっても論旨を掴めているわけではないから、自分のなかに定着しない。そこで、現時点で自分が知っていることを整理して、自分なりに分類しておくことにした。当たり前だが、どのテクニックがどの程度有効なのかは、状況によって違う。

n314 2021/05/06

ライブラリとか構成とか考えるの大変だからClosure Toolsに頼ってる。

javascript

リンク

第三の答え、Stimulusjs - Qiita

昨今のフロントエンドトレンドを鑑みてフロントエンドの技術構成を考えると今はどんな選択肢が主流でしょう？それぞれ並列なものではないですが、React? Vue? Next? Nuxt?そんなワードがきっと頭に浮かぶでしょう。今の時代、jQueryでゴリゴリUIを記述するとなんだか白い目でみられる。そう、令和とはそういう時代です。界隈の最先端おじさんをみると、build processがあるのは当然で、HTML/CSSはjsが吐き出すもので、それが最大限正しいように語られています。確かにExising Domのアプローチで界隈から評価されてるライブラリはなく、さほどいい選択肢には見えません。(個人の主観) ではそれらのアプローチの何がそんなにいいんでしょう？過去から現在まで我々は何に苦心して、それらはそれをどう解決してくれたのでしょう？雑に紐解いていきましょう。(今回はUI構築の

n314 2021/02/23

今風のJsActionか。

javascript

リンク

10 年前に JavaScript で Flash Player を開発し買収された話

この記事は、JavaScript で Flash Player の実現を頑張った（もしくは現在進行系で頑張っている）人たちの集う Flash Advent Calendar 2020 に参加しております。私は過去に自分が設立した会社で ExGame という HTML5 実装の Flash Player（正確には Flash Runtime Engine）を開発し、その会社ごと DeNA に買収（M&A）されました。あまり出来ない体験であるのは間違いないので、Flash が終了を迎える今、改めて振り返ってみようと思います。 Flash Player の開発今から 10 年前の 2010 年、ちょうど iPhone が普及し始めてきてガラケーのシェアが 8 割から 6 割くらいに落ちようとしていた時期に、私は Flash Player を JavaScript で実装していました。以前この

n314 2020/12/24

javascript

リンク

HTML Over The Wire | Hotwire

Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. This makes for fast first-load pages, keeps template rendering on the server, and allows for a simpler, more productive development experience in any programming language, without sacrificing any of the speed or responsiveness associated with a traditi

n314 2020/12/23

なんぞこれ…。あとで読もう。

リンク

provide/requires in css files

n314 2020/06/27

もうgoogleの社内ツールは公開してくれないんだろうか。

javascript

リンク

Closure LibraryからTypeScriptの型定義を生成する - Cybozu Inside Out | サイボウズエンジニアのブログ

こんにちは、フロントエンドチームエキスパートチームの穴井(@pirosikick)です。弊社の製品である kintone は Closure Tools (Closure Library と Closure Compiler の総称) を使って開発していますが、TypeScript を使ったモダンなスタックへの移行を検討しています。その移行の過程で Closure Tools 側のコードを TypeScript で型安全に再利用したいケースが発生し、その解決策として Clutz というツールを試しています。今回は、この Clutz がどういったツールなのか、その使用方法と注意点などについて紹介します。この記事は次の条件に当てはまる方には特におすすめできる内容になっています。 Closure Tools(Closure Compiler, Closure Library)を使って開発

n314 2020/06/27

逆もあるのか。

javascript

リンク

Navigator: sendBeacon() メソッド - Web API | MDN

HTML DOM APINavigatorインスタンスプロパティactiveVRDisplays Non-standard 非推奨 appCodeName 非推奨 appName 非推奨 appVersion 非推奨 bluetooth (en-US) Experimental buildID Non-standard clipboardconnectioncontacts Experimental cookieEnabledcredentialsdeviceM emorydoNotTrack Non-standard 非推奨 geolocationglobalPrivacyControl Experimental Non-standard gpu Experimental hardwareConcurrencyhid Experimental ink Experimental keyboa

n314 2020/02/21

リンク

bfcache について覚えて帰ってもらいます。

【追記】「mixiページ」サービス終了に向けてのスケジュールは、2020年8月31日に全てサービス提供終了としていましたが、以下の日程に変更します。・2020年9月7日11時頃モバイル版mixiページ終了・2020年9月14日11時頃 PC版、スマートフォン版mixiページ終了終了時刻は前後する場合がございます。ダウンロード機能はPC版スマートフォン版mixiページ終了と同時の2020年9月14日11時頃に終了いたしますので、「mixiページ」データのダウンロードをご希望の方は、お早めにダウンロードをお願いします。以上、どうぞよろしくお願いいたします。【追記】終了予定の「mixiページ」とは、SNSmixi全体の中の一部特定サービスの名称でございます。 SNSmixiの全てが終了するわけではございません。2020年8月31日以降も引き続きSNSmixiはご利用いただけます

n314 2020/02/20

はてなの方なくなってた

javascript

リンク

仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう｜ハイクラス転職・求人情報サイト AMBI（アンビ）

仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう最近のJavaScriptフレームワークで利用される「仮想DOM」について、リアルDOMの違い、メリット・デメリット、仮想DOMを使ったフレームワーク開発などを、ダーシノ（bc_rikko）さんが解説します。はじめまして、ダーシノ（@bc_rikko）です。さくらインターネットでフロントエンドエンジニアをする傍ら、NES.cssというファミコン風CSSフレームワークを開発しています。さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか？そういったフレームワークで使われている、仮想DOMについて知っていますか？「聞いたことない」「聞いたことはあるけど、どう実装されているかは知らない」「熟知している」。いろいろなレベルの方がい

n314 2020/02/18

いい話

javascript

リンク

[Selenium] WebDriverでaddCookieするとき単位はミリ秒にしないといけない - Qiita

webdriver.WebDriver.Options.prototype.addCookie = function( name, value, opt_path, opt_domain, opt_isSecure, opt_expiry) { // We do not allow '=' or ';' in the name. if (/[;=]/.test(name)) { throw Error('Invalid cookie name "' + name + '"'); } // We do not allow ';' in value. if (/;/.test(value)) { throw Error('Invalid cookie value "' + value + '"'); } var cookieString = name + '=' + value + (opt_

n314 2020/02/07

codeceptjs でハマってた。めっちゃ前なんだけど今はどうなってるんだろう。取り敢えず expiry は削除した。

リンク

TypeScriptをプロダクト開発に使う上でのベストプラクティスと心得 - Qiita

同じTypeScriptという言語を利用する場合においても、トランスパイラによってTypeScript自体の機能制限がかかったり、思わぬトラブルを招く場合があります。それぞれのトランスパイラの特徴を踏まえた上で、それにより生じる問題も見ていきましょう。 1-1. tsc TypeScriptの開発元であるMicrosoft純正のTypeScript トランスパイラです。TypeScriptを利用する際に typescript パッケージをインストールする必要がありますが、それに同梱されています。公式ツールなだけあって最も早く最新バージョンのTypeScriptに対応したり、言語すべての機能を利用することができる一方で、バンドラではないためminifyやchunkの設定はできません。また、Path Aliasesの未解決や旧ESへの互換性が不完全であることが欠点として挙げられます。 tsco

n314 2020/02/05

使ってないから勝手なイメージで、TypeScriptならJSみたいに環境自体がややこしくならないと思ってたけど、そんなことはないのか。

リンク

20 年代のフロントエンド.md

Clone via HTTPS Clone with Git or checkout with SVN using the repository’s web address. 明日の下書きこれはなに高円寺.dev #3 用の資料 https://koenji.connpass.com/event/160886/ フロントエンド専門じゃない人向けの、フロントエンドの最先端〜やや未来の話ですこのレイヤーでは Node.js を使うべき/使うと強いという部分がありますが、他言語を否定しているわけではありません。むしろ他言語でこのアーキテクチャを模倣してほしいという話です。 10 年代のフロントエンドのポストモーテム 10 年代まとめ IE が死ななかったので各種ポリフィル、メタ言語からのトランスパイルが発達。しかしモダンとレガシーの乖離が深刻に。 node と npm エコシステムの成立