三行
- プログラマは「提示された仕様を満たすものを作る」仕事
- 私から仕様を提示するので、実際に作ってみてください(ガイド／ヒント/模範解答付き)
- そのときに「どうやって作ったか」「どこで躓いたか」「どうやって解決したか」をメモしておくのがオススメ(面接で言うと好印象かも)
結局プログラマってどんな仕事なの？
どうも「応用勉強しねぇとなあ」と思ってたら何か5年くらい経ってました、デブです。
結構前に「IT系に転職したい」という友人の相談にちょくちょく乗ってまして。「で、どんなことしてんの？」って話になったわけですよ。
流石に「パソコンカタカタしてるよ」とか雑に流せないので以下のように説明したわけです。
- 「こういうプログラムを作って欲しい」っていうのがまとめられた「仕様書」をもらう
- 仕様書に書いてあることを満たすプログラムを作る
- (オプション)作ったものが本当に仕様書通りに動くか試験する
厳密にはちょっと違うんですけど大体こんな感じです。
もっと言えばほとんどの場合はチームで動いているはずなので「プログラムの一部分(モジュール)」を作ることになると思います。
因みにプログラマよりもお金が沢山もらえるのは「要望を元に仕様書を作る人」です。もっと言うと更にこの人を顎で使う人
で、色々話してるうちに「じゃあ実際に何か作ってみるか」という話になりまして。
そのときに出した課題をここにも投げときます。
プログラマ(エンジニア)という職業が気になっている人は挑戦してみてください。
準備はPCのみです。
エディタはメモ帳でも出来ますがvscodeという無料のエディタがおすすめです。
過程はメモしといた方がオススメ
老婆心でアドバイスしておくと、作成過程での「調べたこと」「分からなかったとこ」「思い通りに動かなかったとこ」「解決方法」をメモして面接時にエピソードとして話すと評価は高くなると思います。(特に現役エンジニアが同席している場合)
挑戦過程を記事としてアウトプットするのもいいと思います。
君に作って欲しいもの
簡易一人用ハイアンドロー。
以下のルール及び仕様に沿ったゲームを作成。
ルール
- 使用するカードはジョーカーを除いたトランプ1デッキ分で52枚(A～K * 各スート)
- カードの強さは以下の通り
- (弱)2 < 3 < 4 .... J < Q < K < A(強)
- 数字が同じ場合はマークで判定し、強さは以下の通り
- (弱)クローバー < ダイヤ < ハート < スペード(強)
- ゲームの流れは以下の通り
- デッキはランダムにシャッフルされた状態で開始
- 以下の手順を1ターンとし、デッキのカードがなくなるまで繰り返す
- デッキトップを表にして場に出す
- 更にデッキトップを裏側で場に出す
- 表側と裏側どちらのカードが勝つかを選ぶ
- 選んだカードの勝敗を当該ターンの勝敗とする
仕様
- 動作環境はchromeを想定
- HTML/javascriptを使用
- cssは任意
- 成果物は直接ブラウザでHTMLファイルを開いて動くものとする
- 開発過程は問わない
- ただし、全ての動作はjsファイルに記述する(HTMLファイルにはjsの処理を書かない)
- デッキの残り枚数、及び捨て場のカードは常に確認出来るようにする
- A,J,Q,K はアルファベットで表示する(数字で表示しない)
- カードを選んだあとは両カードの内容、選んだカード、勝敗をダイアログないしアラートで表示する(ex:♥6 vs ♣4 :selected ♥6 :victory)
- 累計ターンの勝敗数及び勝率(%)を常に表示する(例:x勝y敗 勝率z%)
- 勝率が少数以下になる場合、少数第二位を四捨五入する
- リセットボタンを用意し、常に初期状態に戻すことが可能にする
- ただし再読み込みは禁止とし、jsを使用して初期状態に戻すこと
- デッキを使い切った場合は勝率に応じて以下のダイアログないしアラートでメッセージを表示する(x～y% は「x%未満y%以上」を示す)
- 100% : PERFECT
- 100～60% : EXCELLENT
- 60～40% : OK
- 40～0% : NOOB
- デッキを使い切った場合、リセットボタンを「もう一度あそぶ」ボタンに文言を変更する
- 機能に変わりなし
- 「もう一度遊ぶ」ボタンで初期状態に戻った際は元の文言に戻す
作成ガイド(ヒント)
流石に丸投げだけして放置するほど鬼ではないので作成ガイドとヒントを置いておきます。
分からなくなったらヒントを元に調べてみてください。
UIの作成
まずはUIとなるHTMLを作成する。
ヒント
- 必要な要素(表示したいもの)は……？
- 要素に適したタグは……？
- divタグ,aタグ,inputタグとは……？
- HTMLにおける属性とは……？
カードとデッキ
次にカードの仕組みを作成し、それらを格納する変数を用意する。
ヒント
- オブジェクト指向プログラミングとは……？
- classとは……？
- カードに必要な情報とは……？
- カードの勝敗条件とは……？
- 処理内容を確認するには……？
- Console APIとは……？
- 多くの変数をまとめて管理するには……？
- 配列とは……？
- デッキ変数を作るには……？
- 連番で処理するには……？
- シャッフルするには……？
イベントの設定
続いてイベントを設定する。
イベント内で上記までで作成したものを組み合わせる。
ヒント
- そもそもイベントとは……？
- 必要なイベントは……？
- javascriptでHTML要素を取得するには……？
- document.getElementByIdとは……？
- イベントの設定方法は……？
- onclickとは……？
テスト
ここまで順調かどうかは分からないが、最後にはテストをしなければならない。
テスト内容を書き出して、実際にテストを行う。
- テストする必要があるものは……？
- 確認すべき仕様とは……？
- テストのやり方は……？
模範解答
一応模範解答を置いておきます。
出来た方は別解の参考程度にしてください。
詰んだ、って人はまず誰かに助けを求めてなるたけ自力で完成させて欲しいですが、なぞのばしょでレポート書いたレベルで詰む場合もあるんで最終手段、ということで。
最終手段として使った場合はコードとにらめっこ「どうしてこのコード動くのか」を読み解いて下さい。それも勉強の一つです。
因みに「コードを理解させること」が目的ではなく、「コードから処理を読み解かせること」が目的なのでコメントはほとんどありません。
あとがき
因みに相談してきた友人はインフラエンジニアになったのでこの課題はあまり意味がなかったです
最近はIT就職に向けてやれプログラミングスクールだのやれ資格を取れだのと言われることが多いと思います。
持論ではありますがプログラマに限った話で言えば資格だの何だのの前に「まず自分で手を動かせるかどうか」が重要だと思います。
別に上記のことを否定しているわけではないですけど(良い感情を抱いていないのは事実ですが)、結局無限に手動かしてる方が強くなる、と思ってます。
私がそのスタイルでやって、技術そのものでそれなりに信頼を得てきたっていう経験からの持論です。(あと普段棲息してるのが同人やゲーム界隈なので脳筋求道スタイルis最強というツイートが定期的にバズってる)
勿論勉強そのものは大事です。何でもそうですが一生勉強です。
特にプログラマは技術革新が早く、故に流行り廃りのサイクルも早く、重ねて用途や得意業種や環境によって使う道具の種類も千差万別なので尚更です。
私が重要視しているのは勉強する環境やモチベーション、目的です。
ちょっとお気持ち表明入りましたが、何はともあれこの記事がプログラマに興味がある人にとって有益になれば嬉しいです。
なんかあんまおふざけ挟めなかったな……
興味が出てきた！プログラマになった!もうプログラマだけど読むだけ読んだ！という人は手前味噌ですが以下の記事も読んで頂ければ。
この記事のタグはどう付けたもんか……。