個サ作 #2 PG基礎編ロードマップのご案内

Haguruma J

2024年2月3日 07:00

こんにちは。

『個人サイトの作り方』の連載を今回から本格的に始めていきます。

第1章　VBAでプログラミングの基礎学習
第2章　Web開発の基礎学習
第3章　個人サイトの開発

という3章構成のうち、今回は第1章の1回目です。

まずはこの章で何をするのかを説明します。習得できることや作成するプログラムを明らかにしていくので、これで前方の視界を明瞭にしていきましょう。

第1章のロードマップ

この章ではプログラミングの基礎を学習いただきます。

みなさま、各々最終的に着手したいプログラミング言語はVBAブイビーエーとは異なるかもしれませんが、開発ノウハウやロジックの組み立て方はVBAブイビーエーでも十分に習得できます。

ですので、VBAブイビーエーを習うことが本意ではなかったとしても将来的にここでの学びが役立つことは私が保証ほしょうします。

では、以下から第1章の構成こうせい及び学習を通して作成する機能を案内します。

基礎の基礎

目次をご覧になった段階で「あ、主にカレンダーを作るんですね」と気付かれたとは思うのですが、カレンダーの開発に入ろうにもプログラミングの基礎の基礎に関する学習はさすがに必要です。

文字の書き方を学ぼうにも鉛筆の持ち方さえ知らないのでは先に進めない、みたいな話ですね。

ですので、最初にちょっとだけ基本的なことをレクチャーします。下図のようなことをします。

今の段階ではなんのこっちゃわからなくてOKです。「へ～」と思っててください。

ここで開発に必要なExcel上の設定や最低限の操作なんかもすべて案内するので、スタートテープを切るための準備と捉えてください。

#3, #4でやります。

カレンダーLv.1

基礎を抑えたらここから開発の始まりです。

学習を通してカレンダー機能を少しずつ高度化していく、という流れです。まずは下図のような機能を作りましょう。

「1日」から「31日」をシート上に出力する、という処理をしています。

ここではプロパティと順次処理、デバッグを学びます。連載の回次は#5です。

カレンダーLv.2

レベル2では反復処理はんぷくしょりを学びます。「反復」というと体育の授業でやらされる反復横跳びを想像してください。同じ動きを何度もしますよね。右にいったり左にいったりの。

そう、つまり繰り返しの処理です。

こんなものを作ります。「カレンダーLv.1と同じではないか」と思いました？。はい、酷似しています。でも中身はしっかりレベルアップしていますのでね、ご安心ください。これも#5でやります。

カレンダーLv.3

実はレベル1, 2には月の概念がありません。とにかく1から31までを出力するのみだったのですが、レベル3からは月を考慮するようになります。

ご覧ください。

ほら、最初に「4」を入力してから実行することで30日まで出力しています。

月の数字によって出力を30日までやるのか31日までやるのか結果が変化する・・・分岐処理ぶんきしょりを学びます。条件によって分岐するんですね。

ここでは他にエラーチェックと関数かんすうも学びます。連載の回次は#6, #7です。

ここまででプログラミングの3大要素である順次処理じゅんじしょり、反復処理はんぷくしょり、分岐処理ぶんきしょりの学習が完了します。基本を抑えたので次は演習問題にいってみましょう。

演習問題：世界のなべあつ

演習問題というと身構える方もいるかもしれませんが、基本的にこれまで通り私と二人三脚で進みます。考える機会もご用意していますが、考えなくても大丈夫です。

さて、もしかすると「そもそも『世界のなべあつ』って何？」と思われた方もいるかもしれませんね。

主に2000年代に活躍した芸人さんのお名前でして、この方が1から数字をカウントする中で「3のつく数字と3の倍数の時だけアホになる」という芸をされるんです。

これをプログラムで実現してみましょう、という演習ですね。

おわかりでしょうか。顔文字からの吹き出しで数字をカウントしている様子を出力しています。3のつく数字と3の倍数は赤字です。

回次は#8でやります。

カレンダーLv.4

再びカレンダーをやります。レベル4では関数かんすうを自作します。

今の段階ではまず関数かんすうが何なのかもわからないと思いますが、そういうものがあるんだねと、心に留めておいてください。

いかがでしょう。最初に「2028」と「2」を設定したことで、29日までを出力しました。

レベル3までは「月」を条件分岐の材料にしていましたが、「年」はまだ考慮できていませんでした。年を考慮しないということはまだうるう年の対応がありませんでした。

