Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Runtime performance optimization

Fast rendering is critical for Angular and we've built the framework with a lot of optimizations in mind to help you develop performant apps. To better understand the performance of your app we offer [Angular DevTools](tools/devtools) and a [video guide](https://www.youtube.com/watch?v=FjyX_hkscII) on how to use Chrome DevTools for profiling. In this section we cover the most common performance optimization techniques.

**Change detection** is the process through which Angular checks to see whether your application state has changed, and if any DOM needs to be updated. At a high level, Angular walks your components from top to bottom, looking for changes. Angular runs its change detection mechanism periodically so that changes to the data model are reflected in an application’s view. Change detection can be triggered either manually or through an asynchronous event (for example, a user interaction or an XMLHttpRequest completion).

Change detection is highly optimized and performant, but it can still cause slowdowns if the application runs it too frequently.

In this guide, you’ll learn how to control and optimize the change detection mechanism by skipping parts of your application and running change detection only when necessary.

Watch this video if you prefer to learn more about performance optimizations in a media format:

<docs-video src="https://www.youtube.com/embed/f8sA-i6gkGQ"/>
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
# Runtime performance optimization
# ランタイムパフォーマンスの最適化

Fast rendering is critical for Angular and we've built the framework with a lot of optimizations in mind to help you develop performant apps. To better understand the performance of your app we offer [Angular DevTools](tools/devtools) and a [video guide](https://www.youtube.com/watch?v=FjyX_hkscII) on how to use Chrome DevTools for profiling. In this section we cover the most common performance optimization techniques.
高速なレンダリングはAngularにとって不可欠であり、パフォーマンスの高いアプリケーションを開発できるよう、多くの最適化を念頭に置いてフレームワークを構築しました。アプリケーションのパフォーマンスをよりよく理解するために、[Angular DevTools](tools/devtools)と、Chrome DevToolsをプロファイリングに利用する方法についての[ビデオガイド](https://www.youtube.com/watch?v=FjyX_hkscII)を提供しています。このセクションでは、最も一般的なパフォーマンス最適化手法について説明します。

**Change detection** is the process through which Angular checks to see whether your application state has changed, and if any DOM needs to be updated. At a high level, Angular walks your components from top to bottom, looking for changes. Angular runs its change detection mechanism periodically so that changes to the data model are reflected in an application’s view. Change detection can be triggered either manually or through an asynchronous event (for example, a user interaction or an XMLHttpRequest completion).
**変更検知**は、Angularがアプリケーションの状態が変更されたか、およびDOMを更新する必要があるかを確認するプロセスです。大まかに言うと、Angularはコンポーネントを上から下へ辿り、変更を探します。Angularは変更検知メカニズムを定期的に実行し、データモデルへの変更がアプリケーションのビューに反映されるようにします。変更検知は、手動で、または非同期イベント(例えば、ユーザー操作やXMLHttpRequestの完了など)を介してトリガーできます。

Change detection is highly optimized and performant, but it can still cause slowdowns if the application runs it too frequently.
変更検知は高度に最適化されており、パフォーマンスが高いですが、アプリケーションが頻繁に実行しすぎると、依然として速度低下を引き起こす可能性があります。

In this guide, you’ll learn how to control and optimize the change detection mechanism by skipping parts of your application and running change detection only when necessary.
このガイドでは、アプリケーションの一部をスキップし、必要な場合にのみ変更検知を実行することで、変更検知メカニズムを制御および最適化する方法を学びます。

Watch this video if you prefer to learn more about performance optimizations in a media format:
メディア形式でパフォーマンス最適化について詳しく学びたい場合は、このビデオをご覧ください。

<docs-video src="https://www.youtube.com/embed/f8sA-i6gkGQ"/>
13 changes: 6 additions & 7 deletions tools/translator/agent.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ export async function createTranslationAgent(input: {
const translator = new ChatGoogleGenerativeAI({
apiKey: googleApiKey,
model: translationModelName ?? defaultGeminiModel,
temperature: 0.5, // 翻訳の一貫性を重視
temperature: 0.2, // 翻訳の一貫性を重視
cache: false,
});
const translatorPrompt = PromptTemplate.fromTemplate(
translatorPromptTemplate
Expand All @@ -37,6 +38,7 @@ export async function createTranslationAgent(input: {
apiKey: googleApiKey,
model: proofreaderModelName ?? defaultGeminiModel,
temperature: 0.8, // エラー修正への柔軟性を持たせる
cache: false,
});
const proofreaderPrompt = PromptTemplate.fromTemplate(
proofreaderPromptTemplate
Expand Down Expand Up @@ -90,6 +92,7 @@ const translatorPromptTemplate =

## 重要な注意事項

- **テキスト全体をコードブロックとしてラップしないでください。**
- **マークダウンの構造を絶対に変更しないでください**
- **行数を絶対に変更しないでください** - 入力と出力の行数は必ず同じにしてください
- **コードブロック内の内容は翻訳しないでください**
Expand All @@ -112,13 +115,11 @@ const translatorPromptTemplate =
- bad: "Angular の使い方"
- good: "Angularの使い方"

翻訳されたテキストのみを返してください。他の説明や追加のテキストは含めないでください。テキスト全体をコードブロックとしてラップしないでください。
翻訳されたテキストのみを返してください。他の説明や追加のテキストは含めないでください。

## 翻訳対象テキスト

===
{text}
===
` as const;

const proofreaderPromptTemplate =
Expand All @@ -137,15 +138,13 @@ const proofreaderPromptTemplate =
9. **インデントやスペースを保持してください**
10. **指摘されたエラーのみを修正してください**

修正されたテキストのみを返してください。他の説明や追加のテキストは含めないでください。テキスト全体をコードブロックとしてラップしないでください。
修正されたテキストのみを返してください。他の説明や追加のテキストは含めないでください。

## 校正エラー

{diagnostics}

## 修正対象テキスト (\`temp.md\`)

===
{text}
===
` as const;
63 changes: 59 additions & 4 deletions tools/translator/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import consola from 'consola';
import assert from 'node:assert';
import { readFile, writeFile } from 'node:fs/promises';
import { parseArgs } from 'node:util';
import { cli } from 'textlint';
import {
cpRf,
exists,
Expand Down Expand Up @@ -139,17 +140,61 @@ async function saveTranslation(
file: string,
content: string,
forceWrite: boolean
): Promise<void> {
): Promise<string | null> {
const outputFile = getLocalizedFilePath(file);
const shouldSave = forceWrite || (await promptForSave(outputFile));

if (!shouldSave) {
return;
consola.info('翻訳結果は保存されませんでした。');
return null;
}

await ensureEnglishFile(file);
await writeFile(outputFile, content);
consola.success(`保存しました`);
consola.success(`翻訳結果を保存しました: ${outputFile}`);
return outputFile;
}

/**
* 翻訳ファイルと原文ファイルの行数比較バリデーション
*/
async function validateLineCount(
originalFile: string,
translatedFile: string
): Promise<void> {
async function getLineCount(filePath: string) {
const content = await readFile(filePath, 'utf-8');
return content.split('\n').length;
}

const [originalLines, translatedLines] = await Promise.all([
getLineCount(originalFile),
getLineCount(translatedFile),
]);

const lineDiff = Math.abs(originalLines - translatedLines);

if (lineDiff === 0) {
consola.success(`行数バリデーション: OK`);
} else {
consola.warn(
`行数バリデーション: 注意 - 原文: ${originalLines}行, 翻訳: ${translatedLines}行 (差分: ${lineDiff}行`
);
}
}

/**
* textlintの実行
*/
async function runTextlint(file: string): Promise<void> {
const ok = await cli.execute(`${file}`).then((code) => code === 0);
if (ok) {
consola.success(`textlint: OK`);
} else {
consola.warn(
`textlint: エラーが検出されました。修正が完了してから提出してください。`
);
}
}

/**
Expand All @@ -166,7 +211,17 @@ async function main() {
const translated = await translateFile(file, googleApiKey, geminiModel);

console.log(translated);
await saveTranslation(file, translated, !!write);
const savedFile = await saveTranslation(file, translated, !!write);
if (!savedFile) {
return;
}

// 翻訳結果の分析
consola.start(`翻訳結果を分析...`);
// 原文ファイルとの行数比較
await validateLineCount(getEnFilePath(savedFile), savedFile);
// textlintの実行
await runTextlint(savedFile);
}

main().catch((error) => {
Expand Down
Loading