Ver. 1

ビギナーズガイド

Web開発を始めよう

November 24, 2022

こちらは フリーランス、カナダでフルタイムのフルスタックエンジニアとして働く Jiro が運営する Web開発を学習する方向けのサイトです。 現場では必須なことであったり、Web開発の学習のコツ、技術要素の解説などを情報として載せていきます。自身が普段から Ruby, JavaScript, Go などの言語を用いて開発することが多いのでその辺りの技術を中心に情報を載せていきます。

プログラミングを学びたい方向けにメンタリングも行っていますので、興味のある方は当サイトのコース一覧 を参照ください。

Web開発を始めよう

Web 開発とは HTTP通信を前提としたアプリケーションの開発作業になります。 昨今取り上げられる「プログラミング」の多くは数あるアプリケーションの種別の中でWeb開発に暗に言及していることが多いです。

プログラミングと言う言葉が先行しており、これからプログラミングを始めようと言う方には「言語やフレームワークの学習」のみに囚われがちですが、 一つの Webアプリを自信で作れるようには、コンピュータの構造からネットワークの通信方法などの周辺知識も必要になってきます。

また、アプリケーションの複雑度にもよりますが、アプリを一通り開発する際の技術要素の一例をあげると、

  • JavaScript
  • React.js
  • Ruby
  • Ruby on Rails
  • MySQL
  • AWS
  • Shell

のように、プログラミング言語、フレームワーク、データベース、インフラなど幅広い知識が必要になります。 Web エンジニアとして就職した後の実際の現場では、さらに多くの技術的要素が必要になります。

とはいえWeb エンジニアを目指していく際には、全てを一度に勉強する必要はないので順番にターゲットを決めて勉強していきましょう。

まずはざっくりと Web アプリとはどういうもので成り立っているのかの全体像を理解して、それぞれが「どういった技術的要素からなっているのか確認」してそれぞれ期間を決めて的を絞って学習していけると良いでしょう。

例としては、Web アプリをざっくり分解すると

  • クライアント(フロントエンド)
  • サーバアプリケーション(バックエンド)
  • データベース

の三層にわけられます。さらに、クライアントサイドをみると HTML/CSS, JavaScript ブラウザなどの技術要素があり、フレームワークレベルまでいくと

  • Sass
  • CSS in JS
  • TypeScript
  • React

などのトピックがあります。

何事にも計画を立てるときには、これからやろうとしていることの全体像をどれだけ解像度高く理解していかが、計画の精度を決めるので最初の段階で これくらいまでしっかり調べて、自分がこれから何をどのくらい勉強する必要があるのか理解できると計画が立て易いでしょう。

あとは「半年でWeb開発をできるようになる」のように期限を決めて、自分が学ぶことのリストから優先度順に勉強できると良いでしょう。

Web 開発を学ぶメリット 

最近でこそ、プログラミング自体が市民権を得てきた感じもありますが、ただ Web 開発を始めようでは人は動かないかと思いますので、 Web 開発を学んでどういったことができるようになるのかを個人的な経験から書いていきます。

こちらはかなり個人的な意見になるかもしれませんが、Web開発を学ぶメリットとしては

  1. 自身のイメージしたプロダクトを思い通りに実装ができる
  2. 情報リテラシーや論理的思考力・クリティカルシンキングなどを磨ける
  3. 比較的にフラットで自由な働き方のできる仕事につける可能性が広がる
  4. 国など場所に囚われないスキルを身につけることができる

といったものが考えられます。それぞれを個別に見ていくと下記のようになります。

自身のイメージしたプロダクトを思い通りに実装ができる

1. については「自身で宇宙を作っている」ような感覚があり絵を書いたり、料理を作ったり何か自分でイメージをして作ることができるので自分が決めたルールにそって全てを作っていくことができるのでここに感動や達成感があるかと思います。 (チームで作業する仕事ではそこまで柔軟ではないかもしれないですが、より多くの人が関わるシステムに携われたり違った楽しさがあります)

