[B! Javascript] shimanpのブックマーク

jQueryへの別れ：現代的な開発のための必須JavaScriptメソッド - Qiita

はじめに私は長い間レガシーコードと共に仕事をしてきましたが、jQueryの重要性は依然として頻繁に話題に上がるトピックの一つです。ライブラリ自体は便利なままですが、それは別の時代のニーズを完璧に満たしていました。現在、私たちは既にES2023について話していますが、過去にjQueryがカバーしていたほとんどの機能は、すでに2015年にリリースされたES6に取り込まれています。 ES6の標準は既に広範にサポートされており、96％のレベルに達しています︵出典‥caniuse.com︶。そのため、特に要素の選択、スタイリング、アニメーション、データの取得などの基本的なタスクについては、ライブラリの使用を見直す良いタイミングかもしれません。以下のトピックは、いくつかの標準的なjQueryのパターンと、それに相当するバニラJavaScriptでの手法を示す参考資料として役立つと思います。要素

shimanp 2023/06/23

リンク

SPA認証トークンはlocalStorageでもCookieでもない、Auth0方式はいいねというお話 - @mizumotokのブログ

SPA認証トークンをどこに保存するかは論争が絶えません。localStorageやCookieがよく使われますが、Auth0は違う方法を採用しています。この記事では、Auth0のトークン管理の方式を理解でき、トークン管理上のセキュリティへの理解を深めることができます。 SPAの認証トークンをどこに保存するかブラウザでトークンを保存できる場所保存場所の比較メリット・デメリット Auth0のアプローチトークンはインメモリに保存 OpenID Connect準拠とトークン取得のUI/UXの悪化回避を両立 Auth0のjsライブラリログインアクセストークンの（再）取得図解ログインアクセストークンの（再）取得自サービス内の認証だけのもっと簡易な構成ログイン IDトークン取得まとめ SPAの認証トークンをどこに保存するか React やVueで認証付きSPA（Single Pa

shimanp 2022/08/03

リンク

たった256文字のJavaScriptコードで描かれた街の風景アニメがスゴ過ぎて訳がわからない／解説ページを見てもわからないorz【やじうまの杜】

shimanp 2022/06/01

javascript

リンク

JavaScriptで壮大なハッキング体験を実現するWebゲーム「Bitburner」で遊んでみた！ - paiza times

どうも、まさとらん︵@0310lan︶です！今回は、ブラウザ上からリアルなハッカー気分を疑似体験できるユニークな無料Webゲームをご紹介します！ PC ゲームとしてSteamからもリリースされていますが、今回ご紹介するブラウザ版は手軽に遊べるのでオススメです。ターミナル風のゲーム画面が特徴で、実際にJavaScriptを使ってプログラミングもできます。ハッキングやセキュリティなどにご興味ある方も含めて、ぜひ参考にしてください！︻Bitburner ︼ ■﹁Bitburner﹂の遊び方﹁Bitburner﹂は、西暦2077年のサイバーパンクをテーマにしたディストピアな世界を舞台にしています。ゲーム画面は3Dグラフィックや派手な演出があるわけではなく、世界観にピッタリなCLIベースのターミナルを忠実に再現しているのが大きな特徴です。遊び方ですが、面倒なユーザー登録などは必要ありませ

shimanp 2022/02/25

リンク

正規表現の脆弱性 (ReDoS) を JavaScript で学ぶ

先日、このようなツイートを書いたところ、かなりの反響がありました。 JavaScript の正規表現の脆弱性の例でいうと、例えば /\s+$/ は脆弱性があると言える console.time(); /\s+$/.test(" ".repeat(65536) + "a"); console.timeEnd(); 結構時間がかかるのがわかる。でも /\s+$/ を見て﹁これは危険だな﹂と理解出来る人はそんなにいない。JavaScript に限らないけれど。 — Takuo Kihira (@tkihira) February 17, 2022 これは一般に ReDoS (Regular expression Denial of Service) と呼ばれる脆弱性です。正確に理解するのが難しい脆弱性なので、少し解説してみたいと思います。結論長い記事になるので、最初に﹁とりあえずこれだけ知っ

shimanp 2022/02/19

リンク

プログラミング初心者も学べるJavaScript講座が無料に | Ledge.ai

サインインした状態で「いいね」を押すと、マイページの「いいね履歴」に一覧として保存されていくので、再度読みたくなった時や、あとでじっくり読みたいときに便利です。

shimanp 2022/01/08

javascript

リンク

クリエイティブコーディングの教科書

ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。

shimanp 2021/11/22

