Vercel、JavaScriptフレームワーク「Next.js 13.1」公開
「Next.js 13.1」ではまず、「app」ディレクトリを改良した。「app」ディレクトリはNext.js 13でベータ版として追加した機能で、これを利用するとページ・レイアウトの自由度が上がり、テスト・ファイルやスタイル・シートなどをまとめて管理できる。ちなみに、今回の新バージョンでも「app」ディレクトリはベータ版のままだ。 今回は「app」ディレクトリで使用するTypeScriptプラグインを追加した。Visual Studio Codeなどの開発環境に追加して利用できる。プラグインを使用することで、ページ・レイアウトの選択肢などについてのヒントを開発環境に表示できるようになった。さらに、「app」ディレクトリ関連の動作をより安定させた。 そして、エンドユーザーに近い場所にある「エッジ」サーバーでNext.jsプログラムを処理させる「Edge Runtime」で、API Rout
2022-12-28のJS: Next.js 13.1、HTTP/3 Prioritizationの仕組み、Deno 1.29、Bun 0.4
JSer.info #624 - Next.js 13.1がリリースされました。 Blog - Next.js 13.1 | Next.js appディレクトリの改善、外部ライブラリだったnext-transpile-modulesを本体に統合されています。 martpie/next-transpile-modules: [ARCHIVED] Next.js plugin to transpile code from node_modules Release The End. · martpie/next-transpile-modules また、試験的にmodularizeImportsオプションの追加、Turbopackの改善などが含まれています。 Web Performance Calendar » HTTP/3 Prioritization Demystifiedという記事では、H
Javascriptすらろくに書かない人が2週間Reactを勉強してみたから勉強方法を振りかえる
タイトル通り、Javascriptすらまともに書いたことがない自分が2週間でReactを勉強してみました。 色んな教材をやってみた結果、この記事では皆さんにお勧めできる教材や勉強の流れを返っていきます。 他の方への参考になるだけではなく、自分が教材の内容を振り返りたい時にも参考になればと思います。 下の教材に番号が振られているので、その通りにやると効率が良いと思います。 なぜReactを勉強したの？ クロスプラットフォームでスマホアプリやPCアプリを書きたいから。 つまり、最終目標はReact Nativeです。 まずReactを勉強してからReact Nativeをやっていきたいと思っています。 これまでのプログラミング経験や言語は？ 主な言語はC言語、Python、C#です。 つまりWebのフロント、バックエンド系のプログラミング言語はほぼ未経験です。 Javascriptもほぼ書いて
GitHubのトレンドで振り返る2022年のJavaScript/TypeScript
今年も GitHub トレンドから 2022 年の JavaScript/TypeScript を振り返ります。去年の記事はこちらです。 — GitHub のトレンドで振り返る 2021 年の JavaScript | WEB EGG 集計方法 本記事の集計期間は 2022/01/01〜2022/12/07、対象言語は JavaScript および TypeScript です。 なお GitHub がそのリポジトリをなんの言語と見なしてトレンドに掲載したかをもとに集計対象を決定していることにご留意ください。 別言語で書かれた Rust 製の JS 向けのツールや CSS フレームワークなどは基本的に対象外となります。 集計に利用したデータですが、GitHub は過去のトレンドを閲覧する方法を提供していないため、独自の仕組みで GitHub トレンドのアーカイブを生成しそのデータを利用しまし
Reactでの広告配信プラットフォーム開発！フロントエンドエンジニア募集！
Reactでの広告配信プラットフォーム開発！フロントエンドエンジニア募集！ 株式会社フクロウラボ @fukurou I want to hear a detailed なにをやっているのか フクロウラボは、アプリ向けの広告配信プラットフォームを企画・開発・提供している広告スタートアップです。事業は売上成長前年比125%超え、取引顧客数も300社に近づき、シェアを拡大しています。 ◆アプリに特化した広告配信プラットフォーム「Circuit X（サーキットエックス）」 アプリユーザーを獲得したい広告主と広告収益を最大化したいメディアをつなぎ、「成果型Web広告」を通じて、顧客の商品・サービスの効果的なプロモーションを支援しています。 ────「Circuit X（サーキットエックス）」3つの強み ・動画を活用した広告を導入できる ・審査を通過した高品質なメディアに特化している ・高度な技術力に
【完走賞ゲット-24】OpenAI の ChatGPT の API を公式ライブラリの JavaScript版 を試す（使い方を ChatGPT に聞いてみたりも） - Qiita
はじめに こちらは、完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022 の 24日目の記事です。 今月のアドベントカレンダー用記事で、以下の 3記事で扱った OpenAI の ChatGPT の話です。 【KDDI Engineer&Designer】AI にブラウザ用の JavaScript のプログラムをいくつか作ってもらった話 ⇒ OpenAI の ChatGPT で生成されたプログラムの解析も少々 - Qiita 【完走賞ゲット-4】続・OpenAI の ChatGPT のネタ：JavaScript の特定の技術仕様を教えてもらう - Qiita 【enebular 2022】ChatGPT用ノード「node-red-contrib-simple-chatgpt」を enebular・Node-REDで試したり API を Pytho
HTMLを最初に、JavaScriptを最後に：Webを高速化する秘訣 | POSTD
すべてのフレームワークはステートを保持する必要があります。フレームワークはテンプレートを実行することでステートを構築します。ほとんどのフレームワークは、このステートをリファレンスやクロージャとしてJavaScriptヒープに保持します。Qwikのユニークな点は、ステートが属性としてDOMに保持されることです（リファレンスもクロージャもシリアライズして送受信するのは不可能ですが、文字列であるDOM属性なら可能です。これがresumability(再開性）のカギとなります）。 DOMにステートを保持することには、以下のように多くのユニークなメリットがあります。 DOMはシリアライズの形式としてHTMLを使用します。ステートを文字列属性としてDOMに保持することで、アプリケーションをいつでもHTMLにシリアライズできます。HTMLを送信し、別のクライアントでDOMにデシリアライズすることが可能に
2022-12-20のJS: Vite 4.0、SvelteKit 1.0、Node v19.3.0(npm 9)、RUM Archive
JSer.info #623 - Vite 4.0がリリースされました。 Vite 4.0 is out! | Vite SWCをサポートする@vitejs/plugin-react-swcを追加、デフォルトでES2020形式で出力するように変更、CSSを文字列としてインポートする方法の変更などの変更が含まれています。 SvelteベースのフレームワークであるSvelteKit 1.0がリリースされました。 Announcing SvelteKit 1.0 α版からの変更点は次のマイグレーションガイドにまとめられています。 Migration guide · Discussion #5774 · sveltejs/kit Node v19.3.0がリリースされました。 Node v19.3.0 (Current) | Node.js Node v19.3.0では、npm 9系となるnpm
JavaScript初学者【 応用力が身につく！実践トレーニング 】 動画リスト2023年 - Qiita
JavaScript/jQueryを使っていますが「コードを学習」することではなく 「 応用力 」「 創り上げる力 」 を学べるようにしてるのがポイントです。 応用実践トレーニングの内容( 必ず読んで進んでください ) 内容は 「基礎を学んだ」レベルに合わせています。 JavaScriptの「超基礎」のところはプロゲートなどで見ていただくと良いかと思います。 そういった教材で「自分で考えて作れるようにならなかった人」が対象です。 「変数・分岐処理・繰り返し処理・関数・オブジェクト...」を応用できるようにするための教材として作りました。 他の学校、提携校の皆さんもご活用ください！ 「学び方・作り方・考え方」全て揃っています！ ◆JavaScript初学者「効率よく学ぶためのポイントを紹介」準備編 サムネ１ サムネ２
JavaScriptで記述できる物理学ベースのシミュレーションを分かりやすく学べ実際にデモを動かせる「Ten Minute Physics」
物理学に基づくシミュレーションをコンピューターグラフィックスで仕上げる動画をYouTubeチャンネルのTen Minute Physicsが投稿しています。Ten Minute Physicsがこれまで投稿してきた数多くのシミュレーションのコードや、実際にブラウザで動作するデモについて、運営者でNVIDIAの従業員であるというマルチーズ・ミラー氏が紹介しました。 Ten Minute Physics https://matthias-research.github.io/pages/tenMinutePhysics/index.html ミラー氏は記事作成時点で17本の動画を投稿しており、順番に視聴していくことでさまざまな2D・3Dシミュレーションを学んでいくことが可能です。ミラー氏はチュートリアルの動画のほか、シミュレーションのコードや実際にシミュレーションを動かせるデモサイトを公開して
2022-12-07のJS: Electron 22.0.0、Web PerformanceとJavaScript Performance
JSer.info #621 - Electron 22.0.0がリリースされました。 Electron 22.0.0 | Electron Chromium 108、Node.js 16.17.1、V8 10.8へのアップデート、UtilityProcessモジュールの追加、new-windowイベントの非推奨化などの変更が含まれています。 また、Chromium 109でWindows 7/8/8.1のサポートが終了するため、Electronもこれに合わせるようです。 そのため、Windows 7/8/8.1をサポートする最後のElectronバージョンとなります。 Sunsetting support for Windows 7 / 8/8.1 in early 2023 - Google Chrome Community 今週はウェブパフォーマンスやJavaScriptのパフォーマ
notion-sdk-jsをチョット便利に使えるnpm package書いた - はらへり日記
書いた www.npmjs.com notion-sdk-jsとは Notion APIを叩くためのTypeScriptのライブラリ。多分公式。 github.com 何を解決したいのか Pageを作成するAPIを叩く際にJSONを組み立てるのがめんどくさいのが一番だった。 型定義で守られてはいるものの、ドキュメントを見ないとまず書けないし後は書く分量がどうしても多い。 例えばHeading 1, Paragraphの2つだけで構成した下記のページを作る こんなページをAPIで作りたい この場合、こんなコードを書く必要がある。 import { Client } from '@notionhq/client'; const client = new Client({ auth: 'YOUR_NOTION_API_TOKEN', }); await client.pages.create({
JavaScriptからReact、Next.js、TypeScriptを学んでPFに取り掛かれるレベルになるまでのロードマップ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事は自作のポートフォリオ、ProadMapsで作成しました。 ProadMapsのサービス紹介、作成までの学習記録は別途記事を作成したので、チェックいただけると大変ありがたいです！ 概要 Next.jsでポートフォリオを作成できるようになるまでの学習記録になります。今だったらこの順番でやればよかったなぁと思う順番に並び替えています。 タグ Next.js,React,TyepScript,JavaScript,Ruby,Rails 開始時スキル Railsの学習経験あり 終了時スキル ポートフォリオに取り掛かれる 総ステップ数 7
AWS AppSync GraphQL API は JavaScript リゾルバーをサポートしています | Amazon Web Services
Amazon Web Services ブログ AWS AppSync GraphQL API は JavaScript リゾルバーをサポートしています 2022年11月17日より AWS AppSync では、JavaScript リゾルバーをサポートするようになり、クラウドに公開する前にリゾルバーをテストするためのリゾルバー評価エンジンが提供されます。 2017 年に開始された AWS AppSync は、クラウドで GraphQL API を構築、管理、およびホストできるようにするサービスです。 AWS AppSync では、リゾルバーを使用して GraphQL スキーマをさまざまなデータソースに接続します。リゾルバーとは、 AWS AppSync が GraphQL リクエストを変換し、さまざまなデータソースから情報を取得する方法です。 これまでは、Apache Velocity
モジュール解決 | TypeScript 日本語ハンドブック | js STUDIO
このセクションは、基本的なモジュールの知識があることを前提にしています。 詳しい情報については、モジュールのドキュメントを参照してください。 相対(Relative) vs 非相対(Non-relative)モジュールimport モジュール解決の方針 拡張モジュール解決フラグ モジュール解決のトレース --noResolveの使用 よくある質問 モジュール解決は、importが何を参照するのかを把握するために、コンパイラを利用するプロセスになります。 import { a } from "moduleA";のようなimport文について考えてみてください。 aの使用するために、コンパイラは正確に何が提供されているのかを知る必要があり、 またmoduleAの定義を調べる必要もあります。 ここで、コンパイラは"moduleAはどのような形状をしていますか?"と尋ねます。 これは一見単純なよう
2022-11-17のJS: Parcel v2.8.0、Deno 1.28(`npm:`の対応)、Gatsby 5、Nuxt 3
JSer.info #618 - Parcel 2.8.0がリリースされました。 Parcel v2.8.0 Release v2.8.0 · parcel-bundler/parcel Parcel 2.8.0では、ViteとTurbopackのベンチマーク比較から着想を得たパフォーマンス改善が含まれています。 Is Turbopack really 10x Faster than Vite? · Discussion #8 · yyx990803/vite-vs-next-turbo-hmr 大規模なアプリケーションでのビルド時間とバンドルサイズの削減、HMRのincremental buildのパフォーマンス改善、Tree Shakingの改善によるバンドルサイズの削減などが含まれています。 Deno 1.28がリリースされました。 Deno 1.28: Featuring 1.3
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ready to optimize your JavaScript with Rust? (Ep. 517) - Stack Overflow
angular vs astro vs react vs remix vs solid-js vs svelte vs vue | npm trends
Form handling in React-js - Java Code Geeks
Migrate from Webpack to Remix