要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointe

Welcome to the 7th edition of the JavaScript Risings Stars! Like every year we try to provide an overview of the trending projects in the JavaScript eco-system over the last 12 months. The champion this year is a delicious bread with a smiling logo, it's good to start the year with a smile! The following graphs compare the number of stars added on GitHub over the last 12 months. We analyzed projec

2022-09-09改訂： gcc バージョンが古すぎたのと、C が内部計測でなかった点を改め計測しなおしました。結果、Rust は C より速くはなくなりました。紛らわしいことで、ごめんなさい。また、gcc のバージョンアップに伴い、Python および Ruby についてはビルドと計測をしなおしたので、これらも少し速い値に変わっています。この点もどうぞあしからず。 2022-09-10追記：ご要望のあった Python numba.njit 使用時と Go の結果を追加しました。PHP は JIT 有効化が面倒だったので断念しました^^; 2022-09-10追記2：C の計測で clock() を使うのはフェアではないという指摘がありましたので、念のため clock_gettime() を使用したコードに差し替えました。結果に大きな差はありません。 2022-09-10追記3：PHP

小ネタ。chromeで動作確認 何となく使っていたので改めて勉強してみたら知らなかったことなどのまとめ this 関数の呼び出し元のオブジェクトがthisになる。ただし、呼び出し元のオブジェクトの指定がない場合は、windowオブジェクトがセットされる。ただし、厳格モードuse strictの場合はundefinedがセットされる const foo = { bar: function() { // 呼び出し元はfoo.bar() console.log(this); // foo object const baz = function() { // 呼び出し元はbaz()でオブジェクトの指定がない console.log(this); // window object } baz(); const qux = function() { 'use strict'; // 呼び出し元はqux

はじめに 今回はwebpackやBabelについて学習したことを理解を深めるために文章としてアウトプットしていこうと思う。 そもそもなぜwebpackやBabelに関して学習しようと思ったかは、これまでTypeScript、React等を用いて様々なアプリケーションを開発してきたが、webpackやbabelに関する知識が曖昧なまま開発ばかりを行なっていた。なんとなく"とりあえず変換してくれているもの"程度の知識しかなかったので、しっかり理解していこうと思う。 そんな中でwebpackやbabelの必要性を学習していくうちにJavaScriptの歴史を理解した方がわかりやすいと思ったため、JavaScriptの歴史についても触れていこうと思う。 JavaScriptの歴史 JavaScriptの誕生 JavaScriptの1995年にNetscapeの技術者であるブレンダン・アイクが開発し

トラベルブックのフロントエンドチームでは2020年の9月から、ページのパフォーマンス改善に取り組んでいます。 今回は今までどのようにやってきたのかを紹介したいと思います。 Core Web Vitals 2020年5月、Core Web Vitals がSEOに影響されるというのがGoogleから発表され、集客的にもユーザー体験をページパフォーマンスが重要になりました。 弊社はメディアサービスを運用しており、SEOはビジネス的に重要な指標としています。 そのため、Core Web Vitals をパフォーマンス改善の指標としました。 Core Web Vitalsはより良いユーザー体験を提供するための指標となっていて、読み込み時間、インタラクティブ性、視覚的な安定性 に焦点をあてた下記3つの指標をベースに計測します。 Largest Contentful Paint (最大視覚コンテンツの

「TypeScriptとは」などシングルワードの検索結果に強いTypeScript入門記事の多くに、誤解を招く内容があることを確認しています。 以下にあげる記事を参考にされた方は情報のアップデートをしていただきたいですし、記事を公開しているメディアにおきましては内容を見直していただけるとありがたいです。 TypeScriptならクラスが書ける 「JavaScriptにはクラスがない、TypeScriptにはクラスがある」「ゆえに読みやすい短いコードが書ける」といった記述が見られますがこれは誤解です。 Udemy メディア - TypeScriptとJavaScriptの違い「TypeScriptではクラスの作成ができる」 侍エンジニア - 「TypeScriptでは、JavaScriptでできなかった「クラス」の作成を実現しています。複雑で大規模な開発を行うとき、JavaScriptではコ

この記事について Webエンジニアになって早１年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつもconsole.log();ばかりを使って原始的なデバッグをしていた。。。 そんな脳筋な過去の自分に教えてやるための記事です。 console.log({変数名}); 「いきなりconsole.log();の紹介かい！！！」って思われるかもしれませんが、この技を知ったときは「なんで知らんかったんや。。。」って思うくらい便利だったので最初に紹介します。 以下のようなHTMLがある場合 <form> <input type="text" value="名無しの権兵衛" id="name"> <input type="text" value="80歳" id="age"> <input type="text" value="バスケ"

とある休日 娘「ねぇ、パパ！」 娘「switchやろ〜！」 ワイ「おお、ええで！娘ちゃん！」 ワイ「Switchやろう！」 ワイ「ほな、テレビをつけて・・・」 娘「テレビ？」 娘「何を言っているの、パパ？」 娘「TypeScriptのswitch文のことだよ？」 ワイ「ファッ！？」 switch文で何をしたいのか 娘「今ね、ショッピングサイトを構築してるところなの」 ワイ「ほうほう」 娘「それでね、手広く儲けようと思って」 ワイ「おお、ええやんか」 娘「個人ユーザーだけじゃなく、法人ユーザーも登録できるようにしようと思うの」 ワイ「なるほどな」 娘「言語はTypeScriptを使っているんだけど」 娘「ちょっと聞きたいことがあるの」 ワイ「おう、なんでも聞いてや」 あいさつ関数を作っている 娘「ショッピングサイトにログインしたときに・・・」 個人の場合 → 「無職 やめ太郎さん、こんにちは

webpack is 何? webpack とは、一言で言うと JavaScript 向けのモジュールバンドラーです。 複数の JavaScript モジュールを一つ（またはいくつか）のファイルへバンドル（=bundle: 束にする、包む）してくれます。 複数の JS モジュールを（場合によっては CSS や画像などのアセット類も）一つにまとめる すでに新規開発の終了も伝えられる webpack ですが、「STATE OF JS 2022」ではいまだに利用率 No.1 の地位にあります。 webpack 後継のモジュールバンドラーとしては、すでに Turbopack の開発開始がアナウンスされています。しかし、これがプロダクションレベルに達するまでは webpack がおそらく使い続けられることになるでしょう。 使うメリットは何？ モジュールを 1 つ（もしくは少数）にまとめることでブラウ