WEB開発エンジニアをわかりやすく図説してみた*


こんにちは〜。

すこし前の記事で、週末に図説したい!と言っていた話です。

基本的なことの理解をつみかさねることで、ITスキルを身につけたい方の道しるべのひとつになれたらいいなと思ってます♪

基本的に上の記事の説明の通りなのですが、文章だけだとイメージしにくいところもありそうなので、パッと雰囲気を掴みたい方はこの記事も見ておくとわかりやすいと思います*


目次

1 フロントエンドとバックエンドの違い

2 ブラウザ側とサーバー側で役割分担する

3 役割を分担して実際に書いているもの




1 フロントエンドとバックエンドの違い



じゃーん!前の記事で書いている通り、フロントエンドエンジニアが書くプログラミング言語は『JavaScript』だけです。

このジャバスクリプトという言語は、2018年現在ではなんと、バックエンドでプログラムを作るときにも使えてしまいます。優れものです。

バックエンドで使うプログラミング言語は有名どころだけでも『Python』『Ruby』『PHP』などたくさんありますが、ひとまずのところなにか1つだけできれば基本的にアプリは開発できちゃいます。



2 ブラウザ側とサーバー側で役割分担



フロントエンドエンジニアは主に上の図の左側(ブラウザ側)で取り扱うファイルにコードを書きます。

フロントの人が書いたファイルデータは、アプリを一般に公開するときに、サーバーに置かれます。

サーバーは、基本的に世界中のどのブラウザが見たいと言っても、そのデータのコピーを送ってくれるプログラムの集まりです

サーバからデータが届いたら、ブラウザはそれを人間に見やすいように表示してくれます。

バックエンドエンジニアは主に上の図の右側(サーバー側)で取り扱うファイルにコードを書きます。このファイルをプログラムと呼ぶので、プログラムをコーディングするときは『プログラミングする』とも言います



3 分担して実際に書いているもの



はい!もうすぐ終わりです。

上の図の『書類の絵のところ(サーバーに保存されるテキストファイル)』を作るために、私たちはHTMLやCSSを覚えてコーディングができるようになる必要があります。

アプリの見た目をいい感じにしたい人は、特にCSS(シーエスエス)をしっかり押さえておくと良いと思います。


この図中の『ロボットの絵のところ(黄色くなっている部分にあるプログラム)』、フロントエンドエンジニアが作るテキストファイルや、そのテキストファイルに埋め込んで表示するデータを管理しています。

ブラウザ(ページを見る人)の要望に答えるため、私たちは、データを加工したり、表示する場所を指定したり、動的に更新したりできるように『なにか1つ』プログラミング言語を覚える必要があります。




実は、サーバーにたくさんのプログラムの命令処理を任せたり、サーバーの返事を待ったり、たくさんのデータを通信したりすると、見たいデータを見るまでにすごく時間がかかってしまうことがあります。



こんなとき、『本当はサーバー側で処理しないと表示できなかったデータをブラウザ側で手助けして表示することができる唯一のプログラミング言語』がJavaScriptです。

他のプログラミング言語は、残念ながらブラウザでは実行できません。


なので、JavaScriptのおかげで私たちは快適にアプリを使えているとも言えます。何よりJavaScriptはサーバー側のプログラミングもこなせてしまうので、『とりあえずプログラミングやアプリ開発ができるようになりたい』という方にはとてもおすすめな言語です♪


私はHTMLとCSSのコーディング、それからJavaScriptのプログラミングについて投稿していこうかな〜と思っているので、興味がある方がいらっしゃれば一緒にやってみましょう*

公開日:2018/12/22
獲得ALIS:54.48
akari's icon'
  • akari
  • @akari
家にいる時間が好きです。デザイン系の制作会社でフロントエンドエンジニアをしています。
コメントする 前のコメントを表示
  • まみむめも
  • 3ヶ月前

イラスト可愛いし、分かりやすかったです!
あかりんさんの記事、次も楽しみです。

返信
  • motoko
  • 3ヶ月前

わ~~~!!こういう説明待っていました☆本当になにがなんだかわからずに本を読んでいるので助かります。次回も楽しみにしています。

返信
  • WEB3.0ジョシ校生 蟻巣
  • 4ヶ月前

めちゃくちゃわかりやすい図ですね!参考になります!

返信
  • ワインチ氏
  • 4ヶ月前

あ〜とてもわかりやすい!!!!!!!!!!!!!!!

返信
  • もずく・Ð・図解屋
  • 4ヶ月前

サーバ側の言語の先頭にJavaScriptを挙げているところにJS愛を感じます:)
そしてJavaが書かれていないところに、良いところでお仕事されているな~って感じます:)

返信
コメントする