[B! javascript] izocのブックマーク

izoc id:izoc

javascriptに関するizocのブックマーク (13)

JavaScript で then を使うのは避けよう（await / async の初級者まとめ）
JavaScript において、特に苦手とする人が多い印象のある Promise ですが、awaitと async の文法が導入されたことで、Promise の仕様を深く理解しなくても非同期処理を自然に書けるようになってきたのではないかと思います。極論ですが、JavaScript の非同期処理は async await new Promise のみで、︵ほぼ︶全て表現可能です。特別な理由がない限り then を使わないようにしましょう、ということを周知するのがこの記事の目的です。なお本記事では Promise の rejected の状態についてほとんど解説しておりません。基本を理解したら、別記事でぜひ学んでみてください。 Promise とは？ Promise は、少し乱暴に説明すると﹁実行が終わっていないかもしれない何らかの関数﹂を包んだオブジェクトです。普通の関数とは違って、
izoc 2024/05/20
正直、ちゃんと理解しないで雰囲気で使ってる

javascript

非同期処理

programming
リンク
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。そこで今回は﹁2024年のWeb制作ではこのようにコードを書いてほしい！﹂という内容をまとめました。質より量で、まずは﹁こんな書き方があるんだ﹂をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
izoc 2024/05/14
jsは結構キャッチアップ出来てたがhtmlとcssは頑張らんとな

まとめ

html

css

javascript

Web

あとで読む
リンク
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
要素をドラッグして移動することは、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
izoc 2024/02/23
これは助かる。

programming

javascript

Qiita
リンク
もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita
HTMXとは HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。軽量で高速で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui)　似たような機能として、RubyonRailsのHotWireがあるらしい。 2024年はHTMXがくると言われているぐらい世界で騒がれているのだが、あまり日本では流行っていない。以下はGoogleトレンドで調べた結果である。アメリ
izoc 2024/01/19
jsは次から次へと出てくるねえ。

javascript

html

programming
リンク
"レガシー"と言われないためのJavaScript再入門
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
izoc 2023/10/09
オジさんなので勉強になります

javascript

programming

まとめ

あとで読む

IT

tips
リンク
javascriptソース圧縮 - izoc道場
izoc 2014/05/07
サクラエディタ

javascript
リンク
人気上昇中のJavaScriptライブラリを調べてみた［ジャンル別に比較］
連載 INDEX 次回 → こちらのページで︻2015年版︼も発表！ ■ 2014年が始まり、心機一転で﹁今年こそはWeb開発を頑張ろう﹂と思っている人も少なくないだろう。そんな方々に向けて本稿では、2013年中に人気が急上昇してきており、﹁2014年では必須の知識﹂となりそうなJavaScriptライブラリ︵Library︶をランキング形式で発表する。なお、本稿のランキング決定では、検索キーワードの流行を調査可能な﹁Googleトレンド﹂︵﹁すべての国﹂﹁過去12か月間﹂﹁すべてのカテゴリ﹂﹁ウェブ検索﹂という条件で絞り込み︶を使って、ライブラリの人気をジャンルごとに比較した︵※ライブラリ名が一般的な英単語の場合、Web検索時に、その英単語にもヒットしてしまう。このノイズがGoogleトレンドでの結果として入り込んでいる可能性が高いことをご了承いただきたい。各ジャンルは、筆者が独自
izoc 2014/01/18
必要になった時のためにメモ

javascript

まとめ
リンク
記号だけのJavaScriptプログラミングの基本原理 - Articles Advent Calendar 2010 Sym
こんにちは。プログラマ定年を迎えたのであとは悠々自適に日々過ごそうと思ってるはせがわです。 JavaScriptで記号プログラミングを行う基本的な取り組を説明します。 jjencodeなどで使っているテクニックです。まず最初は数字の作り方。 +[] // 空の配列にプラス演算子で数値の 0 ~[] // 空の配列にビット反転で -1 ~{} // 空のオブジェクトにビット反転で -1 -~[] // 空の配列にビット反転で-1、-1に単項マイナスで +1 -~-~[] // +1 にビット反転で -2、-2 に単項マイナスで +2 このように、空の配列や空のオブジェクトに数値用の演算子を適用することで、任意の数値を記号だけで生成することができます。次に文字の作り方。 ![] // 空の配列に論理否定で false !![] // 空の配列に論理否定を2回で true (![]+"")
izoc 2010/12/03
面白れぇー。しかしよく考えたなぁ。

javascript

ネタ

programming
リンク
JavaScript入門講座
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの文法とかは調べればわかるのでふれません一人で勉強してもわからなそうな概念などを重点的に説明しますライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればとアジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識ライブコーディング part1 jQueryの基礎知識ライブコーディング part2
izoc 2010/11/22
専門外のプログラマが勉強するのに丁度良い感じの内容だね。

programming

javascript

jquery
リンク
IDEA * IDEA
ドットインストール代表のライフハックブログ
izoc 2010/01/07
XHTML+JSでここまで出来るのはすごいなぁ。作ってみたい。

javascript

プレゼン
リンク
JavaScript初心者におくる24のグレイトなtips - 三等兵
私が作ったわけではなく海外の記事です。自分も学習してみました。 phpスポーツ啓発日誌や、コカトリスさんや、アイスクレアームパラダイスさんのような、品質の良い訳は私にはできませんので見出しは意訳もしくは誤訳、文章は無視して訳してません。かつ、私がいろいろコードや文章つけたしてます。内容的にはほとんどズレてはないと思いますが、適当なのでおかしいところがあるかもしれません。うっとうしい場合は原文をどうぞ。24JavaScript Best Practices for Beginners 1. 等価演算子で==使うなよボケ===だろナスチン野郎ひぃぃぃ。 ==|!= だとねー、型は自動に変換されるんすよねー。ねー。 s = '1'; i = 1; alert(s == i); // true alert(s === i); //false えーと、==は﹁わし、数値も文字列も中身が一緒だ
izoc 2009/12/17
javascriptを書くときの注意点。

javascript

tips
リンク
IDEA * IDEA
ドットインストール代表のライフハックブログ
izoc 2009/12/03
グラフ描画ライブラリ for Javascript

javascript

ライブラリ
リンク
PHP で引数をそのまま返す関数を作っておくと便利 - IT戦記
PHP では以下のように new してすぐメソッドを呼べない <?php new DateTime()->getOffset(); なので、引数をそのまま返す関数を作ってやると <?php function expr($a) { return $a; } expr(new DateTime())->getOffset(); // OK! 便利だなーおまけ配列アクセス用のも作っておくと便利 <?php function expr($a) { return $a; } function idx($array, $i) { return $array[$i]; } echo idx(idx(expr(new DateTimeZone('Asia/Tokyo'))->getTransitions(), 0), 'abbr') . "\n"; おまけ2 無名関数をそのまま呼ぶときにも使える。 <
izoc 2009/08/04
ぶっちゃけ何が便利なのか全然分からんかった。web方面も勉強せねば。

javascript

php

tips

programming
リンク
1