41 - 80 件 / 108件
"If we really want to make our website faster, we should just rewrite it in Next.js." I think you'd be hard pressed to find a tech startup anywhere without at least one developer who is constantly saying this. But is it actually true? I certainly had no reason to doubt it. As someone who had just done the big upgrade from AngularJS to Angular, I was happy that all those months of work had resulted
Angular公式のデバッグツール「Angular DevTools」、Googleが公開。有志による日本語ガイドも Googleは、Angularアプリケーションのデバッグツール「Angular DevTools」をChromeの拡張機能としてリリースしました。 Announcing Angular DevTools, a new way to debug your apps Install now to: ‣ Visualize the structure of your apps Explore, inspect & edit components ‣ Profile performance Read more → https://t.co/nDWjfppR8y Install here → https://t.co/ciBn3sXUOw pic.twitter.com/uYblKW
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 P�+檪View in English �1檪Always switch to English 次のページ JavaScript フレームワークは、最新のフロントエンドウェブ開発に欠かせないものであり、開発者にスケーラブルでインタラクティブなウェブアプリケーションを構築するための試行錯誤されたツールを提供しています。現代の多くの企業では、フレームワークをツールの標準的な一部として使用しているため、多くのフロントエンド開発の仕事でフレームワークの経験が必要とされています。 フロントエンド開発者を目指していると、フレームワークを学ぶ際にどこから始めればいいのか悩むことがあります。フレームワークは常に新しいものが登場するため、多くの種類の中から選ぶこと
@Injectable() export class Test1Service { getName() { return { name: "john" }; } } @Controller("test1") export class Test1Controller { constructor(private readonly test1Service: Test1Service) {} @Get() getName() { return this.test1Service.getName(); } } Nest CLI でプロジェクトを作成したときに生成されるコードはこんな感じになっていると思います。 service での処理を controller で呼び出すことができているくらいにしか思いません。 このサービスは必ずしも、DI しないと使えないわけではなく、通常のクラスなので、インスタ
テックカンパニーをテックカンパニーたらしめているものはなにか?技術か、人か、それともチームなのか。 連載「Technology Company Internals」では、テックカンパニーの内側で働くエンジニアに、技術に精通したエキスパートが対面で話を聞き、テックカンパニーとは何か?を探るだけでなく、テックカンパニーを目指す企業の指針となることを目指します。 コロナ禍は飲食業界のDXを促進する 白石: 本日はよろしくお願いします。自己紹介からお願いします。 鄧: 鄧 皓亢(デン ハオカン)と申します。CTOを務めています。普段の仕事は、一言でいうと「なんでも屋」ですね。アーキテクト的な役割を担うこともあれば、お客様に価値を少しでも早くお届けするためにソリューションをチームに提案したり、場合によっては自分でもコードを書いたりします。 北川: 北川 真理(キタガワ マコト)です。フロントエンドエ
こんばんは!Google Developers Expert for Angularのlacolacoです。この記事はAngularアドベントカレンダー 2020、25日目の記事です。 毎年最終日を書かせてもらってますが、いつものような「一年のふりかえりと来年の予想」ではなく、今年はカジュアルにライブラリ紹介させてもらおうと思います。 気になったものがあればぜひ来年趣味や仕事のプロジェクトで使ってみてください。 Angular専用ライブラリ ngneat/reactive-forms ngneat/reactive-forms: (Angular Reactive) Forms with Benefits 😉 AngularのReactive Formsとほとんど互換性を保ったまま、本家に不足している型チェックをサポートしたライブラリです。 公式のロードマップでAngular Forms
Angular 14正式リリース。Typed Angular FormsやStandalone Componentsなど新機能 Webアプリケーションフレームワーク「Angular」の最新版となる「Angular 14」が正式にリリースされました。 Angular v14 is here#ngUpdate includes: Strictly typed forms! Streamlined page title accessibility CLI autocomplete a developer preview of standalone components! & so much more! Learn all about v14: https://t.co/I3mvnb2CSX pic.twitter.com/nYtpOm4KXi — Angular (@angular) June
Get ready for a new faster web experience with Firebase. For the longest time you all have asked us to optimize the size of our JavaScript libraries, and we’ve done just that. We’ve released brand new beta libraries that are significantly smaller in size. Some are even up to 80% smaller! We’ve managed to reduce the size all without removing any features from the previous version too! How did we do
4月23日、Angularチームが「Event Dispatch in Angular」と題した記事を公開した。この記事では、Angularの新しいイベントディスパッチシステムの裏側の詳細について詳しく紹介されている。 4月23日、Angularチームが「Event Dispatch in Angular」と題した記事を公開した。この記事では、Angularの新しいイベントディスパッチシステムの裏側の詳細について詳しく紹介されている。 イベントディスパッチの導入 Angularは、 JSAction というライブラリを使用して、 発生したイベントをアプリケーションのルートで捕捉し、完全なハイドレーションが完了したあとに再生する 機能を導入した。この機能により、ページがインタラクティブに見えるが反応しないという問題を解決している。 例えば、クリック時に onSave() を呼び出す、以下のよ
note.com 上記の記事について、現職では主に Angular を使っている立場(※(注記) 社内ではReactのプロダクトも複数あります)でこの記事についての感想を述べます。 広告 理由はAngularを書ける(or書きたい)エンジニアを採用することが難しいからです。それにつきます。 はい、特に異論はありません。 実際、現職でもAngular のプロダクトのフロントエンドエンジニアの採用には苦戦しており、採用が難しい点について概ね事実かと思います。 その差が出たのは、元記事で指摘されている通り、 "React & Vue.js" vs "Angular" の勢力の別れ方が大きいかと思います。 Vue.js と Angular を触った経験としては、パラダイムというか宗派が異なる部分は確かにあるという感触です。 一方でこの記事の読者に気をつけていただきたいのは、 Angular と React
Angularアプリケーションの状態管理の方法はさまざまな実装がありえるが、その中でも典型的ないくつかのパターンを、それがどのようなニーズがあって選ばれるのかという考察を踏まえながら列挙する。パターンとその特徴を例示するのであって、それぞれのパターンにおける最良の実装を示すものでもないし、これらのパターンに該当しない実装を否定するものでもない。 Standalone Componentsなど、Angularのメンタルモデルが変わっていく兆しを見せる今、これらをまとめておくことは諸々のAngularアプリケーションの状態管理のあり方を見直すきっかけになるのでないかと思う。特に、NgRxがデファクトスタンダードであり唯一の選択肢だと考えている人には、それが単にひとつの選択肢であることを思い出してもらえるのではないだろうか。 コンポーネントクラスによる直接の状態管理一番最初のパターンは、次の例の
JSer.info #669 - Angular v17リリースがリリースされました。 Introducing Angular v17. Last month marked the 13th anniversary... | by Minko Gechev | Nov, 2023 | Angular Blog Release v17.0.0 · angular/angular Node.js 16のサポート終了、ドキュメントサイトの刷新、@ifや@forなどのbuilt-in control flowが追加されています。 新しいプロジェクトでのSSRにおけるhydrationがデフォルトで有効に、ng serveとng buildにViteとesbuildを利用するようになるといった変更も含まれています。 Prettier 3.1がリリースされました。 Prettier 3.1: New ex
この記事では、noteがリリースされた2014年当初から現在までのフロントエンド技術の移り変わりをざっくりと振り返ります。 Angular 1.x 系からスタートしたnoteは、その後Nuxt.jsへの移行、さらにはNext.js + Svelteを活用したリアーキテクチャの道を歩んできました。 フロントエンド領域がめまぐるしく変化する中で、なぜこれらの選択をしてきたのか、どんな課題があったのかなどをまとめました。 ※(注記) この記事で扱う内容は、2014年〜2025年1月時点での内容です Angular 1.x系でnoteをリリースした背景2014年当初の状況noteがリリースされた2014年は、フロントエンドフレームワークがまだ混沌としていた時代でした。Reactは登場していたものの、企業での採用実績やノウハウがそこまで多くはなく、Vue.jsはまだ黎明期。AngularJS(Angular
Angular公式のi18nパッケージ(パッケージ名 @angular/locale)がとても出来がよく、DeepLを使った自動翻訳も簡単にできたので、何がよかったかをご紹介したいと思います。「いやいやそんなのまだまだだ」「こっちのツールの方が強強だ」という方はぜひ記事を書いていただき、知見を共有できれば幸いです。 Angular i18nというと「Angular公式のi18nパッケージ」( @angular/locale )と「Angularのi18n化(国際化)」の2つの意味がありややこしいですが、本文では前者の「Angular公式のi18nパッケージ」を指すことにします。 Angular i18nのよかったこと4選 私が採用してとても開発者体験がよかった点を4つご紹介したいと思います。 1. compiletime i18nによりパフォーマンスの問題がない まず、SPAの多言語化には
数年前、フロントエンドフレームワークを選ぶことが「派閥争い」のようだった時代を覚えていますか? React陣営: JSXを天才的な設計だと絶賛する一方、反対派はそれを「HTMLとJSの奇怪な混合物」と呼んだ。 Angular陣営: 静的型付けとフル装備のソリューションに固執し、Vueファンからは「重すぎる」と揶揄された。 Vue陣営: 使いやすさと柔軟性を両立する中庸の道を行くと自負していた。 コミュニティの議論では、各々が言語機能、アーキテクチャ思想、エコシステムツールについて互いに「皮肉を言い合う」のが日常茶飯事でした。 しかし2025年の現実は、これらのフレームワーク間の差異は縮小し、時には新しいフレームワークに切り替えても、開発体験やAPIのスタイルがほとんどシームレスに移行できるほどになっています。 なぜこのような収束傾向が起きているのでしょうか?その背後には、技術の自然な進化だ
On the Angular team, we believe testing is critical to build highly complex and scalable applications effectively. Testing takes many forms, and "unit tests" focus on testing the smallest units of a codebase. For Angular applications, this typically includes tests of individual components or services. We regularly survey Angular developers to make sure we are always providing the best experience,
Angularが新機能「インクリメンタルハイドレーション」をプレビュー。静的サイトをロード後、JavaScriptが必要になった時点で動的に組み込み Webアプリケーションフレームワーク「Angular」の開発チームは、次期Angularに搭載予定の新機能「Incrmental Hydratio」(インクリメンタルハイドレーション)をプレビュー公開しました。 We just shared a feature preview of the next step in Angular’s hydration story. Meet Incremental Hydration. pic.twitter.com/u60q2C2NaC — Angular (@angular) October 16, 2024 基盤となるハイドレーションとは? インクリメンタルハイドレーションの基盤となる「ハイドレーシ
Angular v11.0.0のリリースとともに、Angularの開発ロードマップも更新された。 この記事では開発ロードマップから "Migrate To ESLint" が消えたことと、Lintingに関するAngular CLIの動きについて簡単にまとめる。 TL;DR要点だけ知りたい人は次のことだけ持ち帰って欲しい。 TSLintからESLintへの移行はサードパーティのangular-eslintの利用を公式に推奨している Angular CLIのデフォルトLinter(TSLint)はv12で非推奨になる angular-eslintAngularチームがTSLintからESLintへの移行を考え始める以前から、angular-eslintプロジェクトはTSLint+Codelyzerの機能をESLintで再現するツールを開発してきた。 近々angular-eslintのリリース
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
JSer.info #579 - Parcel 2.3.0がリリースされました。 Release v2.3.0 · parcel-bundler/parcel ParcelでParcel自体のいくつかの依存関係を事前にbundleするように変更。 Node Core ModulesのpolyfillやBabel/PostCSSの依存関係をオンデマンドでインストールするように変更などの変更が含まれています。 Reduce the number of npm dependencies needed by parcel by devongovett · Pull Request #7576 · parcel-bundler/parcel Vite 2.8.0がリリースされています。 vite/CHANGELOG.md at main · vitejs/vite macOS Montereyで50
Photo by Craig Adderley from PexelsIn January of 2018 we laid out our plans for the final releases of AngularJS before entering long-term support and last year, we extended the LTS due to the global pandemic until December 31, 2021. Well, friends, the time has come and we’re no longer supporting AngularJS. We’re incredibly proud of the work that has been done with AngularJS and the way it evolved
本記事の内容は2021年10月時点の情報で、だいぶ古くなっています。 2024年8月時点で、筆者の興味がDioxusに移っているので、しばらくリライトの予定はありません🙇♀️ ※(注記)Tauriって何?という方はお先にこちら↓の記事をどうぞ。 この記事は? Tauriで使えるWebフレームワークを探してみよう、という記事です。 まずはRust部分(バックエンド)のコーディングに関係するVSCodeのプラグインを紹介してから、Webフレームワークの調査に入っていこうと思います。 なぜVSCodeのプラグインかというと・・・単純に私が普段VSCodeでコーディングしているからです😋 TauriでのRustコーディングに関係するVSCodeのプラグイン Tauri Tauriコマンドと、tauri.conf.json編集時の機能を追加してくれるプラグイン。 機能 コマンドパレットに、init、d
JSer.info #668 - Remix 2.2.0がリリースされました。 Release v2.2.0 · remix-run/remix Viteをサポートし、ViteのプラグインとしてRemixを使えるようになりました。 詳しくは次の記事で解説されていますが、既存のViteのエコシステムに乗れることで開発体験の改善やViteのプラグインの利用などができるようになっています。 Remix ❤️ Vite | Remix 他には、Fetcherにkeyを指定できるようになる変更が含まれています。 また、future.v3_fetcherPersistフラグで、Fetcherのクリーンアップの新しい挙動をopt-inで試せるようになっています。 Deno 1.38がリリースされてました。 Deno 1.38: HTML doc generator and HMR deno doc --
EC事業部エンジニアの@ku00です。最近は原神の聖遺物厳選に励んでいます。 この記事はECブログリレーの12日目の記事です。11日目はぱーぽーによるグーペの漸進的なフロントエンド改善を振り返るでした。 カラーミーショップにはショップ運営を助ける機能が数多くありますが、その中でも特定のショップ向けの機能(以下「プラチナプラン機能」という)がいくつかあります。この記事ではこれらの機能のうちの一つをAngular Elementsで実装し直した話をします。 Angular Elementsとは Angular Elementsとは、AngularのコンポーネントをWeb Componentsとしてパッケージ化する機能のことです。Web Componentsはフレームワークに依存せずに新しいHTML要素を定義することができるため、Vue.jsなどの別のフレームワークに組み込むこともできます。An
JSer.info #694 - Next.js 15 RCがリリースされました。 Next.js 15 RC | Next.js React 19 RCに対応、React Compilerを実験的にサポート、Hydration Error表示の改善が行われています。 また、Fetch/GET Route Handler/Client Routerをデフォルトでキャッシュしないように変更、Partial Prerenderingのincrementalオプションを追加などの変更も行われています。 そのほかには、遅延処理をするnext/afterを追加、create-next-appのアップデート、非推奨だった@next/fontのサポート削除などが行われています。 SolidStart 1.0がリリースされました。 SolidStart 1.0: The Shape of Framewor
少し前、何気なくTwitterを見てたらこんなツイートを発見。 Googleの内部のWebフレームワーク...? 起動時はアプリのJSを読み込まない...? インタラクティブになったときにコードをダウンロード...? ツイートしてるのはGoogleでLitを開発しているJustinさん。この技術をLitに活かせないか模索するとツイートしてる。 Litの開発をされている方なので、Litを違う名前で読んで遊ぶアイロニーとかユーモアみたいなものかな、フロントエンドはピュアなJavaScriptをvanillaって言うしな、なーんて思ってたら・・・ AngularのIgor MinarさんもWizが存在しているかのように話している?! そして... Igorさんが「QwikはWizのOSSとしての再実装」と書くと、そこにAngularJSの作者であり、現在Builder.ioでPartyTownやQwikなどを開
Today we are excited to share the next milestone in the evolution of Angular! Over the past three releases we’ve introduced a lot of new features and improvements. This time we focused on polishing the work we shipped by graduating many of the new APIs to stable, addressing common developer requests, and experimentally releasing one of the most desired roadmap projects: zoneless change detection.
photo by Emma TwerskyWe are excited to announce the release of Angular v14! From typed forms and standalone components to new primitives in the Angular CDK (component dev kit), we’re excited to share how each feature makes Angular more powerful. Since our last release, we completed two major requests for comments (RFC), which provided an opportunity for the entire Angular community to provide desi
JSer.info #716 - Angular v19がリリースされました。 Meet Angular v19. In the past two years we doubled down... | by Minko Gechev | Nov, 2024 | Angular Blog Release v19.0.0 · angular/angular Angular v19 Developer Event - YouTube Developer previewとして新しいIncremental Hydrationの仕組みを追加、ServerRouteでレンダリングモードを指定できるように、HMRのサポートが追加されています。 Incremental Hydrationは、@deferでHydrationを遅延実行でき、Hydrationがするまでは@placeholderでプレースホルダーを
Works at any scale Angular lets you start small on a well-lit path and supports you as your team and apps grow. Loved by millions Join the millions of developers all over the world building with Angular in a thriving and friendly community. Build for everyone Rely on Angular's built-in hydration, internationalization, security, and accessibility support to build for everyone around the world.
Original: Crunchbase And Angular: Why We Made The Transition - Crunchbase Written by: Justin Appler, Director of Engineering, Applications at Crunchbase Translated at: 2021年03月04日 2017 年 11 月、Crunchbase.com は新しいウェブプラットフォームでリニューアルしました。何百万人もの Crunchbase ユーザーを新しいサイトに移行しましたが、ダウンタイムはほとんどなく、SEO への悪影響もありませんでした。新しいウェブプラットフォームは今後数年にかけてサイトとプロダクト、そして会社の成長を可能にするために構築されました。 その過程で下した数多くの決定の中で、最も重要だったのは新しいウェブプラット
最近 Angular を触り始めた React エンジニアです。 ただ、周りでは Angular な人が React を触ることになりそうなので、自分の Angular の勉強も兼ねて Angular -> React の言い換え表を作ってみようと思います。 Props @Input/@Output React では input/output の区別は特になく、親から子のコンポーネントに渡すものは全て Props というオブジェクトとして定義されます。 @Output は Angular では子が発するイベントを親が購読している関係になっていると思いますが、React では親から関数を渡して、それを子側でコールバックとして実行するという感じです。 type Props = { text: string doSomething: () => void } const Comp: React.
In the past two years we doubled down on our investment in developer experience and performance — in every single release we’ve been consistently shipping improvements that multiply their impact when combined together. Seeing the positive community response and increased engagement in our developer events is validating that we’ve been moving in the right direction. Today’s release is bringing a se
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
Photo by Antonio Batinic from Pexels.comこれは Angular Advent Calendar 2020 8 日目の記事です。 Angular と LinterAngular: ESLint サポートの現状 2020 Autumn にあるように、Angular CLI v12 から TSLint が deprecated 扱いになる。 TSLint とともに使われてきた Codelyzer で提供されてきた Rule については、今後は angular-eslint が提供していくことになる。実際、多くの Codelyzer ルールが angular-eslint に移植済みだ。 Codelyzerルールの移管状況(一部抜粋)一方でこの移行済みチェックリストを眺めていると、template- prefix から始まる、すなわち HTML テンプレート
TLDR The Angular team plans to end development of Protractor at the end of 2022 (in conjunction with Angular v15). Why? Protractor was created in 2013 when WebDriver APIs were not yet a standard and end-to-end (e2e) tests were hard to write due to lack of support for async / await. To solve this problem, Protractor wraps selenium-webdriver and abstracted asynchronous operations from developers wit
この記事はAngular Advent Calendar 2020の14日目の記事です。 はじめに 普段はJetBrains系のIDEを使ってAngularの開発をしているのですが、ふとVSCodeだとどんな感じになるのかなと気になり、調べてみました。 意外と網羅的にVSCodeのAngular向けの拡張などを紹介している記事がないような気がしたので、整理してみました。 ※(注記)本記事ではコードの編集に内容を絞り、テストやデバッグ等については扱いません 移動・検索系 TypeScript内での定義元への移動 VSCodeは標準でTypeScriptをサポートしているので、拡張は入れなくてもGo to Definitionで移動できます。 テンプレート→TypeScriptの定義元への移動 VSCode拡張:Angular Support テンプレート→TypeScriptの定義元へのプレビュー・
What are the major benefits of Amplify UI? Better developer experience Connected-components like Authenticator are being written with framework-specific implementations so that they follow framework conventions and are easier to integrate into your application. Endlessly customizable Every detail of Amplify UI is customizable to match your brand. Style all of Amplify UI with themes, override compo
TL;DR npm i -D jest @types/jest jest-preset-angular rm karma.conf.js src/test.ts touch jest.config.js src/setup-jest.ts jest-preset-angular プリセットを jest.config.js から読み込む require('jest-preset-angular/ngcc-jest-processor'); module.exports = { preset: 'jest-preset-angular', setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'], };
Angular とは Angularのバージョン チュートリアルのイメージ インストール アプリケーションを作成する サーバを起動する HTMLやCSSを編集する コンポーネントを追加する 変数の値を表示する ルーティングモジュールを追加する リストを表示する サービスを作成する フォームを作成する モーダルダイアログを表示する 簡単な REST-API サーバを作る RxJS で非同期通信を行う Angular とは 「アンギュラー」と読みます。 Google を中心としたコミュニティで開発・公開されています。 ライセンスは基本的には MIT ライセンス/商用利用可能です。 SPA (Single Page Application) を実現する JavaScript 系フレームワークの一つです。 MVC (Model View Controller) や MVVM (Model-View
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く