年末年始にフロントエンド論みたいな記事をいくつか見たが、僕ら古のSPA職人がやってきたフロントエンドという職域と目指していたものが失伝しかけている気がするので、ここに時代ごとに何を考えていたか、雑に書き殴る。 注意点として、 2004から始まるが、自分がプログラミングを始めたのが2010, 業務としてコードを書き始めたのが 2012 なので、解像度が高いのはそれ以降になる。 tl;dr 2004: 動き出す HTML 2011: 構造化のはじまり 2015: 贅沢品としてのSPAとコミュニティ分化 2017: 貧者のSPA 2019: 守破離としてのパフォーマンス 2004: 動きだす HTML AJAX の時代。要は XMLHTTPRequest で取得したコンテンツに応じて、動的書き換えをDOM書き換えを行うこと。今では名付けるほどでもない操作だが、HTMLが静的なものをやめたことは、

NGK2022S発表資料です https://ngk2022s.connpass.com/event/233520/ yagisan-reportsのWebサイト https://www.denkiyagi.jp/yagisan-reports/Read less

この記事は、クソアプリAdvent Calendar2021の20日目(ホノルル時間)の記事であると同時に、GMOペパボエンジニア Advent Calendar 2021の21日目(日本時間)の記事でもあります。 みなさん、TypeScript使ってますか？TypeScriptはJavaScriptの世界に秩序をもたらす素晴らしい言語ですね。 しかし世界には光の秩序だけでなく闇の混沌も必要です。 という訳で、JavaScriptに闇の混沌をもたらす新言語を作ってみました。 その名も『TypoScript』です。 TypoScript is 何 TypoScriptとは何か。まずはこちらのコードをご覧ください。 function fizz_buzz(count) { for (var i = 1; i <= caunt; i++) { if (i % 3 === 0 && i % 5 ==

はじめに タイトルの通りなんですが, HTML の DOM に指定した id はすべて同じ変数名としてグローバル変数に格納されます. つまり id を好き勝手付けちゃうと知らぬ間にグローバル空間が汚染され, 予期せぬバグを起こしてしまう可能性があります. なので id の値は慎重に考えて付けましょうという. っという注意喚起もしたいんですが, 実は今回伝えたいのはそれではありません. メインはこの仕組みを逆手に取って活用することで手軽にツールを作ったりできますよーという紹介になります. この tips を活用して, ちょっとした Markdown Editor も作ってみたのでよかったら参考にしてください. 具体例 具体的な例は以下です. このように, 要素に id を指定していた場合はグローバルに変数として格納されているので document.getElementById を呼ばなくても

IE11 でも動く JavaScript に変換したい！ ES2015(=ES6) 以降の JavaScript を変換して ES5 にダウングレードする方法です。この記事で利用しているのは Babel のバージョン7です。 なお、本記事ではあえて Babel 以外のツールは含めないようにしています。 前提（ヤリタイコト） Babel とは ブラウザで変換する（お試し利用） Babel を使おう Babel の実行環境の用意 前提環境 フォルダの用意 npm の利用開始 Babel のインストール Babel の設定ファイルの作成 Babel の実行 変換元ファイルの用意 Babel で変換を行う（ファイル単位） Babel で変換を行う（フォルダ単位） npm scripts を使う （おまけ）minify とコメント削除もしたい minify の実施 インストールと設定変更 実行と結果

IT技術者のSacha Greif氏とRaphaël Benitte氏が、JavaScriptに興味を持つ世界中のIT技術者約2万4000人にアンケートを取り、結果をまとめたWebサイト「State of JavaScript 2020」が公開されています。 JavaScriptの最新のシンタックスや命令がどれくらい使われているか、フロントエンドやバックエンド、ビルドツールなど分野ごとにさまざまなJavaScript関連の技術はどれくらい興味を持たれているかなど、アンケート結果を基にして、満足度（Satisfaction）、興味（Interest）、利用率（Usage）、認知度（Awareness）などを計算。それぞれについてランキングを作成しています。 それぞれの値は次の式で計算されると説明されています。それぞれの項目にはアンケートの回答数が入ります。 満足度＝またこの技術を使いたい／（

こんにちは、フロントエンドエキスパートチームの鈴木(@__sosukesuzuki)です。 弊社のサービスである kintone では、コードのフォーマットを ESLint のみで行っているためプロジェクト内でコーディングスタイルを統一しきれていないという問題を抱えていました。 そこで opinionated なコードフォーマッター Prettier を導入し、コードベース全体でコーディングスタイルを統一するための支援をフロントエンドエキスパートチームで行いました。 2011 年にローンチされた kintone では、フロントエンドの大部分が Closure Tools を使って開発されています。Closure Tools は型の指定方法やクラスの定義方法などに独自システムを採用しており、現在の JavaScript のエコシステムや仕様と一部乖離しています。そのため、Prettier 本

Liam Tung （Special to ZDNET.com） 翻訳校正： 村上雅章 野崎裕子 2020-12-24 06:30 プログラミング言語「JavaScript」は25年前に生み出され、現在ではウェブアプリケーションやブラウザーアプリケーションの開発で最も重要な役割を担う言語の1つと言われるまでに成長している。 JavaScriptはフロントエンド開発で最初に検討される言語であり、Microsoftのプログラミング言語「TypeScript」はJavaScriptから派生したものだ。TypeScriptは、オプショナルとして強力な型システムを備えたJavaScriptのスーパーセットであり、ブラウザー内ではコンパイル（トランスパイル）結果のJavaScriptコードとして実行される。 JavaScriptとTypeScriptはいずれも、ECMAScriptと「Node.js」

IoTLT vol70での発表です。 CNPMってあるんですねぇ〜 https://iotlt.connpass.com/event/196360 インストール怖いので自己責任でお願いします。

[ English version ] JavaScript と Node.js についてのこの徹底した投稿では、Promises のキャンセルの歴史、なぜNode.jsに関係があるのか、そして async/await APIで使おうとしたときに注意すべきことについて学ぶことができます。 この投稿は、JavaScript の Promise API をよく理解していて、 Node.js の経験がある方のためのものです。 歴史 2014 年に Promise API がブラウザに導入されて以来、人々は Promise で他に何ができるかを調べていました。ブラウザに最初に登場した関連APIは、HTTP リクエストのための fetch() でした。 HTTP リクエストの問題は、サーバーのリソースを消費することであり、サーバーに送信されるリクエストの数が多い場合はお金がかかります。このため、特に

// gcc-10 -march=armv8.3-a arm-jcvt.c という風にコンパイル #include <stdio.h> #include <math.h> #include <inttypes.h> #include <arm_acle.h> // Prototype: // int32_t __jcvt(double); #if defined(__GNUC__) __attribute__((noinline)) #endif int32_t cast_double_to_i32(double x) { return (int32_t)x; } int main(void) { printf("(int32_t)(-2.8) = %" PRId32 "\n", cast_double_to_i32(-2.8)); printf("(int32_t)1.99 = %" P

ブラウザで長いループや、重い処理をともなうループを回したいとき、同期的にJavaScriptを実行するとメインスレッドがブロックしてしまうので、ちょっとずつ細切れに分割して実行したい、ということがある。 昨日久しぶりに書いたら新たなパターンと出会ったので、これまでにどう書いてて今回どうなったかメモ。 setTimeoutする 以前(10年前とか)はこんなのをよく書いていた。 itemsがでかいArrayで、console.logがすごく重い処理だとして読んでください。 function iterateHeavyTask(items) { const startAt = new Date(); while (items.length > 0 && new Date().getTime() - startAt < 10) { console.log(items.shift()); } if (

Fastify 速いですね Express が hapi より遅いのは意外でした Koa は本体だけだと Express 以上に何もしないので その分速めです よくみると驚きなのが http.Server より Fastify が速いというところ http.Server はフレームワークを使わない Node.js 自体の API です Koa や hapi はこれを中で使っています これより速いということは Fastify は http.Server は使わずに net などを使って ソケット通信部分を直接操作しているのでしょうか？ http.Server を使ってない？Fastify のソースコードを見た限りでは 特に設定をしなければ http.createServer でサーバを作成しています つまり http.Server を使っています https://github.com/fas

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ある日、某システム会社にて ワイ「カタカタカタカタ・・・」 ハスケル子「やめ太郎さん」 ハスケル子「さっきから一生懸命、何を書いてるんですか？」 ワイ「小説や」 ワイ「これで一発当てて、会社なんて辞めてやるんや・・・！」 ハスケル子「へえ〜、それは凄いですね（棒読み）」 ハスケル子「ちょっと読ませてくださいよ」 ワイ「ええで」 ハスケル子「ええと、タイトルは」 ハスケル子「・・・吾輩はバグを出す・・・？」 ハスケル子「なるほど」 ハスケル子「ノンフィクション小説ですね？」 ワイ「どういう意味やねん」 ワイ「フィクションや、フィクション」 仕事をしろ ハスケル子「それよりやめ太郎さん」 ハスケル子「今日から新しい仕事が始まりますよ」 ハスケル子「株式会社ジャンケンポンさんの、コーポレートサイトを作るお仕事です」 ワイ「ああ、せやったな」 ワイ「どんなサイトを作るんやったっけ」 ワイ「仕様書を

JSのProxyを使ってアルゴリズムの実行中の各ステップを可視化する仕組みを作る記事です。 （inspired by アルゴリズム図鑑） 初めに完成品のキャプチャとデモのリンクを貼っておきます。 DEMO: https://codesandbox.io/s/heuristic-morse-1kc2d?file=/src/index.js ※ スマホだとシンタックスハイライトでエラーが出てるのでコード記載無し版も置いておきます。 https://codesandbox.io/s/happy-sun-211bq?file=/src/index.js JavaScriptのProxyとは Proxy - JavaScript | MDN 最初にJSのProxyとは何か簡単に説明すると、 特定の操作に対するオブジェクトの振る舞いを拡張/変更できるオブジェクトです。 拡張されるオブジェクト（ターゲッ

この記事は前回（TSTSTS）の続きです。 前回の記事は ↓↓↓↓↓こちら↓↓↓↓↓ blog.ecbeing.tech はじめに ブンブンHello World. 最近はフロントエンドよりのコーディングにハマりつつある開発です。 どうせフロントエンドやるなら、見た目に凝った何かを入れたい。 だってフロントエンドだもの。 そんな感じで今回は、実行結果をグラフにしてそれっぽい感じにする方法をまとめたいと思います。 見える化、出来ていますか？ はじめに 前回までのあらすじ TS入門してみた 課題点 vue-chartjs Vue.js vue-chartjs 何はともあれ実装 環境構築 vue-chartjsのコーディング 合☆体 結果 おわりに 前回までのあらすじ 多くの方にご覧いただけいるようで、感謝の極みです。 前回の記事を簡単に一言で説明すると、TypeScriptに入門してみました。