フロントエンドとバックエンド
皆さんは普段どういったWebサービスを利用していますか？そしてそのWebページがどのように作られているかをご存知でしょうか？例えばlittle hacker plusのWebサイトを見てみましょう。
冒頭にメインテキストとビデオ、その下にメニュバーが並んでおり、各コンテンツが下に連なっています。このページのコードを見てみると（google chromeをお使いの方は command + uで確認できます）、以下のようになっています。
これは今後の授業の中でも扱う「HTML」というプログラミング言語で、タイトルやメニューバー、本文などの「ページの構成」を記述するのに使用します。HTMLは通常CSS（デザインに関する記述で使う言語）や、Webページにダイナミックな動きを与えるJavascriptなどと共に使用され、これらは「Webページの見た目を司る言語」と言えます。Webサイトの制作の現場では「フロントエンド」、これらの開発を担うエンジニアを「フロントエンドエンジニア」と呼びます。
次にMediumのWebサイトを見てみましょう。新着記事やよく閲覧されている記事が上のように表示され、カテゴリ別でも記事が閲覧できるようになっています。
では、例えば新しい記事が追加された場合や、記事が削除された場合はどうなるでしょうか？新しい記事は新着記事として冒頭部分に表示され、記事が削除されれば表示されないようにしたいところです。しかしそういった変更の度にHTMLのコードを書き直すのは非効率ですよね。
例えば「登録されている記事の新しい順に記事を並べる」や「削除された記事は、この記事一覧には表示しない」などのルールを作っておけば、わざわざHTMLを書き直す必要はありません。そういったユーザーからは見えない「データの処理などを担う言語」もあり、この講義で学ぶ「Ruby」もそのひとつです。Webサイトの制作の現場では「バックエンド」、これらの開発を担うエンジニアを「バックエンドエンジニア」と呼びます。
| 意味 | 使用言語など | |
| フロントエンド | Webページの見た目を司る | HTML, CSS, Javascript など |
| バックエンド | データの処理などを担う | Rudy, Python, C++ など |