この記事は、ウェブ開発者やウェブの他の側面についての知識を得たい、またはウェブ開発者として働くことに興味がある読者のためのものです。
この記事では、いくつかのよく知られている-だけでなく、いくつかのあまり知られていない-web技術の核心に焦点を当てます。 Web技術への迅速かつ簡単な紹介の後、我々は、web技術の様々なタイプの基礎の上に移動します。
私たちの議論の過程で、我々はまた、web技術の簡単な歴史だけでなく、私たちが話している各タイプの技術のいくつかの機能と機能をカバーします。
ウェブ技術とは何ですか？
ウェブ技術は、インターネットを介して異なるタイプのデバイス間の通信の過程で利用される様々なツールおよび技術である。
この用語をより良い方法で理解するために、それを”web”と”technology”の二つの部分に分解しましょう。
ウェブは、この場合、より一般的にWWWとして知られているWorld Wide Webを指します。 それは有名な科学者およびエンジニア、Tim Berners-Leeが、世界中科学者間で資源を共有する有効なメカニズムを思い付いたときに最初に1989年に入って来ました。
ウェブの概念は、例の助けを借りて簡単に説明することができます。
あなたがかわいいラマの写真を探しているとしましょう。 “と入力します。www.google.com’あなたのwebブラウザに。 あなたは、検索バーに”かわいいラマ”を入力し、”画像”タブをクリックしてください。 Googleはあなたに何百万もの異なるソースから収集したラマの写真の茄多を提供します。
少しスクロールした後、あなたは”ああ、私はこの絵が好きです！”しかし、あなたはそれをダウンロードする前にフルサイズの画像を見る必要があります。 だから、あなたは元の画像を開き、このページに到着します:
赤いボックスに注意してください？
これは、この特定の画像のURL（識別子のタイプ）です。 同じように、あなたが見たすべてのラマ画像は、インターネット上でその画像を見つけるのに役立つ異なるURLを持っています。
これらすべてのウェブページ、文書、およびその他のリソースは、それらのUrlの助けを借りて識別され、配置されます。 これらは総称して、私たちがWorld Wide Webと呼んでいるものを形成します。
あなたがウェブについて蓄積した知識とそれがどのように機能するかは、それをよりよく理解するために適用する必要があります。 このためには、いくつかの一般的なweb技術の基礎を知る必要があります。 Webの理解を深めるために、この分野で一般的に使用されているweb技術のいくつかの基本的なタイプと例を見てみましょう。
ウェブ技術の種類は何ですか？
私たちは利用可能なweb技術の広い配列を調べるためのスペースが限られているので、我々は業界の初心者と専門家の両方によって最も頻繁に使用されているいくつかを選択しました。 私たちは、次のセクションにそれらを分割しています:
- webブラウザといくつかのwebアプリ開発の基礎をカバーする基本
- webサイトの開発に使用されるプログラミング言語とフレームワーク
- webサイトで必要要素
- インターネット経由でデータを送信するために通常使用されるいくつかのデータ形式
- その他のその他のweb技術
私たちがしている間、
基本から始めることになりますが、記事でさらに進むにつれて、私たちの議論は本質的に少し技術的になるかもしれません。
ここで、リストした各コンポーネントの詳細を説明しましょう。
基本
このセクションでは、webブラウザやその他のwebの基礎について説明します。
ウェブブラウザ
ウェブブラウザは、しばしば単にブラウザと呼ばれ、World Wide Webの一部であるすべてのリソースを表示することを可能にします。 これらは、クライアントサーバーアーキテクチャに基づいています。 このシナリオでは、クライアントはブラウザです。 サーバーは、クライアントの要求を受信し、要求されたリソースをクライアントに送信するソフトウェアとハードウェアの組み合わせと考えることがで
ブラウザのアドレスバーにURLを入力するたびに、要求をサーバーに中継し、ユーザーが要求したものをフェッチして表示します。
いくつかの一般的なwebブラウザはOpera、Mozilla Firefox、Google Chrome、Safariです。
フロントエンドとバックエンドの開発技術
web開発とは何ですか？
Web開発とは、webサイトを作成するプロセスを指します。 このプロセスはいくつかのステップに基づいており、各プロセスに関連するツールを調べるときに詳細に説明します。
典型的なウェブサイトの二つの部分
さらに進むと、ウェブサイトを作成するために使用される個々のウェブ開発技術とツールについて説明します。 しかし、その前に、webサイトの2つの異なる部分、つまりフロントエンドとバックエンドについて明確にする必要があります。
フロントエンドとは、ユーザーが画面上で表示して操作できるウェブサイトのすべての部分を指します。
バックエンドは、それと正反対のことを指します。 これは、webページ機能を作る隠されたメカニズムを含みます。 一般的なユーザーは、バックエンドで何が起こっているのかを一般的に認識していません。
webデザインと開発のプロセスでは、さまざまなweb技術が使用されています。
ここでは、web開発の二つのカテゴリの違いの簡単な概要です。
| フロントエンド | バックエンド |
| クライアント側 | サーバー側 |
| ホームページ制作 | |
| UI/UX | サーバー |
| いくつかのUI技術: | いくつかのバックエンド技術: |
| HTML | PHP |
| CSS | Java |
| JavaScript | Python |
| アヤックス | ルビー |
| .ネット |
HTML
HyperText Markup Languageは、より一般的にHTMLと呼ばれ、WWWが始まった場所です。 それは網の基本原則をカバーするすべての導入レッスンの重大な部品である。 これは、webサイトのフロントエンドをコード化するために使用されるクライアント側の言語です。 これは、開発者がwebページがどのように構造化されるかを定義するのに役立ち、タグによって識別される要素の助けを借りてそれを行います。
ここでは、HTMLで書かれたコードの非常に基本的な例です:
<!DOCTYPE html><html><body><h1 style="background-color:SteelBlue; color:LightSteelBlue; font-family:Cambria; font-size:200%">Hello, We Are GoodCore Software.</h1><p style="background-color:LightSteelBlue; color:SteelBlue; font-family:Calibri; font-size:150%">Good to the Core! 😁</p></body></html>
<>角かっこで囲まれた各項目は要素です。 しかし、DOCTYPEは、ロードしようとしているのがHTML文書であることをブラウザに伝える単なる宣言です。 <body>要素は、ドキュメントの本文を構成するすべてのコンテンツを定義します。 <h1>と<p>は、それぞれ見出しと段落の先頭を示します。 </body>、</h>、および</p>は終了タグです。 本文、見出し、段落の末尾がどこにあるかを示します。
この例では、style属性を使用して、特定の背景色、フォントの色、ファミリ、およびサイズをテキストに割り当てます。 さらに拡張して、フォントスタイル（太字、斜体、…）、配置（中央、左、…）などを含めることができます。 Style以外の他の属性も、同様の方法で要素を変更するために使用できます。
(ランダムな文字の文字列😁段落の最後には、以下の出力画面で見ることができる驚きの要素です！)
CSSは最も基本的なウェブサイトデザイン技術の1つです。 Webページをさらに美しくするために、CSS（Cascading Style Sheets）をHTMLコードに統合できます。
HTMLコードの特定の要素に特定のスタイルを適用するプロセスは、反復的な作業に変わる可能性があります。 時間とエネルギーを節約するために、CSSを使用して、サイト全体でページのスタイルを設定するプロセスを合理化できます。 すべての既定のフォントスタイル、色、およびwebページの全体的なレイアウトに関連するその他の特性を持つスタイルシートを準備したら、サイト全体に CSSはBootstrapと組み合わせて、モバイルファーストのwebアプリを設計することもできます。
プログラミング言語とフレームワーク
プログラミング言語は、ウェブサイト作成の最も基本的なコンポーネントです。 Webサイトをコーディングするには、いくつかのプログラミング概念、いくつかの言語とその構文、および優れた開発IDEに精通している必要があります。 これらの言語のいくつかは汎用であるかもしれませんが、他の言語はweb開発の目的のために特別に作成されています。
以下は、一般的に使用されるweb開発言語の例です。
1. Java
Javaは1991年に汎用プログラミング言語として作成されましたが、90年代半ばにweb開発で大きな役割を果たすようにゆっくりと進化しました。
Javaは、その
- オブジェクト指向の性質
- 移植性とプラットフォームの独立性
- 単純な構文
- Learnability
- 堅牢性
2. JavaScript
JavaScriptは1995年に最初に作成されました。 今日では、世界中の開発者のお気に入りです。 それは今、webページの動的要素を作成するのに役立ちますweb開発の重要なコンポーネントです。
JavaScriptの導入は、インタラクティブなwebページの革命的な波をもたらしました。 今日では、グラフィカルな要素、データベースの統合、およびウェブサイトの全体的なダイナミクスの包含は、JavaScriptの出現のためにすべて可能です。
JavaScriptは最初はフロントエンド開発言語として導入されましたが、現在はバックエンド開発にも人気のある選択肢になっています。
3. Python
Pythonは何年も前から存在していましたが、その非常に学びやすく、読みやすい構文と高い生産性のために最近人気を集めています。 他のプログラミング言語で書かれたときに10行のコードを使用する可能性のあるタスクは、2-3行のPythonコードで簡単に達成できます。
サーバー側のweb開発では、PythonはDjangoまたはFlaskフレームワークと組み合わせて使用されることがよくあり、開発プロセスをさらに簡素化します。
今年、StackoverflowはPythonが人気の面でJavaやCのようなものを打ち負かし、最も愛されているプログラミング言語のリストで2位にランクインしたと報告しました。
4. Php
phpは再帰的な頭字語で、PHP:Hypertext Preprocessorの略です。 これは、web開発業界の初心者とベテランの専門家の両方が好む最も人気があり、広く使用されているスクリプト言語です。 それは学ぶことは非常に簡単で、絶対に無料です。
バックエンドのApache(またはその他の)HTTPサーバーで使用すると、PHPを使用すると、効率的で高速で高性能なweb開発プロジェクトを提供することができます。 また、PHPは何年も前から存在しており、より大きく、より良く成長してきたので、簡単に利用できる広範な開発者コミュニティのサポートがあります。
5. Ruby
90年代半ばに導入されたRubyは、長年にわたってバックエンド開発者の間で人気を博してきた強力な汎用プログラミング言語です。 これは、多くの場合、その人気のあるフレームワークRuby on Railsと一緒に使用されます。 Rubyは、トラフィックが集中するwebサイトや、データベースの終了時に多くの作業を必要とするwebサイトに特にお勧めします。 また、スケーラブルなアプリを書くのにも便利です。
TwitterやShopifyなどの人気サイトは、バックエンドにRubyを使って構築されました。
6. Objective-C&Swift
Objective-CとSwiftはどちらも、macOSとiOSを実行するAppleデバイス用のアプリを構築するために特別に使用される汎用プログラミング言語です。
Objective-CはCに基づいて構築されますが、Swiftはc++の構文に大きく基づいています。 Objective-CはSwiftが持っているよりも多くの年の周りされているが、それはますます時代遅れになってきているように、前者はゆっくりと信者を失ってい Swiftは、Objective-Cをより高度な機能、使いやすさ、セキュリティに徐々に置き換えることが期待されています。 Swiftはオープンソースだったので、開発者はweb開発にもSwiftを使用してきました。
フレームワーク
簡単に言えば、フレームワークはスケルトンコードとして定義することができます。 細かい細部のない大まかな輪郭と考えてください。 フレームワークは、コードが実行することが期待される基本的な関数またはタスクを定義します。 しかし、その特定のプログラムにこれらの機能を実行する方法を伝えるには、より詳細で具体的な指示を記述する必要があります。
バックエンドweb開発のためにコーダーによって一般的に使用されているいくつかのフレームワークと、それらが最もうまく機能する言語を見てみましょう。 このリストには、最新のwebサイト技術の一部が含まれています。
| フレームワーク | 言語 |
| Vue。js | JavaScript |
| エクスプレス | ノード。js（ジャバスクリプト) |
| 反応する。js | JavaScript |
| プラグインを使用しています。 | |
| Django | Python |
| フラスコ | パイソン |
| Laravel | PHP |
| Ruby on Rails | Ruby |
| 触媒 | |
| ココア&ココアタッチ | スウィフト |
これらのオプションの中から選択することは、開発ニーズに依存します。 どのフレームワークと言語の組み合わせが、スケーラビリティ、セキュリティ、生産性の要件を最もよく満たすかを判断する必要があります。
データベース
ウェブ上で交換されるすべてのデータはどこかに保存する必要があります。 この目的のために、ほとんどのウェブサイトは、それらに関連付けられている独自のデータベースを持っています。
以下は、webアプリケーションで一般的に使用されるいくつかのデータベースのリストです。
- MySQL
- SQL Server
- Postgres
- Oracle
- MongoDB
- Redis
データ形式
交換する必要があるときウェブ上の二つのデバイス間のデータは、適切な手順に従います。 データは、送信元から宛先への送信のために適切にパッケージ化されます。 特別なApi(Application Programming Interfaces)は、便利なデータ交換のために設計され、webサイトに統合されています。 彼らは、受信機が簡単にデコードして理解できるようにデータを配置します。
以下は、web開発で使用される2つの一般的なデータ形式です。
1. XML
XMLはExtensible Markup Languageの略です。 この記事の冒頭でHTMLの構文について説明しました。 XMLは、さまざまなタイプのタグによって識別される要素にデータを分割するという点で同様の方法で動作します。 ただし、XMLを使用すると、データをよりよく記述するために独自のタグを発明することができます。 このデータは、webアプリまたはサーバーに到達すると、簡単に理解して分析することができます。
学生、彼女のbiodata、および大学での彼女の登録されたコースの記録の例を見てみましょう。 これはXMLに格納されているように見えます:
<student><studentname>Regina George</studentname><year>2</year><courses><course>Compiler Design</course><course>Film Studies</course><course>Accounting</course></courses></student>
ここで、メインノードまたはルートノードはstudentです。 学生の名前、年、およびコースは子ノードです。 これらはルートノードの属性であると言うことができます。 HTMLの場合と同様に、XMLデータも子ノードの開始タグと終了タグの間に書き込まれます。
2. JSON
XMLの嵩高さと帯域幅の大量消費を長年経験した後、専門家はJSON（JavaScript Object Notation）を思い付きました。 XMLとは異なり、JSONは詳細なデータ定義とモデリングではなく、迅速かつ簡単なデータ交換に重点を置いています。 また、XMLが反復的なタグの形で運ぶすべての余分な負荷を排除します。
JSONは使い慣れたキーと値のペアのメカニズムに基づいています。 その構文はJavaScriptの構文に似ており、読みやすく理解しやすくなっています。
保存された学生レコードの前の例がJSONである場合にどのように表示されるかを見てみましょう:
{"studentname": "Regina George","year": "2","courses": }
ここで、学生はオブジェクトです。 student nameは、オブジェクトstudentの属性であるキーの例です。 関連する値はRegina Georgeです。 同様に、コースも重要です。 しかし、それはそれに関連付けられた複数の値、すなわちコンパイラ設計、映画研究、会計を持っているので、配列（角括弧で示される）の形をしています。
プロトコル
ウェブプロトコルは、ウェブ上で通信するすべての人が従わなければならないいくつかの事前定義されたルールです。
HTTP
Httpとしてよく知られているハイパーテキスト転送プロトコルは、二つの概念を定義するwebプロトコルです:
- クライアント要求がサーバーにどのように中継されるか
- サーバーがクライアント要求にどのように応答するか
リクエストには、次の四つの項目を指定する必要があります:
- クライアントが望むリソースのURL
- GET(サーバーからデータをフェッチするために使用)やPOST(サーバー上で更新する必要があるデータを送信するために使用)などのメアクセス制御情報/資格情報など)
- クライアントがサーバーに送信したい情報を含む本文
サーバーは、要求が処理されると、もう一方の端から応答を送信します。 この応答は次の3つの要素を指定します:
- 3桁の数字の形式のステータスコード(毎日のwebブラウジングセッション中に表示される可能性のあるステータスコードは404で、要求されたリソースが見つ)
- ヘッダーのリスト(応答ヘッダーは構造上リクエストヘッダーに似ており、メッセージサイズ、コンテンツタイプなどの情報を運ぶことができます。)
- クライアントがサーバーから要求した情報を含む本文
その他のプロトコル
以下は、他の一般的なwebプロトコルとその使用法のリストです。
| プロトコル | は | の使用法を表します |
| TCP | Web上の二つのデバイス間の接続を確立し、データパケットの配信を管理するための伝送制御プロトコル | |
| ip | インターネットプロトコル | ウェブ上の二つのデバイス間でデータパケットを転送するための |
| TCP/IP | これら二つのweb技術は、多くの場合、一緒に動作します。 | |
| UDP | ユーザデータグラムプロトコル | ウェブ上の二つのデバイス間の接続を確立するための |
| FTP | クライアントとサーバーの間でファイルを転送するためのファイル転送プロトコル | |
| SMTP | サーバーに電子メールメッセージを送信するための単純なメール転送プロトコル | |
| POP | Post Office Protocol | サーバーから電子メールメッセージを取得するための |
| 送信用のSOAP | シンプルオブジェクトアクセスプロトコル | HTTP経由のXMLメッセージ |
グラフィックス
グラフィック要素は、任意のwebページの重要な機能です。 これらは、ページの美化に貢献するだけでなく、テキストよりも優れた方法で重要なポイントを伝えるために使用することができます。
1. Canvas
CanvasはHTMLの一部である要素です。 JavaScript（または他のスクリプト言語）と一緒に使用すると、webページに少しずつグラフィックを描画できます。 JSの側面は、アニメーションを含むキャンバスグラフィックスの対話性を提供します。
Canvasは、多数のグラフィカルオブジェクトをwebページにロードする必要がある状況で最適に機能します。 それはその面で速く、軽量である。 しかし、ラスターベースであるため、グラフィックスのサイズを変更してスケールアップすることに関しては、それほど例外的ではありません。
2. SVG
SVGはScalable Vector Graphicsの略です。 これはXMLに基づいており、HTMLで非常にうまく動作します。 CSSを使用して簡単に操作することもできます。
その人気の秘密は、その名前にあります：スケーラビリティ。 SVGをJPEGやPNGなどの他のグラフィカルスタイルとは別に設定するのは、ピクセルベースではないということです。 これは、品質を損なうことなく簡単にスケールアップまたはダウンすることができる数値次元（ベクトル）に依存しています。
ウェブサイト上でグラフィック要素を使用する場合、グラフィックの品質は重要な要素です。 SVGは、より大きなサイズのグラフィックスのための高性能を実現するだけでなく、対話性を保証します。 これらの理由により、SVGは現在、最も優先されるグラフィカルウェブ技術の一つです。
3. WebGL
web Graphics Libraryは、webglとしてよく知られているweb技術リソースであり、ブラウザが画面上に2Dと3Dの両方の画像をレンダリングできるようにします。 これは、外部プラグインの必要性を排除し、デスクトップとモバイルブラウザの両方と互換性があります。
その他
これまでに聞いたことがないかもしれないいくつかの他のweb技術があります。 私たちは、彼らが私たちの記事で名誉の言及に値すると感じています。
1. Perl&CGI
Perlは、web開発の風景で徐々に人気を集めている汎用クロスプラットフォームプログラミング言語です。 これは、CやBASICなどの言語に基づいて構築され、最も一般的に使用されるマークアップ言語であるHTMLでスムーズに動作します。 Perlは、MySQLやOracleなどの主流のデータベースでもうまく動作します。
PerlはCGI(Common Gateway Interface)を実装するアプリケーションを記述するために使用されます。 CGIは、HTTP要求を行うときにアプリケーションがwebサーバーと通信する方法を定義するwebプロトコルです。 これらのCGIスクリプトは、リソースの取得プロセスをより効率的にします。
2. MATHML
HTMLと同様に、MathML(Mathematical Markup Language)はマークアップ言語です。 しかし、それは特にウェブ上の数学的および科学的方程式の正確かつ適切な表現のために使用されています。
MathMLは、方程式が正しく表示されることを確認するだけでなく、数学的な内容に意味を割り当てます。 このすべては、数学的な内容と記号を表現するためにXML要素を使用することによって達成されます。 たとえば、msqrt要素は平方根記号に変換され、三角関数の正弦関数はsin要素で表されます。
3. XSL,XSLT&EXSLT
XSL(Extensible Stylesheet Language)は、クライアントに表示するときにXMLデータをフォーマットする必要がある方法を定義するために使用される言語です。 XMLはデータ自体を処理しますが、XSLはその変換、レイアウト、およびプレゼンテーションを管理します。 XSLは、CSSがHTMLに対して行うのと同じ目的をXMLに果たすと言うことができます。
W3のwebサイトには、XSLの2つの構成要素が記載されています。a）変換を処理するためのXSLT（変換）と、b）書式設定、ページネーションなどを処理するためのXSL-FO（ しかし、2013年にXSL-FOは廃止され、CSS3に置き換えられました。XSLT(Extensible Stylesheet Language Transformations)は、XML文書をHTMLのような他の、より人間が読める形式に変換する方法を定義する言語です。 これは、XMLデータを美化するために、XSLプロセッサの助けを借りて、XML文書にXSLスタイルシートを適用します。
EXSLTは、XSLTの機能を拡張する手段です。 これはXSLTの公式な部分ではありませんが、コミュニティ主導のプロジェクトです。 これは、XSLスタイルシートをより移植性の高いものにし、より多くの機能を追加することによって機能とサポートを強化することを目的としています。
ウェブ技術の未来
シスコの報告書によると、2020年までに世界人口のほぼ52%がインターネットにアクセスできると予測されています。 ワールドワイドウェブは、オンラインで利用可能な人々、デバイス、およびリソースのより高い数を含むように驚くべき速度で成長します。 そのため、web技術のスケールアップが期待されています。 その結果、技術の専門家は、どこでもユーザーにアクセス可能なwebコンテンツを提供するために懸命に努力します。 悪意のあるサイバー攻撃からプライベートwebコンテンツを保護するためには、より厳しいセキュリティ対策が
WWWは、単純な古いHTMLで書かれた静的なwebページでWeb1.0として始まりました。 その後、ユーザーがwebコンテンツと対話して独自のコンテンツを作成できるようにするJavaScriptやその他の技術の出現により、Web2.0に移行しました。
まもなく、ウェブはさらに一歩進んで第三段階、すなわちウェブ3.0に入り、今日よりもはるかに分散化されます。 AIやIoTなどの最新の技術がすぐにWebを支配します。 新しいコンテンツの開発と消費の両方の点で、すべてがはるかに自動化されます。
この記事が、web技術の進化と未来についての貴重な洞察を得るのに役立つことを願っています。 WWWの風景の中で他の興味深い開発に更新滞在するために私たちのブログに従ってください！
この記事を評価！
提出評価
平均評価4.9/5. 投票数：11
これまでのところ投票はありません！ この投稿を最初に評価してください。