JavaScript の undefined と null を完全に理解する
JavaScript で頻出する undefined と null について語ります。 言語仕様上の違い JavaScript (ECMAScript) において、仕様上 undefined と null は当然ながら明確に区別されています。いくつか言語仕様上の扱いについて挙げてみます。 比較 厳密な比較演算子 === において undefined と null は区別されます。ゆるい比較演算子 == においては両者は区別されません（仕様 7.2.14）。 console.log(undefined === null); // false console.log(undefined == null); // true
JavaScript Patterns Workshop | JavaScript Patterns
The content is based on Patterns.dev - a free online resource on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React. The patterns covered on this website and in the workshop can guide you when facing a problem other developers have encountered many times before, but are not a blunt tool for jamming into every scenario. The goal is to raise aware
JavascriptからTypescriptへ1人で5万行修正し、移行した話 - Qiita
環境 React(CRA) Javascript npm 方針 当たり前の前提として、既に動いている機能は壊さない Javascript -> Typescript へ最短で置き換えて、無事起動するところまでを第一の目標とする any 型を許容する（後の改修や機能追加で型を順次付与していく想定） 作業の概要 コンパイルエラーを解消し、最低限動作するまで ts-migrate を使って全体的に Typescript へ移行する ts-migrate で出力された指摘を手作業で修正し、指摘コメントを削除していく 依存ライブラリに必要な@typesを install していく 型が無くてエラーになっているところに対して any で型を付与していく ※ここまで終わったら この時点で master にマージしても問題はない マージする場合は既存機能が問題なく動作するかしっかり確認する！ 一旦マージし
機能開発を止めずに、6万行の TypeScript 移行を完了させた開発プロセス
スタディスト 開発部 技術支援ユニットの笹木 (@s_sasaki_0529) です。 2021年上半期、およそ6万行の JavaScript コードを TypeScript に置き換える作業を、半年間単独で行いました。 本記事では、機能開発自体を止めずに、どのように走り切ることができたのか、ふりかえりたいと思います。 なお、本記事の内容は、移行開始直後の登壇資料 “大規模 Vue アプリケーションの TypeScript 移行” と、移行完了後の登壇資料 “6万行の TypeScript 移行とその後” と重複する内容を含んでいます。 Teachme Biz と TypeScript弊社が開発している、マニュアル作成・共有システム Teachme Biz は、iOS/Android や Windows など、マルチプラットフォームで提供されています。 その中でも、作成・管理に多く使われて
JavaScriptの非同期処理をじっくり理解する (1) 実行モデルとタスクキュー
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 入門記事へのリンク プロミスの使用 - JavaScript | MDN Promise, async/await (現代の JavaScript チュートリアル) JSの初心者にPromiseとasync/awaitの使い方
Block Pong: Web 技術を駆使したゲームアプリの実装舞台裏 - DevFest 2020
このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。
[2020年版] JavaScriptの便利な書き方まとめ | DevelopersIO
先月、Node.jsバージョン14がリリースされたこともあり、改めて最新のJavaScriptの書き方を調べてみました。その中でも特に便利だと感じたJavaScriptの書き方や普段の開発でよく利用している記法をまとめています。 アロー関数式 アロー関数式は関数を定義するための構文です。function式よりもアロー関数式の方が記述が短いので読みやすくなります。また、function式で度々問題になるthisが固定されるので混乱を避けることができます。メソッドでない関数はアロー関数式で定義するのがよいと思います。 function name(arg) { return 'foo'; } const name = (arg) => { return 'foo'; }; async/await async/awaitは非同期処理の構文です。また、asyncは非同期関数を定義する関数定義になりま
![[2020年版] JavaScriptの便利な書き方まとめ | 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)
スタイルガイド - Vue.js
最終更新日: 2021年5月22日 このドキュメントは、 Vue 固有の記法についての公式なスタイルガイドです。もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための参考となります。しかし、スタイルガイドはすべてのチームやプロジェクトで理想とは限らないと考えていますので、過去の経験や、周囲の技術スタック、個人の価値観に基づいた上で必要に応じて慎重に逸脱することが推奨されます。 ほとんどのパートにおいて、基本的に JavaScript や HTML に対する提案はさけています。セミコロンやカンマの使用の是非はどちらでも良いです。 HTML の属性に対してシングルクォートかダブルクォートどちらかを利用するかもどちらでも良いです。しかし、特定のパターンにおいて Vue のコンテキストが役立つと判明した場合については、その限りではありません
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
FRONTEND CONFERENCE 2019の登壇資料です。 https://2019.kfug.jp/session/onoueyosuke Webサイト・Webアプリ制作への高まる要求に耐えられるようにJavaScriptは進化を続けてきました。特にこの約5年間で、JavaScriptは…
JavaScriptの配列操作に役立つ13のヒントとトリック - Qiita
以下はDuomly ( Webサイト / Twitter )による記事、13 useful JavaScript array tips and tricks you should knowの日本語訳です。 Duomlyはプログラミング学習コースを提供しているWebサイトです。 ただランディングページにたいしたことが書いてないので、詳細はよくわかりません。 ここはもう少し書いておいてほしいところ。 13 useful JavaScript array tips and tricks you should know 配列はJavaScriptで最も一般的な概念のひとつであり、内部に格納されたデータを操作する手段は多数存在します。 配列はJavaScriptの最も基本的なトピックであり、プログラミング学習パスの最初に学習するものだという前提のうえで、この記事ではあなたが知らないかもしれない、しか
TypeScript Tutorial For Beginners: Your Friendly Guide
Published: Sep 23, 2019 - Last updated: Feb 7, 2020 Table of Contents TypeScript tutorial for beginners: who this guide is for The following guide is a TypeScript tutorial for JavaScript developers interested in learning more about TypeScript. That means a decent knowledge of "vanilla" JavaScript is appreciated, even though I'll give you pointers to the fundamentals as we go. Do the words TypeScri
"型パズル"との付き合い方
まえおき❌ Compiler API、Language Service❌ 難解な型パズルを出題して型マウント取る話❌ 全TSerが型パズルするべきだ🙆♀️ 型パズルと聞いて身構える方に身近に感じてもらいたい どっちが思考コストが高いかHTTPメソッド // ちゃんと渡せばOK const httpMethod: string = 'GET' // 正しくない値を渡してもエラーになってくれない const httpMethod: string = 'hogehoge'type HTTPMethod = 'GET' | 'POST' | 'PATCH' | 'PUT' | 'DELETE' // ... // ちゃんと渡せばOK const httpMethod: HTTPMethod = 'GET' // 正しくない値を渡すと型エラー const httpMethod: HTTPMeth
【翻訳】より簡潔で高性能なJavascriptを書くための7つの便利なコツ - Qiita
はじめに 読んでいてストックしておきたいなと思ったので、初めて翻訳記事を書きます。 私（@shimonosatoru）が加えたものに関しては斜体で記載しています。 以下、翻訳です。 本文 私たちがJavaScriptを書くとき、私たちは他人のコード、ウェブサイト、そして私たちが使ったチュートリアル以外の場所で見つけたコーディングを効率化するトリックリストを作成しました。 それ以来、私たちはこのリストにトリックを追加してきました。この記事は初心者にも役立つように書かれていますが、JavaScriptを扱えるデザイナーでさえこのリストの中から何か新しいものがないか見つけようとしています。 これらのコードの多くはどのような状況でも役に立ちますが、簡潔さよりも一貫性が重要であることが多いプロダクションレベルのコードにはふさわしくない場合があります。 みなさんにはそれを判断して欲しいと思っています。
TypeScriptの型推論詳説 - Qiita
TypeScriptはJavaScriptに静的型を追加した言語で、コンパイルエラーを検出することでJavaScript開発をさらに快適・効率的にしてくれるものです。 型システムを備えている言語は、多かれ少なかれ何らかの形で型推論を備えています。大ざっぱに言えば、これは型を明示的に書かなくてもコンパイラがいい感じに型を推測して理解してくれる機能です。型推論は静的型付き言語における花型機能のひとつと言ってもよく、色々な言語がそれぞれの特色を持っています。 この記事ではTypeScriptにおける型推論について詳説します。この記事に書いてあることは、TypeScriptを普段から書いている方ならなんとなく理解している内容が多いと思います。しかし、これらの内容がちゃんと言語化されている記事がいまいち見当たらなかったので今回記事を書くことにしました。 ※ この記事の内容は執筆時点の最新版のType
モダン JavaScript プログラミングを始めるために知っておきたい技術セット - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 元々は社内向けとして書いたものですが、転載許可が出たので Qiita 向けに加筆・修正した文章です。 僕は普段ペチパーバックエンド領域を担当することが多いのですが、フロントエンド領域を含めて社内の技術アップデートを一緒に頑張っていきたい、という思いから書きました。 なんせペチパーバックエンドエンジニアの拙い知識なので一部情報が古かったり間違っているかもしれません。 フロントエンドガチ勢の皆様、間違い等ございましたら温かく指摘して頂ければと思います。 前書き JavaScript は一応書けるけど、将来心配。なんかすごく進化してるって聞く
JavaScriptの数値型完全理解 - Qiita
数値というのはプログラミングにおいて極めて基本的な対象です。ほとんどのプログラミング言語は何らかの形で数値の操作を行うことができ、もちろんJavaScriptにおいても例外ではありません。 プログラミングにおける数値の特徴的な点は、往々にしてその性質に応じた複数の型1が与えられている点です。まず、数値は整数か小数かによって分類されます。さらに、値を表すのに使われるビット数、また整数に関しては符号ありか符号なしかという分類ができます。例えば、Rustという言語ではこれらの分類が分かりやすく表れています2。Rustにおける数値の型はi32, i64, u32, u64, f32, f64などがあり、見ただけでどのような特徴を持つ数値なのかが分かりやすくなっています。iというのは符号あり整数、uというのは符号なし整数、fは小数で、その後の数字がビット数ですね。 では、JavaScriptにおいて
JavaScript で陥りやすい失敗例を振り返る - Qiita
個人的に今まで JavaScript を書いてて陥った失敗例などを振り返ってみました。 この記事にあるいくつかの失敗例については恐らく殆どの方が経験してるのではないかなと思います。 これから JavaScript 勉強するぞ！！という方や、現在進行形でこのような失敗に陥っている方の助けになれば幸いです。 コードの解説に関しては簡潔に行なっているので、気になった方はググってください。 DOM の取得及び操作 要素を取得して is-close なスタイルを付与したい。 しかし、エラーになってスタイルを付与できない // 失敗例 const hoge = document.getElementsByClassName('hoge'); hoge.classList.add('is-close'); // 正しい例 const hoge = document.getElementsByClassN
TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に｜ハイクラス転職・求人情報サイト AMBI（アンビ）
TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に JavaScriptプロジェクトでTypeScriptを導入する際には、“柔らかい”静的型付き言語とするのがおすすめです。藤吾郎（gfx）さんがまとめた「がんばらないTypeScript」のガイドラインです。 TypeScriptは、すべてのJavaScriptプロジェクトで採用する価値のある技術です。TypeScriptとこれに対応したエディタを導入することで、補完や型ベースの整合性のチェックにより、すべてのプロジェクトで生産性が上がります。またリファクタリングも容易になるので、長期あるいは大規模なプロジェクトでも品質を保ちやすくなります。 この記事では、TypeScriptについて最低限の知識とともに、サクッと（どちらかというと既存のプロジェクトに）導入するための
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita![[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: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。 - Qiita
