「駆け出しエンジニア」プログラミング学習のコツ「入門者」

ここではこれからプログラミングを学習したいと思ってる方に向けて具体的にどうやって勉強するのが良いか解説していきます。

(このページはこれからも書き足していく予定です)

学習の方向性

プログラミング言語を学習する目的が転職やジョブチェンジなどの仕事として捉えるか趣味として勉強するかでは大きく違います。まずは後者の趣味の場合はどういうものを作りたいかイメージしそこからプログラミング言語を選択することをおすすめします。例えばゲームを作りたいならUnity、スマホで動作させたいならFlutter,Swift,Androidなどあります。ただし何がしたいかをベースに考えた際に入門者の場合は最初のハードルが高い可能性があります。その場合は前者の方向性で一旦勉強することをおすすめします。前者である転職やジョブチェンジですがここ最近の求人ですとやはりWebサービスの開発の求人が多いと思います。そのためWeb開発スキルに関わるプログラミング言語を勉強することをおすすめします。

どの言語を勉強するか

学習の方向性からWeb開発にまつわるプログラミング言語の勉強をおすすめしましたが、その中で初めてプログラミングを勉強する方にはJavaScriptがおすすめです。

理由は以下の3つがあります。

  • 「ブラウザだけで実際にプログラミングができる」
  • 「無料の学習教材が豊富」
  • 「UIの操作など実際に動きがみれて学習の成果がわかりやすい」

また少し先の話になりますが基本的な構文が理解でき次のステップに移る際に

  • 「サーバサイド、フロントエンドのどちらもJavaScriptだけで勉強できる」
  • 「TypeScriptを勉強する際にJavaScriptの知識が必要」

があります。入門者であればあるほど複数のプログラミング言語を継続的に学習、習得するのは困難です。一つの言語で「サーバサイド」「フロントエンド」のどちらも勉強できるのは強みです。また2つ目のTypeScriptは現在とても人気のある言語です。TypeScriptはJavaScriptのスーパーセットのためJavaScriptを理解していることがとても重要です。

HTML,CSS

よく入門者にはHTMLとCSSをおすすめするサイトが多いと思います。HTMLとCSSを扱えるようになることは大事なのですが正確にはどちらもプログラミング言語ではありません。JavaScriptを勉強しつつ併せて都度HTMLCSSを触ることをおすすめします。なんどかJavaScript + HTML + CSSで実際に動くものができてからHTMLとCSSについてはその際に必要なものを少し深掘りして学習する方が理解が進むと思います。

学習の準備

STEP.1 ブラウザ(Chrome)の用意

理由に書いた通りブラウザだけでも簡単なプログラミングができるためブラウザを用意しましょう。将来的にデバッグや動作の確認などで開発者ツールを利用することも考えGoogle Chromeをおすすめします。

ChromeブラウザDevToolsでのプログラミング

STEP.2 エディタの用意

ブラウザだけで簡単なプログラミングはできますが、やはりプログラミング用のエディタは必要です。無料で拡張機能で更に拡張可能なVSCodeをおすすめします。

VSCode

少し難しい話になりますが、HTML + JavaScriptで学習する際にWebサーバと言うブラウザからのリクエストに応答するものが必要になります。入門者がいきなり用意するのは難しいのでVSCode拡張機能LiveServerを入れておきましょう。

STEP.3 Node.jsの導入

このSTEP以降はいきなりやる必要はありませんがいずれ必要になるのでここに記載しておきたいと思います。

画像内①でプログラムファイルを用意します②で用意したプログラムファイルにプログラムを記述します。③でVSCodeのターミナルからそのプログラムファイルを実行します。この③でプログラムファイルを実行する際にJavaScriptの場合はサーバサイド言語として実行するにはNode.jsが必要になります。(正確には他の言語もありますが一番メジャーなのはNode.jsです)

VSCodeでのプログラミングとNode.jsでアプリの起動

STEP.4 Git&GitHubの導入

プログラムコードはバージョン管理することは必須です。その際にGitとGitHubが現在はメジャーです。GitとGitHubの位置付けですがGitがバージョン管理システムのアプリ、GitHubはGitを使ったWebサービスです。Gitでバージョン管理しそれをGitHubと言うWebサービスで管理します。

STEP.5 Docker Desktop(Docker,Docker Compose)の導入

アプリケーション開発をする際にインフラ技術も必要になります。その中でデータベースの準備は早い段階で必要になります。その際にプログラミング環境に直接利用するデータベースをインストールしても良いのですがハードルが高いためDockerを利用し用意することをおすすめします。Dockerの学習も入門者にはハードルが高いですがインフラの学習よりは低コストと応用できる幅が広いためDockerは使いこなせるようになることをおすすめします。

学習の進め方

はじめに

