新人Web系職業プログラマーのための「丁度よいサイズの課題集」

プログラム上達に必要なものは？

モチベーションでしょうか？あるいはセンスでしょうか？

『プログラム未経験者大歓迎』の求人に募集してきた方々は、少なくとも自分で学習するモチベーションはなかったはずですし、センスについては未知数です。そんな方々にプログラム上達してもらうためには何を与えればよいでしょう？

Webサイトには解説記事は溢れていますし、少しお金を出せば詳しく解説してある本もたくさんあります。それらを読む様に口を酸っぱくして言い続ければいいでしょうか？気分が乗らない学校の宿題にようやく手をつけた子供に「宿題をやったのか？」と確認するおかあさんのようになっていないでしょうか？

意見は色々あると思いますが、わたしは、「丁度よいサイズの課題」を用意することがよいのではないかと思っています。

丁度よいサイズの課題集

「丁度よいサイズの課題」とは、業務で役に立つ可能性が高く、そこそこ頑張れば解決でき、達成感が得られ、挫折しにくい課題を指します。

「武道の達人は対峙しただけで相手の実力が分かる」という言葉をご存知でしょうか。経験を積んだ人間には未経験の人間の隙が見えるが、未経験者本人は自分の隙にまったく気づいていないという状況があります。スポーツや対戦ゲームなどでも同様のことを経験された方も多いと思います。

これは、経験者が相手と向き合い、相手の技量を理解し、相手が抱えている問題を解決する課題を提供することで、未経験の人間に正しい知識を与えて導く事ができるという事も示唆していると思います。

新たに新人の部下を持った先輩職業プログラマーの方々は、新人の教育に苦心されていることかと思いますが、およそ新人の皆さんが躓くところには傾向があるので、Webサイトを検索したら「丁度よいサイズの課題集」が出てきてもよいのかなぁと思うのですが、意外と出てきませんでした。

そこで、勉強会でやった課題を「丁度よいサイズの課題集」のメモとして残してみようと思いました。

Web 編

Microsoft Learn : Azure の基礎

• 技術 : Azure

『プログラマーのための』というタイトルであるが、いきなりクラウドサービスの学習推し。
Microsoft が公開している無料の e-learningで10時間程度の内容。経験値も貯まるしレベルも上がる。

Azure も AWS も GCP も名前は昔から変わらないのに、知らないうちにIoTやAIなども抱え肥大化多様なニーズに応える一方で、初学者にとってはキメラの様な難解なサービスとなってしまった。

これらのサービスは本で学習すると退屈で、実際に画面を触って操作しないとなかなか身につかない傾向にあるが、Microsoft Learn : Azure の基礎は、系統立てた分かりやすい解説の中に実際にAzure上で画面を触って VM を作って Wordpress のサイトを作る操作を行う演習などもある優れすぎの教材だし、サーバーがないとサイトも公開できないので、プログラム始める前にとりあえず触っておいても損はないだろう。

合わせて読もう：
Microsoft のクラウド Azure の入門講座を和訳した (前編) クラウドについて - IaaS, PaaS, SaaS, クラウドへの移行 #MSIgniteTheTour
Microsoft のクラウド Azure の入門講座を和訳した (後編) Azure について - どんなサービスがあるの？ #MSIgniteTheTour

Emmet を使い始める

html や css の記述は反復した記述が多くなりがち。タイピングを省略する方法があることをまずは知っておこう。覚えるのはやりながら。

VS Code でEmmet使ったらHTML書くの速くなった～‼

よく見るレイアウトのWebサイトを作る

• 技術 : html5, css3, bootstrap4

ナビゲーション＋コンテンツ、という構成が割とよく見るWebサイト。
Bootstrap 等のコンポーネントライブラリを利用して開発することが多いが、cssの基礎を理解していないとちょっとした仕様変更に対応できない。
また、Bootstrapをいきなり使うと「なんかよく分からないけどコピペして使う」ものという認識になりがちである。（自分調べ）

本課題では、まずはフラットな html + css でサイトの枠組みを作成し htmlとcssを理解し、その後 Bootstrap で同じ課題に取り組み Bootstrap でできること、できないことを学習する。

1) html + css で、各種ナビゲーションを作ってみる

(問題)
以下サイトを参考に各種レイアウトを html + css で作成する。

備忘録

(応用問題)

1. 上部ナビゲーション部に、ロゴ、メニュー、ログインリンク等、上下左右に部品を配置する
2. 上部ナビゲーションを固定する
3. ナビゲーション部に実際にメニューを追加する
4. メニュークリックで、コンテンツ部のページ内リンクへスクロールする
5. レスポンシブ：横幅480px以下でハンバーガーメニューを表示、ハンバーガーメニューにプルダウンでナビゲーションメニューを作る
6. よく見るサイトを観察して簡単に実装できそうな機能を探し移植する