しかし、このレベル4からはそれができるようになります。

指定した年月に応じて適切な日数を出力する、立派なひとつの機能です。ここで作る関数は後続課題でも使うので、まま重要な回です。回次は#9, #10。

カレンダーLv.5

レベル4までで一応カレンダーとしての振る舞いは完了しました。これ以上何をするか、さらに使い勝手のいい機能へと昇華させていきます。まずは下図をご覧ください。

レベル4では年と月を別のセルに設定してから実行していましたが、レベル5では「2030年2月」と1セルに設定しています。

このようにした方が年月と日数の関係がわかりやすいですね。

ここでは正規表現せいきひょうげんを学びます。正規表現せいきひょうげんは現役エンジニアでさえもよくわかっていない人が多数いる、便利なんだけど習得は少々厄介な領域です。

ですが効果は絶大ですので、せめて「そういう技術があるのね」程度には抑えてもらえると幸いです。この先あなたの身を助けることにもつながります。#11, #12でやりましょう。

演習問題：あみだくじ

さて、カレンダーもいよいよ佳境に入ってきました。息抜きもかねて演習問題としてあみだくじを作成しましょう。

途中までは一緒に作って、途中からはご自身で考えていただき最後に答え合わせ、という流れでやります。

演習問題と言いつつ新しい要素も登場するので丁寧にやります。

ぶっちゃけこれ、（手前みそだけど）けっこうおもしろいです。期待してほしいですし、ここまでで挫けそうになったとしてもどうにかしてここまでたどり着いてほしいです。

あみだくじはご自身で好きなように作図いただけるので遊び甲斐がいもあるんです。お楽しみに！#13, #14, #15でやります！

カレンダーLv.6

カレンダーもいよいよ大詰めです。まずは下図をご覧ください。

これまでとは随分ずいぶん違う見た目をしていますね。卓上カレンダーみたいなスタイルです。

ここでは二重にじゅうループの組み方を学びます。反復処理×反復処理です。

たかしくんがグランドを1周走る間にひろしくんは3周走ります。たかしくんが3周すると、ひろしくんは何周するでしょう？みたいなイメージです。

また、セルの装飾もやりましょう。曜日によってセルに色がついていたり、文字色が違っていたりしますね。

表形式にすることで考慮する事項が増えますが、順番に整理していくので、実はそこまで難しくはありません。ご心配なく。#15の後半と#16でやりましょう。

カレンダーLv.7

さて、レベル6では指定した年月を表形式で出力しました。レベル7は何をすると思います？（ﾜｸﾜｸ）

いかがでしょう。年単位の出力いっちゃいます。

レベル6では二重ループをやったのですが、ここではさらにその上の三重さんじゅうループをやります。三重さんじゅうループはいろいろ開発をしていく中でも出現頻度が多くはありません。

じゃあどうしてやるのか？というといざ出てきたときに臆おくさなくていいように、というのともうここまでカレンダーやってるんだから実用性のあるレベルにまでもっていこうぜ！という意図があります。

#17, #18でやります。

実用性を目指すということは・・・？Let's level7.5!!

カレンダーLv.7.5

プログラミング基礎編の最後の取り組み、カレンダーレベル7.5です。

実はこれ、当初は予定にありませんでした。ただ実用性を目指すなら祝日情報も盛り込むしかないでしょう、となりまして、やることにしました。

どうしてレベル8ではなく7.5なのかというとレベル7のソースコードにちょい足しするだけだからです。

下図をご覧ください。

これでカレンダーとしては正真正銘完成です。これが完了するころにはプログラミングの基礎的な技術は習得いただけた状態になります。こちらも#18でやります。

連載進行にかかる注意事項・お知らせ

コーディング対象ソースコードの案内の仕方

連載中に何度もソースコードを案内します。第1章において、それらは下記2つの意味合いに分かれます。

あなたの環境にも実装してほしいもの
説明のために掲載するもの

この2つをどのように読み分けていただくか、ですが、あなたの環境に実装して欲しいものは必ず実装した様子のキャプチャをソース案内の直後に添付てんぷします。もちろん文章で促うながしもします。

ソースコード単体で現れた場合は説明したい意図ですので、読んでいただくだけでOKです。

ソースコードの手打ち or コピペの選択

本格的に手を動かしていただくのは次回からになりますが、先ほども申しました通り、各課題の過程で私から何度もソースコードを案内します。

