ウェブ開発へようこそ: ゼロから始める人のための実践的なガイド

トピックス

• はじめに
• Web とは何ですか?
• あなたのウェブサイトを世界中で利用できるようにする方法
• 開発者向けの必須ツール
• Web 開発でどれくらい稼げますか?
• 初心者向けのヒント
• 結論: 今日から始めましょう

導入

ここにいるのは、Web 開発の世界がどのように機能するかを理解し、新しいキャリアの第一歩を踏み出したいからです。このガイドは、この分野について何も知らず、言語やツールに飛び込む前に基礎を理解して最初から始めたい人を対象としています。実践的でわかりやすい方法で、この旅の始め方を一緒に考えてみましょう。

Web とは何ですか?また、Web はどのように機能しますか?

ウェブは、何百万ものデバイスとシステムを接続するグローバル ネットワークであり、情報へのアクセスとリアルタイムの共有を可能にします。言い換えれば、ウェブは大規模なデジタル図書館のようなものです。 Web サイトにアクセスすると、世界のどこかに保存されている情報が求められます。ブラウザ (Google Chrome や Firefox など) は、この情報を検索して整理してくれる「図書館員」のようなものです。

すべてを機能させるための重要な要素は次のとおりです:

1.ブラウザとサーバー
Web サイト https://www.pudim.com.br/ にアクセスすると何が起こるかを理解しましょう。ブラウザはサーバーにリクエストを送信し、サーバーはページを表示するために必要なファイルで応答します。 Pudim の場合、サーバーは、タイトル、画像、電子メール リンクなど、Web サイトの基本構造を含む HTML ファイルを返します。

• ブラウザは、インターネットにアクセスするために使用するプログラムです (Chrome、Firefox など)。情報をリクエストし、体系的にページを表示します。

• サーバーは、Web サイトのファイル (テキスト、画像、ビデオ) を保存し、ユーザーがリクエストしたときにそれらをブラウザーに送信するコンピューターです。サーバーは、Web サイトのファイル (テキスト、画像、ビデオ) を保存し、これらのファイルを送信することでブラウザーの要求に応答する「特殊なコンピューター」と考えてください。 Web サイトが Web 上でアクセスできることは不可欠です。
  Pudim の場合、サーバーは、タイトル、画像、電子メール リンクなど、Web サイトの基本構造を含む HTML ファイルを返します。

2.ブラウザとサーバーはどのように通信しますか?
Pudding のような Web サイトにアクセスすると、コンテンツが正しく表示されるようにブラウザとサーバーが「対話」する必要があります。この通信は、情報の送受信方法を定義する一連のルールである HTTP (HyperText Transfer Protocol) を通じて行われます。ブラウザはサーバーにリクエスト (HTTP リクエストと呼ばれる) を送信し、サーバーはブラウザ内でページを組み立てるために必要なファイル (HTML、CSS、JavaScript など) で応答します。この情報交換は高速かつ効率的であり、Web サイトが正しく表示されることが保証されます。

実際の例: ブラウザに「https://www.pudim.com.br/」と入力し、Enter キーを押します。プリンの画像と電子メールのリンクを含むシンプルなページが表示されます。

3. API とは何ですか?
ここで、Pudim Web サイトが天気予報も表示したいと考えていると想像してください。これを行うには、API (アプリケーション プログラミング インターフェイス) を使用できます。 API は、さまざまなシステムが情報を交換できるようにするブリッジとして機能します。
例: プリンの Web サイトにも「今日はプリンを食べるのに良い日です!」のようなメッセージが表示されたと想像してください。現在の天気に基づいて。ブラウザは天気予報 API にリクエストを送信し、天気予報 API は気温と気象条件に関する情報を返します。 Web サイトはこのメッセージを動的に表示できます。

概要: API を使用すると、リアルタイムで更新されるデータなどの動的機能を追加できるため、現代の Web 開発では不可欠なツールです。
基本を理解したので、Web サイトを作成するための基本ツールの学習を始めましょう。

1. HTML: サイトの構造
HTML (HyperText Markup Language) はページの構造を定義します。これはタグで構成されます。タグは、コンテンツがブラウザーでどのように編成され、表示されるかを示す要素です。各タグには特定の機能があり、テキスト、画像、リンクなどの要素を含めることができます。
タグの例:

• : メインタイトルを設定します。

• : テキストの段落を定義します。

• : ページに画像を挿入します。
• : リンクを作成します。

実際の例:index.html というファイルを作成し、次のコードを貼り付けます:

  <meta charset="UTF-8">
  <title>Meu Primeiro Site</title>


  <h1 id="Olá-mundo">Olá, mundo!</h1>
  <p>Este é o meu primeiro site usando HTML.</p>

 

ブラウザでファイルを開くと、最初の Web ページが表示されます。

2. CSS: ページのスタイル
CSS (Cascading Style Sheets) は、ウェブサイトに色、形、スタイルを与え、見た目を美しくするために使用されます。
CSS の仕組み:

• セレクター: スタイルを設定する要素を特定します。たとえば、ページ本文の場合は body 、タイトルの場合は h1 です。
• プロパティと値: 適用されるスタイルを指定します。たとえば、色: 青。テキストの色が青に変わります。

