👨‍💻

エンジニアロードマップ

に公開

自己紹介

はじめまして。
とある企業で情報システム部に所属するものです。
企業名は...面倒ごとになってもあれなので、内緒ということで...

情報システム部なので、ガチガチのエンジニアではないです。
が、ちょっとした機能の開発やらデータの抽出やらは担当しておりまして、
DB操作・SQLは日常的に使っています。
一応IPAのデータベーススペシャリストは取得しておりまして、DBエンジニアとしては
ジュニアレベルにはいるのかな~と...思いたい。

ただまあ、それ以外はからっきしなので、いろいろ勉強しつつちゃんとしたジュニアエンジニアになろうと思った次第です。
で、どうせなら、その軌跡は残したうえで後の人がちゃんとジュニアエンジニアになれるロードマップがあればなぁということで記事を殴り書きしていきます。

失踪しないようにしつつ...ちょっとずつすすめていければなあと思いますので、生暖かい目で見てもらえれば幸いです。

投稿予定の内容

  1. プログラミング勉強中の落とし穴
  2. とりあえずプログラムを書いてみよう
    1. Excel VBA
    2. Google Apps Script(GAS)
  3. HTMLを動かしてみよう
  4. 簡単なWEBアプリを作ってみよう
  5. WEBアプリを公開しよう

プログラミング勉強中の落とし穴

実際に私も何度も落ちてきた落とし穴です。

  • 勉強するべき言語は何?
  • どうやって勉強すればいいの?
  • 環境構築が...エラーが...

この辺も挫折を誘発する一因ではあると思いますが、
で、結局何ができんの?何すりゃいいの?
という「ゴールが見えないこと」が最大の要因じゃないかなーと。
少なくとも私はこれに何度も陥ってきました。


初心者にオススメの言語はPythonです!

ほうほう、Pythonがオススメなのか!
よし、Progateに登録してPython勉強するぞ!

.........
......
...

条件分岐も繰り返しも、関数も理解したぞ!
これで俺もPythonマスターだ!

def fizz_buzz(i:int)->str:
    if i % 15 == 0:
        return "FizzBuzz"
    elif i % 3 == 0:
        return "Fizz"
    elif i % 5 == 0:
        return "Buzz"
    else:
        return str(i)

for i in range(100):
    print(fizz_buzz(i+1))

よっし、完璧に動いた!気持ちいーっ!
... んで、これ何に使えるん?次は何すればいいの...?


あるあるじゃないですかね?
少なくとも私は何度落ちたかわからん落とし穴です。
(特にPythonだと仕事で使おうとすると各種インストールが必要で、許可が必要だったり...)

なので

  1. とりあえず役に立つものを作る
  2. 簡単なWEBアプリを作ってみる
  3. 実際にWEBアプリをリリースしてみる

を明確に「ゴール」として定め、そこに向けて歩いていければと思います。
プログラミングのコードそのものの勉強はそこそこに「とりあえず動かしてみようぜ!」を目指すということですね。
※コードそのものの勉強は、それこそProgateとか何ならYoutubeとかでも勉強できるはず

とりあえずプログラムを書いてみよう

後述のExcel VBAかGoogole Apps Script(GAS)のどちらかから取っつくことをお勧めします。
前者は業務でExcelメインで使う人、後者はスプレッドシートをメインで使う人向けです。

メリットとしては

  • 環境構築が不要 Excelかスプシがあればいい
  • すぐに役立てることができる

という点が大きいですね。
コンソールに文字表示するより具体的に効率化できそうというイメージを持てるのが最大のメリットです。
人によってはここだけで満足するかもしれません。

Excel VBA

Excel VBAの基礎

Google Apps Script

Google Apps Scriptの基礎

HTMLを動かしてみよう

さて、ある程度プログラミングというものを触ってみたうえで、いよいよWEBアプリの作成を進めていこうと思います。

さて、そもそもWEBアプリとは何か?ですが

