Javascript

「Vercelを使えばそこそこ大規模なアプリケーションまでインフラエンジニア要らずにいけるのよな」——元Yahoo!エンジニアで YouTuber のしまぶー氏（@shimabu_it）のポストが話題になった。Vercel CEO の Guillermo Rauch 氏の投稿に対するコメントで、「しかも大抵の場合インフラエンジニアがAWSやGCPで構築したものより高機能、高可用性、高パフォーマンス」と踏み込んだ発言をしている。 Vercelが実現する「インフラレス」開発 Vercelは Next.js の開発元として知られるが、プラットフォームとしての本質は開発者からインフラの複雑さを隠蔽することにある。 Framework-defined Infrastructure（FdI） Vercelが推進する Framework-defined Infrastructure は、Infrastructure as Code（IaC）の進化形だ。 従来のIaCでは、開発者がTerraformやCloudFormationでインフラを明示的に定義する必要があった。FdIでは、フレームワークのコードからインフラ構成が自動的に導出される。 ビルド時にソースコードを解析し、開発者の意図を理解 必要なインフラ構成（Edge Functions、Serverless Functions、Static Assets、ISR設定など）を自動生成 開発者は「何を作るか」に集中し、「どこにデプロイするか」を考える必要がない Self-driving Infrastructure Vercelは Self-driving Infrastructure というコンセプトも掲げている。本番環境の運用を自律的に管理し、実世界のインサイトを基にアプリケーションコードの改善まで行うというビジョンだ。 6人のエンジニアで年間360億トークンを処理 Vercelの「インフラ不要」の主張を裏付ける事例として、Durable社のケースが象徴的だ。 6名のエンジニアチームで300万ビジネスをサポート 年間360億トークン（日次1.1億トークン）を処理 新しいAIエージェントを1日で本番環境に展開可能 自社ホスティング比で3〜4倍のコスト削減 創業者は「インフラ構築ではなくエージェント開発に注力できるようになった」と評価している。 インフラエンジニアは本当に不要になるのか？ しまぶー氏は以前から「インフラエンジニアは二極化する」と指摘している: 高待遇化: クラウドサービスの基盤自体を作れるエンジニア 活躍の場が減少: アプリケーションのインフラを構築する程度のエンジニア 「基盤自体を作れるエンジニア」とは、VercelやAWSのサービスそのものを開発・運用する側のスキルセットを指す。具体的には以下のような領域だ: 分散システム設計: AWS LambdaやVercel Edge Functionsの実行基盤を設計・構築するスキル コンテナランタイム/オーケストレーション: Kubernetesを「使う」のではなく「作る・拡張する」レベル ネットワーク基盤: CDN、ロードバランサ、DNSを大規模に設計・運用するスキル ストレージエンジン: 分散データベースやオブジェクトストレージの内部実装 コンパイラ/ランタイム: サーバーレスプラットフォームのビルドパイプラインや実行環境の開発 つまり「AWS上にアプリをデプロイする」のではなく「AWSのようなサービスを作る」側の人材であり、このレベルのエンジニアはプラットフォームの進化によってむしろ需要が高まっている。 Vercelの基盤は何で動いているのか 「基盤を作る」とは具体的にどのレベルなのか。Vercel自身の技術スタックを見ると、その深さがわかる。 Vercelは当初 AWS Fargate でビルド処理を実行していたが、プロビジョニングに90秒かかる問題があった。そこで2023年に独自のコンピュート基盤「Hive」を構築し、起動時間を5秒に短縮した。 Hiveの技術スタックは以下の通りだ: レイヤー 技術 物理基盤 ベアメタルサーバー（“Boxes”） VM隔離 Firecracker microVM + KVM ビルド基盤 Hive（独自コントロールプレーン） 関数実行 AWS Lambda、Edge Functions オーケストレーション Amazon EKS（一部）+ 独自制御 ストレージ/キュー Amazon S3、SQS ネットワーク Amazon Global Accelerator 注目すべきは、OpenShiftのような既存のKubernetesディストリビューションは使われていない点だ。Firecracker はAWSがLambdaとFargateのために開発したオープンソースのmicroVMで、約300ミリ秒でVMを起動できる。Vercelはこの Firecracker + KVM の上に独自のオーケストレーション層を構築している。 ...