まずはJavaScriptの入門者向けのサイトや書籍を1冊用意し進めましょう。書籍を購入する際ですが実際に書店で何冊か読み比べてみることをおすすめします。入門書に関してはどの本もそこまで品質には差はありません。読みやすい読みにくいなどで良いので比べるのが良いと思います。大事なことですが中古本はやめましょう。プログラミング言語は日々バージョンアップされているため古い書籍の情報では動作しないことが多々あります。そのため書籍の最終ページあたりに記載がある「発行日」を確認しできるだけ新しい書籍を選択しましょう。

書籍で勉強するのは「変数」「式、文」「条件分岐」「繰り返し」などどのプログラミング言語で必要なことをまずは学習します。凡そ1週間から10日ぐらいで入門書は卒業することを目標に頑張りましょう。

入門者で一番ハマるのはプログラミングを行う前だと思います。サイトや書籍が提示するプログラミングをするために必要な環境の用意でつまづかなければまずは成功と思うぐらいで良いと思います。

入門書を卒業しある程度理解できてきたら、準備の章のSTEP.3以降の準備を行いフロントならDOM APIを利用しブラウザに動きを与えたり、サーバサイドではWebのリクエストを受け付けたりするようなより具体的なプログラミングを改めて書籍やサイトを利用して学習していきます。

この段階で何を勉強するかですがフロントエンドのReactをおすすめします。理由は書籍やサイトが豊富にあるため学習しやすいのとモダンなライブラリのため筋良くJavaScriptが学習できると思います。

学習のペース

プログラミングは即席では絶対に身につきません。毎日学習することが大事です。そして1日最低でも1時間、可能なら3時間ぐらいは行いましょう。またこの際に3日に1回3時間と毎日1時間でしたら後者の方が定着すると思います。できるだけ毎日続け、1日あたりの時間もできるだけ確保することをおすすめします。

学習の手応えが感じる時期

どのくらいの期間プログラミングをすると手応えを感じるかは個人差があると思いますが。毎日3時間だとすると3ヶ月で300時間弱だと思います。このぐらいの学習時間で「なんとなくプログラミングがわかってきた」と言う手応えは得ると思います。 この「プログラミング」がわかってきたは「簡単な何かをアウトプットできる」ぐらいが標準だと思います。

学習のロードマップ

ここでは簡単に学習のロードマップを記載します。

エディタ(VSCode)の基本的な使い方の学習 -> JavaScriptの学習(初級) -> HTML + CSS + JavaScript(初級)の学習 -> 前段で作成したアプリをブラウザに表示する -> 基本的なHTTPプロトコルの学習 -> Node.jsの導入 -> Git & GitHubの学習 -> JavaScript(中級)の学習 -> React + JavaScript(中級)の学習 -> Node.js + Express + JavaScript(中級)の学習 -> 基本的なWebセキュリティの学習(認証、CORS、XSS、SQLインジェクション、CSRF)-> Docker + Docker Composeを利用した環境構築 -> CI/CD(GitHub Actions)の学習 -> デプロイの学習(Vercel,Heroku,AWSなど)

この限りではないですがWebアプリを開発するスキルとしては最低限のスキルは押さえていると思います。この中にLinuxコマンドラインについての学習は記載していないのですがHTML,CSSと同様にLinuxコマンドライン単体で勉強するのではなく都度必要な時に勉強することでまずは良いと思います。

おすすめのWeb,JavaScriptの無料資料

MDN

JavaScript Primer

おすすめプログラミング学習サイト

ドットインストール

progate

Udemy

Recursion

「Rust」配列、スライス(Vector型)の数値での初期化

今回はRustで配列、Vectorで数値での初期化について解説します。

配列

コンパイル時にサイズが確定している必要があります。

OK

fn func() {
    const SIZE: usize = 10;
    let array: [usize; 10] = [1; SIZE];
    println!("{:?}", array);
}


