こんにちは！サイボウズ株式会社フロントエンドエンジニアの おぐえもん（@oguemon_com） です。 サイボウズの技術ブログの夏フェス・CYBOZU SUMMER BLOG FES '24が始まりました！企画の一環として、フロントエンドの記事が今日から20日連続投稿されますので、みなさんお楽しみに！ 今回は、コーディングに手放せない存在の1つ「配列」をテーマに、JavaScriptの配列操作の中でも普段使いしやすいものをピックアップして、細かいテクニックや比較的新しい話を交えながらお届けします。 身近ながらも今まで見落としていたポイントを拾ってもらえたらと思います！ // 凡例 const arr = ["a", "b", "c"] arr // console.logした出力結果 ← 出力結果に対するコメント
8月1日、Vercel Newsで「Google がインデックス作成プロセスで JavaScript を処理する方法 – Vercel」と題した記事が公開された。この記事では、Googleがインデックス作成プロセスでJavaScriptをどのように処理しているかについて詳しく紹介されている。 以下に、その内容を簡潔にまとめて紹介する。 まず、Googleがインデックス作成プロセスでJavaScriptをどのように扱うかについて、以下の主要な誤解があることが指摘されている。 「GoogleはクライアントサイドのJavaScriptをレンダリングできない」 「GoogleはJavaScriptページを異なる扱いをする」 「レンダリングキューとタイミングがSEOに大きく影響する」 「JavaScriptを多用するサイトはページ発見が遅くなる」 これらの誤解を解消するため、VercelはSEOおよ
Get the screen width and height as pixel values using a few lines of CSS. Powered by @property & trigonometric functions Unitless values so you can easily use them inside any formula Updates on screen resize (No need for JavaScript) @property --_w { syntax: '<length>'; inherits: true; initial-value: 100vw; } @property --_h { syntax: '<length>'; inherits: true; initial-value: 100vh; } :root { --w:
How Google handles JavaScript throughout the indexing process – Vercel
Understanding how search engines crawl, render, and index web pages is crucial for optimizing sites for search engines. Over the years, as search engines like Google change their processes, it’s tough to keep track of what works and doesn’t—especially with client-side JavaScript. We’ve noticed that a number of old beliefs have stuck around and kept the community unsure about best practices for app
【JavaScript Primer学習メモ】const、let、varそれぞれの方法で宣言した変数の違い - Qiita
【JavaScript Primer学習メモ】const、let、varそれぞれの方法で宣言した変数の違いJavaScriptJavaScript初心者JavaScriptPrimer はじめに JavaScript Primerの変数と宣言の内容を復習しやすいように、まとめました！ js初学者で、変数を宣言する場合はconstを使用するのが良いのかな...?くらいのあいまいな理解だったので、const、let、varの違いについてしっかり学べてスッキリしました！ const 再代入できない変数の宣言とその変数が参照する値（初期値）を定義できる
この記事でわかること JavaScriptのアロー関数の概要と書き方 主な想定読者 JavaScript初学者（特に、無名関数は知っているが、アロー関数のことはよく知らない方） アロー関数とは => を使って、通常よりも簡潔に記述した関数のこと 基本構文とサンプルコード
Cleaner JavaScript promises with safe-awaitPublished on 22 May 2024Nested try/catch blocks are a common pattern in JavaScript when working with promises. However, they often lead to hard-to-read and maintain code. To better understand the problem, let's look at an example where we have a series of promises, each relying on the result of the previous one (or if you just want to skip to the solution
はじめに Javascriptでよく使う構文を勉強していく中で、よく使うオブジェクトの操作について勉強しましたので、共有いたします。 他にも、オブジェクトの操作でよく使うものがありましたら、共有くださると幸いです。 オブジェクト操作一覧 勉強していた中で特によく使うと言われているオブジェクト操作一覧についてご紹介します。 プロパティ追加 プロパティを追加する際には、obj.キー = 値もしくはobj["キー"] = 値で追加します。このとき、キーは追加するオブジェクトに存在していないことが条件です。 また、記法のうちobj.キーをドット記法、obj["キー"]をブラケット記法と呼びます。 // オブジェクト作成 const obj = { name: "Yuto", age: 26, }; // プロパティ追加(ドット記法) obj.country = "Japan"; console.l
世界一シンプルなストップウォッチ 長押しして、離したらスタート ストップウォッチ 特徴 画面全体がボタンになっているため、扱いやすい 押す状態によって色が変化するため、直感的に使える スマホとPCそれぞれのイベントに対応（Chromeは確認済） iPhoneやAndroidのデフォルトのストップウォッチの問題点を改善 使い方 500ミリ秒長押しして、離すとスタート クリック（スマホはホバーまたはクリック）するとストップ const swCheck = document.getElementById('sw-check'); const count = document.getElementById('count'); const btn = document.getElementById('btn'); let elapsedTime1 = 0; // 経過時間（単位:ミリ秒） let e
// フィールド変数として宣言する（アプリケーションが終了するまでDisposeしないこと） System.Net.Http.HttpClient httpClient = new System.Net.Http.HttpClient(); void GetHtml(){ string html = await httpClient.GetStringAsync("https://www.yahoo.co.jp/"); // やりたいことをする }
オブジェクトのプロパティ名（key）を変更するメソッドがあってサクッと変更できるかと思いきや、ライブラリを追加したりしないといけなさそうなので追加せずにオブジェクトのプロパティ名を変更してみたいと思います。 オブジェクトのプロパティ名を変更する方法 nameをfamilyNameに変更してみます。 追加して削除する プロパティ名を追加し古い方を削除します。 let personA = { name : "Nakamoto", country : "Japan", type : "O" }; // 新しいプロパティ名 familyName に name の値を代入 personA.familyName = personA.name; // nameの項目を削除 delete personA.name; console.log(personA); // {country: "Japan", t
注意(2023年5月2日追記) この記事のやり方で公開Webアプリを作ってしまうと、本来秘匿すべきAPIキーが公開されてしまいます！ あくまで手元の環境で使用する公開しないWebアプリを作るときのみ参考にしてください OpenAI platformの記載 Do not share your API key with others, or expose it in the browser or other client-side code. APIキーを他者に共有したり、ブラウザやクライアントサイドコードで公開しないでください。 今のところHTMLを利用して安全にChatGPT APIを使う方法は見つかっていないのですが、もし良い方法をご存じの方がいらっしゃればぜひ教えてください よくぞこの記事まで辿り着きました あなたはHTMLとJavaScriptを使ってChatGPT APIにリクエス
JSS is an authoring tool for CSS which uses JavaScript as ... - GitHub
桜を降らせるDEMO JSとCSSで桜を降らせるエフェクトを実装しました。 まずは実装内容を確認しましょう、DEMOページをご覧ください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>JavaScript桜を降らせる</title> <link rel="stylesheet" href="style.css"> </head> <body> <canvas id="effectimg" width="2000px" height="1000px"></canvas> <scrip
JavaScriptで、DOMを放り投げる処理
どもです。 今回は、JavaScriptで、DOM（HTML）を放り投げる処理についてです。 先にお見せすると、この様な処理になります。 特段難しい処理などではないのですが、ある日メンバーに実装をお願いしたところ「できない。」と返ってきたので、え。なんでと思った次第ではありました。 過去にもこの処理について、大分昔に書いた覚えがありますが、「できない」と言われたのが結構ずっとひっかかっていて今回改めて記事化してみました。 自分が仕事で「できない」と言ってこなかったのもあるか（「技術的には可能です」）、そういってしまうとエンジニアの価値を自分で下げていることと同じだぞ。と思いましたが、老害と思われたくないので（笑）それは告げず。「じゃぁいいよ」と言ってしまった。 そもそも、お願いした処理としては、上記の円形の移動よりももっと簡易なもので、タブを持ち上げる処理なので、上下の移動しかないです。
SDK for JavaScript (v2) を使用した DynamoDB の例 - AWS SDK コードの例
Doc AWS SDK Examples リポジトリには、他にも SDK の例があります。 AWS GitHub 翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。 SDK for JavaScript (v2) を使用した DynamoDB の例 次のコード例は、DynamoDB で AWS SDK for JavaScript (v2) を使用してアクションを実行し、一般的なシナリオを実装する方法を示しています。 アクションはより大きなプログラムからのコードの抜粋であり、コンテキスト内で実行する必要があります。アクションは個々のサービス機能を呼び出す方法を示していますが、関連するシナリオやサービス間の例ではアクションのコンテキストが確認できます。 「シナリオ」は、同じサービス内で複数の関数を呼び出して、特定のタス
はじめに CSSでメディアクエリを用いてダークモードを判別するというのはよく知られた手法ですね。 この記事ではJavaScriptでそれをする方法を紹介します。 この記事の対象者 ある程度HTML, CSS, JavaScript(要するにWebフロントエンド)の基本的な知識があり、JavaScriptでダークモードを判別したい。 前提知識 JavaScriptの基礎的な文法と仕様を理解している 実装 windowに生えているmatchMediaを用いることでメディアクエリを評価することができます。この場合はCSSのメディアクエリと同様prefers-color-schemeでテーマを判定します。 ダークモードかどうか判定するだけ function isDarkMode() { return window.matchMedia && window.matchMedia('(prefers-
JavaScriptの即時関数（IIFE）について 概要 即時関数（IIFE）は、定義と同時に実行される関数のことです。主にJavaScriptのスコープを管理するために使用され、モジュールパターンやクロージャを利用する際に非常に便利です。 IIFEの基本構文 IIFEは、関数を定義した直後に実行するための構文を持っています。基本的な構文は以下のようになります。
JavaScriptでボタンの長押し判定を実装する
最近仕事で、JavaScriptでボタンの長押し判定を実装するという機会がありました。 長押しをするというのはネイティブのイベントでは用意されていないものだったので、一瞬どうしたらいいのかなと思ったのですが、なんだかんだで問題なく実装できたので、ブログに記録として残しておきたいと思います！ JavaScriptで長押し判定を実装するためのコード それでは早速結論から！JavaScriptで長押し判定を実装するためのコードを書いてみたいと思います！ [JavaScript] let count = 0; let timer; const longPushSecond = 1; const btn = document.getElementById('btn'); const result = document.getElementById('result'); btn.addEventLis
はじめに JS初心者です。Qiitaも初投稿です。 関数の書き方っていろいろあるんですね。 覚えた書き方を4種類記載してみます。 こんな簡単な画面でサイコロを振るプログラムをつくります。 アロー関数で定義 <div> <p>サイコロ： <span id="output">?</span></p> </div> <div> <button id="do_dice">サイコロを振る</button> </div> <script> //doDiceという関数を定義 const doDice = () => { const dice = Math.floor(Math.random() * 6) + 1; document.getElementById('output').textContent = dice; } //ボタンが押されたら定義したdoDice関数を呼び出します。 document
// 文字列 let greeting = "こんにちは"; // 数値 let number = 123; // 真偽値 let isTrue = true; let isFalse = false; // 配列 let fruits = ["りんご", "バナナ", "みかん"]; // オブジェクト let person = { name: "花子", age: 30, isStudent: false };
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>振り子もどき</title> <link rel="stylesheet" href="style.css"> </head> <body> <canvas></canvas> <script src="main.js"></script> </body> </html> const canvas = document.querySelector("canvas"); const context = canvas.getContext("2d"); canvas.width = 800; canvas.height = 500; c
【Rails】【JavaScript】RailsでJavaScriptを利用する方法について - Qiita
Rails初学者の学習内容の備忘録です。 間違いや補足等あればご指摘いただけると幸いです。 学習を進めている中で「importmap?webpacker?なにが違うんや...」となったので、今回はRailsでJavaScriptを利用する方法についてまとめました。 RailsでJavaScriptを利用する主な方法 1.Sprockets ・主にRails6以前に利用されていた。 ・JavaScriptファイルはapp/assets/javascriptsディレクトリに置かれる。
PHPとJavaScriptを使用したServer-Sent Events (SSE) 通信の実装方法 概要 Server-Sent Events (SSE) は、サーバーからクライアントへの一方向の通信を確立するための技術です。SSEを使用すると、サーバーからクライアントに対してリアルタイムでデータを送信できます。WebSocketとは異なり、SSEはHTTPプロトコルを使用し、ブラウザでのサポートが広範です。このガイドでは、PHPを使用してサーバー側を実装し、JavaScriptを使用してクライアント側でSSEを受信する方法を説明します。 サーバー側（PHP）の実装 まず、PHPスクリプトを作成して、SSEストリームを生成します。以下は、サーバー側のPHPコード例です。 sse.php <?php header('Content-Type: text/event-stream'); h
フォームなどの日付選択をカレンダー表示して、表示する方法 HTML＆JavaScriptのみ！ - Qiita
今回やりたいこと 先日、JavaScriptの記事を書きました。 今回もJavaScript関連の記事を書きます そして、今回やりたいことは、コチラ↓↓↓ カレンダーから、日付を出力させて、選択したら、 日付を取得して、それを表示させたい！ カレンダーアイコンを押すと、カレンダーが出力されます！ そして、選択した日付が、「選択された日付:」の横に出力されるUIを実現させたいです！ 実装できるまで、1〜2時間はかかりました、やれやれ。。。 なかなか参考になるサイトを見つけられず、それで困りました。 ▼今回参考にした記事 上記の記事とChatGPTを活用しました！ とくに、ChatGPTに助けていただいきました。 毎日ほんとにありがとうございます。感謝。 ChatGPTに感謝を捧げたところで、本題の手順に移ります。 手順 HTMLは、inputで日付を選択させる方法を、参考にしました。 Jav
【JavaScript】.0 を表記する方法
熱を測ったとき、 37.0 と表示されるように、.0をJSで表記する方法について。 ポイント Number.toFixedメソッドを使用する 実装 NG 例
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
この夏押さえておきたいJavaScriptの配列操作コレクション
JavaScriptの多用はSEOに悪影響なのか？Vercelが徹底的に調査、結果は？
Get the screen width & height without JavaScript
【JavaScript | アロー関数】初心者向け！アロー関数の基本的な書き方まとめ - Qiita
Cleaner JavaScript promises with safe-await
【Javascript】よく使うオブジェクトの操作を覚える - Qiita
【JavaScript】世界一シンプルなストップウォッチ - Qiita
JavaScript 外部ページの取得し解析する クロスオリジン要求をブロックの対策 | 鳩でもわかるC#
オブジェクトのプロパティ名を変更する方法！Javascriptの勉強｜Programmer Life
HTMLとJavaScriptでChatGPT APIを使いたい人が参考にする記事はこちら - Qiita
authoring tool javascript - Google 検索
JavaScript桜を降らせる(葉っぱ、紅葉、雪) | SOLLUNAブログ WEB制作
【JavaScript】ダークモードの判定 - Qiita
JavaScriptの即時関数（IIFE）について - Qiita
【JavaScriptのお勉強】関数を初めて使う。サイコロをふってみよう！ - Qiita
JavaScriptのコード一覧
【JavaScript】振り子もどき - Qiita
PHP-JavaScript-Server-Sent-Events - Qiita