Theatre.js — GUI でWebアニメーションを直感的に作れるモーションデザインエディタ しば（@shiba_program）氏のポストが、GUI でWebアニメーションを作成できる JavaScript ライブラリ「Theatre.js」を紹介しています。 GUIで直感的にWebアニメーションが作れる「theatre.js」すごいな。編集した内容が即座に反映されるので、これは微調整捗る。GUIで編集できるから、デザイナーに調整任せることもできそう。デモにある高度なものだけでなく、Webサイトで使うシンプルなアニメーションの作成もかなり楽にしてくれるはず — しば（@shiba_program） 投稿が注目している「デザイナーに調整を任せられる」という点は、Theatre.js の設計思想の核心です。コードでアニメーション対象を定義し、ブラウザ上の GUI エディタで動きを調整する。このワークフローにより、エンジニアとデザイナーの協業が自然に成立します。 Theatre.js とは何か Theatre.js はフィンランド・ヘルシンキの Theatre.js Oy が開発するオープンソースの Web モーションデザインライブラリです。GitHub Stars 12.2k、1,600以上のプロジェクトが依存しており、Web アニメーション領域で確固たる地位を築いています。 基本情報 項目 内容 開発元 Theatre.js Oy（ヘルシンキ） ライセンス Apache 2.0（@theatre/core）/ AGPL 3.0（@theatre/studio） 言語 TypeScript 82.6% GitHub Stars 12.2k 現バージョン 0.5（1.0 開発中） 対応技術 Three.js、React Three Fiber、HTML/SVG、任意のJSライブラリ 2つのパッケージ構成 Theatre.js は2つの独立したパッケージで構成されます。 パッケージ 役割 使用場面 @theatre/core アニメーション再生エンジン 開発・本番の両方 @theatre/studio GUI エディタ（シーケンスエディタ、グラフエディタ、プロパティパネル） 開発時のみ この分離設計が重要です。Studio は開発時にのみ使い、本番ビルドには core だけを含めます。エディタのコードが本番バンドルに入らないため、パフォーマンスへの影響はありません。 4つの基本概念 Theatre.js には、理解すべき4つの概念があります。 ...

リクルート新卒研修の React 資料が「無料で最高の教材」と言われる理由 sigumataityouda 氏のポストが、リクルートの新卒研修資料を「React を語る上で欠かせないもの」「完成度が非常に高い」と紹介しています。リクルートは 2017 年から毎年、新卒エンジニア向け研修資料を無料公開しており、React 研修資料は特に業界で高く評価されています。 React語る上で欠かせないものとしてリクルートの新卒研修資料というのもがある。完成度が非常に高い。 リクルートの React 研修資料とは React 研修 (2024) は、リクルートのエンジニアコース新卒研修「BootCamp」で使われている講義資料です。約 170 スライド以上で構成され、Speaker Deck で無料公開されています。 研修の位置づけ リクルートの新卒エンジニアは配属前に約 3 ヶ月間の BootCamp を受講します。2024 年度は 24 講座以上が開講されており、React 研修はフロントエンド技術スタックの中核として位置づけられています。 研修カテゴリ 主な講座 フロントエンド JavaScript、TypeScript、React、Next.js バックエンド データベース設計、API 設計 品質・テスト テスト駆動開発（講師: t_wada 氏） セキュリティ セキュリティ演習 AI テキスト生成 AI 活用 マインドセット ソフトウェアエンジニアとしての姿勢と心構え 最初の講座「ソフトウェアエンジニアとしての姿勢と心構え」は、技術顧問の t_wada 氏が担当し、「技術の学び方を学ぶ」ことに重点を置いています。 資料の構成 React 研修資料は 5 つのセクションで構成されています。 1. Web アプリ開発の変遷 React を学ぶ前に、Web アプリケーション開発がどう進化してきたかを整理します。 世代 アーキテクチャ 特徴 第 1 世代 MPA（クラシック SSR） サーバーが HTML を生成、ページ遷移ごとにリロード 第 2 世代 MPA + jQuery DOM 操作で部分的な動的 UI を実現 第 3 世代 SPA（CSR のみ） クライアントで描画、リッチな UX 第 4 世代 SPA（CSR + 事前レンダリング） SSR / SSG で初期表示を高速化 この変遷を理解することで、「なぜ React が必要になったのか」という文脈が掴めます。jQuery 時代の命令的 UI と React の宣言的 UI の違いを、歴史的な流れの中で説明しているのが特徴です。 ...

Javascript ページ内のアンカーの取得 ブラウザの「検証」でコンソールからプログラムを実行 1 2 3 4 5 6 // ページ内のすべてのアンカー要素を取得 const anchors = document.querySelectorAll('a'); // アンカーのhref属性を配列に格納 const urls = Array.from(anchors).map(anchor => anchor.href); // 結果をコンソールに表示 console.log(urls);

