WEB入門したいけど何したらいいかわからない人へ
はじめに
対象読者
プログラミングに触れたことはあってWEB開発を始めてみたいみたい、けど何から勉強したらいいかわかないという人向けに今回の記事を書きました！経験者の方であれば全て知っているくらいの内容で書きたいと考えているのでご了承ください。
きっかけ
私が友人に「WEBやってみたいんだけど何をしたらいいと思う？」と聞かれてぱっと答えが出てこなかったことです。それまでの私が勉強してきた内容を考えたのですが、はっきりとした回答が出てこなかったので考えをまとめようと思います。
注意事項
正直、これを勉強したらいいという明確な答えはないと思います。しかし、最低限、エンジニアとして何かしらのものを作る上で最低限知っておくべき知識みたいなものを書いておきたいと思います。
それではみていきましょう！
WEB系の開発に必要な技術とは？
私の中で学習するべきものは大きく分けて2つに分けられると考えます。それは
- 開発対象のアプリケーション
-
開発に関わってくる各種ツール
です。
それぞれみていきましょう
開発対象のアプリケーション
開発対象のアプリケーションとはみなさんが実際にコードを書く部分を示していると考えてもらって結構です。基本的なWEBアプリケーションの構成は以下のような感じになっています。
ぱぱっと作ってみた図ですのでそこまでクオリティが高くないことはご容赦ください。笑
こんな感じになっているわけですね。この図からわかることとしてWEBアプリケーションと呼ばれているものはフロントエンドとバックエンドの2つに分けられます。
それぞれの解像度も少しずつ上げていきましょう。
後述の説明ではプログラミング言語とフレームワークという言葉が出てきます。これらの違いはプログラミング言語に対して何個ものフレームワークが存在しています。またフレームワークは開発者の手間を省いてくれるもので、フレームワークを使用しない時と比べて、少ないコードの記述量で同じ実装を行うことができたり、便利な関数を提供してくれていたりするものです。
フロントエンド
フロントエンドは主にユーザーから見える部分を実装するものになっています。
私たちが普段触れているWEBサイトの部分は全てフロントエンドと呼ばれるものです。
フロントエンドの主な責務としては以下のものが挙げられます。
- データの表示
- フォームなどの入力データのバリデーション
- バックエンドとの通信
上記の通り、バックエンドとの通信によって取得したデータを表示したりユーザーからの入力を受け付ける部分がフロントエンドと呼ばれる部分です。
フロントエンドの具体的な技術スタックとして、 - HTML
- CSS
- JavaScript, TypeScript
のセットが挙げられることが多いと思います。主にHTMLとCSSで画面に表示するための文字を記述したり、その文字に当てるスタイルを記述したりします。JavaScript(TypeScript)を合わせることでボタンを押したらデータを送信したり、何かしらのアクションをリッチに表現できるようになっています。
最近のフロントエンドの技術スタックの流行りとしてはReact, Next.jsといったフレームワークも出てきています。
ここではそこまで詳しい説明はしないですが、jsx, tsx記法といった記法を用いており、HTMLのようなコードにJavaScriptやTypeScriptを埋め込むことができるものになっています。詳しく知りたい方は以下の公式ドキュメントをご覧ください。筆者はバックエンドエンジニアを目指しており、業務でもReactしか使用していないのでそこまでNext.jsはあんまり知らないです。(SSGとかSSRとかよくわからないけど画面のレンダリング速いとしか知らないです笑)
バックエンド
バックエンドに関してもみていきましょう。
バックエンドの主な責務は
- フロントエンドからのデータのバリデーション
- フロントエンドから受け取ったデータの永続化
- データベースとの通信
が挙げられます。
バックエンドのスタックに関してもみていきたいと思います。
バックエンドの技術にはまず - RESTful
- GraphQL
という二つの概念が存在しています。それぞれの違いはどのようにフロントエンドからバックエンドに繋ぐのかという程度の認識で問題ないです（今回の想定レベルの読者の方のレベルであれば）。ちょうど1年くらい前ですかね、Grapgqlがめちゃくちゃ流行った時期があったのですが、最近はあまり聞かない印象です。個人的にもGraphqlはあまり触ったことがなく概要程度しか知らないのでこれから勉強しておきたいと思っている程度の理解度です（すみません）。以下の記事が結構いい感じに説明されていたのでもし興味がある方がいらっしゃったら確認してみてください！
バックエンドのメジャーなプログラミング言語とそのフレームワークも簡単に書いておきます。
| プログラミング言語 | フレームワーク |
|---|---|
| JavaScript, TypeScript | Express, Nest.js, Hono, Next.js |
| Python | Django, Flask, FastAPI |
| PHP | Laravel, CakePHP |
| Go | Echo, Gin |
| Java | Spring |
| C# | .NET |
| Rust | Actix Web, Axum |
| Scala | Play Framework |
| Ruby | Ruby on Rails |
まだまだたくさん言語とフレームワークはありますが、上記のものが比較的に有名なものかなと思います。一部マイナーなものが含まれていますがご容赦ください。
個人的に初学者の方が手を出すべきでない言語とフレームワークは
- Goとそのフレームワーク
- Rustとそのフレームワーク
- C#とそのフレームワーク
- Scalaとそのフレームワーク
だと思っています。正直結構言語的にも難しいし、フレームワークもそこまで多くの機能を提供してくれるものではないです。もし、すでに上記の言語を学習済みの方でしたらそのまま進んでいただいていいと思います。気になったものがあれば、その技術の名前で検索をかけて記事とか読んでみたらいいと思います！英語の強い方でしたら公式ドキュメントの情報を読んでみるのも非常にいいと思います。
データベース
先ほどの図でもう一個開設しないといけないものがありまして、それはデータベースです。
データベース自体は結構馴染みのある単語だと思います。そしてデータベースの種類も大きく分けて2つほど存在しています。それは
- RDB(Relational DataBase)
- NoSQL
です。簡単にそれぞれの特徴を挙げるとすると、
- RDB
- 表形式のデータベース。
- できるだけ正規化を行い、テーブルの責務を分離。
- 1対1、1対多、多対多などの関係性を実装できる。
- NoSQL
- ドキュメント指向のデータベースと呼ばれている。
- スキーマがなく（決まった形式がない）、柔軟な構造をとっている。
といった特徴づけができると思います。
それぞれに関しての詳しい情報は以下のAWSのドキュメントに書いてあります。気になる人はどうぞ！
今回はRDBに関しての説明をしておきます。
RDBは操作するためにSQLという言語を使用します。このSQLというものは通常のプログラミング言語とは異なっており、データベース内の情報を取得したり、新しいデータを生成（挿入）したり、既存のデータを更新したり削除したりすることができます。
上記のデータベース関連の操作はバックエンドの責務です。しかし、バックエンドからSQLを実行するのがめんどくさい、SQLを書くのが大変なのを解消してくれるためのORMというものが存在しています。ORMとはObject Relational Mappingの略であり、それぞれのプログラミング言語のような書き方でSQLを実行できるというものになっています。今回は詳しいものは解説しないですが、ORMもバックエンド開発には欠かせない要素です。
ここまでは実際の開発のための必要な分野の話でした。
次からは開発のためのツールを見ていきたいと思います。
開発に関わってくる各種ツール
開発をする上で最低限知っておきべき知識として以下のものが挙げられます。
- Git, GitHub
- Docker
- Unixコマンド
それぞれみていきましょう。
Git, GitHub
誰でもGitHubという名前を聞いたことがある、もしくは実際のサイトをおとづれたことがあるのではないでしょうか？GitHubとは、Gitのリモートホストサービスです。簡単にいってしまえば、自身のパソコンの中にあるソースコードをGitHub上で管理できるということです。
Git
ここまで色々出てきましたが、Gitとはバージョン管理システムです。基本的にソースコードにはバージョンという概念が存在しており、そのバージョンを更新していくことでどんどんとコードを新しいものにしていきます。そのためのバージョンを管理するツールというものがGitです。
Gitコマンドは実務でも非常に多くの場面で使用することになりますので使いこなせるようになっておいた方がいいです。現在はエディタの機能を使用して全て完了することができるようですが、私はコマンド派です。また、先日同じ仕事先のエンジニアの人のGit関連の操作をエディタのGUIでやっていたらおかしくなってしまい、コマンドでやり直したら上手くいったという事象も発生しました。笑
これから学習する方は基本的にはコマンドで行うことをおすすめします！
GitとGitHubの詳しい情報は検索するといくらでも出てきますのでそれを参考にしてみてください。
筆者的には大体
git checkout
git add
git restore --staged
git commit
git reset --soft HEAD^
git push
git pull
git clone
のコマンドを使いこなすことができたら基本的に仕事では困らないかと思います。
もちろんそれ以外のコマンドを使用することもありますが、私は基本これだけです。
Docker
正直、Dockerはどのくらいここに書いたらいいかわからないです。笑
Dockerとは仮想環境を使用するために必要なソフトウェアです。Dockerを入れることでそれぞれのエンジニアのPC内の環境に仮想環境を作成して、その中にサーバーを立てることができるので非常に便利です。特に便利な点は個人間の環境の差を考えないで全員同じ環境で開発ができるという点です。
この記事は特にDockerに関して詳しく説明しているのでぜひ読んでみてください！
UNIXコマンド
UNIXコマンドに関しても基本的基本的なものを使用できたら問題ないかと思います。個人的に結構使えないと困るなーと感じるのはviとcatとかかと思います。あと、sshコマンドを使用して本番環境とか検証環境のサーバーにアクセスしないといけない場合などもあるのでそのコマンドも知っておくと便利だと思います！
以下のものを参考に自分がどの程度使いこなせるのかを確認してみてください。
まとめ
さて、今回はWEBを勉強することになった際の最低限の知識を身につけるための色々を書いてみました。
実際、エンジニアになるにはこれだけでは全く足りないかと思いますが、これらが理解できたら最低限の能力はあると言えるレベルだと思います。
私もまだまだですが、これからもっとレベルアップしていきたいと思っています！私の当面の目標はScalaを勉強することとパフォーマンスチューニングの勉強(ISUCON本)をすることとして頑張ってみます！
それではありがとうございました〜
Discussion