そのソースコードをあなたの環境に反映するとき、キーボードを叩いて手で打つのか、コピー＆ペーストを駆使するのか、どちらにすべきか迷われると思うので、先に言及げんきゅうしておきます。

結論から申しますとどちらでもよいです。

それぞれの特徴やメリット・デメリットをお伝えしますね。

▼ソースコードを手打ちする場合

ソースコードの手打ちは慣れないうちは大変ですが、その過程でコーディングのスピードアップが図れるので、これからもプログラミングをしていきたい！という方にはオススメです。

私はタイピングする行為そのものを楽しいと感じるタイプなので学習時も手打ちすることが多いです（ケースバイケースではありますが）。

また、手打ちするということは全ソースコードにつぶさに目を通すことになります。ひとつひとつの処理に実感がこもるので習熟しゅうじゅく速度の向上にも寄与きよするでしょう（個人的な意見です）。

デメリットがあるとするならばコピペに比べて時間がかかることですね。また、手で打つとスペルミスのリスクもあります。

うまく動かないのに、ソースコードを見直しても原因がわからない・・・と思ったらただのスペルミスかーい！ということがたまにあります。要注意ですね。

▼ソースコードをコピー&ペーストする場合

こちらは何といっても早いのが魅力ですね。合理的にやりたいとか、コーディングスキルはあまり重視していない、という方はコピペでも十分です。

当連載においては正解のソースコードをすべて私から案内するので、コピペでも全然やっていけます。

ちなみに、コピペされるときは以下のようにソースコード枠右上のボタンをクリックするとコピーできます。ペーストは[Ctrl] + [V]でできます。

それぞれ挙げてみました。どちらがいいか？と聞かれたらもうあなたの目的次第です。

ソースコードを書けるようになるつもりはないけど、読めるようにはなりたい！だったらコピペで十分ですし、いろんな機能を作っていきたい！だったら手打ちでやった方が今後に繋がります。

まあでも、このようなところで学習しているうちは他人が用意したソースコードをなぞるわけなのでね、初めて自分でシステムを作る時まで手打ちを取っておくのでもいいと思います。

結局、なにか作りたいものがはっきりしていてその実現に向けて手を動かしてる時が一番楽しいんですよ。ノンストレスです。

ですので、いろいろ言いましたが私からはひとつ。一番精神的負荷が少ないやり方を選んでください。心配しなくても必要な時が訪れたら（不慣れながらでも）勝手に指が動くのでね。

案内するソースコードの配色について

先ほども申しました通り、各課題でソースコードを案内していきます。

例えば以下を見てみてください。

'変数宣言を強制する
Option Explicit
Sub A_メッセージ表示()
    MsgBox "Hello, world!"
End Sub

「Option」と「"Hello, world!"」に色がついていますよね。

これ、noteさんが気を利かせてやってくれているだけで私個人の意図はなにもないんです。ですので、気にしないください。

一応説明しておくと、ソースコード中の各キーワードはプログラミング言語側が用意してくれているものだったりダブルクォーテーションで囲ったものだったりと、いろいろ性格があります。

それらを判別・判読しやすいように表示するプラットフォームが気を利かせて色付けしてくれるのはよくあることなんですね。

これをシンタックスハイライトと言います。構文強調というやつです。

が、（2度目だけど）私の意図はないので特に気にしないでください。

本編で案内する公式リファレンスについて

プログラミング言語の「公式リファレンス」というものがありまして、たとえば・・・

↑こういうものです。こういうのを本編中でも何度も紹介・案内するのですが、リンクを踏んで確認して欲しい意図はありません。

あくまで「公式ページはこちらですよ」の意味なので、毎度中身を見に行かなくて大丈夫です。また、見てほしいところは私の方から公式ページの一部をキャプチャで貼ってご説明します。

この点は#9の補足のところでもう一度触れます。

簡単な用語説明

さて、連載本編中に頻出するワードはここで先にお伝えしておきます。

元々知っていたり、知らなくても文脈ぶんみゃくで理解できたりがほとんどだと思います。さらーっと目を通してください。慣れない単語は本編にて極めて丁寧に説明するのでご心配なく。

・ソースコード
　もう何度も出てきていますが処理内容を書いたテキスト（プログラム）のことです。「ソース」や「コード」と略すこともあります。

・コーディング
　ソースコードを書く（キーボードをうつ）ことをコーディングと言います。それをする人のことは「コーダー」と言います。