Gastby レイアウト wrapper.js Gatsbyのwrapper.jsファイルは、ページ全体をラップするために使用されるファイルです。 このファイルを使用することで、特定のHTML要素やReactプロバイダーでページをラップすることができます。 これにより、ページ全体に共通のレイアウトや機能を簡単に適用できます。 例えば、以下のようにwrapper.jsファイルを作成し、ページを特定のコンポーネントでラップすることができます。 1 2 3 4 5 6 import React from 'react'; import Layout from './src/components/Layout'; export const wrapPageElement = ({ element, props }) => { return <Layout {...props}>{element}</Layout>; }; この例では、Layoutコンポーネントでページ全体をラップしています。これにより、すべてのページに共通のレイアウトが適用されます。 さらに詳しい情報や具体的な使用例については、Gatsbyの公式ドキュメントを参考にすると良いでしょう¹。 他に知りたいことがあれば教えてくださいね！ ソース: Copilot との会話、 2024/9/4 (1) gatsby-plugin-wrap-pages | Gatsby. https://www.gatsbyjs.com/plugins/gatsby-plugin-wrap-pages/. (2) Gatsby公式チュートリアルやったよ #JavaScript - Qiita. https://qiita.com/irico/items/cf87eb29ecaf7e135fcd. (3) Gatsby.js 入門 - Zenn. https://zenn.dev/dev8/articles/gatsby_tutorial. (5) en.wikipedia.org. https://en.wikipedia.org/wiki/Gatsby_(software). wrapper.js: 1 2 3 4 5 6 7 8 9 import React from "react"; import Layout from "./layout"; export const wrapPageElement = ({ element }) => { return ( <> <Layout>{element}</Layout> </> ); }; layout.js: ...

React ReactDOM.render React 18以降では、ReactDOM.renderは非推奨となり、代わりにcreateRootを使用することが推奨されています。以下に新しい方法の例を示します。 まず、react-dom/clientからcreateRootをインポートします。 1 2 3 4 5 6 7 8 9 10 11 12 import React from 'react'; import { createRoot } from 'react-dom/client'; import App from './App'; const container = document.getElementById('root'); const root = createRoot(container); root.render( <React.StrictMode> <App /> </React.StrictMode> ); このコードでは、createRootを使用してルートを作成し、そのルートに対してrenderメソッドを呼び出しています。これにより、React 18の新しいレンダリングAPIを利用することができます¹²。 ...

サイトセキュリティチェック Mozilla: https://observatory.mozilla.org/ トレンドマイクロ: https://global.sitesafety.trendmicro.com/?cc=jp Google: https://www.virustotal.com/gui/home/upload OWASP Zap Docker 版 OWASP ZAP を M1 Mac で動かす。 問題: : Cookie No HttpOnly Flag [10010] : Re-examine Cache-control Directives [10015] : Cross-Domain JavaScript Source File Inclusion [10017] : Missing Anti-clickjacking Header [10020] : X-Content-Type-Options Header Missing [10021] : [Information Disclosure - Suspicious Comments]https://www.zaproxy.org/docs/alerts/10027/ : [Cookie Poisoning]https://www.zaproxy.org/docs/alerts/10029/ : User Controllable HTML Element Attribute (Potential XSS) [10031] : Strict-Transport-Security Header Not Set [10035] : Content Security Policy (CSP) Header Not Set [10038] : Secure Pages Include Mixed Content [10040] : Storable and Cacheable Content [10049] : Cookie without SameSite Attribute [10054] : Permissions Policy Header Not Set [10063] : Timestamp Disclosure - Unix [10096] : Modern Web Application [10109] (対応しなくてもよい) : Dangerous JS Functions [10110] : Session Management Response Identified [10112] : Absence of Anti-CSRF Tokens [10202] : Sub Resource Integrity Attribute Missing [90003] : Charset Mismatch [90011] VIRUSTOTAL https://www.virustotal.com/gui/home/upload SUURI https://sitecheck.sucuri.net/

Android インストール % flutter build apk % flutter devices Found 4 connected devices: Pixel 7a (mobile) • 38211JEHN05972 • android-arm64 • Android 14 (API 34) sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 14 (API 34) (emulator) macOS (desktop) • macos • darwin-arm64 • macOS 14.4.1 23E224 darwin-arm64 Chrome (web) • chrome • web-javascript • Google Chrome 124.0.6367.203 Found 1 wirelessly connected device: iPhone13Pro (mobile) • 00008110-000150C21440401E • ios • iOS 17.4.1 21E236 Run "flutter emulators" to list and start any available device emulators. % flutter install -d 38211JEHN05972 Installing app-release.apk to Pixel 7a... Uninstalling old version... Installing build/app/outputs/flutter-apk/app-release.apk... 6.1s ios [Flutter]iOS のビルドで失敗したらまず試すこと 10 選

ijavascript https://n-riesco.github.io/ijavascript/index.html

Puppeteer Puppeteer とヘッドレス Chrome を使って React の SPA サイトをクロールするためのスクリプトを記述するには、以下のようなコードを記述することができます ¹。 1 2 3 4 5 6 7 8 9 10 11 12 const puppeteer = require("puppeteer"); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto("https://example.com"); // SPA のページ遷移を待つ await page.waitForNavigation({ waitUntil: "networkidle0" }); // スクリーンショットを撮る await page.screenshot({ path: "example.png" }); await browser.close(); })(); 上記のコードでは、Puppeteer を使ってブラウザを起動し、指定した URL にアクセスしています。その後、SPA のページ遷移が完了するまで待機し、スクリーンショットを撮影しています。必要に応じて、このコードを改良していただければと思います。 ...