初めての web アプリ勉強のすゝめ ~フロント編 ①~
Posted on 2024年05月19日 (日) in 一般
目次
はじめに
導入
私は Yukis Army knife のようにデスクトップアプリを作っていたのですが、常々こうしたダウンロードが必要なアプリは導入の敷居が高いな...と思っていました。
そこでだれでも簡単に利用でき環境も選ばない web アプリに興味を持ち、最近色々と勉強しながら試しています。
今回は手探りで勉強する中で、極力時間を掛けずに web アプリ制作の触りを理解できると思った方法を解説していきます。
新しく勉強したいけど、何を参考にすればいいのかが分からない方に、役立てれば幸いです。
こんな人向け（私がこうだった）
何から勉強を始めればいいのか分からない
勉強が苦手
忙しくて時間がない
お金をかけたくない
だけど web アプリでなにか作ってみたい
注意
情報がまとまっている書籍を買ったほうが体系的・網羅的に学べるので、網羅的に習得したい方にはこの方法はおすすめしません。
実践でコードを書くときは細かく刻んでやっても良いと思いますが、座学で勉強する時間はまとめて確保したほうが良いです。
他の言語に触ったことがある人向けです。一度も触ったことない方は他のサイトや書籍を見たほうが良いです。
環境構築
VScode の導入は拙作のこちらの動画で解説していますが、分かりづらいと思う方は別のサイトや youtube で調べることをおすすめします。（動画のメインは Python の導入なので）
拡張機能については正直自分で必要なものを調べることをおすすめしますが、一応必須だと感じたものだけを記載します
Auto Close Tag
（HTML のタグを自動的に閉じてくれる）Auto Rename Tag
（タグを書き換える時に自動て終了タグの方も書き換える）CSS peek
（HTML の class などから CSS に飛べる）Error Lens
（エラーが出ている行に直接エラーの内容を記載してくれる）Highlight Matching Tag
（選択してるタグに対応している終了タグを強調表示してくれる）ES7 React/Redux/GraphQL/React-Native snippets
（React を使う際に便利な機能が多い）Live Server
（web サーバーを立ててくれる）JavaScript and TypeScript Nightly
（JS と TS の補完をしてくれる）
他にも便利な拡張機能はありますが、とりあえず上記のものだけ入れてから考えたほうが良いです。
HTML・CSS 編
まず初めに web の基礎の基礎となる HTML & CSS を勉強する必要があります。
私が参考にしたのはこちらのページです。
HTML と CSS の使い方がはじめから分かりやすく書いているだけでなく、サンプルコードを使った実践も非常に充実しています。
また最後に CSS のプロパティ一覧表も載っており、見終わったあとも実際にコードを書いてて分からない時に使う辞書としても役立ちます。
他にも色んなサイトを見ましたが、初歩から扱っていて一番親切なのはこのページだと思いました。
TypeScript 編
次に HTML・CSS と同じく web の基礎の基礎である JavaScript を勉強する...と言いたいところですが、個人的に TypeScript の方で勉強することをおすすめします。
なぜならば近年 TypeScript で書くことが推奨されおり、React や Next.js などでも置き換えが行われているからです。
学習コストは少し上がりますが、ネットに情報も十分にあり、ChatGPT などの AI もそれなりに情報を返してくれるため、勉強での不便はそこまでないと思います。
私が TypeScript で参考にしたのはこちらのページです。
学習に使えるサイトはたくさんありますが、型についてや変数についてなど理解する順番が一番しっくり来たためこのサイトで勉強しました。
正直サイト自体はあまり使いやすくありませんが、TypeScript の基本的な文法を知るには分かりやすいのでお釣りが来ると思います。
DOM 編
ここまで勉強しても、実際にどうやって TypeScript(JavaScript)で HTML を操作するのか分からないと思います。
そこで DOM とは？について知る必要があります。
このサイトは JavaScript で DOM を操作していますが、TypeScript でも型以外は同じやり方なので参考になります。
型については
こちらのサイトが分かりやすいと思いますが、実際はアプリを作りながら調べて理解することになると思います。
簡易 Web アプリ実践編
ここまで web の基本的な技術について触れましたが、一度ここで簡単なアプリを作ることをおすすめします。
この時に大事なのは、
自分がちょうど欲しいもの・不便を解決できるものを作る
→ 利用イメージを考えて作ることの体験や、モチベーション維持のため仕組みや仕様を１から考える（どっかの丸パクリをしない）
→ 自分で仕様を考えることで、何ができて何が難しいのかを理解するため
ことです。
ネットで調べると ToDo アプリの作成がおすすめされていますが、このフェーズでは個人的におすすめしません。
なぜならば仕組みが調べればすぐ出ている上に、既存のアプリでいくらでも代用できて、自分で作ったものを利用するイメージが沸かないからです。
それよりも「自分しか使わないでしょ」「利用できる場所はあるけど限られすぎ」ぐらいニッチなアプリを作ることをおすすめします。
そうしたものは調べても仕組みやコードをそのままコピペすることは難しく、自分で考える力が身につきますし、自分が便利に使うものなのでモチベーションも湧きやすいです。
実際に私は自分しか使わない「箇条書き文書化アプリ」を作りました。
仕組みもコードもとても単純なアプリですが、実際にどのようにアプリを考えて作るのかということが体験できましたし、自分が使う用途なのでモチベーション高く作ることができました。
このようにどんなに簡単なものでも、１から考えて作ると今後の勉強が楽になると思います。
React
ここまで勉強したら、次に実際の web 開発で使われているフレームワークについて勉強します。
フレームワークにはいくつか選択肢がありますが、今回は一番情報が多そうな React について書きます。
やり方としては、上の youtube の動画で React に出てくる概念を知ったあとで、下のサイトで実際に React を触るのをおすすめします。
下のサイトでは実際に Todo アプリを作りながら React を触れるだけでなく、Vercel と呼ばれる場所にデプロイして実際に公開するところまで体験できるので、web アプリの開発・公開を一貫して学ぶことができます。
React アプリ制作の実践
最後に今まで理解したことを含めて、React アプリを実際に作っていきましょう。
先程の実践で作ったものを React で作り直しても良いですし、新しく作っても良いと思います。
ただし作るものは先程と同じ２つの条件を満たしたもので、なおかつ Vercel での公開・SNS などでお知らせまでやったほうがいいです。
そこまでやると必要な経験のすべてを体験することができますし、続けることのモチベーションにもなると思います。
私は実際に Yukis Army knife の web 版となる予定である
を作っています。
見ての通り出来損ないですが、少しずつでも作って公開することが楽しく上達するための一番の道のりです。
終わりに
HTML+CSS から React を活用できるところまでの勉強方法を今回は解説しました。
時間がないときは実践でひたすらかけてる知識を補っていくのが楽な覚え方です。
ただそのやり方はモチベーションを維持できなければ難しいので
自分が欲しいもの
知り合いが欲しがっているもの
今後役立ちそうなもの
など目的を決めて web アプリを作ることをおすすめします。