2) リスト表示

(問題)
以下サイトを参考にリストメニューを html + css で作成する。

CSSができる人とできない人では何が違うのか？(レイアウト編)

(応用問題)

1. レスポンシブ：横幅480px以下で、リスト→カードになるように css を修正

3) html + bootstrap で 1), 2) の課題をやってみる

参考：
Bootstrap

javascript 電卓

• 技術 : javascript, 変数スコープ, 関数

ミニプログラムでプログラムの基本を学ぶ。Bootstrap + jQuery 版 / Vue 版を作ってみるとよさそう。

(問題)

1. 四則演算が行える電卓を作成

ミニプログラムでプログラムの基本を学ぶ。

javascript の文法自体がよく分からない場合は『10日でおぼえる』の様な本を探して学習するのも良いと思う。
中古の本を探せば350円程度で買えたりもして財布にもやさしい。

参考：
10日でおぼえるJavaScript入門教室 第3版 (10日でおぼえるシリーズ) (日本語) 大型本 – 2012/2/23

DataTables と json

• 技術 : javascript, Bootstrap, DataTable, json

json を制するものは javascript を制する、とは誰も言ってないけど必修科目。とりあえず json データを作って表示してみよう。

(問題)

1. DataTables のサイトを参考にテーブル表示をする。
2. テーブルのデータが html に直接記述されているのを、json を読み込んで表示するようにする。

(応用問題)

1. ヘッダを変えてみる
2. 他のデータを読んでみる

Chartjs と json

• 技術 : javascript, Bootstrap, Chartjs, json

グラフ表示ライブラリ。見える化とかDXとかとは切っても切り離せない。触っておこう。

(問題)

1. Chart.jsを参考にグラフを作成してみる。

参考：
Chart.jsでグラフを描画してみた

リーダブルコード

そろそろ自己流ではなく『正しい』書き方を覚えよう。
古い本でサンプルコードの言語も古いので若干読みづらい。以下の記事にポイントがまとまっているのでまずはそこから読むといいかもしれない。

• リーダブルコード ~実務未経験が知っておきたい15のポイント~

オブジェクト指向設計

本格的なプログラムを書く前に『オブジェクト指向設計』を理解しておこう。

• ゲームで理解するオブジェクト指向設計の基本
• ゲームで身につけるオブジェクト指向設計(実装編)
• オブジェクト指向は単なる【整理術】だよ

javascript タイピングゲーム

• 技術 : javascript, タイマー, 状態管理

(問題)

1. キーボードを模したボタンを配置。
2. 一定時間毎に、ランダムで任意のキーの色を変える。
3. 色の変わっているキーを押下すると正解、+1点。それ以外のキーを押下すると不正解、-1点。
4. 一定時間経過後、結果画面表示。

Todoリスト

• 技術 : javascript, jQuery, DOM操作

2020年現在、グーグル検索を行うと Vue で Todo を簡単に作るというのが検索されがちであるが、職業プログラマーの世界では未だに jQuery がポピュラーな印象。
本課題では、ページ初期化時の javascript プログラム初期化コード、event ドリブンコードの基礎を学習する。

1) todo追加[サーバなし]

(問題)

1. テキスト入力フォームとボタン配置
2. ボタン押下で、ページ下部にフォームに入力された内容をdivタグで追加

(応用問題)

1. 自動採番で連番登録

2) todo追加[サーバあり]

(問題)

1. server : nodejs + express でサーバを作る。受信データをテキスト保存。
2. client : $.ajax で通信。

(応用問題)

1. plant uml でシーケンス作成

Excelからデータ抽出

• 技術 : nodejs, vue, vuetify, typescript

アクセス解析データや、試験結果集計データなど。Excelマクロや関数、ピボットテーブルを駆使して表やグラフを作る事が多いが、データ解析はプログラムを覚えるのによい題材。日々の雑務をプログラムで解決するのは単純にテンションが上がる。

(問題)

1. Excelから興味のあるデータを抽出し、json保存。
2. html読み込み。Datatable で整理して表示、chartjsなどでグラフ化して表示。

(応用)

1. vue + vuetify + typescript で表示

開発環境編

開発環境構築はなぜか抵抗がある。コマンドを叩けない。
アプリケーションエンジニアとインフラエンジニアとの境界が曖昧になりつつあるので、とりあえずは何でもインストールしよう。

事前準備