・実装
　プログラムを書くことを実装じっそうする、とも言います。「開発」というとただ作る以外にその後のテストなども含んでいることが多いですが、「実装」という言葉は純粋に作ることだけを指します。#5でも再度説明します。

・PG
　「プログラミング」の略です。今回のタイトルにも使っています。

・コピー
　テキストやセル、画像、ファイルを複製する操作です。

・ペースト
　コピーしたものを貼り付ける操作です。

・カット
　テキストやセルの情報、画像、ファイルを切り取る操作です。コピーとの違いは元あった場所から消えるかどうかです。

・エディタ（エディターでも可）
　「編集する」ことを英語でEditエディットと言い、その編集するときに使うソフトをエディタと言います。次回（#3）登場します。

・マクロ
　「機能」のことです。今回紹介した各課題で実行している機能もすべて「マクロ」です。次回（#3）でも扱います。

・セル
　Excel上のマスのことです。

・デバッグ
　機能の不具合（=バグ）を見つけて直す行為のこと。やり方は#5でご案内します。ITの現場では機能実行時に起こる処理や値の遷移をソースコードの行ごとに確認する行為を指して使うこともあります。

・ループ
　反復処理はんぷくしょりのこと。フィクション作品で「無限むげんループ」とか聞いたことないでしょうか。それは同じことを永遠に繰り返す様さまです。繰り返し処理＝ループ、ですね。

・|期待値《きたいち》
　文字や数値のような値あたい以外に処理の動作についても期待する動きについて「期待値」という言い回しをします（これはどちらかというと私独自かも）。

・デフォルト
　初期値しょきちのことです。規定値きていちともいいます。例えばRBGゲームでプレイヤーキャラの名前を決めるとき、最初から「セブン」と入っていたらこれがデフォルトです。本編でもまま使う単語です。

・文字列もじれつ
　文字の並びのことを文字列といいます。「あああ」←これも「こんにちは」←これも文字列です。私、最初この言葉に慣れなかったので挙げました。普通に生きてたら使いませんよね、文字列って。

基本的なショートカット

Windowsウィンドウズの基本的なショートカットはご存じでしょうか。

これはもう調べていただいた方が早いかもしれません。が、一応基本的なものだけ案内しておきます。

[Ctrl] + [X]・・・選択範囲の切り取り
[Ctrl] + [C]・・・選択範囲のコピー
[Ctrl] + [V]・・・切り取り/コピーしたものの貼付（ペースト）
[Ctrl] + [A]・・・全選択
[Ctrl] + [Z]・・・ひとつ前の状態に戻す
[Ctrl] + [Y]・・・ひとつ後の状態に戻す（主に[Ctrl] + [z]の後に使う）
[Ctrl] + マウスホイールころころ・・・縮尺調整

これら↑は連載本編に取り組むときや普段パソコン作業をするときでも最低限知って（使って）おいてほしいショートカット群です。

他に知っておくと便利なものとして以下があります。

[Alt] + [F4]・・・ファイルを閉じる（使うとき注意して！）
[Alt] + [Tab]・・・アクティブウィンドウの切替（押しっぱなしにして）
[windows] + [d]・・・全ウィンドウ最小化。もう一度で元に戻す
[windows] + [e]・・・エクスプローラーを開く

[windows]キーというのはだいたいキーボードの左下辺りにある窓が4つ繋がったような絵がついているキーのことです。

Gif画像で操作や動作を説明する機会が度々ありますが、その中でも使っているので、操作で明示（メニューからの選択）されずにコピーやペーストがあっても「あぁ、今ショートカットを使ったのね」と理解してください。

おわりに

おわりです！今回はまだ手を動かしていただくことがありませんでした。

次回からいよいよ本格始動です。

最初のうちはもしかするとつまらないかもしれません。ほら、なんでもそうだけど、面白くなってくるのってある程度その界隈のルールやコツを把握してからじゃないですか。

今からしていただくのはプログラミングの世界に浸る、という作業なので、ご自身とその世界の間に摩擦が多いうちは少々ストレスかもしれません。

でも大丈夫。私が潤滑油となってあなたと「プログラミング」の間を取り持ちますので、身構えないでお進みください。

では、また次回お会いしましょう。

ありがとうございました。

この記事が気に入ったらサポートをしてみませんか？

個サ作 #2 PG基礎編 ロードマップのご案内