【FlutterFlowスタイルガイド】変数・関数の命名規則まとめ

🎨命名スタイルの種類

🔤

UpperCamelCase

📝

lowerCamelCase

🐍

snake_case

UpperCamelCase (PascalCase)

各単語の最初の文字を大文字にする（最初の文字も含む）

✅ 例:

CustomButton, UserProfilePage, MainViewComponent

lowerCamelCase (camelCase)

最初の文字は小文字、以降の各単語の最初の文字を大文字にする

✅ 例:

isFormValid, errorMessage, currentTabIndex

snake_case

すべて小文字で、単語をアンダースコアで区切る

✅ 例:

lowercase_with_underscores

💡基本原則

🎯 3つの重要なポイント
1. 一貫性を保つ
2. 説明的な名前を使う
3. 略語を避ける

🔄 一貫性: プロジェクト全体で同じ命名規則を適用する

📖 説明的: 名前を見るだけで目的がわかるようにする

🚫 略語回避: よく知られている略語以外は使わない

📊変数の命名規則

🏠 ページ & コンポーネント

UpperCamelCaseを使用し、目的に応じてサフィックスを追加

✅ 推奨

CustomButton

UserProfilePage

LoginScreen

MainViewComponent

❌ 非推奨

ButtonWidget

loginButton

userProfile

Main

🏷️ カスタムデータタイプ & Enum

データタイプはUpperCamelCase、Enum値はlowerCamelCase

✅ データタイプの例:

UserModel, ProductDetails, OrderItem, OrderItems

✅ Enumの例:

enum Status { active, inactive, pending }

🔒 定数

小文字のkで始まり、その後UpperCamelCase

✅ 推奨例

🎨 デザイン関連:
kDefaultPadding = 16.0
kBorderRadius = 12.0
kElevation = 4.0

🌈 色関連:
kPrimaryColor = "#FF6B6B"
kErrorColor = "#E74C3C"

📏 制限値:
kMaxUploadSizeMb = 10
kMinPasswordLength = 8

📝 文字列:
kAppName = "MyApp"
kApiBaseUrl = "https://..."

❌ 避ける例

padding
→ kプレフィックスがない

VALUE
→ 汎用的すぎる

DATA
→ 目的が不明

🔄 状態変数

lowerCamelCaseを使用し、Boolean値には適切なプレフィックスを追加

✅ 具体例

🖥️ UI状態管理:
isLoading = false
isFormValid = true
shouldShowError = false

📝 ユーザー入力:
userName = ""
emailAddress = ""
enteredPassword = ""

🎯 選択状態:
currentTabIndex = 0
selectedUserId = ""
activeFilterType = "all"

📊 データ管理:
userList = []
errorMessage = ""
searchResults = []

❌ 避ける例

UserName
→ 大文字で始まっている

usrNm
→ 略語を使用

data
→ 汎用的すぎる

f, cnt
→ 1文字変数

⚙️関数の命名規則

🔧 カスタム関数 & アクション

lowerCamelCaseを使用し、動詞で始める

✅ 推奨

説明的で簡潔な名前を使う

動詞で始める（行動を表す）

validateForm

fetchUserData

submitForm

processPayment

❌ 非推奨

アンダースコアやスペースを使わない

不要なプレフィックス・サフィックスを避ける

fetch_user_data

customSubmitFormFunc

doSomething

functionOne

💡 重要: Action Blocksも同じ命名規則に従う（内部的にはDart関数として生成されるため）

🛠️FlutterFlowでの実際の使用例

🎨 定数の使用場面

FlutterFlowのウィジェット設定で定数を活用する例

✅ Container ウィジェット:

• Padding → kDefaultPadding

• Border Radius → kBorderRadius

• Background Color → kPrimaryColor

✅ Text ウィジェット:

• Color → kPrimaryColor

• Font Size → kDefaultFontSize

✅ API Call:

• Base URL → kApiBaseUrl

• Timeout → kTimeoutSeconds

🔄 状態変数の使用場面

FlutterFlowのウィジェット属性と状態変数の連携例

🔘

Button

Enabled: isFormValid

📝

TextField

Value: userName

👁️

Visibility

Visible: shouldShowError

📋

ListView

Items: userList

✅ 実際の設定例:

Button ウィジェット:
• Enabled: isFormValid && !isLoading
• OnPressed: submitForm() → isLoading = true

Text ウィジェット:
• Text: "こんにちは、${userName}さん"
• Visible: userName.isNotEmpty

Conditional Builder:
• Condition: isLoading
• True: Loading Indicator
• False: Main Content

🚀 まとめ: 定数と状態変数を適切に使い分けることで、FlutterFlowでメンテナンスしやすく一貫性のあるアプリを構築できます！

🚀

💻

⭐