LoginSignup
3
5

More than 1 year has passed since last update.

骨までしゃぶりつくす「ぷよぷよプログラミング」(1/4)

Last updated at Posted at 2022-02-13

後続記事へのインデックス

背景

 世の中には情報システムを構築するための教材があふれていて、何から手を付ければいいかわからない人も多いと思います。筆者もそのような一人で、何を題材にし、自分のエンジニアリングの核を形成しようかと常に悩んでいます。ちなみにプログラミングの力量を示す一つの指標としてコンテストサイトの実力がありますが、筆者はAtCoderでは茶色であり、アルゴリズム的な観点でみれば駆け出しエンジニアと言っても差し支えないレベルです。全くの素人ではないものの、様々な分野で中途半端な力量だなと感じることが多く再勉強を試みてはその度に焦燥感を感じています。
 そんな中、目を付けたたのが「ぷよぷよプログラミング」です。詳細な説明はオフィシャルに譲りますが、「小さなころから慣れ親しんだゲームであるぷよぷよを作れる!」というモチベーションを刺激されました。この教材の概要はjavascript と html を用いてブラウザで上で動作するゲームを実装するというものであり、インフラではなくWebフロント寄りの学習教材です。一方で私のキャリアはWebフロント開発がほぼ白紙の状態で、流行りのTypesScriptやReactなどに触れてみたいなと目移りしている最中でした。しかしながら少し調べてみるとTypeScript もReact もjavascript やhtml を基礎としたものであり、この教材を始点として学習すれば基礎を鍛えられるので、長い目で見て有用だろうと考えて学習に踏み切りました。

目的

 これから記述していく一連の記事の目的は大きく4つです。

  • 目的1.「ぷよぷよプログラミング」で作成していく範囲のソースコードから javascript と html の技術を学んでいく
  • 目的2.「ぷよぷよプログラミング」のソースコードを理解することで、その仕様や設計を推測してドキュメント化する
  • 目的3. Markdown 記法での文書作成に慣れる
  • 目的4.「ぷよぷよプログラミング」に独自の機能追加を実施してみる

 目的1 に関しては、限定的な学習範囲となるため網羅的/体系的な理解はできないでしょう。ただし、学習の皮切りとしては最終成果物の目的がはっきりしていることもあり記憶に残りやすいと思っています。
 目的2 に関しては、開発現場にありがちなソースコードがあってもドキュメント類が少なく仕様や設計がわからない状態を想定しています。こういったケースではソースコードから仕様や設計をくみ取る必要があり、開発領域を問わず求められやすいエンジニアリング能力です。「ぷよぷよプログラミング」ではソースコードが与えられており、他の情報は無いに等しいため似たような状況です。言語や開発対象に応じてソースコードから拾うべき概念は異なるため、トレーニングの一環として実施しようと思います。そしてこれは自己満足ですが、これから「ぷよぷよプログラミング」に着手する方たちの参考資料になることを期待しています。
 目的3 に関しては、記述している通りで文書を書くことに慣れようと思います。
 目的4 に関しては、アドバンスな内容として用意しています。教材の外に飛び出して何か活動したいという宣言に近いもので、実現できるかは執筆時にはわかっていません。

目的の順番は私にとっての重要度の順ですが、記事作成の便宜を考慮すると目的2, 1 (,4)の順番で執筆を行うことになります。2に関しては for 文や if 文といった制御構文や変数宣言などの説明は行わず、私にとって重要だなと思った技術に関して言及するにとどめます。

事前準備

さて「ぷよぷよプログラミング」公式では気合による写経が課せられているわけですが、単にプログラムを打ち込むだけでは上記の目的は達成できません。そこでMDN Web Docsの入門文書を確認することにしました。それぞれの文法や用法を深く読み込むというよりは、HTML,CSS,Javascript がどのように相互作用するかを簡単に確認しました。

また、上位にプラスして書籍を一冊読みました。「ステップアップJavascript フロント電度開発の初級から中級へ進むために」という本です。知識を補うには良いと思いました。「ぷよぷよプログラミング」は各種の計算や状態管理などのゲームを構築するための要素がつまっています。その一方で、通信(書籍内ではAJAX)、パッケージ管理を含む開発環境そのもの(書籍内ではNode.jsとnpm)、Javascript 圏特有のトランスパイルなどに触れることができません。本来私が書籍を手に取った理由は、this とスコープを理解するためだったのですが、読みやすかったので通しで読んで上記のような内容も取り込むことができました。ただし、for 文やif 文などの制御構文が理解できていない人にとっては難しいと思いますので、より入門レベルに近い書籍を読むのをお勧めします。

最後に

 次回以降の記事で「ぷよぷよプログラミング」そのものに関して目的にそって言及していきたいと思います。以降の記事はある程度かけた段階で公開して、都度アップデートしていくかもしれません。
 念のためにですが、「ぷよぷよプログラミング」は改変や非商用利用においてのみの公開が認められているものの、基本的には商用利用できません。着手される方はいきなり突っ走らず、「ぷよぷよプログラミング」著作物利用許諾所を一読する必要があります。

3
5
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
5