フロントエンドについて
こんにちはhariboです。
研修を受け始めてから約1か月が経ちました😀
今回は、私が今現在理解するのに非常に苦戦している内容です。
まだ専門的な知識までは習得できていませんが、概要は理解できたので、アウトプットするつもりで投稿します！
フロントエンドとバックエンド
どちらもwebに関する仕事に関わっていなければ耳にすることはなさそうな言葉ですが、実はこれらはweb制作において欠かせない役割を担っています。今回は主にフロントエンドに関する知識を特集しますが、まずは、全体の土台となる理解を進めるために、フロントエンドとバックエンドの違いから説明します。
フロントエンドとは
webサイトの要素のうち、ユーザーから視覚的に見える部分を表します。
皆さんがスマホやPCでwebサイトを閲覧するとき、文字や画像の表示、色とりどりの装飾やデザイン、アニメーションなど、、視覚的に様々な工夫がなされていますよね。皆さんがその目で見ているすべてを意味します。
つまり、フロントエンドとは、webサイトの見た目を作る役割を担っています。
例としてHTML、CSS、Javascriptなどが挙げられます。
これらは下記で説明しますね🙂
バックエンドとは
webサイトの要素のうち、ユーザーから見えない部分を表します。
フロントエンドでは作れない部分と認識するのが良いかもしれません。
例として、webサイト上でよく問い合わせフォームが設置されていますよね。ユーザーがこれらのフォームで問い合わせのメッセージを送信したとき、バックエンドがユーザーのリクエストやメッセージのキャッシュを機能し、処理しています。そのほかにも、データの複製や検索結果の出力など、webサイトが機能するためのすべてを作っています。
つまり、バックエンドとは、webサイトの機能的な部分を作る役割を担っています。
HTML, CSS, Javascript / フロントエンド
フロントエンドに含まれる3つの言語を紹介します。
それぞれwebサイトの見た目を作るうえで欠かせない役割を担っています。
HTMLとは
＝Hyper Text Markup Languageの略。マークアップ言語のひとつ。
マークアップ言語とは、視覚表現や文章構造などを記述するための形式用語で、文章をタグと呼ばれる書式で囲むことで意味を持たせることができます。
こういった画面をみたことはありますか？
このような文字がブアーーーっと並んだものがHTMLです。
HTMLとは、webサイトを制作する際にコンピューターに指示を出してwebサイト上に表示したい文字や画像などの情報を形成します。イメージとしては、webサイトの原稿のようなもの。また、HTMLは検索エンジンにwebサイトの構造や情報を提供することができます。
HTMLを利用する一番のメリットがweb制作ツールがなかったとしてもwebサイトを作ることができる点です。HTMLを使用することでタイトルや見出し、段落などの文字の装飾、リンクや画像の貼り付けが可能になります。
HTMLを構成するタグ、要素、属性の説明は、私もまだ知識が間に合っていないのでいつか理解できたときに投稿しますね😔
CSSとは
=Cascading Style Sheet の略。
webサイト内に表示されている文字の大きさや色、背景、配置といった見た目を設定することができます。
先ほど説明したHTML内にCSSを適用することで、私たちが普段閲覧しているようなwebサイトの見た目に近づきます。
上記の画像の違いから、CSSの役割がよく理解できると思います。
CSSを適用するとスタイルを大きく変えることができます。
上記は画像での例ですが、これがwebサイト規模となると、CSSが適用されるだけで見た目のクオリティを一気に上げられることがわかりますね。
CSSを利用するメリットは、このように見た目を整えるだけでなく、メンテナンス性の面でも挙げられます。HTMLのみで装飾した場合よりもHTMLにCSSを適用した場合のほうがコードの内容が省略でき、ページ数が多いwebサイトだとしても簡単にメンテナンスできます。また、デバイスごとに表示形式を変えることが可能です。これは、PC向けの表示、スマホ向けの表示、タブレット向けの表示、というように無理なくユーザーがwebサイトを閲覧することが可能ということです。このメリットに関する詳しいことは下記で説明しますね。
Javascriptとは
簡潔に説明すると、webサイトに動きをつけるためのプログラミング用語です。例えば、webサイト上のボタンにマウスが触れると形や色が変わったり、クリックするとメニューページに飛んでいけたり、矢印ボタンを押すことで自動スクロールされたりと、ユーザーにとってより使いやすいwebサイトを作り上げることができます。（できることはこれ以外にも無数にあります）
つまり、ユーザーが起こす行動に対してサイト側のアクションをつける役割です。javascriptを利用すると多義にわたる機能を実現できます。
レスポンシブwebデザイン
レスポンシブ（＝responsive）とは、敏感に反応するという意味です。
そんなレスポンシブな考え方にwebが対応したデザインがレスポンシブwebデザインです。
同じwebサイトでも、PCで見る場合とスマホで見る場合とタブレットで見る場合とで、ディスプレイのサイズが異なっていますよね。ユーザーにとっては、どんな画面サイズでもそのサイズに対応した画面表示が必要です。そんな時に効率的に画面を切り替えられるデザインのことをレスポンシブwebデザインといいます。これは、現在のwebサイト制作ではほぼ必須要件です。
また、先ほど説明したようなCSSの適用によってデザインを設定することができ、これがCSSのメリットにもつながっています。
おわりに
今回はweb制作の裏側について、特にフロントエンドに着目して深掘りしました。
webディレクターにとって、このような知識を習得しておくのはプロジェクトを指揮・管理していくうえで重要なことであり、今後もさらに学びを深めていきたいと実感しました😌
この記事が気に入ったらサポートをしてみませんか？