CSS ルールの例:

• body {背景色: #f0f0f0; } ページの背景色を設定します。
• h1 { フォントサイズ: 24px;色: #0066cc; } タイトルのサイズと色を変更します。

実践例:styles.css というファイルを作成し、次の内容を追加します。

  <meta charset="UTF-8">
  <title>Meu Primeiro Site</title>


  <h1 id="Olá-mundo">Olá, mundo!</h1>
  <p>Este é o meu primeiro site usando HTML.</p>

 

内に以下の行を追加して、CSS を HTML に接続します。 Index.html ファイルから:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  color: #333;
  text-align: center;
}
h1 {
  color: #0066cc;
}

ブラウザを更新して、ページ スタイルの変更を確認してください。

3. JavaScript: インタラクティブ性の追加
JavaScript はページをインタラクティブにする言語で、アニメーションの追加、フォームの検証、要素の操作などを行うことができます。 (JavaScript については別の投稿で詳しく説明します。お楽しみに❤)

インタラクティブ性の例:

• ユーザーがボタンをクリックしたときに表示されるアラート。
• 要素の上にマウスを置くと、要素のテキストを変更します。

実践例: JavaScript 部分 <script> を追加します。 Index.html ファイル内にあります。次のようになります:<br> </script>

 <link rel="stylesheet" href="styles.css"> 

タイトルをクリックすると、画面にメッセージが表示されます。

あなたのウェブサイトを世界中で利用できるようにする方法

「Pudim Web サイトにアクセスしたときと同じように、私の HTML、CSS、JavaScript コードを他の人が利用できるようにするにはどうすればよいでしょうか?」と疑問に思われるかもしれません。あなたがコンピュータ上で Web サイトを作成してテストしている間、その Web サイトはあなたにしか表示されません。インターネット上の他のユーザーがあなたの作品にアクセスするには、サーバー上で公開する必要があります。

サーバーは、Web サイトのすべてのファイルを保存するライブラリであると考えてください。誰かがあなたの Web サイトのアドレスをブラウザに入力すると、サーバーはページを表示するために必要なファイルを送信します。これがなければ、あなたのウェブサイトに他の人はアクセスできなくなります。

Web サイトを世界中で利用できるようにするこのプロセスは、ホスティングと呼ばれます。これを簡単に行うためのサーバーとホスティング サービスには、いくつかの種類があります。概念を理解したところで、より完成度の高いプロジェクトを作成し、最終的には世界中に公開する方法を検討してみましょう!

開発者にとって必須のツール

1. コード エディター: Visual Studio Code などのエディターを使用して、コードを作成して整理します。

2. Git によるバージョン管理: Git を使用するとコードの変更を追跡でき、GitHub を使用するとプロジェクトをオンラインで共有できます。

3. オンライン リソース: FreeCodeCamp、MDN Web Docs、W3Schools などのプラットフォームでは、優れた無料チュートリアルを提供しています。

Web開発でどれくらい稼げる？

Web 開発分野は給与が高く、需要も高いです。ブラジルの平均給与は次のとおりです:

• ジュニア: 月額 R$2,500 ～ R$4,000。
• 全額: 月額 R$5,000 ～ R$8,000。
• シニア: 月額 R$9,000 ～ R$13,000。

これらの値は Glassdoor のデータに基づいており、会社や地域によって異なる場合があります。

始めたばかりの人のためのヒント

1. 毎日練習する: たとえ短期間であっても、毎日の練習は不可欠です。
2. コミュニティに参加する: Dev.to や Rocketseat などの Discord グループやフォーラムは、学習や質問に最適です。
3. ポートフォリオを構築する: プロジェクトを紹介して、チャンスを得る可能性を高めます。
4. 好奇心を持ちましょう: さまざまなテクノロジーを探索し、常に最新の情報を入手してください。

今すぐ始めましょう

このガイドでは、Web 開発を始める人向けに基本中の基本を説明しました。目的は、最初のステップを示し、独自のプロジェクトの構築を開始するために何を勉強する必要があるかについての一般的なアイデアを提供することでした。

しかし、Web 開発は可能性に満ちた幅広い分野です。たとえば、HTML についてこれまでに説明したことは出発点にすぎません。 HTML5、セマンティック要素、Web サイトをアクセスしやすく適切に構造化するためのベスト プラクティスについて詳しく調べることができます。

学習を続けるためのウェブサイトに関するいくつかの提案を以下に示します:

• MDN Web ドキュメント: HTML、CSS、JavaScript を学習するための最良のソースの 1 つです。
• W3Schools: コーディングを学習および練習するためのユーザーフレンドリーなプラットフォーム。
• FreeCodeCamp: 実際のプロジェクトの開発に役立つ無料の実践的なコース。

できる限り練習し、さまざまなツールを検討し、間違いを恐れないでください。

最も重要なことは学習を続けることであり、そうすれば少しずつ自信を持って完全なプロジェクトを作成し、さらには就職市場に参入できるようになります。一緒にこの旅に出ましょう!

以上がウェブ開発へようこそ: ゼロから始める人のための実践的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。