WEB開発
友達のために最初の取っ掛かりのためのカリキュラムを書きます。
これを見ながら勉強の方針を立て、それをもとに自分で検索して、いろいろな勉強サイトを使って勉強していく感じで。
全部やろうとしなくていいです。
随時更新予定。
環境はwindowsを想定してます。
はじめに
プログラミングは挫折しやすいです。
すべてを理解しようとはせず、ある程度できたらアウトプットしてまた次の新しいものを学び、飽きたり挫折したりしないようにがんばりましょう。
ググってもわからないことがあったら、なるべく早めにできる人に聞くといいと思います。
時間を無駄にしている可能性が高いです。
開発環境構築
まずは自分のパソコンにプログラミングをする環境を作ります。
VSCodeをインストール
これはエディタです。これを使ってプログラムを書いていきます。
便利な拡張機能を紹介
- Bracket Pair Colorizer(括弧に色がつく)
- ESLint
- HTML CSS Support
- HTML Snippets
- IntelliSense for CSS class names in HTML
- Prettier - Code formatter
- GitLens
- Remote WSL
など、その都度必要なものを入れていく感じで。
ダウンロード数が多いものを入れていったら間違いないと思ってます。
コマンド
便利なコマンドがいくつかあるので覚えていきましょう。
コマンドを使うとストレスが減るし開発スピードが上がります。
個人的にはマルチカーソルとか便利と思います。
VScodeチートシート
使う言語をインストール
後ほどいくつか紹介しますが、使うと決めた言語をインストールします。
例：Python
最初はなるべく新しいのをダウンロードしましょう。
Google Chrome Developer Toolsを使おう
ブラウザは基本的にChromeを使っていくほうがいい気がします。(ほか使ったことないです)
Ctrl+Shift+Iとか右クリックの検証で出てくるので、色々使ってみましょう。
Qiitaを活用しよう
調べるのはもちろんのこと、自分で学んだことを書いていくといいです。
Qiita以外を使ってもいいですが、学んだことをアウトプットすることは自分の知識の整理や、あとからの参照のためにもいいと思います。
QiitaはMarkDown記法で書きます。
参考→MarkDownチートシート
HTMLとCSS
HTMLやCSSは厳密にはプログラミング言語ではなくマークアップ言語といいます。
無料の教材として有名なのはProgate、Paizaラーニング、ドットインストールなどです。
あとは、なるべく公式ドキュメントを見るようにしましょう。
デザインをしたい人はここを重点的にやりましょう。
pythonとかバックエンドとか早くやりたいって人は程々にしましょう。
HTML, CSS
MDNなど
JavaScript
jQueryもさらっとやると、JavaScriptの使い方がわかって良いです
jQueryは古いと思われがちですが、実際使っている現場はまだまだ多いと思います。
もっとフロントエンドやりたかったらreact.jsとかvue.js、typescriptなど
JavaScript特化型オンライン学習サイトJS-Pro
Bootstrap
これも使ってみるとびっくりするほどページが早く作れて面白いです。
有名所では、aribnbがbootstrapを使っていたと思います。
レスポンシブなWEBページを簡単に作れます。（レスポンシブがわからない人は【入門】レスポンシブWebデザインとは？概要と作り方を丁寧解説など見てください）
アウトプット
それぞれprogateなどを一通りやったらアウトプットのために一枚ページを作ってみてもいいですね。
自己紹介ページなんかどうでしょうか。
拙いものですが、Bootstrapを使って適当に作った自分のものを参考に乗せておきます。
For Recruiter Page
これは後述のGithubの機能であるGitHub Pagesというもので上げています。
プログラミング言語
各々の言語にはそれぞれ特性や強みがあります。
プログラミング初学者はこれを見ろ！←メジャーな言語の説明あります
言語に慣れるためには、AtCoderやHuckerRankなどの競技プログラミングサイトの過去問を説いてみることをおすすめします。
以下にメジャーなものと、そのwebフレームワークを挙げておきます。
C
C++
C#
Go
Echo、Gin
Dart
Flutter
Java
Spring
JavaScript
Node.js, React.js, Vue.js
PHP
CakePHP, Laravel
Python
Djangoの練習として、Django BrothersやDjangoGirlsなどがあります。
Ruby
Ruby on Rails
Swift
オブジェクト指向
クラスやインスタンスについて学んでおきましょう。
webの技術
多少はwebの技術を知らないとwebアプリを作ることができません。
通信やネットワーク、セキュリティについて学んでおきましょう。
「プロになるためのWeb技術入門」を読んだのでまとめてみた【前編】
データベースとSQL
データベースの構造やmysqlなどのミドルウェア、リレーションの仕組みなど。
SQLはデータベース操作のための言語です。
Git
Gitは開発において欠かせないので実務を目指している人は特によく勉強しておきましょう。
さるわかはかなり分かりやすかったです。
Docker
作り始めたアプリケーションをローカルで実行する必要があります。
前まではVagrantなどで仮想環境を作る必要がありましたが、技術の進歩によってWindowsでもDokcerが使えるようになりました。
４月のwindows updateでwindows 10 バージョン2004にすると、wsl2が使えるようになり、Docker Desktop for Windowsが使えます。
Dokcerを使うと簡単にローカルでサーバーを立ててアプリケーションを実行できるだけでなく、インフラをコードで管理できるので、学習コストはやや高いですが積極的に使っていきましょう。
Docker公式
世界一わかりみが深いコンテナ & Docker入門
Docker入門 #1 【Dockerとは】
クラウドの知識
クラウドサービスとしてメジャーなものでは、GCP,AWS,Azure,Herokuがあります。
個人で使う分くらいは無料枠の中でできるので、実際にアプリを動かしてみたい場合は使ってみましょう。
自分もGCPとFirebaseを使ったWEBアプリケーションを作成中です。