JavaScript

スポンサーリンク
JavaScript

JavaScript | 非同期処理:fetch / API 通信 – ステータスコード確認

ステータスコード確認を一言でいうとfetch で API を叩くときの「ステータスコード確認」は、「サーバーが今どんな気持ちで返事してきているか」をちゃんと見ること です。200「OK、うまくいったよ...
JavaScript

JavaScript | 非同期処理:fetch / API 通信 – JSON 送受信

JSON と fetch の関係を一言でいうとJSON と fetch の関係は、「JavaScript とサーバーが会話するときの“共通言語(JSON)”を、fetch という電話で送受信する」 と...
JavaScript

JavaScript | 非同期処理:fetch / API 通信 - POST リクエスト

POST リクエストを一言でいうとfetch の POST リクエストは、「ブラウザからサーバーに“データを送る”ための HTTP 通信」 です。GET が「取りに行く」だとしたら、POST は「渡し...
JavaScript

JavaScript | 非同期処理:fetch / API 通信 – GET リクエスト

GET リクエストって何をしているのかまず「GET リクエスト」とは、“サーバーにデータをください、とお願いするためのリクエスト” です。今日の天気を教えてユーザー一覧をちょうだい記事の詳細を見せてみ...
JavaScript

JavaScript | 非同期処理:fetch / API 通信 – fetch の基本

fetch ってそもそも何者かfetch は、JavaScript から「ネット越しにデータを取りに行く(サーバーと通信する)」ための関数 です。天気 API から今日の天気をもらう自分のサーバーにフ...
JavaScript

JavaScript Tips | 文字列ユーティリティ:整形 - 小文字変換

「小文字変換」ユーティリティは何のために使うのか大文字変換と対になるのが「小文字変換」です。次のような値を考えてみてください。"ABC""Abc""abc"人間からすると「同じ abc」ですが、コンピ...
JavaScript

JavaScript Tips | 文字列ユーティリティ:整形 - 大文字変換

「大文字変換」ユーティリティは何のために使うのかまずイメージからいきます。次のような値があるとします。"abc""Abc""ABC"人間から見ると「だいたい同じ」ですが、コンピュータ的には全部別物です...
JavaScript

JavaScript Tips | 文字列ユーティリティ:整形 - 半角→全角

「半角→全角」ユーティリティは何のために使うのかさっきの「全角→半角」と逆方向の話です。業務システムでは、こんな要望がよく出ます。帳票や PDF で、桁をきれいに揃えたいから全角で出したい。画面上の見...
JavaScript

JavaScript Tips | 文字列ユーティリティ:整形 - 全角→半角

「全角→半角」ユーティリティは何を解決してくれるのかまず、よくある業務の“あるある”からいきます。ユーザーが「1234」と全角数字で入力してくる。「@」や「-」が全角のせいでメールアドレス判定に落ちる...
JavaScript

JavaScript Tips | 文字列ユーティリティ:整形 - trim

trim は「余計な空白をきれいに落とす」道具まずイメージからいきましょう。ユーザーがフォームにこう入力したとします。" 山田太郎 "(前後にスペース付き)見た目は同じ「山田太郎」でも、実際の文字列と...
JavaScript

JavaScript | 1 日 120 分 × 7 日アプリ学習:検索 & ソート機能付き一覧

1日目のゴールと今日やること1 日目のテーマは「検索・ソート機能付きの一覧アプリを作りながら、高階関数(map / filter / sort)の本質を理解する」ことです。今日の学習ポイントは次の 3...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:環境 - オンライン状態判定

なぜ「オンライン状態判定」ユーティリティが業務で重要なのか業務システムでも、ユーザーは常に安定したネットワーク環境にいるとは限りません。社内 Wi-Fi が不安定、移動中のモバイル回線、一瞬だけオフラ...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:環境 - タイムゾーン取得

なぜ「タイムゾーン取得」ユーティリティが業務で重要なのか業務システムで日付や時刻を扱うとき、必ず出てくるのが「タイムゾーン」の問題です。日本のユーザーと海外のユーザーが混在していたり、サーバーは UT...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:環境 ‐ 言語設定取得

