効果的な Web 開発の学習のやり方

効果的な Web 開発の学習のやり方

プログラミングの学習のやり方には色々ありますが、この記事では Web 開発の上手いやり方を考えてみました。

Web 開発の基本は？

当然ですが、Web 開発の基本は、HTML と CSS になります。 従って、いずれにしても、HTML と CSS の基本は学習する必要があります。 これは、ページの記述をするのに必要最低限の内容です。これに加えて、実際のデータを処理するためには、プログラムを書く必要があります。これには、Javascript が必要になります。

最初に学習する際は、とりあえずバックエンドの開発は必ずしも必要はないので、まずはバックエンドの件は「今すぐに学習する必要はない」と割り切って先送りすると考える事にします。

もう一つは、フレームワークです。全て、Javascript で書くとなると大変大きな労力です。そう考えると、フロントエンドのフレームワークを学習の候補に入れておく方が開発がスムーズに進みます。

このように考えると、Web アプリの開発に必要な学習項目は：

＊　HTML

＊　CSS

＊　Javascript

＊　フロントエンドのフレームワーク

と言う事になります。

始める前に考える事

一応、学習項目が揃いました。

ではもう少し、具体的な内容を決めて行くのが次のステップです。

普通に考えると、一つ一つ順番に学習して行くと言うのが一般的な手順です。 しかし、HTML、CSS、Javascript、フロントエンドのフレームワークも学習する内容が沢山あります。 時間を十分にかけられる場合は、ある程度順番に学習していけば良いので、まずは、HTML と CSS を学習して、基本的な Web ページが作れるようになって、その次のステップで、プログラムを Web ページに組み込むために Javascript を導入するという様な順番で学習する事になります。 その上で、複雑なページ構成を実現するために、フロントエンドのフレームワークを学習する感じになります。

手堅い方法と言えますが、どうしても時間がかかります。

短期間で成果を出したい場合には、ちょっと考え方を変えると学習の進捗を加速させる事ができます。

つまり、この四つの項目を「同時」に学習すると言うのが一番効率が良い事になります。

そんな事できるの？と思うかもしれませんが、要は「必要な事から学習する」と言う考え方です。

全てを含んでいるのはどこか？

そこで、発想の転換が必要になります。普通に考えると HTML/CSS/Javascript がわからないと、フロントエンドのフレームワークの学習は難しいと考えがちです。実際にそう言う要素はあるのですが、逆に言うと、フロントエンドのフレームワークには HTML/CSS/Javascript が含まれていると言う事でもあります。

そこで、最初に、フロントエンドのフレームワークから学習すると言う発想が出てきます。

そこで、最初にフロントエンドのフレームワークとして何を学ぶのかを選びます。2022 年 1 月現在で、よく利用されているフロントエンドのフレームワークは、

＊　React

＊　Vue

＊　Angular

あたりだと思います。まずは、この中から選ぶのが無難な選択です。自分で、どれかを選べる人はまず選んでください。例えば、就職したい会社がある場合、その会社が採用しているフレームワークは何かを求人情報などから見つけて必要なスキルを知ることができれば、ある程度選べると思います。

しかし、どれを選んでわからない場合は困りますよね？ その場合は、一つの方向性として

＊　アメリカなどで働きたい場合は、基本的には React が主流です。

＊　フリーランスや副業で、Web 開発を考えている初心者は Vue の方が学びやすいと思います。

と言うような事を参考に選んでください。

その上で、フレームワークの「チュートリアル」を見つけてやってみるところがスタートラインです。

そのチュートリアルで必要な

＊　HTML

＊　CSS

＊　Javascript

から学習するという方法です。

学習すると言っても最初は、チュートリアルをそのまま入力して、「動かす」事からで問題ありません。 とにかく、チュートリアルを読みながら、「動く物を作ってみる」と言う作業から始めます。

要は、チュートリアルを説明通り忠実に真似をすると言う事です。

動いたら「遊んで」みる

無事に動いたら、最初のステップは終了です。 動かない場合は、まずは、入力した内容がチュートリアルと同じかを確認したり、最初のフレームワークの設定ができているかを確認します。動かない大きな理由は、入力のミスかフレームワークの設定ミスです。

動いた場合は、今度は少し内容を変えてみます。 まずは、HTML や CSS の設定を変えてみます。

＊　文字の大きさや位置（左寄せ、中央に配置、右寄せ）などや、文字の色などを変えてみます。

＊　ボタンや入力フィールドを追加してみる

＊　追加したボタンが押された場合の処理を作ってみる

＊　入力フィールドの値をコンソールに出してみる

＊　入力したフィールの値をページに表示してみる

など、チュートリアルの実装を基本にして、少し追加や変更を加えて表示がどのようになるかを確認しながら HTML、CSS、Javascript の基本的で、「よく使う部分」を体験しながら学習します。

まとめ

この記事では、Web 開発特に、Web アプリを作るための学習を短期間で効果的に行うコツを紹介してみました。Web アプリ開発では、実際に必要な HTML や CSS の知識は全体の一握りの場合が多くなっています。もちろん、凝った Web ページを作る場合には必要になりますが、Web アプリの場合、「データの入力」「処理結果の表示」が中心になるので、最初に必要なのは、基本中の基本ですみます。

そこで、いきなりフロントエンドのフレームワークを真似して動くようにする事から始めることで、「本当に必要な部分から学習」すると言う方法をとると、余分な学習に時間を取られる事なく効率よく学習を進める事ができます。最初はまず「忠実に真似」その後で、「変更をしてみて結果を体験」と言う過程でまずは、必要な部分を「感覚」として身につけるという方法が効果的です。

フロントエンドのフレームワークのチュートリアルはインターネット上に多数紹介されているので、まずはその幾つかを選んで、真似をしながら書き方の基本を覚えてしまうことで、実際に「使われる部分」から学習すると言う事が可能です。

コードの内容は最初は理解できなくても、パターンを覚えて学習を進めていくと、だんだん内容もわかるようになる物です。最終的には、細かい部分の学習も必要になりますし、全体の学習にかかる時間は大きな差はないと言えますが、使うところから学習することで、簡単なものは短期間で作れる様になりますし、作れる物のレパートリーも早い段階から増えて行くので、仕事を獲得できるのも早くなる場合が多くなります。

いきなり、実践から入るので一番最初はちょっと辛い面もありますが、慣れると加速度的に学習が進む効果的な方法です。