Web サイト制作の学習で JavaScript になると途端に感じるハードルを下げるためのコツ ｜https://wp.yat-net.com/name
2023年 11月 01日 Web サイト制作の学習で JavaScript になると途端に感じるハードルを下げるためのコツ カテゴリ： JavaScript タグ：学習 ハロウィンというイベントにブログを書いています、こんにちは。 ここ数年 Web サイト制作の学習を始めた方が一気に増えた感じがありますね。HTML や CSS などエディタに簡単なコードを書くだけでブラウザに文字や画像が表示された感動は今でも忘れられません。 そこから気づけば20年ぐらい Web 制作の業界で仕事をしているのですが、僕もひとに教えることが増え多くの人が JavaScript が難しいという意見をよく聞くようになりました。 実際 HTML や CSS とは違い、プログラミング特有の言葉が一気に押し寄せるものは途端にやる気を阻害し、自分には向いていないと感じるひとも多いと思います。 僕自身は専門学校でプログラ
JavaScript Primer - 迷わないための入門書 (jsprimer)を読んで - コブログ
はじめに JavaScript Primer - 迷わないための入門書 (jsprimer)の感想を記載いたします。 良かったところ JS は、暗黙的な型変換についてかなりアバウトであることを学ぶことができました。 特に NaN は一度発生すると挙動的にもデバッグ的にもかなり厄介なため、NaN の防止がとりわけ重要であることを学べてよかったです。 難しかったこと this の扱いや、非同期処理、アロー関数の定義等一度読んだだけでは理解しきれない内容が多かったです。JS のコーディングをしていく中で辞書的に都度確認していこうと思います。 学んだこと 第一部：基本文法 JavaScript は ECMAScript の使用によって動作が決められている。ECMAScript は毎年更新される。 変数宣言時にvarを使用するのは現在非推奨。ECMAScript では機能を追加する際にも後方互換性を
サーバサイドのJavaScriptランタイム「WinterJS」登場。Rustで書かれ、WebAssembyにコンパイル可能なService Workerサーバ
JavaScript JIT compiler
This playlist contains videos where I worked on the JIT (just-in-time) compiler for Ladybird's JavaScript engine (LibJS)
Deprecation of formatting rules - ESLint - Pluggable JavaScript Linter
In ESLint v8.53.0, scheduled to be released on Friday, November 3, 2023, we will formally deprecate our formatting rules. Formatting rules are those rules that simply enforce code conventions around spacing, semicolons, string formats, etc. For a variety of reasons, which are discussed in this post, this is the right decision for ESLint going forward. However, to understand how we got here, it’s h
フロントエンドのビルドツールが色々ありすぎて、何がどうなっているのかがわかりづらいため、 各ツールができること、特徴 ツール間がどのように依存しあっているか を一気に調べて整理した。(情報は2023/10時点) 概要 ツールの依存関係整理 上層: dev server付きのバンドラ/ビルドツール。アプリ開発者が直接configなどを書いて取り扱うのはここが多いと思われる。(Next.jsに関しては、ビルド機能に着目した場合) 下層: やや基盤的なdev serverなしのツール群。 矢印は、明示的な依存関係を表す。実際には、明示的な依存関係がなくても、下層のツール群は上層のバンドラ(やRollup)に対してプラグインを提供していることが多い。 各ツールのできること整理 ツールごとに、大まかな機能区分で、できることとできないことをまとめた。 各機能区分の定義は次セクションを参照。 ツールごと
Web Components Will Outlive Your JavaScript Framework | jakelazaroff.com
If you're anything like me, when you're starting a project, there's a paralyzing period of indecision while you try to figure out how to build it. In the JavaScript world, that usually boils down to picking a framework. Do you go with Ol' Reliable, a.k.a. React? Something slimmer and trendier, like Svelte or Solid? How about kicking it old school with a server-side framework and HTMX? When I was w
最近、JavaScriptの勉強をしていると「DOM（ドム）」という言葉がよく出てくるけれど、 ・DOMの仕組みや構造が具体的にどうなっているのか分からない…。 ・HTMLやJavaScriptとDOMの関係性が掴めない…。 と感じている方も多いのではないでしょうか？ この記事では、 ・DOMの基本的な概念と仕組み ・DOMとHTML、JavaScriptとの関係性 についてわかりやすく解説します。 DOM（Document Object Model)とは？ DOMは、Document Object Modelの略称であり、HTMLやXMLドキュメントなどのマークアップ言語と、CSSをJavaScriptなどのプログラミング言語からアクセスできるようにするためのAPI※のことを指します。 このAPIを使用することで、HTMLやXMLの構造を定義し、文書へのアクセスをはじめ、操作や変更が可能
はじめに 私は他人のコードをレビューしたことも自身のコードを他人にレビューしてもらったこともない初学者として現在のプロジェクトに加わりました。そこから現在までの2年間毎月10から20ほどのプルリクエストをレビューし、またチームメンバー内で読みやすいコードについて議論することで、徐々に読みやすいコードを書くためのポイントが掴めてきました。 これらの経験を通じて、私が現在考えている読みやすいコードを書くためのポイントを本記事にまとめていきます✍️ 前提 言語はJavaScriptで、レガシーな環境での手続き的なJavaScriptを想定しています。 「JavaScriptの文法やメソッドは理解してきたけど、より読みやすいコードの書き方がわからない」と感じている初学者向けです。 筆者は一般的なコーディング規約や設計原則についての書籍や資料をほとんど参照していません（読んだことがある本と言えばリー
function func1({a = 100, b = 200} = {}) { console.log(`${a}, ${b}`) } func1() // => 100, 200 func1({a: 20}) // => 20, 200 Refs デフォルト引数 - JavaScript | MDN 既定値のある分割代入の引数 既定値の代入を、分割代入表記で行うことができます。 これを行う一般的な方法は、空のオブジェクト/配列をオブジェクト/配列に分割代入することです。例えば、 [x = 1, y = 2] = [] とします。 このようにすることで、空の配列/オブジェクトを関数に渡しても、あらかじめ設定した値を保持することができます。 分割代入 - JavaScript | MDN
2023/10/20 虎の穴ラボで発表した JavaScript Server Runtime の歴史です。
【JavaScript】onClick= () => hoge()とonClick={hoge}の違い - Qiita
2つの違い 新しい関数の作成 onClick= () => openDialog() onClick={openDialog}
GitHub - mgarciaisaia/JavaScript-Is-Weird-as-a-compressor
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
【TypeScript / JavaScript】this = "これ" ← どれ？ 【備忘録】 - Qiita
この記事で分かること TypeScript（JavaScript）における関数の宣言方法 各宣言方法におけるthisの扱い 初めに 初めまして。新人エンジニアをしているものです。 先日TypeScriptにおける関数宣言について学習する一環で、thisの取り扱いについて学んだので備忘録として書き上げます。 （前提）TypeScriptの関数の宣言方法 まずは複数ある関数の宣言方法を簡単にまとめます。 ①function構文による宣言
GitHub - elbywan/zap: Another [insert blazing fast synonyms] JavaScript package manager
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
![GitHub - elbywan/zap: Another [insert blazing fast synonyms] JavaScript package manager](https://cdn-ak-scissors.b.st-hatena.com/image/square/d413c75740e3a934e35710770e25f2c93822120d/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F6aee1305572b04b7b09bb456174f71310f542308ef5a44fe9ff59842902f57fb%2Felbywan%2Fzap)
GitHub - knadh/autocomp.js: A super tiny Javascript autocomplete / autosuggestions library. Zero dependencies, ~800 bytes min+gzip.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
【Microsoft365参考書】Teamsの起動時に「A JavaScript error occurred in the main process」とエラーが発生 - 社畜の所業
Configuration Files (New) - ESLint - Pluggable JavaScript Linter
This config system is feature complete but not enabled by default. To opt-in, place an eslint.config.js file in the root of your project or set the ESLINT_USE_FLAT_CONFIG environment variable to true. To opt-out, even in the presence of an eslint.config.js file, set the environment variable to false. If you are using the API, you can use the configuration system described on this page by using the
Flat config rollout plans - ESLint - Pluggable JavaScript Linter
It may seem hard to believe, but the RFC for ESLint’s new configuration system, nicknamed flat config, was first written in 2019. It took until 2022 (v8.21.0) for us to release an experimental, opt-in version of flat config. Since then, we’ve been making changes and improvements based on feedback from the community. The plan was always to allow the current configuration system, nicknamed eslintrc,
A comprehensive guide to the dangers of Regular Expressions in JavaScript
I first heard about regular expression denial of service (ReDoS) vulnerabilities from GitHub's Dependabot. Several of my projects over the years have had dependencies that suffered from ReDoS vulnerabilities, and I would bet that if you've built any JavaScript project with dependencies, you've also come across this. This got me thinking; if there are vulnerable regular expressions in our dependenc
Speeding up the JavaScript ecosystem - The barrel file debacle
Let's imagine you are working on a big project with many files. You add a new file to work on a new feature and import a function from another directory into your code. import { foo } from "./some/other-file"; export function myCoolCode() { // Pretend that this is super smart code :) const result = foo(); return result; } Excited about finishing your feature, you run the code and realize that it t
//html <input type="text" id="text" required> <span id="errorMessage"></span> //js const input = document.getElementById('text'); const errorMessage = document.getElementById('errorMessage'); if (input.checkValidity()) { // 標準のバリデーション機能 errorMessage.textContent = input.validationMessage; // 標準のバリデーションメッセージ } 標準機能を用いたバリデーション なにが嬉しいの？ Web APIにはクライアントのバリデーションに必要な機能が標準でいくつも実装されており、これらを利用することで「自分で書くコード
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
はじめに Scala.jsというプロジェクトがあります。 Scalaで書いたプログラムをJavaScriptに変換する、とてもクールなツールです。 ただ、もちろん言語自体が違うため、完全なマッピングが可能な訳ではありません。ベストエフォートでセマンティクスを維持したままJavaScriptに変換しますが、いくつか対応付けが困難なケースがあります。 その中でも特にScalaの Future をJavaScript上でどのように表現するか？ という点に関しては、JavaScriptの深みを知れるとても良い題材だと思ったので、まとめてみようと思います。 ※ 一応Scala.jsをネタに出してますが、Scalaを知らなくても理解できるように書いたつもりです。 ScalaのFuture Scalaには並列処理を行うためのデータ型として Future があります。 Future は、ある時点において利
GitHub - rolldown/rolldown: Fast Rust bundler for JavaScript with Rollup-compatible API.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Textrade運営事務局はインターネットアンケートにて200名を対象として調査・分析をおこない、学んでみたいプログラミング言語ランキングを作成しました。 アンケート概要 調査概要：学んでみたいプログラミング言語ランキング 調査対象：日本全国の男女 対象人数：200名 調査方法：インターネットアンケート調査 調査媒体：クラウドワークス 調査期間：2023年9月29日 ＊アンケートの調査結果の詳細はこちらの記事に公開しています。 https://wagtechblog.com/programing/press-release04 学んでみたいプログラミング言語ランキングの調査結果 学んでみたいプログラミング言語ランキングの結果は以下のようになりました。 それではプログラミング言語ごとに詳細を解説していきます。 1位：Python Pythonはシンプルで読みやすいプログラミング言語で、多用途
GitHub - Redfire75369/spiderfire: JavaScript Runtime built with Mozilla's SpiderMonkey Engine
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
AWS Amplify JavaScript バンドルサイズの縮小および改良された TypeScript と Next.js のサポート（Developer Preview） | Amazon Web Services
Amazon Web Services ブログ AWS Amplify JavaScript バンドルサイズの縮小および改良された TypeScript と Next.js のサポート（Developer Preview） 本日 (2023 年 9 月 28 日)、AWS Amplify JavaScript Library の v6 Developer Preview を発表しました。これは、AWS クラウドバックエンドを使用した Web 開発へのアプローチ方法を改善するマイルストーンリリースです。私たちは皆様からのフィードバックに耳を傾けており、本日の発表では GitHub で皆様から寄せられていたバンドルサイズや、TypeScript と Next.js のサポートに対するリクエストのいくつかに対応しました。それでは早速、Amplify JavaScript v6 Developer
Cloudflare、CDNエッジのJavaScriptから生成AIを実行できる「Workers AI」を発表。GPUで高速処理を実現
Cloudflare、CDNエッジのJavaScriptから生成AIを実行できる「Workers AI」を発表。GPUで高速処理を実現 Cloudflareは、同社のグローバルネットワークのエッジにおけるアプリケーション実行基盤「Cloudflare Workers」で、生成AIを実行できる新サービス「Workers AI」を発表しました。 Workers AIは同社のグローバルネットワーク上で提供されるGPUを用いて、高速な処理が可能だと説明されています。 We are excited to launch Workers AI - an AI inference as a service platform, empowering developers to run AI models with just a few lines of code, all powered by our gl
GitHub - instant-dev/instant: JavaScript API framework with ORM, migrations and vectors
instant.dev provides a fast, reliable and battle-tested ORM and migration management system for Postgres 13+ built in JavaScript. For those familiar with Ruby on Rails, instant.dev adds functionality similar to ActiveRecord to the Node.js, Deno and Bun ecosystems. We have been using it since 2016 in production at Autocode where it has managed over 1 billion records in a 4TB AWS Aurora Postgres ins
A Socket API that works across JavaScript runtimes — announcing a WinterCG spec and Node.js implementation of connect()
A Socket API that works across JavaScript runtimes — announcing a WinterCG spec and Node.js implementation of connect()09/28/2023 Earlier this year, we announced a new API for creating outbound TCP sockets — connect(). From day one, we’ve been working with the Web-interoperable Runtimes Community Group (WinterCG) community to chart a course toward making this API a standard, available across all r
GitHub - laurentpayot/verticalize: A pipe-like function to verticalize your JavaScript code
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Instant.dev - Type-safe web APIs with JavaScript and Postgres - Instant Analytics
The magical JavaScript API framework with ORM, migrations and vectors
JavaScript入力コントロール「InputManJS」に待望のリッチテキストエディタが登場！ Webフォームで差を付けよう
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Preparing your custom rules for ESLint v9.0.0 - ESLint - Pluggable JavaScript Linter
When ESLint v9.0.0 is released, it will ship with several breaking changes for rule authors. These changes are necessary as part of the work to implement language plugins, which gives ESLint first-class support for linting languages other than JavaScript. We’ve had to make these changes because ESLint has, from the start, assumed that it would only ever be used to lint JavaScript. As such, there w
Visualizing Data via Deno, TypeScript, and VegaLite in JupyterLab Deno brings TypeScript, JavaScript, npm, and ES Modules to Jupyter with an easy to install kernel. The Deno Kernel is the first language runtime with a builtin jupyter kernel. There’s no better time to get started with Deno than now. Once deno is installed, run the deno jupyter kernel installation: deno jupyter --unstable --install
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【JavaScript】1つ1つの関数に役割を持たせる関数型プログラミング - Qiita
JavaScriptビルドツールの整理 各ツールの機能と依存関係
DOMとは？仕組みや構造を解説！HTMLやJavaScriptとの関係は？｜Udemy メディア
【JavaScript】読みやすいコードの書き方 - Qiita
JavaScript なしでインタラクションを追加する Invokers
JavaScript オプション引数のデフォルト値を指定したい - Qiita
JavaScript Server Runtime History
ブラウザ上のJavaScriptでの非同期処理を、今までどのように実現してきたか 「コールバック地獄」なども乗り越えてきた歴史
【HTML】フォームバリデーションの実装方法をもう一度見直してみる【生JavaScript】
"レガシー"と言われないためのJavaScript再入門
JavaScriptでScalaのFutureを表現する
学んでみたいプログラミング言語ランキング 3位「C言語」、2位「JavaScript」、1位は？
Reactを始めるためのJavaScriptとES6基礎知識 - Qiita
Bringing Modern JavaScript to the Jupyter Notebook