リンク

Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件

Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。ディレクトリ構造が勉強になるまずはプロジェクトごとにバラつきがちなディレクトリ構造について。ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。たとえばCreate Next Appで作成

shimanp 2021/11/08

リンク

Next.js+microCMS+Vercel面白い - ゆーすけべー日記

Next.js と microCMS と Vercel が面白い。それぞれ面白いし、組み合わせるとさらに面白い。なにせ、メディアサイトがデプロイも含めて2時間で出来る。 Next.js + microCMS + Vercel すごいな。メディアサイト︵中身スッカスカだけど︶がものの2時間でデプロイまでできた。 https://twitter.com/yusukebe/status/1435708770705760256 ということで、メディアサイトを作りながら、Next.js と microCMS と Vercel の面白さをまとめる。2時間で作るメディアサイト例として﹁ラーメンまとめ！﹂というメディアサイトを作ってみる。このサイトにはラーメン屋ラーメン屋のまとめ記事の2つの種類のコンテンツがある。﹁ラーメン屋﹂が﹁名前﹂﹁場所﹂﹁ラーメン写真﹂というプロパティを持

shimanp 2021/09/17

javascript

リンク

2021年に知っておきたいJavaScript最適化技術34選 - Qiita

最新の省略テクニック、コツ、秘訣で、JavaScriptコードを最適化する。開発者の生活というのは常に新しいことを学ぶことで、その変化についていくことは決して難しいことではありません。私は、フロントエンド開発者として知っておく必要のある省略形や機能など、JavaScriptのすべてのベストプラクティスを紹介して、2021年の生活をより快適にしたいと考えています。 JavaScript開発に長く携わっている人でも、コードを追加しなくても問題解決できるような最新機能を知らないこともあるかもしれません。ここで紹介するものは、クリーンで最適化されたJavaScriptのコード記述にも、2021年のJavaScriptの面接準備にも役立ちます。これは新しいシリーズで、2021年版のJavaScriptコーディングチートシートです。 1. 複数の条件を持つif配列に複数の値を格納し、includ

shimanp 2021/06/12

javascript

リンク

JavaScriptで任意のHTML要素をPicture-in-Pictureする

みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない﹁ウィンドウ﹂機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。 PiP機能の対応環境 Chrome 70 Firefox 71︵制限付き︶ mac

shimanp 2021/05/01

リンク

2021年は Fullstack Next.js 元年なので、有望な Next.js 系フレームワークを全部試した

この記事は、Next.js Advent Calendar 2020 の6日目。突然だが、2021年は Fullstack Next.js 元年になる。その理由として自分は以下のものがあると思っている。ベストプラクティスとしての TypeScript のデファクト化 Next.js の Dynamic Routes による動的パス、 getStaticProps/getServerSideProps による使い勝手の向上 Vercel によるISRの発明 prisma の成熟 Vercel / Serverless / Cloudflare Workers / Cloudrun 等による Node.js サーバーの運用コスト減参考: Frontend Study #1: 基調講演 - Frontend 領域を再定義する Blog - Next.js 9.3 | Next.jsR

shimanp 2020/12/06

javascript

リンク

Reactを自作しよう

この記事は Build your own React を翻訳したものです。 Reactを1から書き直していきます。実際のReactコードのアーキテクチャに従いますが、最適化機能と必須ではない機能は今回は実装しません。 Step 1: createElement関数 Step 2: render関数 Step 3: 並列モード Step 4: ファイバー Step 5: Render Phaseと Commit Phase Step 6: 差分検出 Step 7: 関数コンポーネント Step 8: Hooks Step 0 復習最初にいくつかの基本的な概念を確認しましょう。 React、JSX、およびDOM要素がどのように機能するかをすでに理解している場合は、この章はスキップしても構いません。今回は、次のわずか3行のコードをReactアプリの例として使用します。 const ele

shimanp 2020/11/23

javascript

リンク

2020年の11の必見のフロントエンドトレンド - Qiita

こちらの記事は、Jonathan Saring 氏により2019年12月に公開された﹃ 11 Must-Know FrontEnd Trends for 2020 ﹄の和訳です。本記事は原著者から許可を得た上で記事を公開しています。ランチ中のフロントエンドトークでスマートに見られる方法！チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。たぶんね。だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー

shimanp 2020/07/28

リンク

2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita

以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。もちろんVueとAngularにも多くのフォロアーがついています。さらにはSvelte、Next

shimanp 2020/07/04

リンク

「ぷよぷよ」のプログラミング教材、セガが無料提供　“ぷよ”の移動や色指定でゲーム制作体験

