こんにちはkasaです。今まで競技プログラミングしかやってこなかったのですが、最近Webの勉強始めました。
Vue.js
まず初めにVue.jsから勉強を始めました。https://ja.vuejs.org/ この公式のドキュメントを見ながらガイドに沿ってプロジェクトを作成し、内容を読んでコードをコピペして実際にどう動くのかを見ながら勉強しました。
Vue.jsのドキュメントは日本語に翻訳されているので助かりました。私は、HTML,CSS,Javascript,typescript全部ほとんど触ったことがなかったので一緒に文法も勉強しながらで行きました。
Vue.jsにはOptions APIとComposition APIの二つの記法があるのですが、今はComposition APIが主流ということでComposition APIの方を勉強しました。
Todoアプリを作ろう
Vueのドキュメント一通り読み終わったら、何かアプリを作ってみることが一番勉強になりました。Typescriptの文法もほとんど知らなかったので、何か見て勉強するのがはかどりました。
全然見たい記事が出てこない。
Todoアプリを作ろうとしても、何から始めればいいかわからないのでGoogleで検索します。私はComposition API,typescriptでTodoアプリを作りたかったのですが、ほとんどがjavascriptを使っていて、そもそも記事が古くてOptions APIの記法で書いてあるもののあったので、見つけるのに苦労しました。
今まで日本語でしか検索してこなかったのですが、英語で検索したほうがいい記事が見つかりやすかった気がします。それとGoogleで見つけた記事でなく、Githubで検索して見つけた方がいいです。Githubで検索して、コードを見てComposition API,typescriptを使っているものを見つけました。
とりあえず真似しよう
Githubでいいものを見つけたらクローンしてコードをいじってみて何が変わったかで、どこがどんな感じで実装しているのかを見ていきました。いじっても何をしているかわからないときは、ググって何をしているか理解していきました。
Nuxt.js
Vue.jsでTodoアプリを作ったのちに勉強したのは、Nuxt.jsです。Nuxt.jsはVue.jsの派生版です。Vue.jsをもっと使いやすくしたものといった感じです。Nuxt.jsも公式のドキュメントがあるのでそれを見て勉強しました。https://nuxt.com/ Nuxt.jsのドキュメントは日本語に翻訳されていなかったので、適宜DeepLで翻訳しながら勉強しました。DeepLで全文翻訳しながら友達に怒られました笑。。
全文読まなくていい
ドキュメントに書いてあることをすべて読もうとしていたのですが、まずコードをコピペして動かしてから周辺のことを読むのがいいみたいです。
何か作ろう
Vue.jsの時と同様、ドキュメントを読んでコピペしただけでは身につかないので今度はポートフォリオサイトを作ってみました。Githubで見つけたポートフォリオサイトを参考に作りました。
どうやっていじるの？
ポートフォリオサイトの場合、Todoアプリよりもコードが増えてどのコードがサイトのどこに対応しているかが分かりにくかったです。サイトに表示されている文字、文をVScodeの検索機能を利用してどこでその部分を実装しているかを見つけました。その部分のコードをいじってどう変わるのかを見て勉強しました。
感想
HTML,CSS,Typescript,Javascriptどれもほぼわからない状態で、勉強をいきなり始めましたが何とかポートフォリオサイトを作るところまで行くことができました。ネットの情報だけで何とかなりました。vue3,nuxt3の勉強をしているのに、古いversion記事が出てきたりするのが煩わしかったです。日本語に記事がなくても英語だと知りたいことが書いてあったりして、英語で調べることが大事だとわかりました。
コメント