職業プログラマーは「最新」のツールが使えればよいというわけではない。案件に応じてある程度ツールの使い分けが必要になる。
様々なツールをインストールして使いこなせる様になろう。
PCが汚染されるのが嫌であれば、必ずしも全部入れなくても大丈夫です。

(エディタ)

• VS Code
  • Live Share Extension Pack
  • Tabnine
  • GitLens
  • Markdown Preview Enhanced
  • Plant UML

VS Code は Extension をガンガン入れて自分好みに調教するのが基本。
トレンドがすごい勢いで変わるので、ここでは最低限のみ紹介。
Live Share は不要そうですが、リモートワークには必須の人智を超えた便利ツールなのでオススメしてます。

参考:
VSCode Live Shareの使い方をしっかり知る

• サクラエディタ
• 秀丸

※レジェンダリーエディター。もう使うことないと思ってましたが…お客先環境などでどうしても...

• vi

Linux 標準エディタ。Windowsのメモ帳を想像すると火傷するが覚えると相当強い。
キーボードから１㍈も手を離したくない人向け。
参考：viコマンド（vimコマンド）リファレンス

• emacs

Linux 上で使うエディタ。少々癖が強い。ウィンドウ分割できたり強いが要インストール。
参考：Emacs教習所に行ってきた(チートシート付き)

(GUI DB操作)

• MySQL Workbench
• A5:SQL Mk-2

(ER作成)

• ERMaster

参考：DB設計の神ツール「ERMaster」なら、ここまでできる (1/3)

(AWS)

• AWS Toolkit for Visual Studio Code

AWS操作が大体できる VS Code Extension。入れよう。

• MSP360 Explorer

S3操作用。Explorerの様な見た目で使いやすい。
※Cloud berry Explorer → MSP360 Explorer に名前変わってました

Chocolaty

Windows用パッケージマネージャ。Linux なら yum、mac なら brew。これがなくて長い間開発者達からWindowsが迫害されていた。
※個人の感想です。

コマンドで(ほぼ)何でもインストールできる。入れておこう。
ついでに node 環境を作っておこう。

(問題)

1. Chocolaty をインストールする
2. nodist をインストールする
3. yarn をインストールする

Vagrant

壊しても誰にも怒られない自分専用のVM。作ろう。
vagrant up / destroy で、任意のOSのVMを簡単に作ったり壊したりできます。
VirtualBox に iso イメージ用意して... とか昔はVM作るの結構大変でした。
とりあえずLAMP環境を作れると言えるのがよいと思いますが、apacheではなくnginx推しにしてます。
centos やmysql は複数バージョン試してみるとよさそう。

(問題)

1. Vagrant をインストールする
2. Vagrant 上に centos7 をインストール
3. nginx を入れ service 登録をする
4. mysqlを入れ service 登録をする
5. php を入れる

Ansible

コマンド一発で環境を作れる構成管理ツール。手順書見ながら環境作るのはもうやめよう。

参考：
vagrant up時にansibleで開発環境を作る

(問題)

1. Vagrant の課題で作った環境を Ansible で作る

Docker

WSL2 様子見中…すいません。
Windows環境を壊さず開発するのであれば、Vagrant 上で開発するとよいです。

Vue 環境構築

Vue の案件も増えてきたので環境構築からできるようになっておこう。

(問題)

1. 【Vue.js】Vuetify と TypeScript を使用した環境を構築してサンプルプロジェクトを立ち上げるまでの手順 を参考に、Vue 開発環境を構築する

React チュートリアル

React の案件も増えてきたのでチュートリアルをやっておこう。

React やってみたら超簡単だった話(2020年11月版)

ドキュメント編

そもそも「プログラム」は「日本語の仕様をプログラム言語に翻訳する作業」なので分かりやすい日本語が書けないと分かりやすいプログラムは書けない。
予算や工数の都合で詳細設計は行わないことが多いかと思うが、ビジネスロジック層は外部設計通りになっているべきであるが、そうなっていることは稀である。
開発の方法論としてデザインパターンやオブジェクト指向などは挙げられるが、外部設計とリンクした開発手法というのが今ひとつ存在しない事も一因かもしれない。コーダーで数年経験を積んでからSEとして設計というキャリアパスが一般的かと思うが、レベルアップ時のステータスボーナスを全てコーディングに割り振ってしまっているせいか、コーディングの熟練度だげ上げているせいか、設計ドキュメントが書けなくて次のキャリアに進めないケースが散見される。

職業プログラマーとしては、ユーザー目線と開発目線、両方の理解が必須であるため、初期よりドキュメント作成も並行して行っておくことが望ましいと思う。

ユーザ目線と開発目線と言われてもピンとこないかもしれないので一つ例を上げておく。

