私のJavaScriptの情報収集法 2024年版
個人的なJavaScriptの情報収集の方法についてまとめてみます。 JSer.infoなどをやっているので、JavaScriptの情報については色々な情報源を見るようにしています。 JSer.infoの範囲の中での情報源については、次の記事でまとめています。 JSer.info 13周年: JavaScriptの情報源を整理する - JSer.info この記事では、少しスコープを広げてJavaScriptの情報収集についてまとめてみます。 かなりスコープが広がってしまうので、万人向けの方法ではなく、個人的な情報収集方法としてまとめています。 この記事では、膨大な情報の中から見つけるというアプローチをとっているので、人によって向き不向きがあると思います。 情報収集の方法 情報の元となる情報源はさまざまなサイトや人になると思います。 しかし、そのサイトや人ごとに見ていくというのはかなり大変
テストの学習へようこそ！ | web.dev
テストの学習へようこそ！ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このコースでは、ウェブ用のテストの概要と探索について説明します。 このコースで学習する内容は次のとおりです。 テストの基礎 自動テストと手動テスト テストを実施する場所と方法 ベスト プラクティス 何をテストすべきか、誰に責任があるのか、目的そのものとしてではなく、目的を達成するために手段をテストすることを検討する方法など、テストの理念。 このコースには、学習に役立つ簡潔で実用的なサンプルコードも含まれています。 コースのスコープには、Node.js などの環境で実行される、フロントエンドの JavaScript とドキュメント モデル、バックエンドでのライブラリ テストが含まれます。テストの経験はありませんが、JavaScript の基礎知識と Node.js などに関する経験が必
Node.js でメモリ肥大化の原因を特定してみた
はじめに ユビーでエンジニアをしているおおいしつかさです。 これは、Ubie Engineering Advent Calendar 2023の12月7日の記事になります。 何を書こうかなー、最近はユビーの根幹システムのリアーキテクチャをやっているのでその辺かなーと思ったのですが、まだ仕掛かり中だということと具体な業務に直結しそうな内容なので抽象化して書くのが面倒そうだなーと思ってたところに軽いトピックが飛び込んできたので、そのことを書くことにしました。 ChatGPTはみなさん使われていると思いますが、ぼくも別の業務でOpenAI関連の機能開発に携わっています(ユビーで働くといろんな業務に携われるのがいいところです) 。 その仕事の中で、Node.js環境でメモリ肥大化の事象に遭遇したので、それをどのように発見して改善したかについてお話します。 ぼくは今も昔もRubyが大好きですが、ふだ
ホームページ- EY-Office
小ネタです、JavaScriptで本日の日付をYYYY-MM-DD形式で得るコードは案外面倒です。 本日2023年4月17日なら 2023-04-17 という文字列を得るコードはRubyならTime.now.strftime("%Y-%m-%d")、Pythonならdatetime.today().strftime("%Y-%m-%d")（importは省略しました）と簡単に書けますが、JavaScriptでは案外面倒なのです。 追記： いくつかの間違いのご指摘がありましたので修正しました（2023-04-19）。 DeepAIが生成した画像です いっけん正しいようで間違ったコード new Date().toISOString().slice(0,10) new Date()で本日の日時を取得します toISOString()メソッドは日時データをISO形式の文字列に変換します、例えば 2
Deno入門 ─ 新しいTypeScript/JavaScript実行環境でWebアプリ開発とデータベース接続の基本を体験しよう｜ハイクラス転職・求人情報サイト AMBI（アンビ）
例えばmain.tsというスクリプトに対して、ファイルの読み取りだけを許可したい場合は、以下のようにコマンドを実行します。 $ deno run --allow-read main.ts このときmain.tsプログラムはファイルの読み取りだけが可能になるため、ファイルの書き込みやネットワークアクセスをするとPermissionErrorによる実行時エラーになります。 なお、実行時にフラグを何も与えなければ、どの権限も持っていない状態になります。 各フラグにはパラメータを指定でき、例えば次のように実行すると/home/userディレクトリの読み込みだけが許可されます（--allow-writeフラグも同様）。 $ deno run --allow-read=/home/user main.ts また、--allow-netを次のように指定すると、特定のドメインとポートだけのアクセスを許可で
Promiseの使い方、それに代わるasync/awaitの使い方 - Qiita
JavaScriptのasync/awaitはPromiseを使った非同期感たっぷりのコードを同期処理っぽくしてくれるが、async/awaitを理解するには、Promiseも知る必要がある。そこで、Promiseからおさらいしておこうと思う。 構文 まず基本的な構文。どうやってPromiseを作成するのか？ function 非同期的な関数(成功時コールバック, 失敗時コールバック) { if (...) { 成功時コールバック(成果) } else { 失敗時コールバック(問題) } } // ↓executor new Promise(function (resolve, reject) { 非同期的な関数( (成果) => resolve(成果), // 成功時コールバック関数 (問題) => reject(問題), // 失敗時コールバック関数 ) }) Promiseクラスをn
3ヶ月くらいフロントエンドやったのでやったこと一旦まとめ - Stimulator
- はじめに - 9月くらいから趣味でフロントエンド周りをやっていたので、その勉強過程のまとめ。 何が良かった悪かったとか、こうすればよかったとか、所感とか。 - はじめに - - 前提 - - どんな感じで進めたか - 最初の開発 TypeScriptとNext.jsを使った開発 アプリ手伝いから自分のアプリ開発まで - できてないこと - - 所感 - - おわりに - - 追記 - - 前提 - 前提として9月頭くらいの私のフロントエンドに対する理解と技術的な知識はこんな感じ。 5年程前まではjQueryで謎のWebサービスや動きモリモリのプロフィールページを作ったりDjangoで研究室のWebサイトを作ったりしてた Railsチュートリアルはやったことある 仕事では普段機械学習モデル作ってるが、機械学習のデータやモデルの変更が及ぶ場合に既存のPHP、Railsアプリの改修をしたり、
nmi.jp
"Maximum call stack size exceeded" というエラーに関する解説を書きます。JavaScript を前提に解説しております。 ざっくり解説 Uncaught RangeError: Maximum call stack size exceeded これは、関数が何度も深く深く呼ばれてしまった場合に出るエラーです。 大抵は、間違って自分自身の関数を呼んでしまった、もしくは再帰の終了条件をミスった場合に発生します。 ここに検索で来た方は、自分自身を呼んでいたり、関数同士が循環的に呼びあっていたりするミスを犯していないか確認してください 。 図にすると、こんな感じです ちなみに、関数呼び出しがなければこのエラーは発生しません。ただの無限ループでは決して発生しないエラーです。以下、解説を書きます。
JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。 - Qiita
本稿では、アロー関数とfunctionキーワードを使って定義される関数を区別するため、functionキーワードを使うほうの関数を「通常関数」と呼ぶことにします。英文で見かけるregular functionの翻訳になりますが、これは公式の用語ではなく、解説の便宜上のものとご理解頂ければと思います。単に「関数」というときは、通常関数とアロー関数どちらも指すこととします。 関数の歴史 歴史的に見ると、通常関数は古くからある言語機能であるのに対し、アロー関数は新しいものです。アロー関数はES2015(ES6)で導入されました。導入にあたっては、関数を短く書きたい、thisを束縛したくないという2つの理由があります。 通常関数とアロー関数の性質の違い 通常関数とアロー関数では、構文が違うというのは見て分かると思います。構文についての違いはここでは解説しません。 ここでは、文法以外の相違点をひとつ
2019年前半の「JavaScriptをちゃんとやるための地図」（追記あり）｜TechRacho by BPS株式会社
こんにちは、hachi8833です。BPS社内勉強会の発表を元に、社内JavaScript勢の皆さまのお力を得て記事を書きました。 目的 JavaScriptをたまにしか使わない私ですが、それもあってなおさら書くときに迷いに迷います。 ネットの情報多すぎ、動き激しすぎ、選り分けるにしても指針が欲しい 古いコードや毒入りコードを拾って食あたりや、泥舟に乗って沈没するのを少しでも避けたい 最初の一歩をどこから踏み出すかの手がかりが欲しい そういったわけで、2019年前半と区切って、一度JavaScript世界について門外漢ならではの「大きな絵」が欲しかったのでした。ここに書いたことの中には来年には古くなっているものあるかもしれません。 ただ、社内のJS勢の話を総合すると、JavaScript世界は数年前に比べるとかなり落ち着きつつあるとのことです。この機会にということで、主に自分のために現在の
Vue.jsで始めるPWA - Qiita
はじめに 先月、フロントエンドエンジニア界隈ではリニューアルした日経電子版が高速すぎてヤバイ件に注目が集まりましたね。 今自分で注目しているVue.jsと、PWAでSPAをつくるためのことはじめを記事にしようと思います。 1. PWAとは PWA（Progressive Web Application）とは、一言で言えば「ネイティブアプリのような使い勝手を実現したWebアプリ」です。 Googleのコードラボを一通りやると全体像がつかめるかと思います。 PWAでできること ホームスクリーンへの追加（Add to homescreen） PWAで作られたWebアプリケーションにアクセスした際に、ホーム画面への追加を促すことができます。 条件は下記です。 - 必要な情報が記載されたマニフェストファイルが存在する - サイトにService Workerが登録されている - HTTPS経由で配信
プログレッシブWebアプリコンプリートガイド - Qiita
以下は、THE COMPLETE GUIDE TO PROGRESSIVE WEB APPSの日本語訳です。 THE COMPLETE GUIDE TO PROGRESSIVE WEB APPS Progressive Web Apps (PWA)は、モバイルアプリ開発の最新トレンドで、2018年初頭ではAndroid端末にだけ対応しています。 WebKitはSafariとモバイルSafariの技術を元に、最近(2017年8月)Service Workerをブラウザに導入する作業を開始したと発表しました。 これは要するに、遅かれ早かれiOS端末にも搭載されるということを意味するので、Appleが決心しさえすればiPhoneやiPadでもPWAを使用できるようになるということです。 PWAは画期的な新技術というわけではなく、Webベースのアプリケーションを作成するための一連のテクノロジーを識
【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita
JavaScript の console がすごいことになっているらしい。 本日、以下の記事を見つけました。 Getting creative with the Console API! この記事で紹介されている console のメソッド全然知らなかったのでビックリしましたが、実際にどう表示されるのか載っていなかったのでChromeのコンソールでスクショを取ってみました。 console.log() 本文によるとlogメソッド内のテキストリテラルは以下の書式で値のフォーマットと置換ができるそうです。 %o / %O - for objects; %d / %i - for integers; %s - for strings; %f - for floating-point numbers; マジすか・・・ そんなわけで以下のコード console.log("Object value:
現代の JavaScript チュートリアル
私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
Vue.jsでPWAアプリを作る - Qiita
1. PWAとは？ PWA(Progressive Web Apps)はGoogle Chromeエンジニア Alex Russell氏が2015年に考案した概念として知られています。特徴としてネイティブアプリのようなユーザー体験をWEBで提供するのが目的です。 PWAの特徴 FAST : パフォーマンスの良い、軽決な動作 Integrated : OSと統合されたユーザー体験 Engaging : アプリのような体験を提供 Reliable : オフラインでも動作する便利性 PWAを実現するAPI PWAを実現するために中心となる機能を提供するのが「Service Worker」です。 Service Worker Service Workerは「バックグラウンドで動作するプログラミング可能なネットワークプロキシ」のことです。Service Workerを利用するとWebページのオフライ
Reflowを制するものはDOMを制す - Qiita
すごい記事が1日目2日目で来ている中で恐縮ではありますが、フロントエンドJavaScriptでパフォーマンス点から気にしたほうがいい部分について書いてみることにします。 DOM律速になるケースもある よく「JavaScriptが遅い」ということも多いのですが、具体的にはどのあたりが遅くなってくるのでしょうか. 純粋にJavaScriptのスクリプト処理が遅い…最近はブラウザ自体も高速化しては来ましたが、それを追いかけるようにJavaScriptの巨大化も進んでいます。ただし、純粋にプログラム言語的な処理なら、Web Workerに振ることで並列化が可能です。 Ajaxや画像読み込みなどの通信が遅い…サーバ側で高速化する手もありますが、状況によってはJavaScriptで先読みを始めておいて、体感時間を短くすることも可能かもしれません。 DOM操作・表示が遅い…これについて今回考えてみます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2022年に起きたフロントエンドの変化
Regexper
JavaScriptフレームワークの「Vue.js」を使ってToDoリストを実装してみよう（後編） | ビジネスとIT活用に役立つ情報（株式会社アーティス）
SPA実装最前線 ~今どきのJSフレームワーク選び~ - Speaker Deck