関数型プログラミングが『銀の弾丸』であるという非常識な常識20222025年に本書は全面改定され、新しい書籍として公開されています。ご移動ください。 最高のコーディング体験 for AI a岡部 健Ken Okabekentutorialbook@gmail.com 関数型プログラミングが『銀の弾丸』である という非常識な常識 2022Functional Programming as the Silver bullet, that is the Insane common sense 2022
日本のWEBに革命をもたらす BudouX で自動文字組みを行う。しかも、Web Componentとして
WEB 開発において日本語が抱える問題 日本語を使った WEB 開発は常に「改行問題」を抱えています。例えば、👇 の様に 記事 という単語の 記 と 事 で改行されていたら読みにくいです。 見た目重視の WEB サイトだと、「この改行を手動で美しく見えるように修正して欲しい。」 という声も無視できません。 いわゆる「文字組み」です。例えば、👇 の様に改行を入れてやります。 しかし、この方法は解決になっていません。なぜなら、WEB ブラウザ の幅はレスポンシブに可変するからです。ちょっと画面幅を狭めるだけで 👇 の様に崩壊します。 これに対応するためには、メディアクエリをくしして画面幅に応じた<br>タグを仕込むか、改行したくない文字列を手書きで<span style="display:inline-block;"></span>で囲む必要がありました。👇 の様に... <span
Next.jsを使う必要がない小規模なSPAの最小構成を考えてみた
はじめに React開発におけるNext.jsのプレゼンスが日に日に増している今日この頃ですが、Next.jsを使う必要がない小規模なSPAを作る場合の型が欲しくなり、色々調べて技術選定をした上で実際に作ってみるところまでやったので、その技術選定理由とセットアップ手順を共有したいと思います。 フロントエンドの移り変わりは速いとはいえ、割とホットな技術を選定できたと思うのでしばらくは使っていけそうです（そう思いたい…）。 前提 趣味で小規模なSPAを作る場合を想定 ルーティングなしの単機能アプリ SSRが必要ない モーダルなどの動きのあるUIが必要ない 技術スタック Vite Preact TypeScript Tailwind CSS Cloudflare Pages 技術選定理由 Vite 少し前まではこういうケースではcreate-react-appを使用していましたが、Viteに置き
クリエイティブコーディングの教科書
ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
Chromeに入るRecorder機能の利用と注意点 - 虎の穴ラボ技術ブログ
こんにちは。虎の穴ラボのH.Hです。 今回は先日発表されたChromeの開発中の新機能であるRecorder機能について使用方法や利用する際の注意点などをまとめました。 Recoder機能とは ブラウザのChrome97で追加される予定の機能で、ブラウザの画面上で操作した記録を取得してくれる機能になります。 この記事を書いている2021年11月17日では一般に提供されているChromeの最新版は96となり、開発中の「Chrome Dev」もしくは「Chrome Canary」でRecorder機能を使用することができます。 利用している時の様子はChromeの開発者向けのページに公開されています。 developer.chrome.com 主な機能は以下の通りです。 ・操作の記録及び再実行(リプレイ)できる ・再実行時にパフォーマンスの記録・確認できる ・記録した内容の編集ができる ・操作
JavaScriptの非同期処理をじっくり理解する (4) AbortSignal, Event, Async Context
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 中止処理 並行処理ではしばしば実行中の処理を中止したい場合があります。 古典的なキャンセル処理 Webブラウザ/Node.jsともに、 setTimeout の中止が可能です。 const timeout = setTimeo
RailsエンジニアのためのNext.js入門 - hokaccha memo
というタイトルで先日 Kaigi on Rails 2021 で話してきました。 プレゼンで話せなかった内容なども含めてブログ記事にも書いておきます。 Intro Railsのことはけっこう知ってるけどNext.jsについて何も知らないという人をターゲットにしてNext.jsとは一体何なのか、いつどこで使えばいいのか、具体的にNext.jsのどういうところがいいのか、どういう機能があるのかという話をします。 最終的には普段Railsを書いているエンジニアが、Next.jsよさそうなんで使ってみようかな？と思ってもらえるといいかなと思っています。 Next.jsとは何か Next.jsのトップページを見てみましょう。 The React Framework for Production と書いてあります。これは読んで字のごとくですが、Next.jsというのはReactをベースにしたフレームワ
JavaScriptの非同期処理をじっくり理解する (3) async/await
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 用語に関する注意 前々回定義した以下の用語を今回も使います。 1 tick ... タスクキューが1周すること。 1 microtick ... マイクロタスクキューが1周すること。 これらの単位は非同期処理の間の相対的な優先
JavaScriptを完全無料で学習できる最強の厳選コンテンツを大公開！ -
どうも、まさとらん（@0310lan）です！ 今回は、JavaScript初心者から中級者までをカバーできる学習コンテンツを厳選してご紹介します。 完全無料で公開されているものばかりを集めており、なおかつ質の高いコンテンツを選んでいますので独学したい方にも最適です。テキスト、動画、本、Webアプリなど、さまざまな種類のコンテンツを楽しみながらぜひ学習に役立ててください！ ■学習を始める前に これからJavaScriptの学習コンテンツについて解説をしていく前に、ひとつだけ以下のサイトをご紹介しておきます。 【 The Modern JavaScript Tutorial 】 これはJavaScriptの基礎構文・DOM操作・非同期処理・サーバ通信など、ほとんどの学習項目を網羅したリファレンスのようなサイトです。海外で作られたサイトですが、うれしいことに日本語化されているので初心者にも扱いや
JavaScriptの非同期処理をじっくり理解する (2) Promise
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 用語に関する注意 前回定義した以下の用語を今回も使います。 1 tick ... タスクキューが1周すること。 1 microtick ... マイクロタスクキューが1周すること。 これらの単位は非同期処理の間の相対的な優先順
SPAセキュリティ入門～PHP Conference Japan 2021
こちらのスライドは以下のサイトにて閲覧いただけます。 https://www.docswell.com/s/ockeghem/ZM6VNK-phpconf2021-spa-security シングルページアプリケーション(SPA)において、セッションIDやトークンの格納場所はCookieあるいはlocalStorageのいずれが良いのかなど、セキュリティ上の課題がネット上で議論されていますが、残念ながら間違った前提に基づくものが多いようです。このトークでは、SPAのセキュリティを構成する基礎技術を説明した後、著名なフレームワークな状況とエンジニアの技術理解の現状を踏まえ、SPAセキュリティの現実的な方法について説明します。 動画はこちら https://www.youtube.com/watch?v=pc57hw6haXk
JavaScriptの非同期処理をじっくり理解する (1) 実行モデルとタスクキュー
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 入門記事へのリンク プロミスの使用 - JavaScript | MDN Promise, async/await (現代の JavaScript チュートリアル) JSの初心者にPromiseとasync/awaitの使い方
フロントエンドのテストは皆のためのもの | POSTD
テストとは人によって反応が分かれるものの1つであり、大喜びする人もいれば、見ないようにして去ろうとする人もいます。あなたがどちらの側であるにせよ、ここではフロントエンドのテストは皆のためのものであるということを説明します。実際、テストには多くの種類があり、それがテストに対して初めに恐れや混乱を感じる一因なのかもしれません。 この記事では、特に有名で広く利用されている種類のテストを扱います。なかには目新しいものはないと感じる読者の方もいらっしゃるかもしれませんが、少なくとも復習にはなるでしょう。どちらにせよ、筆者の目標は、この記事を通じて世の中のさまざまな種類のテストについて理解を深めてもらうことです。ここではユニットテスト、統合テスト、アクセシビリティテスト、ビジュアルリグレッションテストなどを一緒に見ていきます。 さらに、Mocha、Jest、Puppeteer、Cypressなど、各種
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 などでフォーカスを移し、その状態で Devtools の "Emulate a focused page" を有効にすれば良い。 Intro 先日、後輩が「mouseover 中にしか表示されない DOM のデバッグ」に手こずって
RustではじめるWebAssembly入門～JavaScriptを超える高速なWebアプリ開発を実践しよう
本連載では、Webブラウザー上でJavaScriptとともに動作できるバイナリ形式のプログラムファイル「WebAssembly」を、Rustプログラミング言語で実装する方法について、順を追って説明していきます。初回となる今回は、WebAssemblyの概要を説明するとともに、Rustを利用した簡単なサンプルで、実装方法のイメージを紹介します。 はじめに 現在、Webフロントエンド開発においては、ページ構造を表すHTML、スタイルを表すCSSとともに、挙動を実装するためにJavaScriptが利用されます。JavaScriptの登場当初はWebページに動きをつける程度の扱いでしたが、その後の言語仕様の拡張や、WebブラウザーでのJavaScript実行速度の向上、Node.jsなどWebブラウザー以外でJavaScriptを動作させる環境の登場などにより、本格的なプログラミング言語としてその
CORSの仕様はなぜ複雑なのか
Webアプリケーションを実装していると高確率で CORS の問題にぶつかります。CORSがどのようなものかはリンクしたMDNなど既存の解説を読むのが手っ取り早いと思いますが、「なぜそのように設計されたのか」という観点での説明はあまり見ないため、昔の資料の記述や現在の仕様からの推測をもとに整理してみました。 CORSとは 現代のWebはドメイン名をもとにした オリジン (Origin) という概念 (RFC 6454) をもとに権限管理とアクセス制御を行っています。その基本となるのが以下のルールです。 Same-origin policy (同一生成元ポリシー): 同じオリジンに由来するリソースだけを制御できる。 上記Wikipedia記事によるとSOPの概念は1995年のNetscape 2.02に導入されたのが最初のようです。当時のドキュメンテーションを読む限り、これはウインドウ越しに別
スクロールに連動するアニメーションを実装する時は、JSのIntersection Observerを使用すると簡単に実装できる
スクロールに連動するアニメーションはIntersection Observerを使用すると、簡単に実装できます。カードUIがスクロールしてビューポートに表示されると、カード内の要素がアニメーションするUIを実装する方法を紹介します。 ライブラリなどは必要なく、数行のJavaScriptで簡単に実装できます。 Animate on scroll using Intersection Observer by Keerthi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Step 1: カードUIをHTMLとCSSで実装する Step 2: CSSに基本的なアニメーションを追加する Step 3: Intersection Observerを使用する前に、HTMLに変更を加える Step 4: JavaScriptのInt
Jamstackを検討する - ゆーすけべー日記
Jamstackを既存のシステムに導入するかを検討する機会があった。 紆余曲折したものの、未だに暫定的な結論しか出ていない。 とはいえ、わりと頑張った。 今回は Jamstackとはなんぞや？ Jamstackの特徴 Jamstackの技術 弱みを解決する策 実際に検討した話 を雑に紹介したい。 個人的なメモなので、間違っているところがあるのを考慮願いたい。 Jamstackとは？ JamstackのJamは以下の頭文字をとっている。 JavaScript APIs Markup まず、フロントエンドを持たないAPI群がある。APIはブラウザのJavaScriptから叩かれるかもしれないし、後述するようなSSG =「Static Site Generator」のフレームワークが叩くかも知れない。どちらにせよユーザーに配信されるのはSSGが出力した、Markup。つまりプリレンダリングされた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next2D | Rendering Engine, Animation Tool, Underlying Framework.
[JavaScript]クリップボードを使ったコピーとペースト - Qiita![[JavaScript]クリップボードを使ったコピーとペースト - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e78b141bb77fc3b9e77eec98ae8beb4604cc6079/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.1.1%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNzMzNzYlMkZwcm9maWxlLWltYWdlcyUyRjE1NTA4MTQzNDU_aXhsaWI9cmItNC4xLjEmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPTM2ZGUyNGUwYTNhNGE1YmIyOTRiMzljODhkYzBiZDBl%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dcc1fbd23513e9b2bd23fcf8134bb270f%3Fixlib%3Drb-4.1.1%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFMyU4MiVBRiVFMyU4MyVBQSVFMyU4MyU4MyVFMyU4MyU5NyVFMyU4MyU5QyVFMyU4MyVCQyVFMyU4MyU4OSVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSU5RiVFMyU4MiVCMyVFMyU4MyU5NCVFMyU4MyVCQyVFMyU4MSVBOCVFMyU4MyU5QSVFMyU4MyVCQyVFMyU4MiVCOSVFMyU4MyU4OCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWZmMTZlYTgyM2E0N2EyZDJjNDNlMWRhMDJiNjEyNzIz%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTgzOCZoPTU4JnR4dD0lNDBidXRha29tYSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTJmMDYwNWZkZjRiNmRiYWE5MmZhYmM0MjUyNTU1MGZk%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3De9d553b907b9b6da1856a7948c5004ea)