なぜ「言語設定取得」ユーティリティが必要になるのか業務システムを作っていると、「日本語ユーザーには日本語で」「英語ユーザーには英語で」といった多言語対応の話がほぼ確実に出てきます。ここで大事なのは、「...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:環境 – 本番環境判定

「本番環境判定」は何のためにあるのか「本番環境判定」は、「今このコードは“お客さんが触っている本番”なのか、それ以外(開発・検証)なのか」を判定するためのユーティリティです。業務システムでは、同じコー...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:環境 – 開発環境判定

「開発環境判定」とは何を判定するのかまず言葉を整理します。ここでいう「開発環境判定」は、ざっくり言うと「今このコードは“本番”で動いているのか、“開発用”で動いているのか」を判定するためのユーティリテ...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:環境 – Chrome 判定

なぜ「Chrome 判定」ユーティリティが欲しくなるのか業務システムを書いていると、「ほとんどのユーザーは Chrome(または Chrome 系)を使っている」という前提で設計されることが多いです。...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:環境 – Android 判定

なぜ「Android 判定」ユーティリティが必要になるのかモバイル対応をしていると、「iOS と Android で挙動が微妙に違う」という場面に必ずぶつかります。同じ“スマホ”でも、こういう差があり...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:環境 – iOS 判定

なぜ「iOS 判定」ユーティリティが必要になるのかモバイル判定より一歩踏み込んだのが「iOS 判定」です。業務システムを作っていると、こういう“iOS 特有の事情”にぶつかります。Safari(iOS...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:環境 – モバイル判定

なぜ「モバイル判定」ユーティリティが必要になるのか業務システムでも、今は「PC だけ」ではなく「スマホ・タブレット」からの利用が当たり前になっています。その結果、こういう要件がよく出てきます。PC で...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:環境 – ブラウザ判定

なぜ「ブラウザ判定」ユーティリティが業務で必要になるのか業務システムをブラウザで動かしていると、「Chrome では動くのに、IE だと落ちる」「スマホの Safari だけ挙動が違う」みたいなこと、...
JavaScript

JavaScript | 非同期処理:async / await – 同期風コードの注意点

async / await が生み出す「同期っぽいコード」とはasync / await を使うと、await を並べるだけで、「上から順番に実行されているように見えるコード」 が書けます。async...
JavaScript

JavaScript | 非同期処理:async / await – async 関数の戻り値

async 関数の戻り値を一言でいうとasync 関数の戻り値は、「必ず Promise になる」 です。もう少しだけ正確に言うと:async を付けた関数は、必ず Promise を返すその Pro...
JavaScript

JavaScript | 非同期処理:async / await – await とループ

await とループを一言でいうとawait をループの中で使うときのポイントは、「そのループを“順番にゆっくり回す”のか、“できるだけ同時に走らせる”のかを意識すること です。同じループでも、各要素...
JavaScript

JavaScript | 非同期処理:async / await – 並列 await の書き方

並列 await を一言でいうと「並列 await」は、“複数の非同期処理を同時にスタートさせて、あとからまとめて結果を受け取る書き方” です。普通に await を縦に並べると、A が終わってから ...
JavaScript

JavaScript | 非同期処理:async / await – 複数 await の順序

複数の await の「順序」を一言でいうとawait を何回も使うとき、「どこで await を書くか」によって、非同期処理が「順番に」動くか「同時に」動くかが変わります。同じ await でも、上...
JavaScript

JavaScript | 非同期処理:async / await – finally との併用

async / await と finally を一言でいうとasync / await と finally を組み合わせると、「非同期処理が成功しても失敗しても、必ず最後にやりたい処理」を書ける よ...
JavaScript

JavaScript | 非同期処理:async / await – try / catch との併用

async / await と try / catch を一言でいうとasync / await と try / catch を組み合わせると、「非同期処理の成功もエラーも、同期コードと同じように書け...
JavaScript

JavaScript | 非同期処理:async / await – await の戻り値

await の戻り値を一言でいうとawait の「戻り値」は、「Promise が resolve(成功)したときに渡される“中身の値”」 です。const result = await somePr...
JavaScript

JavaScript | 非同期処理:async / await – await の役割

await を一言でいうとawait は、「Promise の完了を“その行で一旦止まって待ち”、結果の値を取り出すためのキーワード」 です。await promise と書くと、その行で「promi...
スポンサーリンク