セガは6月25日、対戦アクションパズルゲーム﹁ぷよぷよ﹂のソースコードを使ったプログラミング教材﹁ぷよぷよプログラミング﹂を、26日から無料で提供すると発表した。ぷよぷよプログラミングは、Webシステムの開発を手掛けるアシアル︵東京都文京区︶のプログラミング学習ツール﹁Monaca Education﹂上で使える教材。インターネット環境があればOSの種類に関係なくWebブラウザから操作できる。利用者は、HTML5やJavaScriptで書かれたソースコードを書き写し、ぷよぷよのプレイ画面を確認しながらコーディングを学ぶ。﹁ぷよ﹂を左右に移動させたり、消したりできる他、ぷよの色や数を変更できる。関連記事セガ、手のひらに収まる携帯ゲーム機﹁ゲームギアミクロ﹂発売決定　﹁ガセですか？﹂﹁セガです﹂セガは6月3日、小型携帯ゲーム機﹁ゲームギアミクロ﹂を発売すると発表した。セガグループの里

shimanp 2020/06/25

リンク

JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説

JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説した記事を紹介します。 ⭐️🎀 JavaScript Visualized: Promises & Async/Await by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにコールバック地獄 Promiseの構文イベントループ: Microtasksと(Macro)tasks AsyncとAwaitはじめに JavaScriptのコードが期待通りに実行されないことに悩まされたことはないですか？おそらく、関数が不規則に実行されたり、予測できないタイミングで実行されたり、実行が遅れたりしたことがあるかもしれません。そして、ES6で導入された新機能Promiseが原因かもしれません！何年も

shimanp 2020/05/20

javascript

リンク

4歳娘「パパ、Promiseやasync/awaitって何？」〜Promise編〜 - Qiita

スペシャルサンクス @sega_yuu @frodo821 とある休日娘（4歳）「ねえパパ」ワイ「なんや、娘ちゃん？」娘「非同期って何？」ワイ「ひ、非道鬼！？」娘「そうそう、非同期処理とかいうやつ」ワイ「非道鬼を処理やて・・・！？」非道鬼「ヴォ〜〜〜！！！」娘「！？」娘「・・・現れたわね、非道鬼」娘「処理してあげる」ワイ「娘ちゃん、まだ4歳なのに、もう厨二病か・・・？」よめ太郎「おい」よめ太郎「お前まさか、非同期も知らんのか・・・？」ワイ「いやいや、まさかまさか」ワイ「流石に知っとるわ」ワイ「それはそれは・・・極悪非道な・・・鬼のことや・・・」よめ太郎「お前が非道鬼に喰われてしまえ」非同期処理とはよめ太郎「ええか、娘ちゃん」よめ太郎「まず、同期って言葉は」よめ太郎「タイミングが合うって意味や」娘「じゃあ、非同期っていうのはタイミングが合わないって

shimanp 2020/05/19

リンク

Recoil について勉強した

Fecebook が新しく発表した Recoil について自分の学習手順 Getting Started | Recoil を写経して動かす Facebook 製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog で非同期周りを理解公式ドキュメントの API Reference で理解 <RecoilRoot ...props /> | Recoil これは自分が写経しながら書いた型定義。色々足りてないがチュートリアルで出る範囲は理解できる。 declare module "recoil" { export type RecoilState<T> = {}; export const RecoilRoot: React.ComponentType<{ initializeState?: (options: { set: <T>(recoilVal:

shimanp 2020/05/17

javascript

リンク

スナック「jQuery」 - Qiita

……あら、いらっしゃい。若いお客さんなんて珍しいわねえ。昔は、この街一番の人気店でね、若いお客さんもたくさんいたんだけどさ。最近はめっきり減っちゃってね。何飲む？　……水割り？　わかったわ。じゃあさ、ちょっとだけ、あたしの昔話に付き合ってもらってもいいかしら。 What is jQuery? この店――﹃jQuery﹄がオープンしたのって、2006年なんだけどさ。その頃の、この街の様子って覚えてる？　……知らないか。あなた、まだ若いもんね。その頃って、そりゃあヒドイもんだったのよ。その頃、シェア率トップだったブラウザって、もちろんInternet Explorerだったんだけど。当時はバージョン7が登場したばかりで、あの悪名高きIE6もまだまだ主流だったの。他のブラウザは、Safariがバージョン3がMacとWindowsに公開されていた頃で、Firefoxはまだバージョン2.0

shimanp 2020/05/08

リンク

はてなブックマーク

タグ

関連タグで絞り込む (281)

Javascriptに関するshimanpのブックマーク (831)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス