[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
![[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/bd012de25b70691c33af879e24161878bd017409/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.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY1Mjg1MjYlMkZkZTFjOTBmNmE3MjJhODY1ZDI3ZmFkODk4N2RhNTU0ZDhhODY1ZGJmJTJGbGFyZ2UucG5nJTNGMTU4MjI2MzEwMj9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz1lNDMwM2E1MmY5YjQyOWZlYTUyNTI2MzcyZjhlMGRiYg%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D665c9263d8fde7538f5a183884a145e5%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFNSU4OCU5RCVFNSVCRiU4MyVFOCU4MCU4NSVFMyU4MSU4QyVFNSU4OCU5RCVFOCVBNiU4QiVFMyU4MSVBNyVFNSVCRiU4NSVFMyU4MSU5QXRoaW5raW5nJUU5JUExJTk0JUUzJTgxJUFCJUUzJTgxJUFBJUUzJTgyJThCJUUzJTgyJTgyJUUzJTgxJUFFJUU3JTg5JUI5JUU5JTlCJTg2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MjYyNDg4MTg3OWIwZmRkYzgzYjZmYTZiNzUxYTExOTc%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBrb3p6enomdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz01MjlhYjk2ZGU2MDY4ZTQwZTI4YjM3ZTExNWI2MWQ1NQ%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D4921f7432a9b21f0593f66774c8857d0)
[小ネタ]Javascriptで大きい桁の整数をJSONパースする時の注意点 | DevelopersIO
JavascriptでJSONにパースしたいデータに大きい桁の整数があった場合は注意が必要です。 16桁を超えた数値を含む場合、超えた桁数分端数が丸め処理されてしまいます。 その場合、json-bigintを使って回避できます。 例 JSONとして解析する文字列 const jsonStr = '{"id": 6476060033855273896}'; Javascript標準ビルトインのJSON.parseでパースすると以下のようなデータになります。 JSON.parse(jsonStr); > { id: 6476060033855274000 } // (_□_；)!! 桁はそのままですが数値が変わってしまいました。エラーは出ていません。 json-bigintを使うと、 const JSONbig = require('json-bigint'); const jsonStr =
![[小ネタ]Javascriptで大きい桁の整数をJSONパースする時の注意点 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/c6082d053d0b1940e3a9c4d81bf031a09b51ab0c/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F04%2Fjavascript.png)
JavaScriptを読んでいてたまに出てくる唐突な二つの括弧の意味
お世話になります、他人が作ったJavaScriptを見ていると 唐突に謎の書き方が出てきますが言語化が難しく調べるのが難しいものがあります その一つが以下のソースなのですが TextEditor.prototype.createElements = function () { this.TEXTAREA = document.createElement('TEXTAREA'); this.TEXTAREA.tabIndex = -1; (0, _element.addClass)(this.TEXTAREA, 'handsontableInput'); this.textareaStyle = this.TEXTAREA.style; this.textareaStyle.width = 0; this.textareaStyle.height = 0; this.TEXTAREA_PAR
JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 - ICS MEDIA
JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 JavaScriptの仕様であるECMAScriptは年次で仕様が更新されています。ECMAScript 2020（ES2020）は2020年6月にリリースとなりました。現行のすべてのブラウザでES2020の機能は利用できますが、フロントエンドエンジニアにとって使いこなしたい記法ばかりです。 本記事ではES2020に焦点をあて、JavaScriptの新しい記述方法のメリットと使いどころを解説します。 オプショナルチェーン Optional Chaining（オプショナルチェーンやオプショナルチェーニングと呼ばれています）とは、?.構文を用いてnullやundefinedになりうる値へ安全にアクセスできる仕組みです。 利用シーン nullやunde
JavaScript Naming Conventions
A JavaScript naming conventions introduction by example -- which gives you the common sense when it comes to naming variables, functions, classes or components in JavaScript. No one is enforcing these naming convention rules, however, they are widely accepted as a standard in the JS community. JavaScript Naming Conventions: VariablesJavaScript variables are case sensitive. Therefore, JavaScript va
もしものために，香川県からのアクセスを避ける - Qiita
茶番 「どうも〜、セミコロンつけない派です。お願いします」 「お願いします」 「あ〜、ありがとうございます。今、LGTMを頂きました。こんなんなんぼあってもいいですからね」 「あのな、おかんがな、思い出せない都道府県があるらしいねん」 「ほな、その特徴教えてくれる？」 「おかんが言うにはな、最近ゲームが 「香川やないか！」 (ミルクボーイやりたかっただけ。) ちまたで噂のネット・ゲーム依存症対策条例 ネットやゲーム依存症を防ぐため、18歳未満の使用時間を制限するというやつです。 今はちょっと変わってコンピュータゲームだけになったみたいです。 これに関する議論は尽きないですが、ここでは置いておきます。 仮にサービス側が何とかしろと言われたら... ネット界隈では、「香川県民ですか？ はい/いいえ」のような香川認証がネタになってます。 香川県の条例案、よく読んだら我々サービス提供者側（特定電気
TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に｜ハイクラス転職・求人情報サイト アンビ（AMBI）
TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に JavaScriptプロジェクトでTypeScriptを導入する際には、“柔らかい”静的型付き言語とするのがおすすめです。藤吾郎（gfx）さんがまとめた「がんばらないTypeScript」のガイドラインです。 TypeScriptは、すべてのJavaScriptプロジェクトで採用する価値のある技術です。TypeScriptとこれに対応したエディタを導入することで、補完や型ベースの整合性のチェックにより、すべてのプロジェクトで生産性が上がります。またリファクタリングも容易になるので、長期あるいは大規模なプロジェクトでも品質を保ちやすくなります。 この記事では、TypeScriptについて最低限の知識とともに、サクッと（どちらかというと既存のプロジェクトに）導入するための
JSフレームワーク事情2020年始め｜erukiti
この記事では面倒なので名前に .js が付いているものは省きます。例えばNext.js は Next と表記します。 まず結論から日本ではVueはReactと二分する人気があるように観測されますが、世界的な数字で人気・シェアを見るとReactが圧倒的です。 シェアだけで見るとAngularとAngularJS（Angular系の1.x系）の合計値はVueよりも高いですが、「今後はもう採用したくない」と考える率が高く、Angular/AngularJSの人気が低下しているということは間違いありません。 ※追記: Angularのシェア、人気度に関しては、Angular及びAngularJS両方を含む数値であり、AngularJSとAngularは別物であるものが混ざってカウントされているため、Angularのシェア及び人気度はあやふやかもしれません。他の数値に関して信頼性を疑うべきかどうかは
モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出（2019年版） - ICS MEDIA
スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？ かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJavaScriptの進化により、このような表現をライブラリを使わずとも比較的簡単に実装できるようになりました。本記事では、基本的な機能をおさえた、全画面スクロールの実装方法を紹介します。 この記事を通じて以下の技術も学べます。 スクロールをピタッと止めるCSSプロパティscroll-snap-type 画面と要素の交差を検知するIntersection Observer API スムーススクロールが実装できるJavaScriptメソッドscrollIntoView() デモを別ウ
フロントエンドのコーディング課題６選-このフロントエンドの課題、実装できますか？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こちらの記事は、Indrek Lasn 氏により2019年 10月に公開された『 Here Are 6 Front-End Challenges to Code 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek フロントエンドの開発はストレスが多く難しい作業ですが、練習すれば技術をマスターすることができます。 自ら進んで鍛錬と努力をすれば、フロントエンド開発の場面で問題を解決することのエキスパートとなることができるでしょう。 優れたフ
そろそろなぜjQueryを使うのが難しいのかをちゃんとまとめようと思う。｜榊原昌彦
「jQueryはオワコン」「いや、jQueryは便利！」議論が行われるようになってから2年は経つでしょうか。Twitterを観測してると定期的に盛り上がるので、私なりにちゃんとまとめようと思います。 ちなみに結論を先に書いておくと ・ レンダリングブロックしない構成、かつ最新版を使おう ・ jQueryはいいものだけど、脱jQueryした方が手っ取り早い です。 1. 保守しないといけないサポートの切れたjQuery1, 2を使ってるけど、依存プラグインが動くかどうかわからないから最新版にアップデートしていないプロジェクトが散見されます。 jQuery1, 2 は、Officially End of Life（公式に廃止）が名言されてます。ですので、「jQuery におけるクロスサイトスクリプティングの脆弱性」みたいな報告も修正されていません。EOLのバージョンはやめましょう。 ちなみにj
HTML5のLocal Storageを使ってはいけない（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す
TypeScript の流儀
Bonfire Frontend #4 http://yj-meetup.connpass.com/event/136480/
タッチデバイスの「input type=”range”」の挙動を改善してくれるJavaScript「Rangetouch」 | DevelopersIO
タッチデバイスでinput type="range"を使った場合、スライダーのバー部分をタップしてもなんの反応もありません。これをタップした位置へツマミを移動したり値を取得したりと、OSネイティブのスライダーのように挙動を改善してくれるMITライセンスのJSライブラリを紹介します。 デモページ（要タッチデバイス）：https://rangetouch.com/ リポジトリ：RangeTouch - GitHub 使い方 npmなら npm i rangetouch -D CDNから読み込むなら <script src="https://cdn.rangetouch.com/2.0.0/rangetouch.js"></script> です。 input（type="range"）要素が1つなら、次のようにCSSセレクタまたは要素で指定します。（npmの人はimport RangeTouch
JavaScriptで絵文字とサロゲートペアと結合文字とgrapheme clusterを正しく扱うのに少し苦労した話 - Qiita
皆さんはUnicodeや絵文字についてどのくらい理解していますか？ 私は全く理解できていません。 JavaScriptで絵文字を扱おうとしたら苦労した話を書きます。誰かの参考になれば幸いです。 経緯 MuscularというジョークコマンドをNode.jsで開発していました。 これは、ボディビルダーとともにテキストを叫んだ感じで表示するという単純なアプリケーションでした。 「cowsay」と「echo-sd」と「筋肉」をあわせたようなコマンドです。 $ muscular shout ナイスバルク .-~-. / \ | / ,_-/ ,.*`--., .r ; `` \ .`,` ,: ,.`A`,\ /,`/\`'' '' ? \` \ / / \ ; , ; / ) } ＿人人＿ | / \:':': | | 7 ＞ ナ ＜ | | ) ':' | ,` / ＞ イ ＜ ( \ `-,_
Vue.jsに書いてある「アロー関数は、this が期待する Vue インスタンスではなく・・・」とは？ - Qiita
Vue.jsのドキュメント書いてある #computed 算出プロパティ(例 aDouble: () => this.a * 2) を定義するためにアロー関数を使用すべきではないことに注意してください。アロー関数は、this が期待する Vue インスタンスではなく、this.a が undefined になるため、親コンテキストに束縛できないことが理由です。 とか #data data プロパティ(例 data: () => { return { a: this.myProp }}) でアロー関数を使用すべきではないことに注意してください。アロー関数は、this が期待する Vue インスタンスではなく、this.myProp が undefined になるため、親コンテキストに束縛できないことが理由です。 が見ていて気になったので、thisについての復習も兼ねて調べてみました。 アロー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
async関数においてtry/catchではなくawait/catchパターンを活用する - Qiita
TypeScript + Node.js プロジェクトのはじめかた2020 - Qiita
くそったれJavaScript - Qiita
これからのフロントエンドセキュリティ