Webアプリケーションとは、Webの仕組みを活用したアプリケーションソフトウェアのことです。手元の端末にダウンロードする必要がなく、ネットワークを経由してWebブラウザ上で動作します。ブログなどの一般的なWebサイトとは異なり、動画の視聴や商品購入などが行える高度な機能を持ち、ユーザーとサービス提供者との双方向のやりとりが可能です。また、各種SNSのブラウザ版やECサイトなど、幅広い分野で利用されています。
(参照:https://www.skygroup.jp/software/embedded/mobile/article/01/)

とのこと。
ざっくり「ブラウザで使えるツール。お決まりの画面を表示するだけではなく、入力・操作に応じて動作する」ものです。
YoutubeもTwitterもWebアプリになりますね。この2つはスマホアプリもありますが。
X?知らない子ですね

で、最終的には「操作に応じて動作する」というところを目指すわけですが、まずは「お決まりの画面を表示する」というところからやっていきましょう。

まずは、適当なテキストファイルを作ってください。

そして適当な文字を入力して保存

ここまで出来たらファイル拡張子を「.html」に変更しましょう。
※ファイル名も日本語を含めない形にすること推奨

拡張子(.htmlとか.xlsxとか)が見えないよ~という人は、下記にしたがって設定を変更してみて下さい
https://support.hp.com/jp-ja/document/c01967336

そして作成したhtmlファイルをダブルクリックで開くと...?
どうですか?ChromeやEdgeで開けましたか?

はい、というわけで「お決まりの画面を表示する」に関して、文字を表示するだけですができましたね。
ブラウザで表示する...というとなんか特殊な対応みたいに思うかもしれませんが、

  • .docsはワードで開く
  • .xlsxはエクセルで開く
  • .csvもエクセルで開く これはやめてほしい

みたいな感じで、「.htmlはブラウザで開く」というだけです。
※正確なところを言うと違いますが、とりあえずそんな感じでとらえてもらえれば

そして、エクセルやワードにお作法があるように、.htmlにも書き方のお作法があります。
テキストボックス、ドロップダウン、チェックボックス、ボタン...などなど。

基礎を下記にて触れていくのでぜひ読んで・書いてみてください。

HTML基礎

簡単なWEBアプリを作ってみよう

サーバーとは?

Webアプリを作ってみるにあたって、WEBサーバー・APサーバーという概念は理解しておく必要があります。
それぞれの概念の説明をする前に、そもそもサーバーって何?というところから説明しようと思います。
※理解している人は飛ばしてしまってください

さて、「サーバー」と聞いてちょっと苦手意識がある人も多い気がします。
実際私もそうでしたし、インフラの担当者が話しているところを聞くと未だに???ってなることも多いです。
そのぐらい奥が深いというか、専門にしようとすると別途ちゃんと勉強する必要がありますが...
ここではざっくりしたイメージだけ説明できればと思います。

サーバーとは、一言で言うとコンピューターです。
...いやそれはわかってるよ!となるかもしれませんが、実はそれ以上でもそれ以下でもありません。

ゲーム・アプリ・システム...これらがちゃんと使えるようにサービスを提供(serve)するコンピューターなのでサーバー(server)です。
しいて言えば、何十人・何百人...と対応する必要があるのでスペックが高かったり、24時間安定して動き続けるようになっていたりといった点が、私たちが通常使用しているPCとの違いでしょうか。

一方で、サーバーに「こういうサービスをちょーだい」と依頼する依頼者、つまり私たちが通常使っているPCやスマホのことを依頼者という英単語からクライアント(client)と呼びます。

出典:https://prau-ict.com/network/client-server-system/

Webサーバーとは?

一口にサーバーといっても、いろいろな種類があります。
メールサーバー・ファイルサーバー・DBサーバー...
Webサーバーはその中の一種で、Webページを使えるようにするサーバーです。

ここまで順番に読んでいただいていれば、「HTMLを動かしてみよう」のセクションで適当な.htmlファイルを作ってブラウザに表示させていたかと思います。
私は、デスクトップ上にZennというフォルダーを作って、そこにtest.htmlというファイルを置いてこれまでの記事を作成してきました。

...さて、このファイル、皆さんからアクセスできるでしょうか?
できないはずです。勝手に私のPCの中に入って、そこにおいてあるファイルの閲覧ができないことは感覚的にわかるかと思います。
※できた!という人いらっしゃればヤベー事態ですので、こっそり私に教えて下さい、切実に

しかし、実際のWebアプリとして使用する場合、多くの人が開ける状態じゃないと困るわけです。
配置した.htmlファイルからHTMLデータを提供できる状態にして、HPなど各種サービスを提供できるようにするサーバーをWebサーバーと言います。
なお、画像ファイルやHTMLのデザインを担当するCSS情報もWebサーバーが担当する部分になります。

AP(アプリケーション)サーバーとは

前述のWebサーバーがあれば、誰が見ても見かけが変わらないページは問題なく提供できます。
※誰が見ても見かけが変わらないページのことを静的ページと言います。ホームページなどが該当しますね。

一方で、例えばログインユーザーによって表記が変わったり、入力した内容を保存したりするような処理はHTMLだけではできません。
ユーザーの操作に応じて必要な処理を行うのは、JavaやPHP、Pythonなどといった聞いたことあるであろうプログラミング言語によって制御されています。
こういったプログラミング言語を実行するサーバーのことをAP(アプリケーション)サーバーと言います。

なお、規模の小さいアプリであればWebサーバーとAPサーバーを1つのサーバーが併任することもあります。

DB(データベース)サーバーとは

APサーバーとセットで説明されることが多い、DBサーバーについても軽く触れておきます。
読んで字のごとくデータベースを置いておくサーバーにあたり、データベースとは一言で言うとデータの置き場所です。
データベースは、情報の保存・更新に特化したDBMS(データベースマネジメントシステム)によって管理されています。

例えば、ログイン処理をする場合

  1. ユーザーがログインページにアクセスする
  2. Webサーバーが、ログインフォームのHTML情報をユーザーに渡す
  3. ユーザーがID/PWを入力する
  4. 入力された内容をWebサーバーで受け取る
  5. Webサーバーで受け取った内容をAPサーバーに渡す
  6. APサーバーからDBサーバーへ、「入力されたID/PWが正しいか?」を問い合わせる
  7. DBサーバーは入力されたID/PWのペアが存在しているかをAPサーバーに返す
  8. APサーバーが認証処理を行い、その結果をWebサーバーを介してユーザーへ返す
  9. ログインできた場合は、APサーバーからDBサーバーへ最終ログイン日時を更新するリクエストを送る

みたいな全体処理になりますね。

出典:https://teech-lab.com/server-application-db/775/#google_vignette

実際にWebアプリを作ってみよう

実際にWebアプリを作ってみよう

WEBアプリを公開しよう

Webアプリをデプロイしよう

終わりに

ここまで一切のエラーなくたどり着くことは稀だと思います。
まずはデプロイお疲れさまでした。

私もChatGPTと会話しながらアプリのデプロイまで行ったのですが、ちょくちょく入ってくる嘘が厄介で...

  • CockroachDBオススメです → Postgresちょっと古いのでDjangoのバージョン落とさないとダメです
  • supabaseオススメです → IPv4に対応してないので、無料では使えないですよ?
    などなど...
    ガチ許さん

ここまで出来れば、大まかに全体像はつかめたと思うので、個別技術を深める勉強もしやすくなっていると思います。

  • Linux
  • Django
  • AWSなど、よりメジャーなクラウド
  • セキュリティを意識したコード
    とか。

後、今回はフロントもDjangoで対応しましたが、基本的にはフロントエンドはReactなどを使って、Djangoはバックエンドを担当するという分業のほうがスタンダードなので、そこの学習とかですかね。

「何を勉強したらいいかわからない」という状態から脱却する一助になっていれば幸いです。

Discussion