はじめての Webプログラミング
はじめに
IT 管理部では WEB サイトの制作を業務の主体としています。主に使用している技術は TypeScript + Next.js です。もちろん、将来的にはこれらの技術を使って WEB サイトを作成できるようになっていて欲しいのですが、まずは WEB プログラミングの基礎である HTML や CSS を理解しなければなりません。
学習方法
そこで、HTML や CSS を学習することのできる WEB サイトを紹介しますので、各自学習を進めるようお願いします。IT 管理部で独自の教材が用意できればいいのですが、時間がないため外部のサイトに頼ることになってしまい申し訳ないです。
もちろん、質問にはお答えしますので、わからないことがあったら、Discord の #Questions で積極的に質問してください。抱え込まず、人を頼りましょう!
https://chot.design/html-css-beginner/
https://paiza.jp/works/html/primer
上記がおすすめの学習サイトです。まずはこちらのサイトで学習することを推奨します。類似の内容を扱っていますので、重複箇所を飛ばすなどして学習してください。
また、同一サイト内の他のコースにチャレンジしてみても良いかもしれません。以下におすすめのコースを記します。
https://chot.design/concept-of-design/
https://chot.design/figma-beginner/
https://chot.design/uiux-beginner/
https://chot.design/responsive-web-design-coding/
https://chot.design/css-design-technic/
https://chot.design/web-design-technic/
HTML や CSS が理解できたら、JavaScript の学習をしてみましょう。
https://paiza.jp/works/js/primer
また、入門書の web 版という形ですがこちらもおすすめです。
有料にはなりますが、以下のサイトでの学習もおすすめです。
HTML&CSS , JavaScript , Command Line , Git , React コースを学習すると良いです。
https://prog-8.com/lessons/info
なお、初級編や初めの章に関しては無料で閲覧することもできます。
また、上記の N 予備校もおすすめです。プログラミングのみならずオンライン授業等も受講できます。
HTML、CSS、JavaScript の学習ができたら、React・TypeScript・Next.js の学習を進めましょう。
https://ja.reactjs.org/tutorial/tutorial.html
おおよそですが、 HTML,CSS → JavaScript → React（JSX） → TypeScript のような順番で学習をしていくと良いと感じています。
また、関連する技術として
- Git（バージョン管理）
- GitHub
- Figma（デザイン）
- Firebase（認証・データベース）
なども挙げられます。
あくまで紹介したのはフロントエンドの技術（人に見える部分）であり、バックエンドにも様々な技術がありますので検索してみてください。なお、今回は Firebase を使用してバックエンドレスの形?をとりたいと考えていますが、将来的には Firebase を使わず、Rust や Go などでバックエンドを書けるようになると良いと感じています。（Firebase は使いにくいので）
注意点
教材と合う・合わないといった状態が発生すると思いますし、上記に紹介した以外にもインターネット上にはさまざまな教材がありますから、自分に合った教材を選択すると良いでしょう。（あくまでおすすめの手段ですし、私自身他のサービスを使用して学習してきました。）また、書籍等を用いて学習するという手段もあります。先輩などに Discord で書籍を借りられるか聞いてみるのも手です。
学習方法がわからなくなったり、学習中に迷うようなことがあったら、すぐに Discord で相談してください。力になれるよう努力をしますので、気軽に質問を飛ばしましょう。また、難しい内容に詰まったら、文中に頻出するキーワードをもとに検索をかけてみると易しい解説が見つかることが多いです。
また、一通り言語に慣れてきたら自分でなにかプロダクトを作ってみると良いでしょう。目標を立てて試行錯誤するうちに上達していくと思っています。とにかく手を動かして、慣れていくことが大切です。
注意点がいくつかあります。よく覚えておいてください。
一点目は、「プログラミングスクール」です。プログラミングスクールでは、年収アップなどといった言葉を使って、高額なカリキュラムを受講させようとしてくることがありますが、まったくその必要はありません。（正直、プログラミングスクールに行くくらいなら N 予備校で学んだ方がよっぽど良いと思っています）前にも書きましたが、学習方法で悩んだら質問してください。
二点目は、粗悪なアフィリエイトブログです。アフィリエイトによる収入やプログラミングスクールへの勧誘などのために、プログラミングで詰まりがちなところを解説したりエラーへの対処方法を書いているブログ記事が多くあります。しかしながら、そのようなサイトには多くの誤りが含まれており、プログラマ界隈では忌避されています。情報の真偽には十分注意してください。 そのようなサイトを表示させない chrome 拡張機能としてublacklistというものがありますので参考にしてみてください。 ブラックリストとして登録している URL 一覧を持っているので、声をかけていただければ渡したいと思います。
三点目は、環境構築です。おそらく一番難しく面白みがないのが環境構築です。プログラムを動作させるためのソフトウェアを導入するのが環境構築ですが、理解が浅いうちに関しては難しいと感じ諦めてしまうことが多いかもしれません。現に私も何回も挫折しています。ということで、わからなくなった・不安になったら質問してください。
四点目は、質問方法です。質問をするときは前提条件や自分の環境、目指していること、エラーが出ているならエラーログなどを書くと良いです。そこで、Nyanyan さんという方が作成された Programming Question というガイドラインを元に、フォームを作成しました。入力をするとマークダウン形式のテキストが作成されるので、それを貼り付けるなどしてくれると助かります。もちろん、簡単な質問は使用しなくて構いません。
https://keyaki-fes.github.io/programming-question/
乱雑な文となってしまい申し訳ないです。最後にですが、わからないこと・つまったこと・エラーがあればすぐに質問をしてください!!頼むから聞いてください!!よろしくお願いします。