• ユーザ目線：

購入したアプリや、無料のソシャゲの操作性が悪いと些細なことでも「クソが」と思うが、それを作るのがどれだけ大変か気にもしない。

• 開発目線：

画面仕様書記載の仕様の操作性が悪くても疑問に思わないが、品質の良いコードを書くべく鍛錬は怠らない。

文章力を上げる

基本はそうそう変わるものでもないので古めの本を探して安く学ぶのがオススメ。
コミュニケーションロスで消耗するのは、無駄 of 無駄なので真っ先に取るべきスキル。
ここがホビープログラマーと職業プログラマーの違いと言えよう。

• 文章教室

結城先生によるすばらしいページ。グループワーク形式で数人で課題に取り組みお互いにレビューすると効果が高いと思う。

• 一番伝わる説明の順番 (日本語) 単行本（ソフトカバー） – 2018/6/8

偉い人に「結論から言えや！」とか言われてイラっとする前に読むと心の平穏が保たれると思う。

• 仕事が速い人はどんなメールを書いているのか (日本語) 単行本（ソフトカバー） – 2017/3/15

Amazon Prime で無料で読めたけど、もう無料じゃなくなってた。残念。
読む人目線を理解できるエモい書籍。

• 1日10分のコピーライティングで鍛える伝える力

身の回りのものをおもしろおかしく伝える習慣を身につけましょう。

議事録

自分だけ知識ゼロなところ、周りの人間が分かってるつもりで話し合っているのを漏れなくメモる罰ゲーム的イベント。
実際は洞察力や推理力、書記力等々全ての能力が試される最高の訓練イベント。
漏れなくメモすることが最初の目標だが、プロジェクトにとって必要なことが必要な形で記録されることを目指したい。

手順書

口頭で説明を受ける事が多いと思うが、文書として残してみよう。引き継ぎの時にも使えて便利。

シーケンス

設計力が上がるのでガンガン書こう。
(参考)
PlantUMLと俺と彼女の危険なシーケンス図

設計書

読者を意識して、粒度や記載レベルが揃う様に書こう。

タスク管理編

Asana / Instagantt

Asanaは、軽量のチケットによるタスク・プロジェクト管理ツール。リスト表示やボード表示もでき、スラック連携なんかもある。Instaganttと連携するとチケットより自動でwbsが作られる。
taskline.xlsm や Redmine や bitbucket の課題管理で消耗していたらぜひ使ってみてほしい。

AsanaとInstaganttと、プロジェクト進行と、

IT業界編

バグがなく安定動作しパフォーマンスが優れたよいプログラムによってプロジェクトの炎上や、深夜や休日のメールやスラックも回避できている。ありがとう。ただ、この素晴らしいプログラムが直接お金を生んでいるのではなく、この素晴らしいプログラムによって動いているプロダクトがお客様（クライアント）の手に渡ってお客様、さらにはその先にいるお客様（エンドユーザー）を幸せにして初めてお金を生んでいる業界なのである。

『プログラムが金を生むのではなく、プロダクトが金を生む』業界

そう考えると、実はプログラムを書いてる時間というのはプロダクトのライフサイクルにおいてごく一部なのである。
いろいろな人がいろいろな仕事をしてようやくお金が生まれているという事を頭の片隅においておくと、一見不条理に見えていた世界を優しい世界に変えられるかもしれない。

• 職場の問題地図 ~「で、どこから変える?」残業だらけ・休めない働き方 (日本語) 単行本（ソフトカバー） – 2016/9/16

• システムの問題地図 ~「で、どこから変える?」使えないITに振り回される悲しき景色 (日本語) 単行本（ソフトカバー） – 2018/2/17

最後に

IT業界好きですか？プログラム好きですか？

楽しくない仕事は長くは続けられません。

「丁度よいサイズの課題」は、仕事を楽しむための考え方かと思います。
ですので、本稿の課題は上から順に全てやる必要はなく、自分にとって役に立つもの、楽しくやれそうなものを選んで取り組んだり、自分やレビューした先輩が課題を追加したりしてもらえたらと思います。

面倒くさい仕事を、「課題を細分化して丁度よいサイズの課題」に分けたり「物事を観察して丁度よいサイズの課題」として創出したりして、「丁度よいサイズの課題」とすれば、ソシャゲのイベントの様に、毎日少しずつこなせる仕事になるかもしれません。

そうこうしているうちに「顧客の課題」までもを解決できるような職業プログラマーに成長していたらいいなと思います。

※後半メモ的で課題感がなくてすいません。具体的に何か出てきたら追記します。
※不定期更新？