国際化（i18n）
さまざまな言語、文化、地域の好みにシームレスに対応できるコンポーネントを設計・開発します。
「国際化（i18n）」はCoddyKit上の無料Design Systems & Component Librariesレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはDesign Systems & Component Libraries学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Design Systems & Component Librariesコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Intro to Internationalization
Internationalization (i18n) is the process of designing and developing your components and applications so they can be easily adapted to different languages, regional differences, and technical requirements of a target country, region, or culture.
Think of it as preparing your product for the world! It's not just about translation, but about making sure your UI works everywhere.
Understanding Locale
A locale is a set of parameters that defines the user's language, country, and any special variant preferences that should be used to present information.
en-US: English (United States)fr-CA: French (Canada)es-MX: Spanish (Mexico)
These codes help your system know how to format things correctly.
Translating Text with Keys
Instead of hardcoding text directly into your components, you use translation keys. These keys are like placeholders.
For example, instead of "Hello", you might use a key like "greeting.hello". Your application then looks up the actual translated text for that key based on the user's locale.
Code: Dynamic Greetings
Here's a conceptual example of how translation keys work. The getTranslatedString function would fetch the correct text based on the locale from a translation file.
public class Greeter {
public static String getTranslatedString(String key, String locale) {
if (locale.equals("en-US")) {
if (key.equals("greeting.hello")) return "Hello!";
if (key.equals("action.welcome")) return "Welcome!";
} else if (locale.equals("es-MX")) {
if (key.equals("greeting.hello")) return "¡Hola!";
if (key.equals("action.welcome")) return "¡Bienvenido!";
}
return "Translation missing for " + key;
}
public static void main(String[] args) {
String userLocale = "es-MX"; // Imagine this comes from user settings
System.out.println(getTranslatedString("greeting.hello", userLocale));
userLocale = "en-US";
System.out.println(getTranslatedString("action.welcome", userLocale));
}
}Adapting Dates & Times
Dates and times are presented differently around the world. For example, "03/04/2023" means March 4th in the US but April 3rd in many other countries.
Your design system components should use locale-aware formatting utilities to display dates and times correctly for the user's region.
Formatting Numbers & Money
Number formats also vary. The decimal separator can be a dot (.) or a comma (,).
- US:
1,234.56 - Germany:
1.234,56
Currencies need their symbol and correct placement (e.g., $100.00 vs. 100,00 €).
Handling Text Direction
Most languages read from Left-to-Right (LTR). However, languages like Arabic, Hebrew, and Farsi read from Right-to-Left (RTL).
For RTL languages, the entire layout of your components needs to be mirrored. This includes text alignment, icon placement, and the flow of elements.
Cultural Imagery
Sometimes, images, icons, or even videos need to change based on the user's culture or region.
A picture that resonates well in one country might be confusing or even offensive in another. Your design system should support managing and delivering locale-specific assets.
Design Systems for i18n
A design system is key for good i18n because it provides:
- Centralized Translations: All strings managed in one place.
- Adaptable Components: Components designed to handle varying text lengths and RTL layouts.
- Consistent Formatting: Standardized date, time, and number formatting.
This ensures a consistent global experience.
i18n Quick Check
You're building a button component for your design system. Which of these is the BEST practice for displaying the button's text to support internationalization?
i18n Recap
We've explored Internationalization (i18n), understanding that it's more than just translation.
- We learned about locales and how they define regional preferences.
- We saw how to use translation keys for dynamic text.
- We discussed adapting dates, numbers, currencies, and layouts (RTL).
- And finally, how a design system provides a powerful foundation for building globally-ready components.
Keep these principles in mind for truly global products!
よくある質問
「国際化（i18n）」レッスンは無料ですか？
はい。「国際化（i18n）」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Design Systems & Component Librariesコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Design Systems & Component Librariesコースには全4レッスンが含まれています。
「国際化（i18n）」で何を学びますか？
さまざまな言語、文化、地域の好みにシームレスに対応できるコンポーネントを設計・開発します。 ブラウザで直接実行するハンズオンコードでDesign Systems & Component Librariesを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Design Systems & Component Librariesを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのDesign Systems & Component Librariesは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「国際化（i18n）」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このDesign Systems & Component Librariesレッスンでコードを書いて実行できますか？
はい。すべてのDesign Systems & Component Librariesレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。