最近のCloudflare Workersについて、知らない方向けにざっくばらんに書いてみます。 連絡事項 自己紹介しておくと、僕はCloudflareのDeveloper RelationsチームにいてDeveloper Advocateをやってます。 一方で、HonoというCloudflareのみならずDenoやBun、Fastly等で動くWebフレームワークを開発してます。 Cloudflare Workersとは？ 本題に入る前に、そもそも「Cloudflare Workersとは？」を簡単に紹介しておきます。 Cloudflare WorkersとはCloudflareのエッジで動くサーバーレス環境です。 基本的にJavaScript/TypeScriptでアプリケーションを書きます。 V8というJavaScriptエンジンの上でアプリを動かすのですが、これはWebブラウザのGo
SOLID原則を理解し、JavaScriptで実践するためのガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
ソフトウェア開発者にとって、堅牢でテスト可能で拡張性があり、保守性の高いオブジェクト指向のソフトウェアシステムを設計することは重要です。 そこで登場するのがSOLID原則です。 SOLIDは、ソフトウェア開発中に生じるかもしれない特定の問題を解決するために5つの設計原則が組み合わさったセットです。 この記事では、SOLID設計の原則について詳しく学んでいきます。 具体的には、SOLID原則が何を意味しているのか、各部分がそれぞれ何を表しているのか、また実際のプログラム例を挙げながら現役のプログラマーが説明します。 さらに、JavaScriptを使ってこれらの原則を実装する方法も紹介します。 SOLID設計原則とは？ 単一責任原則 (SRP) Open/Closed原則 リスコフ置換原理 (LSP) インターフェース分離原則 (ISP) 依存関係逆転の原則 最後に SOLID設計原則とは？
2023-08-02 What's "Next" JS Meetup
美しすぎる。神の言語といわれるLISPは、数学のように純粋で美しいロジックが展開できる言語。オシャレな LISP インタプリタ。 - Qiita
「本記事は、技術的な視点から情報を提供することを目的としております。内容については可能な限り正確性を期しておりますが、記事内の見解は執筆者の意見や理解に基づいており、すべての方にとって普遍的な結論を示すものではありません。技術の分野は常に進化し、新たな知見が追加されることもあります。ご意見がある場合には、建設的な対話を歓迎いたしますが、批判的な意見を展開する際も、お互いの尊重を大切にしたコミュニケーションを心がけていただけると幸いです。」 タイトル: 「東京プログラマー リスプを書かずにはいられない物語」 新宿の夜景を見下ろすカフェで、主人公の大輔は、ノートパソコンに向かって静かにキーボードを叩いていた。彼は東京で働くプログラマー。コードの世界に浸り、特に最近夢中になっているのが関数型言語LISPだった。 LISPは、数学のように純粋で美しいロジックが展開できる言語。大輔は「この関数型の世
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 私は普段インフラをメインで扱っているエンジニアです。 そんな開発がメインではない私が1年目でプログラミングを学ぶために使用した教材を紹介していきます。インフラエンジニアの方だけではなく未経験のエンジニアの方にも参考になれば良いなと思っております。 インフラの学習に使用した教材については下記記事にて紹介しておりますので、ご覧いただければ幸いです。 インフラエンジニアはプログラミングは必要？ まずはこの質問をChatGPTに聞いてみましょう。 はい、インフラエンジニアにとってプログラミングスキルは必要です。 近年、クラウドの普及や
まずはじめ React に焦点を置き、昨今のフロントエンドでどのようなフレームワークが選択肢にあげられるのかについて紹介します。続いて、技術選定を行う際に、どのようなことを考えるべきかについて話します。最後にこれまで話した点を踏まえて、私が実際に技術選定を行った際にどのような選択をしたのか実践的な内容に…
6月14日、Axel Rauschmayer氏は新刊書籍「Exploring JavaScript (ES2025 Edition)」を公開した。 本書は、モダン JavaScript の習得を容易にし、初学者から上級者までを対象に ES2025 までの全機能を体系的に解説するものである。以下、その内容を紹介する。 書籍の概要 「Exploring JavaScript」は、従来版「JavaScript for impatient programmers（せっかちなプログラマのためのJavaScript）」を大幅に拡充した最新版だ。モダンな機能に焦点を当てることで、読者が古い文法に煩わされずに学習を開始できる構成となっている。 ハイライト モダン機能を中心に据え、素早く学び始められる 必要に応じて深掘りできる発展的セクションを用意 テスト駆動型演習・フラッシュカードなどの補助教材を同梱 E
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Next.jsアプリケーションの開発時においてコンパイルが長時間に及ぶ問題が起きていたので、その原因を特定した手法と採用した解決策について記載します。 今回は結果的にコンパイル時間を100倍以上高速化することができました。 前提 今回の対応は以下のバージョンで行いました。 React@18.2.0 next@12.2.4 tailwindcss@3.2.4 postcss@8.4.14 Next.js の開発中に、コンパイル時間が長くなっていることに気づく 最近、Next.jsアプリケーションのローカル開発時に待ち時間が長くて生産性が低いのでなんとかしたい、という相談を受け、調査を開始しました。 まず、おもむろにyarn devでプロセスを立ち上げてみたところ、以下のようなコンパイル時間を示すログが表示されました。 yarn dev yarn run v1.22.19 $ next dev
ウェブでのテキストの折り返しは、HTMLコーダーにとって意外と難しい分野です。多様な画面サイズが存在する現代では、適切なテキストの折り返しについて悩むことが少なくありません。 この記事で紹介する折り返しとは、以下のようなテキストの区切りの良い場所で改行するかどうかです。 ▼固定幅で折り返し どこで生れたかとんと見当がつかぬ。何で も薄暗いじめじめした所でニャーニャー泣 いていた事だけは記憶している。 ▼文節での折り返し どこで生れたかとんと見当がつかぬ。 何でも薄暗いじめじめした所で ニャーニャー泣いていた事だけは記憶している。 本記事では、HTMLコーディングにおいて改行・折り返し方法の選択肢を整理し、最適な方法について考察します。 この記事で紹介すること <br />と<wbr />タグを使った改行指定 CSSのword-break: auto-phraseを使った自動折り返し JSラ
Chrome の JavaScript はとても高速なことでも有名ですが、その実行エンジンは V8 と呼ばれます。V8 自体は独立したモジュールであり、Node.js 等にも使われております。 V8 が JavaScript を高速に実行する技術の一つが JIT (Just In Time) コンパイルです（一般的に JIT と呼ばれます）。これは、そのまま実行すると遅い JavaScript を実行中にリアルタイムに直接マシンコードに変換し（これが Just In Time と呼ばれる所以です）、途中からそのコードに入れ替えて実行することで高速化を達成しています。特に何度も実行される関数で効力を発揮します。 JIT という名前は聞いたことがあろうとも、実際に JIT がどのようなコードを実行しているのかを確認する機会は滅多にないでしょう。この記事では、実際に V8 の JIT の出力を確
※Qiitaのおかげ（？）で転職できた話です。 【22歳】工場勤務ワイ ワイ「毎日毎日、接着剤で部品をくっつけるのしんどいな・・・」 ワイ「ワイ、作業が遅すぎて先輩に嫌われてるし・・・」 ワイ「転職したいな・・・」 ワイ「プログラマーってカッコええな・・・」 ワイ「よっしゃ、C言語ってやつの本を買って、勉強してみよか・・・！」 C言語の勉強開始 ワイ「さっそく本を読んでいくで」 ワイ「変数・・・関数・・・なるほどな」 ワイ「オモロイやんけ」 翌日 ワイ「よっしゃ、黒い画面（コマンドプロンプト）で動く、足し算プログラムができたで！」 一週間後 ワイ「・・・来る日も来る日も、黒い画面ばっかりや！」 ワイ「いつになったら、デスクトップアプリみたいなのを作れるようになんねん！」 結果 一週間で挫折しました。 【23歳】無職ワイ ワイ「工場がなくなって、無職になってもうたわ」 ワイ「ほな、職業訓練校
今年も GitHub のトレンドで 2021 年の JavaScript/TypeScript を振り返ります。去年の記事はこちらです。 — GitHub のトレンドで振り返る 2020 年の JavaScript | WEB EGG 集計方法 GitHub トレンドは過去の履歴を公式に提供していないため、非公式に集計されたデータを利用しています。 データソースはlarsbijl/trending_archiveを使用 去年はxiaobaiha/github-trending-historyを利用したが今年のデータは無かったので変更 日ごとにまとめた markdown になっており、remark で AST→ データ化しました 集計期間は 2021/01/01 から 2021/12/15 まで 対象言語はJavaScriptとTypeScriptのみ 集計後のデータはこちらのスプレッドシー
本記事は React best practices and patterns to reduce code を提供元の事前許可を得たうえで翻訳したものです。 元の記事に従いタイトルに「ベストプラクティス」と含んでいますが、実際にはベストプラクティスは規模や状況によって大きく異なります。 チームの状況にあわせて参考にしていただければと思います。 ===== これは全3パート中の第1パートとなる記事です。 パート1（この記事）パート2パート3 私は数年に渡っていくつかのプロジェクトで、React.jsを使った取り組みに参加してきました。様々なプロジェクトに取り組む中でいくつかの共通するパターンを見出したため本ブログでご紹介いたします。それではいきましょう。 1. reduxのactionsとdispatcherのためにカスタムフックを作成する私はreduxを使うことを好んではいませんが、いくつ
JavaScriptの文字列や配列は最長でどこまで格納できるか、気にしたことはありますか？関数は何個まで引数を取れるのでしょうか？ブロックのネストは何段まで？ この記事では、そんな素朴な疑問に答えてみます。 テストに使った環境は、 macOS 12.3.1 (Arm64) Node.js v17.7.2 Firefox Nightly 102.0a1 (2022-05-29) です。当たり前ですが、この記事に載せる数値は環境によって変わる可能性があります。 テストに使ったスクリプト類は https://github.com/minoki/javascript-limits に置いてあります。 文字列の長さ まずは文字列の長さです。 規格には The String type is the set of all ordered sequences of zero or more 16-bit
個人の感想でありrantなのであまり真に受けないでほしいです。ちなみに私はフロントエンド専門ではないです。Vue.jsは仕事で5年ほど使っています。Reactは趣味でいじる程度。 Reactはお作法を学び続けないといけないフレームワークReactを触れば触るほど、学ぶべき「お作法」が多いフレームワークだなと思う。例えば hooksの種類が多くて覚えきれない。それぞれの役割を理解するために、Reactの内部機構を多少理解している必要がある。例えば useReducer とか、useTransitionを名前から使い所を予想することは多分不可能だと思う。 hooksはコンポーネントの関数の中に書かないといけないので関心ごとにhookを書く場所を分けることができない。 ステートを変化させるたびにそのステートが描画に関係ない場所も再レンダリングされる。例えば<input> タグにステートをバイン
ウェブ技術を用いたクリエイティブコーディング環境にはさまざまなものがありますが、プロトタイピングや2D表現には、Canvas 2DをラップしたJavaScriptライブラリ「p5.js」が非常に便利です。この記事ではp5.jsの強み、便利な関数と作例を紹介し、自分で作成した作品の公開方法について解説します。 p5.jsとは p5.jsは、ウェブ上でグラフィカルな表現ができるJavaScriptライブラリで、基礎的なプログラミングの知識さえあれば手軽に創作を始められるのが魅力です。 またp5js.orgが提供しているウェブエディターを使うと、環境構築なしにブラウザ上でクリエイティブコーディングが始められます。たった数十行のみのコードでもメディアアート作品のような出力が得られる、とても興味深いライブラリです。今回はp5.js Web Editorを使って簡単なアニメーションを制作しましょう。
Rails 7.0ではフロントエンドサポートが刷新されます。新たなライブラリが多数導入され、選択肢が増えるため、「Rails公式のものを選べばOK」という戦略が通用しなくなります。 本稿では、Railsでフロントエンドを書くための選択肢について、その歴史と実装を踏まえて比較検討します。 結論から言うと(まだアルファ版なので今後も状況が変わる可能性はありますが、) 新規アプリケーションではSprocketsの役割は無くなりそうです。新しいライブラリとして Propshaft, importmap-rails, jsbundling-rails, cssbundling-rails が登場し、主要な選択肢として以下が提供されます。 (各ライブラリの詳細については後述します) Propshaft + importmap-railsデフォルトの選択肢。Node.jsが不要。トランスパイルを含め、複
式年遷宮の様な感じですが、数年おきにブログを作り直してます(前回)。今回は Gatsby でデザインした UI をほぼそのままに、フレームワークを Astro に移行しました。静的サイトの作成では Astro の開発者体験が最高に優れているので、2 年間ほぼ塩漬けにしてしまっていた Gatsby のコードを無事に移行できてよかったです。 Astro とは？ Astro は 一言で言うと、Better HTML です。Astro というフォーマットでサイトが記述できるのですが、普通の(素の)HTML も Astro としてそのまま使えます。厳密には違いますが、HTML のスーパーセットみたいな感じです。その HTML の要素群を component としてまとめることで関心を分離できて(この辺は Web Components でも実現できます)、必要に応じてビルド時にロジックも走らせることが
趣味だったOSS活動で収入を得られるようになるまで。「継続」と「発信」がキャリアを切り開いた - Findy Engineer Lab
はじめまして。鈴木 颯介(@__sosukesuzuki)です。私は筑波大学情報学群情報科学類の学生をしながら、Ubie株式会社でプロダクト開発エンジニアとして働いています。また、余暇時間を使って、いくつかのOSSの開発に関わっています。 この記事では、私がプログラミングやOSS活動を始めたきっかけから入り、OSS活動で収入を得るということについて私なりの考えを示し、最後にOSSと私のキャリアについて振り返ります。 私は2022年の3月に初めて正社員として働くようになり、まだキャリアと呼べるほど長いキャリアを持ってはいません。ですのでこの記事が、私と立場の近いコンピューターについて勉強している学生やまだ経験の浅いエンジニアの方々が、ご自身のキャリアを考える上での参考になれば幸いです。 最初に断っておきますが、私がこれまで関わってきたOSSのほとんどは、JavaScriptのコミュニティのも
JAMスタックを実現する国産サービス「Kuroco」正式リリース。GitHub Actionsでビルドし、Webホスティング、APIサーバなど提供。月額1100円分まで無料
JAMスタックを実現する国産サービス「Kuroco」正式リリース。GitHub Actionsでビルドし、Webホスティング、APIサーバなど提供。月額1100円分まで無料 kurocoは当初、いわゆる「ヘッドレスCMS」と呼ばれる機能を提供するWebサービスとして登場しました。 今回、これにGitHub Actions連携機能とWebホスティング機能などが追加されたことにより、「JAMスタック」を実現する機能が一通り揃うことになりました。 ヘッドレスCMSとJAMスタック 一般にCMS（コンテンツマネージメントサービス）は、WordPressやMovableTypeなどがよく知られています。これらはコンテンツを入力すると、あらかじめ設定されたHTMLのテンプレートにコンテンツを組み込んでWebサイトを構築してくれます。 ヘッドレスCMSとは、この一般的なCMSから、Webサイトの構築機能
Next.jsから学ぶWebレンダリング ~React誕生以前からApp Router with RSCまでの流れ~
最近話題のReact Server ComponentsやIslands Architectureが何を解決しようとしてるか知るまでの簡単なWebレンダリングの流れを記載しました。 社内勉強会のために作成した資料となるため箇条書きになっておりますが、なるべくHowやWhatではなくWhyやトレードオフを記述するようにしています。（読みにくい or 誤った記載あったらFB頂けたら幸いです） React 誕生までの Web iPhone と Ajax がリードした Web 2.0 時代 Webにおいて Ajax という技術が注目され始める 2005~ Google mapsやGmailといったサービスがリード jQueryの誕生が 2006~ iPhone登場 2007~ スマホアプリの登場によりソフトウェアのUXに求められる質的変化 mobile safariが時代のリードをした Flash
大雑把な理解としては問題ないですが、実は setTimeout の隠された能力はそれだけではありません。 setTimeout の隠された能力を知るとどんな良いことがあるのでしょうか？ 例えば、次のような良いことがあります。 ブラウザに対する理解が深まる Web サイトのパフォーマンスを向上させることができる ドヤれる まず、 ブラウザに対する理解が深まります 。 かのアリストテレスはこう言い残しました。 Knowing setTimeout is the beginning of all wisdom. ( setTimeout を知ることは、すべての知恵の始まりである) setTimeout を知ることは（ブラウザの）すべての知恵のはじまり と言って過言ではありません。 普段なにげなく setTimeout を使っていても、「実はブラウザは裏でこんなことしているんだー」という新しい知見
AWS、高速起動にこだわった軽量なJavaScriptランタイム「LLRT」（Low Latency Runtime）をオープンソースで公開。AWS Lambdaでの利用にフォーカス
AWS、高速起動にこだわった軽量なJavaScriptランタイム「LLRT」（Low Latency Runtime）をオープンソースで公開。AWS Lambdaでの利用にフォーカス Amazon Web Services（AWS）は、実験的な実装としてサーバレス環境のAWS Lambdaで使うことにフォーカスした軽量なJavaScriptランタイム「LLRT」（Low Latency Runtime）をオープンソースで公開しました。 LLRTはRustで開発され、JavaScriptエンジンにはQuickJSを採用しています。 LLRTの最大の特徴は、現在のJavaScriptランタイムにおいて性能向上のために搭載されているJITコンパイラをあえて搭載せず、よりシンプルで軽量なランタイムとして実装することで高速に起動することにこだわっている点です。 これにより（Node.jsやDenoや
TypeScript解読アシスタントこれはTypeScriptのコードリーディングを支援するツールです。 既存TypeScript案件に参加した際に、既存コードを読むにあたって、次のような悩みを解決するためのものです。 TypeScriptの構文がよくわからない「??って何？」「#nameの#ってコメント？」「<></>って何？」言語機能の名前がわからず、調べようがない「string | undefinedの|ってなんて名前？」「value as anyってなんて機能？」「[K: string]: stringって何？」使い方左のエディターに解読したいTypeScriptをコピペする解読したいコード部分をクリックする右エリアにコードの意味などが表示されるサンプルコード入力するコードがない場合はサンプルコードでお試しください。 サンプルコード機密情報コードはすべてオフラインで処理され、サーバ
【2024年】ITエンジニア本大賞まとめ
アジャイルプラクティスガイドブック チームで成果を出すための開発技術の実践知 チーム・組織にプラクティスを導入し、根付かせるために！ 116の手法を一冊にまとめた“実践”の手引き チームでのアジャイル開発には、開発技術やツールなどの「技術プラクティス」の活用が重要です。 プラクティスはそれぞれの目的や役割を意識することで効果を発揮します。しかし、目まぐるしく状況が変化する開発では、当初の目的を忘れて、プラクティスに取り組むこと自体が目的化してしまうチームも少なくありません。 本書は、チーム・組織でアジャイル開発に取り組んできた著者が、プラクティスの効果的な選択・活用のしかたについて、自らの実践経験に基づいてまとめたガイドブックです。 架空の開発現場を舞台にしたマンガとともに、チーム開発の様々なシーンで役立てられるプラクティスを、幅広くかつわかりやすく解説しています。開発現場に備えておけば、
Agoraで君だけの最強のClubhouseを作ろう
Clubhouse に招待されないので自分で作ってみた、みたいな感じです。まあ別に招待してくれなくていいんですけどね、大して興味ないしそのうちオープンになるだろうしそれにほらどうせ Android 使ってるしあのぶどうは酸っぱいし[1]。 初挑戦で頑張って調べて書いてる感じなので何かあれば PR とかお願いします。 先にまとめ Clubhouse は Agora を使っているらしい Agora - Real-Time Voice and Video Engagement https://www.agora.io/en/ 無料枠は音声 10,000 分/月 （誤って『10,000 時間/月』と記載してました。分です。すみませんでした。） 公式チュートリアル：Start a Voice Call 今回作ったデモ：ginpei/try-agora 毎月 10,000 分無料とのこと。価格のページ
2024-08-06 TSKaigi サブイベント #1 フロントエンド
React＋Reduxによる状態管理とフロントエンドの技術的負債 ─ 長く継続するサービスのアプリケーション設計｜ハイクラス転職・求人情報サイト アンビ（AMBI）
React＋Reduxによる状態管理とフロントエンドの技術的負債 ─ 長く継続するサービスのアプリケーション設計 遷移なく表示コンテンツを変更できるシングルページアプリケーションでは、ページの状態管理が重要になります。現在はReactによるUI構築とReduxによる状態管理を選択しているChatworkは、jQueryなどの技術的負債と共存しながら、フロントエンド設計の見直しを重ねてきました。クライアントサイド・アーキテクトの火村智彦（@eielh）さんと、エンジニア採用広報の高瀬和之（@guvalif）さんによる解説です。 クラウド型ビジネスチャットツール「Chatwork」は、2011年3月にローンチされて10年以上にわたり開発を継続してきました。このように長く続くサービスがユーザーに価値を提供し続けるには、時間経過による変化に適応するため設計の見直しが必要になります。 しかし、設計を
はじめに こんにちは、ダイニーの ogino です。 TypeScript のコンパイラは今まで TypeScript で実装（セルフホスト）されていました。 それが TypeScript 7.0 から、Go による実装に移植され、10 倍高速になります。 本記事は、移植に関して筆者が疑問に感じた点を、GitHub discussion や TypeScript lead architect のインタビュー動画などから調べてまとめたものです。 移行の背景 今回 Go に移植される背景は、大規模な TypeScript コードベースをコンパイルする際のスピードの遅さにあります。 例えば VSCode のコードベース (150 万行) に対して tsc を実行すると、約 80 秒もかかります。 TypeScript のコンパイルは大きく以下の段階に分けられ、その内の check が特に複雑で重
ヤフーのユーザー5,400万人から"同意"を得るための技術（HTML/CSS/JavaScript）
こんにちは。SWATチームの今谷と、LY会員サービス統括本部の木所です。 LINEとヤフーの会社合併に伴って、LINEヤフー株式会社が提供するサービスを利用するユーザーに「新プライバシーポリシーへの同意」をいただくためのモジュールを開発しました。本記事では、ヤフーのユーザー5,400万人から”同意”を得るための工夫について、実装上の不具合も交えてご紹介します。 なお、ご紹介する内容は、UIT × Bonfire Front-end Meetup #1 での発表が起点となっています。詳細についてより深く知りたい方は、発表資料 や Podcast をあわせてご参照ください。 会社合併と、新プライバシーポリシーのご案内 LINEとヤフー、それぞれで同意モジュールがあります。Web向けのほか、iOS・Androidアプリ向けにも提供しました。 Webの同意モジュールでは「Modal版」と「Ful
巷の「ReactとNext.jsの比較」はここがおかしい、というか比較すること自体が微妙 - honey32
(WIP まとまったら Qiita とかに上げるかも) TLDR; 「React と Next.js を比較」という記事で、 Next.js と比較できるのは「フレームワークなしで React を使うという選択肢」であって、「React そのもの」ではない。 ✅️ React を使うのに 「フレームワークあり」 vs 「フレームワークなし」 ❌️「React」 vs 「Next.js」 それはそうと、「create-react-app の機能・特徴」のことを、「React の機能・特徴」であるかのように書いてしまっている記事が多い create-react-app 自体が擬似的なフレームワーク（といえそう） そもそも、create-react-app は今は更新されてないので create-vite を使うべき フレームワークあり or フレームワークなし 【フレームワークあり】 Reac
はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。 対象読者 テキストエディタメインで開発してきた方 Visual Studioより軽い環境が欲しいと考えている方 Visual Sudio Codeをもっと使いこなしたい方 必要な環境 本記事の内容は、以下の環境で動作を確
2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦線のレンジバーをマウスでドラッグすると、2つの画像を比較できます。 See the Pen Easy comparison slider by coliss (@coliss) on CodePen. HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type="range"で実装します。 <div class="compare"> <section class="before"> <img src="Runner.svg" a
TypeScript を学習中の方に勧められる練習問題集として手頃なものがないなと思い、作ってみました。 TS の問題集としてはtype-challenges がよく話題に上がりますが、実用上あそこまでの型パズルを使うことはあまりないため、最初に取り組むにはハードルが高いです（もちろん知っていたら便利ではありますが、初学者向けではない）。 想定読者 JavaScript を書くことには慣れている TypeScript はこれから・まだ慣れていない TypeScript の基本的な型についてはすでに知っている はじめに JavaScript の機能に関する問題は扱いません。TypeScript の型システムに関する問題のみ扱います。 そもそも TypeScript についてよくわかっていない場合、サバイバル TypeScriptなどで学習から始めてみてください。 「型がつけられると何が嬉しい
React のルール – React
様々な概念を表現する方法がプログラミング言語によってそれぞれ異なるように、React にも、理解しやすい方法でパターンを表現し高品質なアプリケーションを産み出すための慣用的な記法、ないしルールが存在します。 このセクションでは、自然な React コードを書くために従うべきルールを説明します。自然な React コードを書くことで、安全で整理されており、組み合わせ可能なアプリケーションを作成することができます。以下に挙げる特性により、アプリは変更に対して頑健になり、他の開発者やライブラリやツールと連携しやすくなります。 以下のルールは React のルールとして知られています。これらを守っていないならアプリにバグがある可能性が高い、という意味で、これらは単なるガイドラインではなくルールです。またこれらを守らない場合、あなたのコードは不自然で、理解や推測が難しいものになるでしょう。 Reac
ただし、種別は以下の通りです。 prefix (前置演算子) …… もとの式の手前に何個でもつけられる演算子。 例: -~-~x postfix (後置演算子) …… もとの式の直後に何個でもつけられる演算子。 例: x.foo()`bar`[0] postfix once …… もとの式の直後に1個だけつけられる演算子。 例: x++ は可能だが x++-- はパースされない。 逆に ++--x はパースされるが、構文とは別のルールで禁止される。 (後述) infixL …… 中置演算子で左結合 (演算子の優先度が同じ場合は左側にあるほうが優先される) 例: 0.1 + 1.0 - 1.0 は (0.1 + 1.0) - 1.0 になる infixR …… 中置演算子で左結合 (演算子の優先度が同じ場合は右側にあるほうが優先される) 例: 2 ** 2 ** 3 は 2 ** (2 **
WebAssemblyとしてPostgreSQLをビルドした「PGlite」公開。Node.jsやブラウザ上でPostgreSQLを実行、DBの永続化も可能
PostgreSQLのソースコードをWebAssemblyバイナリとしてビルドしたことで、Node.jsなどのJavaScriptランタイムやWebブラウザ上で（ほぼ）フル機能のPostgreSQLを実行可能にした「PGlite」が公開されました。 PGliteはPostgreSQLのCのソースをEmscriptenでコンパイル PostgreSQLはオープンソースの代表的なリレーショナルデータベースであり、C言語で開発されています。 PGliteはこのPostgreSQLのCのソースコードのビルドにEmscriptenコンパイラを使用してWebAssemblyバイナリとして出力、JavaScript/TypeScriptからライブラリとして呼び出せるようにしたものです。 ただしEmscriptenでコンパイルされたプログラムは新しいプロセスをフォークできないため、PGliteはPostg
全世界のソフトウェア開発者は4700万人。最も多いのがJavaScript開発者で2800万人、Java、Pythonが続く。スラッシュデータの調査
全世界のソフトウェア開発者は4700万人。最も多いのがJavaScript開発者で2800万人、Java、Pythonが続く。スラッシュデータの調査 IT業界に関する調査を行っているSlash Dataは、全世界のソフトウェア開発者に関する調査結果を発表しました。 発表によると、全世界のソフトウェア開発者は合計で約4700万人。そのうち最も多く使われているプログラミング言語がJavaScriptで、約2800万人のソフトウェア開発者が利用しています。 2位がJavaで約2320万人、3位がPythonで2290万人、4位がC++で1630万人、5位がPHPで1150万人と続いています。 言語ごとの開発者の増加ペースで見ると、JavaScriptを利用する開発者はこの1年で280万人増加したものの増加ペースは鈍化。 スラッシュデータは、この鈍化はJavaScript開発者をめぐる人材市場が成
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近のCloudflare Workers - ゆーすけべー日記
App Router時代のデータ取得アーキテクチャ
![自分がずっと欲しかったバーチャル本棚アプリ作ったら大満足でした - karaage. [からあげ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/ea972a75a929cbd97213efd43cdeee3bd4328623/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F44a577e75704ff51d0d84c9f96946d32293b4761%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fk%252Fkaraage%252F20250906%252F20250906161345.png)
インフラエンジニア1年生がプログラミングを勉強するのに使った教材 - Qiita
React フレームワークの 動向と選定基準
【海外ニュース】ES2025対応の詳しすぎるJavaScript解説書が無料公開され全プログラマ大歓喜
Reactを学ぶ上で知っておくべきJavaScriptの基本概念 - Qiita
Next.js製アプリケーションのコンパイルを約100倍高速化した話
JSONデータをキレイに可視化してくれるオンラインツール「JSON Crack」は手軽でお勧め／画像化してクリップボード・ローカルファイルへエクスポートすることも【やじうまの杜】
CSSで文節の折り返しを！ br・wbrとauto-phraseの活用術 - ICS MEDIA
JavaScript 実行エンジン V8 の JIT 出力コードを読んでみよう
高卒30代未経験からモダン・フロントエンドエンジニアになった軌跡を全て書いていく - Qiita
GitHubのトレンドで振り返る2021年のJavaScript/TypeScript
Reactのベストプラクティスとコード削減パターン - パート1
JavaScriptの上限・限界値 - Qiita
VueエンジニアがReactを触ってみた感想｜Yutori Otsu
p5.jsによるクリエイティブコーディング入門 - ICS MEDIA
Rails 7.0でアセットパイプラインはどう変わるか | Wantedly Engineer Blog
ブログをAstro に移行しました - As a Futurist...
setTimeout の真の力、あなたは知っていますか？ - Qiita
TypeScript解読アシスタント | TypeScript入門『サバイバルTypeScript』
tsconfig.jsonの設定を見直そう！�フロントエンド向け 2024夏
TypeScript の Go 移植に備えて知っておくべきこと
VSCodeをWebサイト開発用ツールに ―HTML／CSS／JavaScriptエディタとして強化しよう！
CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
【初学者向け】具体例で学ぶTypeScript練習問題集
JavaScriptの演算子の優先順位と「禁止ルール」の一覧
docs.google.com
www.imdb.com
www.cucei.udg.mx
note.com/sonogi_osamu
www.cucei.udg.mx
www.imdb.com