tsconfig.jsonの設定を見直そう！�フロントエンド向け 2024夏2024-08-06 TSKaigi サブイベント #1 フロントエンド
イベントループと TypeScript の型から理解する非同期処理
この本は、ブルーベリー本の 8 章からインスパイアされて、 TS の型が示す情報から Promise というものを理解してみる、というアプローチで書いたJSの非同期処理の解説です。 これらの資料と合わせて読むことを推奨します。 JSのイベントループのイメージを掴む JSでは中々意識することが少ないですが、正しく理解するには OS レベルのスレッドの視点で考え始める必要があります。 ブラウザや Node.js では一つのスクリプト実行単位を1つのスレッドに割り当てます。それをメインスレッドと呼んだり、ブラウザだったら UI スレッドと呼んだりします。 例えばブラウザでは、これは秒間60回、つまり 16.6ms ごとにループを呼び出します。(node だったらこれがもっと短いです) 仮に setTimeout の実装がなかったとして、それ相当の擬似コードを書くのを試みます。 let handl
textareaをカスタマイズできるReact用のライブラリを作成しました
HTMLのtextarea要素では、テキスト単位で色をつけたりイベントハンドリングしたりなどすることは、通常の方法では出来ないことは皆さんご存知かと思います。それを(擬似的に)可能にするライブラリを作成しました。 もしよろしければスター、使用した上でフィードバックなどいただけると非常にありがたいです。 Demo テキストを装飾したり(textareaに見えないかもしれないですがtextareaです)、 キャレットの位置にメニューを表示したり、 テキストにカーソルを乗せた時にTooltipを出したり、 アイデア次第で色々と出来ると思います(もちろん原理上不可能なことはありますが…)。 同様のことは、例えばSlateなどのライブラリを使用しても実現可能だと思いますが、こちらの方が断然軽量でバンドルサイズに何倍も差があります(現在約3.0kB gzipped)。なのでエディタライブラリを持ち出す
[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny
[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny
![[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny](https://cdn-ak-scissors.b.st-hatena.com/image/square/95e28eebf0596a7ba67bec80b26b3d4e01b6cc91/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201901%2F2019011910.png)
Ikyu Frontend Meetupを開催しました - 一休.com Developers Blog
この記事は一休.com アドベントカレンダーの14日目の記事です。 qiita.com こんにちは。 id:kentana20 です。一休で宿泊サービスの開発をしています。 今日は一昨日の夜に実施したイベント「Ikyu Frontend Meetup」の様子をレポートしたいと思います。イベントページはこちら。 ikyu.connpass.com 年末の忙しい時期にもかかわらず、多くの方にご応募・ご参加いただきました。 今回のイベントのきっかけ 過去に2度、一休ではテック系イベントをやっていましたが、「ぼちぼちまたイベントやりたいな〜」と思っていたときに、 id:supercalifragilisticexpiali が書いた user-first.ikyu.co.jp を見た他社のエンジニアの方から「情報交換しましょう」と複数問い合わせや依頼があったので、イベントにしてしまおう、と思って今
JavaScript とクロスブラウザでの IME event handling (2017年) - たにしきんぐダム
この記事は CAMPHOR Advent Calendar 2017 22日目の記事です。 昨日は @ryota-ka による Type-level TypeScript - ryota-ka's blog でした。 CompositionEvent が多くの主要ブラウザでサポートされた2017年冬なら、JavaScriptで日本語入力に対応したちょっとした入力補完機能の実装はシュッとできると思ったのですが、ブラウザによって細かい実装が異なっていてちまちまとしたworkaroundが必要になったのでメモ 検証環境 Windows10 / Microsoft Edge 41.16299.150 Windows10 / InternetExplorer11 バージョン: 11.64.16299.0 macOS Sierra 10.12.6 / Google Chrome バージョン: 63.0
半年間、自分を騙しながらアウトプットに積極的になってみた - valid,invalid
この半年間はソフトウェアエンジニアとしてのアウトプットに積極的になるよう意識的に行動してみたので振り返ってみます。長くなってしまったので3行でまとめるとこんな感じです。 成長と刺激を求めて OSS contribution や登壇やイベント運営を頑張ってみた 成長したかはわからないが、知り合いが増えたりして刺激を受けることが多くなった これからも続けていくが持続可能なペースにしたい この半年間、登壇とかイベント運営とかに積極的になるよう"試験運用-セルフコントロール-"してきたのでそろそろ振り返ってまとめたい— 広島の粗大ゴミ (@ohbarye) 2018年9月27日 だいたい2018年上半期の話ですが一部期間外の話もあります。 なぜアウトプットを増やすか 唐突ですが、現職では日常の業務を漫然と続けるだけで成長するフェーズは終わったのかなぁと思っています。新しく何ができるか、何をすべきか
Node.jsでのイベントループの仕組みとタイマーについて - 技術探し
libuv/core.c at v1.x · libuv/libuv Cross-platform asynchronous I/O. Contribute to libuv/libuv development by creating an account on Git... タスク タスクは、同期タスクと非同期タスクの 2 種類存在します。 setTimeout(() => console.log(1)); setImmediate(() => console.log(2)); process.nextTick(() => console.log(3)); Promise.resolve().then(() => console.log(4)); (() => console.log(5))(); 同期タスク (() => console.log(5))(); 非同期タスク setTim
JSer.info 400回記念イベントを開催しました - JSer.info
2018年9月22日(土)にJSer.info 400回記念イベントを開催しました。 無事JSer.info 400回記念イベントを行うことができました！ JSer.info 400回記念イベント - connpass 2018年9月22日(土)に JSer.info 400回目記念イベントを開催します - JSer.info JSer.info 400回記念イベント - Togetter 今回は「憶測しないで議論しよう」というテーマで開催しました。 このテーマについてはJSer.info 400回記念イベントというスライドでも話をしていますが、参加者全員が何か得られるものがあればいいなというPositive Sumの考え方で設定しました。 参加して何か得られたものがあれば幸いです。 本日はご参加いただきありがとうございました！ Special Thanks 会場: @koba04 サイボ
JavaScript のスレッド並列実行環境
これは Chromium Browser アドベントカレンダーの十日目の記事です。本記事では Chromium における JavaScript のスレッド並列実行環境について仕様・実装・API の面から包括的に紹介します。ブラウザの内部実装に興味がある人を対象に、各機能の使い方ではなく実行モデルに焦点を当てて説明しているため、難易度は高いです。使い方を知りたい人は MDN などの記事を読んでください。この記事をきっかけに実装解読に挑戦してみる人が一人でも増えると幸いです。 本記事を書くにあたり、yuki3 さんに多くのコメントをいただき、議論に付き合っていただきました。ありがとうございました。なお、文責はすべて私 (nhiroki) にあります。誤りや補足、質問などは気軽に GitHub Issue もしくは Twitter へお寄せください。 更新履歴 2018/01/15 Layout
Svelte で依存のないコンポーネントを作る
特定の UI ライブラリへの依存をなくしたいアプリのフロントエンドを作っていると、どんなアプリでも使うようなコンポーネントが繰り返し出てくることに気がつきます。例えば、日付入力をカレンダーで選択させるようなコンポーネントは、日付入力機能をもつすべてのアプリで使用したいです。こういった汎用的なコンポーネントはだいたいライブラリが世の中にあるので、それを使うことが多いですが、最近よくあるのが、jQuery に依存しているから使えない (使いたくない) というケースです。最近のプロジェクトではモダンな UI ライブラリ (Vue とか React など) を使い、jQuery を使っていないことが多いので、そこにさらに jQuery 依存のコンポーネントを入れてしまうと、読み込むスクリプトサイズが大きくなってしまうのが主な理由です。 例えばこういうのを使いまわしたい (flatpickr の動作
ITキャリアに関する記事
このページではMayonezに掲載されている「ITキャリア」に関する記事をたくさんご紹介しています。Mayonezで「ITキャリア」に関する記事をお楽しみください。 ZEXAVERSE ゼクサバースはWEB3.0を身近なものにZEXAVERSE（ゼクサバース）という企業を聞いたことはないでしょうか。この記事では、ZEXAVERSEの概要やZEXAVERSEのサービスなどについてくわしく紹介していきます。ZEXAVERSEについて知りたい方、興味がある方は是非ご覧ください。 Unity入門に最適なチュートリアルサイトまとめ・比較今回はUnityでのゲーム開発を始めるときに参考になる、入門チュートリアルサイトをまとめました。全くプログラミング初心者の方から、他のプログラミング言語で開発をしたことがある方を対象にまとめています。
「次世代 Web カンファレンス」を開催します #nextwebconf
Intro 2015/10/18(日) に、「次世代 Web カンファレンス」を開催します。 名称: 次世代 Web カンファレンス 日時: 2015/10/18(日) 場所: 法政大学 hash: #nextwebconf 公式: connpass 参加費: 無料 Motivation 「Web について話す場」 というか「Web そのものをテーマにした場」というのが、意外と少ないなとずっと思っていました。 (もちろん、結果として Web について話しているカンファレンスや勉強会はたくさんありますが。) そして、スライドなどを用いて何かを「発表する」ニュアンスではなく、進化の早い Web で「今何が起こっているか？」と「これからどうなっていくのか？」という、答えの無いもの、でもみんなが気になり考えていること、今だからこそ考えないといけないことを真っ向から議論する場というのが、もっとあって
「JSオジサン #5」 イベントレポート | Goodpatch Blog
6/25(木)に21cafeにて開催されたグッドパッチ協賛のイベント「JSオジサン #5」のレポートをお届けします。 JSオジサンとは？ JSオジサンはJavaScriptにまつわるLT(ライトニングトーク)を、気軽にアルコールも入れつつ、普段の勉強会とは一味違う感じで楽しむイベントです。 LTの内容はオジサンらしく濃い話ばかりで、普段の仕事への活用の意味でもネタの意味でも好評をいただいております。 こんな名前のイベントですが若い方はもちろんのこと、多くの女性にも参加・登壇いただいています。 昨年3月に行われた第1回から数えて、ついに第5回目。今回も定員80名のところに200名あまりから参加希望をいただきありがとうございました！ 残念ながら参加できなかった方も、この記事をで少しでも雰囲気がつたわればと思います。 LT紹介 それでは、各登壇者さんたちがどのようなLTをされたのかを紹介していき
JSer.info 200回記念イベントを開催しました
まずは、2011年1月16日から始めて毎週書いてるJSer.infoでどれくらいの記事を紹介してきたかや、最近あった出来事として韓国語訳やGitHub上に移行した話等をしました。 また、現在どういうふうにJSer.infoを更新してるか等についても話しました。 世界のJavaScriptを読もう @ 2014 2つ目は1周年記念で話した世界のJavaScriptを読もう @ 2012の2014年版という感じです。 オフライン勉強会でJSer.info一周年について発表してきた - JSer.info 世界のJavaScriptを読もう @ 2014は来る人にあわせて少しコアよりな部分も多い感じです。 画面下にスクロールすると^Note的なのも見えるのでそちらも読むといいかもしれません。 LoopBackについて - @yuumi3 Node.js製のフレームワークであるLoopBackにつ
新・三大JavaScript タッチ対応ライブラリ比較(Hammer.js/QuoJS/ TouchSwipe) - Qiita
モバイルデバイス全盛の昨今、サイトのデザインだけでなく動きも対応しなくては！というケースがあります（私はありました）。 そんなわけで、JavaScriptのタッチ対応ライブラリについて評価を行ってみました。ライブラリの一覧についてはこちらのサイトが詳しく、ここから対応イベント・更新頻度を基に評価対象を表題の３つに絞り、その動作を比較してみました。 各ライブラリによるタッチの挙動は、以下で比較可能です(おまけでTouchyも入ってます)。 Gesture Detector 今スマホやタブレット的な何かでこの記事を読まれているあなた！はぜひ実際に動かしてみて下さい。 私はAndroid4.0デバイスしか持ってないので、xxで動かんぞ、ということがあるかもしれないです。そんな時はコメントなどで連絡いただけたらうれしいです。また、コードはこちら。 結論 **結論としてはHammer.jsをお勧めし
プログレッシブレンダリングでUXを向上させるJS非同期読み込みのベストプラクティス | ゆっくりと…
本ブログでは、サイトの高速化に直結する「JavaScript 非同期読み込み」の話題を多数取り上げてきました。タイトルに釣られてこの記事を見てくれている方なら Google Analytics の非同期コードスニペット はご存知でしょうし、規模の大きいサイトやアプリ用に RequireJS などのフレームワークを使っている方もいるでしょう。 GA も RequireJS も、動的に生成したスクリプト要素を DOM に埋め込む「DOM 挿入法」が用いられています。さらに遡れば、Steve Souders が 2009年4月の記事 ノン・ブロッキングなスクリプト読み込み で、6つの手法に分類しています。 果たしてこれらの方法は、サイトの高速化にとってベストなのでしょうか？ 答えは2012年12月の海外記事にありました。そこで本エントリーでは、日本ではほとんど取り上げられていない Frame i
)
Pointer events updates (Windows)
Pointer events are events and related interfaces that handle hardware agnostic pointer input from devices like a mouse, pen, or touchscreen. Since its premier in Internet Explorer 10, Pointer events has become a World Wide Web Consortium (W3C) specification, thanks to the feedback and support from other browser vendors and the web standards community. To comply with the Candidate Recommendation of
Office JavaScript API reference documentation - Office Add-ins
API reference documentationAn add-in can use the Office JavaScript APIs to interact with objects in Office client applications. Application-specific APIs provide strongly-typed objects that can be used to interact with objects that are native to a specific Office application. Common APIs can be used to access features such as UI, dialogs, and client settings that are common across multiple Office
HTML / DOM におけるキーボードイベント周りの話 - ひだまりソケットは壊れない
最近キーボードショートカットの実装をしようと思ってキー入力によるイベント周りについて調べてみたのだけれど、日本語でまとまった情報が見つからなかったので、キーボードショートカットの実装に必要そうな内容を簡単にまとめておこうと思う。 キーボードショートカットに限らず、キー入力によるイベント周りの何かをする場合には参考になると思う。 本記事では、DOM 3 Events spec の 2012-09-06 の版を参照しており、将来の版では変更されている可能性がある。 最新の版は下記リンクから確認のこと。 Document Object Model (DOM) Level 3 Events Specification (DOM 3 Events spec の最新安定板) keydown イベント、keypress イベント、keyup イベントについて keydown イベント は、キーが押された
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
