0Pricing
Web3 & DApp Development Fundamentals · レッスン

Web3におけるフロントエンドとバックエンド

従来のアプリケーションアーキテクチャとDAppsを比較し、分散型バックエンドとしてのスマートコントラクトの役割を確認します。

「Web3におけるフロントエンドとバックエンド」はCoddyKit上の無料Web3 & DApp Development Fundamentalsレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb3 & DApp Development Fundamentals学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web3 & DApp Development Fundamentalsコースには全3レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Apps: Traditional vs. DApps

We interact with applications every day, from social media to online banking. But how are these apps built and structured?

In this lesson, we'll explore the two main architectural styles: traditional applications and Decentralized Applications (DApps). Understanding their differences is key to Web3!

Traditional App Structure

Think of a traditional application like a restaurant. It typically has three main layers:

  • Front-end: What you see and interact with (the dining area).
  • Back-end: The 'brains' that process requests (the kitchen).
  • Database: Where all the information is stored (the pantry).

Each part has a specific role and works together.

Your View: The Front-end

The front-end is the user interface (UI) you see and interact with. This is the website in your browser or the app on your smartphone.

It's built using technologies like HTML, CSS, and JavaScript for web applications, or Swift/Kotlin for mobile apps. Its job is to display information and send user actions (like clicks) to the back-end.

The Server's Role: Back-end

The back-end is the server-side component of a traditional application. It's where all the complex business logic, user authentication, and data processing happens.

When you click a 'Login' button, your front-end sends a request to the back-end server. The back-end then verifies your credentials and sends back appropriate data or a response.

Centralized Databases

In traditional applications, data is stored in a centralized database. This database is typically owned, controlled, and maintained by a single entity, like a company.

Examples include databases like MySQL, PostgreSQL, or MongoDB. This centralization can offer efficiency but also creates a single point of control and potential failure.

DApps: A Decentralized Shift

Decentralized Applications (DApps) offer a different architectural approach. While they still have a front-end, their back-end and data storage are fundamentally different.

Instead of relying on a single, centralized server and database, DApps leverage a blockchain network to execute their core logic and store data.

DApp Front-end: Familiar Look

The front-end of a DApp often looks and feels very similar to a traditional web application. It's still built using web technologies like HTML, CSS, and JavaScript.

The key difference is how it communicates. Instead of sending requests to a centralized server, it interacts directly with a blockchain network, usually through a 'Web3 library' in your browser.

Smart Contracts: The DApp's Brain

Here's the biggest architectural shift: in DApps, the back-end logic is primarily handled by smart contracts.

  • Smart contracts are self-executing programs stored directly on a blockchain.
  • They contain the DApp's rules, logic, and state.
  • Once deployed, they are immutable and run exactly as programmed, without needing a central server.

Blockchain: Decentralized Data

Instead of a centralized database, DApps store their critical data directly on the blockchain itself. This means:

  • Data is distributed across thousands of computers globally.
  • It is immutable: once recorded, it cannot be changed or deleted.
  • It is transparent: anyone can verify the data.

This removes the need for a single entity to control or manage the data.

Architecture Comparison

Let's summarize the core differences:

  • Back-end: Traditional uses centralized servers; DApps use smart contracts on a blockchain.
  • Data Storage: Traditional uses private, centralized databases; DApps use public, distributed ledgers (the blockchain).
  • Control: Traditional apps are controlled by a single company; DApps are governed by code and potentially their community.
  • Availability: Traditional apps can go down if the server fails; DApps are highly available due to decentralization.

Quick Check: DApp Back-end

You've learned about the fundamental differences between traditional and decentralized application architectures. Let's test your understanding!

Recap: DApp Architecture

Excellent work! You now understand the fundamental architectural differences between traditional applications and DApps.

  • Traditional apps rely on centralized servers and databases.
  • DApps use smart contracts on a blockchain for their back-end logic and data storage, enabling true decentralization and immutability.

This shift is what makes Web3 so powerful! Next, we'll dive into how DApp front-ends actually connect to the Ethereum network.

よくある質問

「Web3におけるフロントエンドとバックエンド」レッスンは無料ですか?

はい。「Web3におけるフロントエンドとバックエンド」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Web3 & DApp Development Fundamentalsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web3 & DApp Development Fundamentalsコースには全3レッスンが含まれています。

「Web3におけるフロントエンドとバックエンド」で何を学びますか?

従来のアプリケーションアーキテクチャとDAppsを比較し、分散型バックエンドとしてのスマートコントラクトの役割を確認します。 ブラウザで直接実行するハンズオンコードでWeb3 & DApp Development Fundamentalsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Web3 & DApp Development Fundamentalsを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのWeb3 & DApp Development Fundamentalsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。

「Web3におけるフロントエンドとバックエンド」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このWeb3 & DApp Development Fundamentalsレッスンでコードを書いて実行できますか?

はい。すべてのWeb3 & DApp Development Fundamentalsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Web3におけるフロントエンドとバックエンド
  2. Ethereumへの接続(Web3.js/Ethers.js)
  3. 基本的なDAppの例
← Web3 & DApp Development Fundamentalsに戻る