[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

NG

「expected value, found builtin type usize」でエラーとなる

fn func(size:usize) {
    let array: [usize; 10] = [1; usize]; <- ここ
    println!("{:?}", array);
}

Vector

Vector型の初期化はVec::new()もしくはマクロのvec![]で行えます。

OK

fn func() {
    const SIZE: usize = 10;
    let v = vec![1; SIZE];
    println!("{:?}", v);
}

[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

OK

fn func(size: usize) {
    let v = vec![1; size];
    println!("{:?}", v);
}

[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

「JavaScript(TypeScript)」Array(配列)に格納されているオブジェクトを特定のプロパティで抽出「filter」

今回はArray(配列)に格納されているオブジェクトを特定のプロパティで抽出をArray.prototype.filter()を用いて行います

サンプルデータ

type ArrayObj = {
  id: number
  name: string
  category: 'a' | 'b'
}

const arrayObj = [
  { id: 1, name: 'taro', category: 'a' },
  { id: 2, name: 'hanako', category: 'b' },
  { id: 3, name: 'ume', category: 'a' },
]

Array.prototype.filter()

idでfilter

const filteredArrayObj = arrayObj.filter((obj) => obj.id === 1)

[ { id: 1, name: 'taro', category: 'a' } ]

nameでfilter

const filteredArrayObj = arrayObj.filter((obj) => obj.name === 'hanako')

[ { id: 2, name: 'hanako', category: 'b' } ]

categoryでfilter

const filteredArrayObj = arrayObj.filter((obj) => obj.category === 'a')

[
  { id: 1, name: 'taro', category: 'a' },
  { id: 3, name: 'ume', category: 'a' }
]

「JavaScript(TypeScript) 」Array(配列)に連番でnumberの初期値設定方法「map,for」

今回はJavaScript(TypeScript) Arrayに連番でnumberの初期値の設定方法をmapとforを使って解説します。

解説では0オリジンで0から9までの10個の連番、1オリジンで1から10までの10個の連番を例で解説しています。

Array.prototype.map()

0オリジン

const arrayNumbers = [...new Array(10).keys()]

[
  0, 1, 2, 3, 4,
  5, 6, 7, 8, 9
]

1オリジン

keys()の後Array.prototype.map()でArray(配列)の中身を全て1を足しています

const arrayNumbers = [...new Array(10).keys()].map((number) => ++number)

[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]

for

0オリジン

let arrayNumbers: number[] = []
for (let i = 0; i < 10; i++) {
  arrayNumbers.push(i)
}

[
  0, 1, 2, 3, 4,
  5, 6, 7, 8, 9
]

1オリジン

let arrayNumbers: number[] = []
for (let i = 1; i < 11; i++) {
  arrayNumbers.push(i)
}


[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]

Viteのテンプレートを用いてReact + TyepScriptアプリ開発環境の構築

次世代フロントエンドツールと言われているViteのテンプレート機能を利用しReact + TypeScriptの開発環境の構築例

前提

node.js,npmが利用できること

node -v

v16.15.0

npm -v

8.5.5

環境構築

任意のディレクトリでviteで初期化

npm init vite@latest

設定はvite-projectは任意のプロジェクト名、reactを選択しTypeScriptで実装するためreact-tsを選択

npm init vite@latest
? Project name: › vite-project
? Select a framework: › - Use arrow-keys. Return to submit.
   vanilla
    vue
❯   react  
    ...
? Select a variant: › - Use arrow-keys. Return to submit.
    react
❯   react-ts 


✔ Project name: … vite-project
✔ Select a framework: › react
✔ Select a variant: › react-ts

初期化が完了したらプロジェクトディレクトリに遷移

cd vite-project

パッケージのインストール

npm install

インストールが完了したらpackage.jsonを確認

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.0.0",
    "typescript": "^4.6.4",
    "vite": "^3.0.0"
  }
}

"scripts"で定義されている"dev"がdev serverの起動コマンドなので実行

npm run dev

レスポンスで出力されたLocal(今回はhttp://127.0.0.1:5173/)に指定されてるURLをコピーしブラウザでアクセス

> vite-project@0.0.0 dev
> vite


  VITE v3.0.0  ready in 381 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

画面が表示されれば起動成功(環境構築成功)

Viteの初期アプリ起動画面

VSCode Pythonインタープリタの設定

Pythonの開発をVSCodeで行っていた時にVSCodeのバージョンアップ後からpython.pythonPathが設定できなくなり調べたメモ

普段なら画像の赤枠にpythonPathを選択するための表示があるのだがないため選択ができず調べてみると

vscode-python-select-interpreter-1

どうもpythonPathはdeprecated(非推奨)になっていたようで変わりにコマンドパレット(macの場合「CMD + Shift + P」)からpython select interpreterインタープリタの選択ができるようになり

vscode-python-select-interpreter-2

事前に設定、インストールしてあるPythonpipenvなどで構築した環境のバージョンが選択できるようになる

vscode-python-select-interpreter-3

nodenvで利用したいNode.jsのバージョンが無い時の対処法

nodenvでNode.jsのバージョン管理をしているのですが、v16の最新を利用したくなり確認をするとnodenvのlistに最新がなかったため最新を取り込むための備忘録

先に解決方法を書くとnodenvがインストールされているディレクトリに遷移しgit pullで最新化することで解決できます

確認

現在の利用しているNode.jsのバージョンを確認します。これをv16の最新にしたいと思います

nodenv version
16.2.0 (set by /Users/xxxxx/.nodenv/version)

確認をすると16.4.2までしかありません。このエントリー時点では16.14があるはずです。

nodenv install --list

...

16.0.0
16.1.0
16.2.0
16.3.0
16.4.0
16.4.1
16.4.2

解決

nodenvを管理してるディレクトリに遷移しgit pullします

cd "$(nodenv root)"/plugins/node-build
git pull

確認すると16.14.2が表示されました

nodenv install --list

...

16.0.0
16.1.0
16.2.0
16.3.0
16.4.0
16.4.1
16.4.2
16.5.0
16.6.0
16.6.1
16.6.2
16.7.0
16.8.0
16.9.0
16.9.1
16.10.0
16.11.0
16.11.1
16.12.0
16.13.0
16.13.1
16.13.2
16.14.0
16.14.1
16.14.2