🌟

Web初心者のためのあれこれ

2022/07/11に公開

web初心者のためのあれこれ

自分の周りにweb開発を始めたい!という方がいたので、そんな人のために知っておくといい内容をまとめました。圧倒的プログラミング初心者向けで概要を把握するためのものですので、お手柔らかにお願いします。

目次

  1. プログラミングで何ができるの?
  2. フロントエンド、バックエンドって何?
  3. フレームワークとライブラリの違いって?
  4. バックエンドって具体的に何するの?

そもそもプログラミングで何ができるのか?

  • ロボット開発
  • ゲーム開発
  • データサイエンス
  • web開発

いろいろありますが、その一つがweb開発です。
web開発の特徴は気軽に始めることができる、案件数が多く比較的案件を獲得しやすいことです(簡単とは言ってません)。webはどんな分野にも応用ができるのでweb開発の勉強から始めるのがおすすめです。

次はどのような言語、フレームワークがあるか、またそれらの役割について説明していきます。

フレームワークとライブラリの違いって?

次のセクションで出てくる図を見るときに注意してほしいことはフレームワークと言語の違いです。
ここではフレームワークとライブラリについて説明していきます。

フレームワークとは

フレームワークは何かを作る時の型です。イメージとしては設計書に近いです。
例として家を建てることを考えます。家を建てるにはいろんな道具が必要ですね。
何件も建てる場合、毎回どんな道具が考えて必要な道具を倉庫から持ってくるのは大変です。
それら最低限必要なものをまとめたものがフレームワークです。
図の中のフレームワークはreact(js),vue(js),angular(js),django(python),flask(python)です。

ライブラリとは

ライブラリは図書館を想像すると簡単で、先人たちが書いた便利なコード(本)を再利用することができます。それをライブラリと言います。

フロントエンドとバックエンドの違いって?


図でざっくりまとめました。
web開発はフロントエンドとバックエンド二つに分けることができます。
フロントエンドはユーザーが操作する部分です。いわゆるUIですね。
HTML,CSSはフロントエンドの一部です。

webサイトとwebアプリの決定的な違いはデータを扱うかです。

webアプリは情報をユーザーに表示するのに加えて、データ操作や、それを加工する機能をつけることができます。その役割を担うのがバックエンドです。

バックエンドって具体的に何するの?

ここではバックエンドはMTVを具体的に挙げてどんな処理をするのかを説明していきます。
MTV(Model, Template, View)とはdjangoで使われているバックエンドのフレームワークの型です。他にもMCV(Model,Controller,View)がありますが、どちらかを理解すれば、もう片方も使うことができます。
処理の関係を図にまとめました。

  • Model
    モデルどのようなテーブルでそこに何を保存するかを定義します。
  • View
    ビューではモデルと連携してデータについての処理を担当します。
    処理をした結果をテンプレートに表示できるようにします。
  • Template
    テンプレートではHTML,CSSの表示を設定します。ビューで処理した内容も表示することができます。

まとめ

ここまでwebについてざっくり説明しましたが、いかがだったでしょうか。
この記事がweb開発を始めようとしている人の手助けになれば嬉しいです。
個人的にプログラミングをやるのであればweb開発が成果を出すのに一番手っ取り早く、何より楽しいです!

興味を持ったら、どの言語、フレームワークでもいいのでチュートリアルをやってみてください。
自分がプログラムしたものが目で見れること、エラーが出ても大概のことは検索すれば出ててくるのは勉強するのに最適な環境です。

質問したいこと、説明してほしいことがあれば僕のTwitterにDMください。
最後まで読んでいただきありがとうございました!

Discussion