自由にアプリを作れるようになるには長い道のりがありますが、その間にも最初に始めたコードが動いた時や完璧とはいかないまでも自分が想像したものが段々と出来上がっていく喜びや達成感がプログラミングの醍醐味になります。

情報リテラシーや思考力を磨ける

こちらはあくまでも付加的なものですが、ソフトウェアエンジニアになると仕事でもプライベートで勉強する時でもネットで情報収集→実践と言うことを繰り返しながら作業していくのでネットの情報を効率よく漁るスキルが身につきます。 古い情報や根拠の薄い情報などへの感度が高くないとやっていけない職業でもあるので自然と現代で必要な情報収集力が身につき、この情報収集力が仕事意外のプライベートなどでも役にたつようになってきます。

また、コードを書くときにコード化する作業(コードに落としこむ作業)を通して

  • 現象を観察して、仮説を立てる
  • 物事を抽象化して共通項を抽出する
  • 煩雑な情報を粒度ごとに整理する
  • 想定される現象をあらかじめ網羅して対処する

といったことを繰り返し行うので物事への洞察や思考力を磨くことができます。

これらは人生全体を通してみてもトラブルを処理したり、事業をおこしたい、個人のプロジェクトを計画通り進めたいと言うような時に必ず役立つスキルになるでしょう。

比較的にフラットで自由な働き方のできる仕事につける可能性が広がる

業界的に歴史が浅いことなどから、人間関係や社内の仕組みなどが柔軟なことが多くその他の古くからある業界に比べて、フルフレックス、フルリモート、週休3日制の導入等々会社の魅力やカルチャーを磨くためにさまざまな試みをしている会社が多く、他の職業に比べて自分にあった働き方を見つけやすい業界で働くことができます。 トレードオフとして成熟していない環境下で苦労することなどもありますが、しっかり働く場所を選べる実力があれば自分の思った通りの働き方を実現することも決して不可能ではありません。

国など場所に囚われないスキルを身につけることができる

プログラミングは今やPCとネット環境があれば仕事ができるようになっていて、非常にポータビリティ(移植性)の高いスキルになっています。 将来的に海外で働きたい、リモートワークで家から働きたいなどの希望があるのであればその目標を実現できる可能性が相対的に高い職業になっています。 個人的にもカナダでエンジニアとして働くことができたのもこの職業を選んだからだと思っているので、「数ヶ月簡単に学んだだけですぐに夢が実現できる!」みたいなキラキラしたものでもないですが、 将来的に海外で働きたいなどの目標があるのであれば、検討してチャレンジする価値は十分にあるかと思っています。

以上がプログラミングを始めるメリットになります。

Web開発の学習自体、実になるまで一定の期間と努力が必要なものですが、勉強がしんどくなったり目標を見失ったりしそうな時に「なんで Web エンジニア になりたかったんだっけ?」と言うように自分の モチベーションを確認するのに使えると思いますので、ぜひ参考にしてみて下さい。

このサイトの使い方

このサイトでは、プログラミングを学ぶ方の参考になる情報を載せていきます。 プログラミングの教材というと、JavaScript や React の文法などなどのより具体的な情報が多いですが、コーディングのレベルを上げたり仕事でプログラミングをするとなると そのような具体的な情報よりは「どの情報を参照するか?」「エラーが怒ったときの対応の仕方」などの特定の技術によらない言語化しづらいスキルが重要になります。

世の中に学習をサポートするための、動画や記事などの教材は多いですがちゃんとした習慣を身につけることができればほとんどそれに頼ることなくコーディングができるようになります。 それぞれの技術の公式のドキュメントなどの一次情報から情報を得るスキルとエラーの原因を特定して適切な対処を行うスキルがあれば、中級者エンジニアとして何不自由なく仕事ができるようになります。

個別具体的なスキルは割と枝葉であったりするので、このようにエンジニアとして良い習慣が身につくための情報を載せて行ければと思っています。

目次