見出し画像

個サ作 #3 開発の準備を完遂する

こんにちは。

個人サイトの作り方#3です。

今回からあなたにも手を動かしていただきます。前回案内したロードマップで言うところの「基礎の基礎」をやるので、内容的には初歩です。

共に、プログラミング学習を始めていきましょうね。


今回のゴール

今回は開発用のエクセルファイルを用意します。

エディタの設定をしてファイル保存するところがゴールです。

下図がだいたいできあがった形です。

今回が終わるころにできあがってる状態。ファイルをひとつつくる

これだけ見せられてもあまりピンとこないかもしれませんが、これらの状態までもっていっていただきます。


VBAの開発環境を用意する

これまでお伝えしてきた通り、VBAぶいびーえーMicrosoftマイクロソフト提供のExcel上で動きます。

Excelエクセルの起動からやりましょう。

Excelを起動する

おそらくデスクトップやタスクバーにあるアイコンをクリックする、という方法で立ち上げる方が大半かと思います。

ですが、せっかくプログラミングしようって話なのでね、少しだけエンジニアらしい立ち上げ方を案内しましょう。2ついきます。

1つめはファイル名を指定して実行する方法です。

ダイアログに実行したいアプリケーションの名前を指定して開きます

まず最初に[Windows] + [R]キーを押下し、「ファイル名を指定して実行」という小窓を開きます。画面左下に出現しているものですね。その中に入力枠があるので「excel」と入力し、[Enter]キー押下おうかします。

OKボタンのクリックでもいいですが、操作順からして[Enter]キー押下の方が早いです。

私がExcelを新規に開くときはだいたいこの方法ですね。

2つ目はアプリケーション名から検索する方法です。

検索枠にアプリケーション名を入力して開きます。

まず最初に[Windows] + [S]キーを押下し、画面左下にある検索枠にフォーカスを合わせます。その状態で「excel」と入力し、[Enter]キーを押下します。

「excel」を入力した時点で、検索結果に表示されたExcelアプリケーションが選択状態なので[Enter]キーの押下で開ける、という動きになっています。

けっこう汎用的に使える操作なので、よかったら活用してください。

プログラマやエンジニアらしい所作しょさっていろいろありますが、その中のひとつにマウスをあまり使わない、というのがあります。全部キーボードでやっちゃうんですね。かっこいいです。

すごいパソコンを使いこなしてる感が出るんですよ。


開発タブを用意する

さて、今Excelを開いていただきましたが・・・

「開発」というタブがあります

こんな↑状態の方はこの項は飛ばしてOKです。「開発」というタブがあればOK。下図のように「開発」タブがない方はおつきあいください。

「表示」タブの右が「ヘルプ」になってて「開発」がありません。

では、「開発」タブを用意しましょう。これからの作業に必要不可欠なものです。下図を参考にしてください。

開発タブを用意する様子

「ファイル」タブから「その他」>「オプション」>「リボンのユーザー設定」を開きます。ダイアログの画面右側にメインタブの一覧があるので「開発」のチェックボックスにチェックを入れましょう

最後に「OK」ボタンを押下します。すると戻ってきた画面に「開発」タブが表示されているでしょう。これでOKです。

この設定はExcel自体に保存されるものなので、新しくファイルを開くたびにせねばならない、ということはありません。

余談ですが、今の操作中に「リボンのユーザー設定」というのが出てきましたよね。

リボンの紹介とピン止めの方法

上図の赤枠の部分を「リボン」と言います。また、リボン内にある右下のピンマークをクリックするとリボンの中身を固定表示にできます。

私は説明用にショート動画を撮るときは基本的に閉じた状態にしています。あなたのお好きな設定で良いですよ。


開発用エディタを表示する

さて、いよいよコーディングをするための画面を開きます。

下図を真似してください。

エディタを開き、2つのウィンドウを画面に追加しています。

はい、一気にいろいろやりました。

まず「開発」タブ内にある「Visual Basicビジュアルベーシック」からエディタ(ソースコード編集画面のこと)を開きました。

そして、次にそのエディタ内で「表示」メニューから「イミディエイトウィンドウ」というものを選択し、画面上に枠を追加しました。

さらに同じく「表示」メニューから「ローカルウィンドウ」を選択し、こちらも画面上に追加しました。最後に追加した2ウィンドウの表示領域比率を調節しています。

このイミディエイトウィンドウは#4, #5で、ローカルウィンドウは#5で説明しますね。


コーディングの舞台はどこなのか?まだそれらしいものが見当たらないですよね。ここからです。下図を真似してください。

モジュールを追加し、名称を設定しています。

画面左にあるプロジェクトウィンドウ上でクリックします。メニューが出てくるので「挿入」>「標準モジュール」と選択しましょう。

これで大きめの白画面が登場します。このソースコードの入れ物の名前がデフォルトでは「Module1モジュールいち」となっているので「Study1スタディーいち」に変更します。

変更はプロパティウィンドウの「オブジェクト名」から行います。

これで完了。


プログラムを実行してみる

ここまでで開発の準備が整いました。

もう、なにか書いてみたくて、動かしてみたくて、ウズウズされていますよねきっと。その願い、叶えちゃいます。

サブプロシージャを書いてみよう

次のソースコードを白画面に入力してください。

sub A_メッセージ表示

打ったら最後に[Enter]キーを押下しましょう。

エディタに「sub A_メッセージ表示」と打って最後に[Enter]キーを押下する様子です。

いかがでしょう。[Enter]キーを押下した瞬間に次の補完が行われます。

  • 「sub」が「Sub」になる

  • 1行目の末尾に「()」が付与される

  • 3行目に「End Sub」が自動挿入される

このVisual Basic for Applicationsビジュアルベーシックフォーアプリケーションズくん。賢いんです。途中までコードを書いたら残りを補完してくれるんですよ。

「そこまで書いたら残りこれっしょ?」

とこちらの意図をはかってくれるんです。開発用エディタにはだいたいこういうちょっとした便利機能がついています。開発を効率的に進めるためのものです。

さて、今エディタの上には下記のようなコードが載っています。

Sub A_メッセージ表示()

End Sub

最初と最後にある「Sub」というのは「サブプロシージャ」と呼ばれるものでして、処理のかたまりを示しています。この中に細々こまごました処理を書いていくんです。それを束ねるものだから処理のかたまりですね。

ご丁寧に後方のSubには「End」が付いてますから、今回で言うなら「A_メッセージ表示」という名前の処理は

  • ここ(Sub A_メッセージ表示())から

  • ここ(End Sub)までの間

に記載しますよ(してくださいよ)、という案内なんですね、この2行は。

赤枠はプルダウンになっていて、サブプロシージャの名前を選択できます。

さらに、上図の右側にあるプルダウンにも「A_メッセージ表示」の表示がされました。今カーソルがあたっているのは「A_メッセージ表示」の処理ですよ、ということを示してくれています。

この「サブプロシージャ」という言葉はあまり重要じゃないから覚えなくてOKです。

ではひとつ処理を書いてみましょう。


有名なプログラムを実行しよう

アレいっときましょうか。プログラミングの参考書や教本は世の中に数ありますが、だいたいどの言語でも最初に「あること」をさせるんです。

それは画面に「Hello, world!」と表示させる、です。これ↓を見てください。

Hello worldの説明

それでは、次のソースコードをサブプロシージャの中に打ってください。

    msgbox "Hello, world!"
コーディングの様子。最初に[Tab]キーを打ってます。

こちらも入力後にカーソルを外すと「msgbox」が「MsgBox」になっています。ありがたし、自動補完機能ですね。

なんでもかんでも成形してくれるわけではなく、VBAさんが把握しているキーワードを入力したときに働きます。

さて、実感ないかもしれませんが、今ひとつの機能をコーディングしたんです。それでは動かしてみましょう。真似してください。

「A_メッセージ表示」を実行する様子

うおおおおおおおお!!!!!!!!!!!!!!!!!!
キタ━━━━(゚∀゚)━━━━!!Hello, world!!こんにちは世界!!


操作動画中、さらっと流してますが、「開発」タブの「マクロ」ボタンを押して開くダイアログに先ほど打った「A_メッセージ表示」が表示されています。

実装したサブプロシージャ(マクロ)がダイアログに載っている様子

コーディングしたサブプロシージャがここに表示される仕組みになっているんですね。前回、案内したロードマップ中の各機能動画ではずらーっといくつもの機能名が並んでいました。

書いたら書いた分、こちらに反映されます。

そして先ほど、

この「サブプロシージャ」という言葉はあまり重要じゃないから覚えなくてOKです。

と申したのですが、この言葉は口語でやりとりする際にもあまり使わないんです。「マクロ」と表現することが多いです。ですので、Subで始まる処理のかたまりのことは「マクロ」と覚えてください。処理の実行単位です。

だいたい「サブプロシージャ」って言いにくいですよね。私「ラングドシャ」と同じくらい言うときに照れます。


「MsgBox」というキーワードはその後に続く文字列をメッセージボックスに載せて表示する働きをしてくれます。見たまんまですね。

これで①プログラムを書く、②実行する、の2つのことができました。

おめでとうございます。


マクロ実行の簡易手順を知っておこう

今、あなたにはマクロ実行に際し

  1. 開発タブにアクセスし

  2. マクロダイアログを開き

  3. 実行対象の処理を選択し

  4. 実行ボタンを押下する

という4つの手順を実施いただきました。実際に開発が本格化するとプログラミングはとにかくトライ&エラーの繰り返しです。

そうなったとき、毎度毎度上記の4手順を実施するのは面倒でしょう。今はそう思わなくてもそう思う感性を育んでください。

物事をシステム化するという行為は、とにかく複雑さを排除して簡略化することが重要です。また手軽に再現できることも大切です。

「システム」というとスーパーのレジや銀行のATM、交通機関の乗換検索など、大掛かりなものを想像するかもしれませんが、こんな開発時のちょっとした操作にもそのエッセンスは適用できるんです。

これを踏まえてマクロの実行を簡単にできる方法を2つ、レクチャーします。


ショートカットキーで実行する

ひとつめはさっきの操作をショートカットキーのみで実施する方法です。

まずは下図のGifジフ画像をご覧ください。この操作、マウスを使っていません。

2回やっています。ゆっくりめ と はやめ。

リボンがもつ各アクションはほとんどショートカットキーでアクセスできるんです。

まず、[Alt]キーを押下すると各タブにアルファベットが表示されます。

[Alt]キーを押下した状態

この状態で、アクセスしたいリボンが示すアルファベットキーを押下します。今回で言うと「開発」タブなので[L]キーを押下します。

開発タブを選択した状態。次のキーが各アクションに表示される

開発タブのリボンが開き、各アクションにアルファベットが付与された状態で表示されます。今回はマクロを選択したいので[P][M]を押下します。

すると

マクロダイアログが開くので、ここで一度[Tab]キーを押下します。最初はマクロ名の入力枠にカーソルがあるんですが、[Tab]キーの押下によってマクロ一覧に移るんです。

今はマクロがひとつだからわかりにくいですが、この状態で上下キーを押下するとマクロを選択できます。

そして最後に[Enter]キーを押下すると実行できます。上図の「実行」ボタン、枠線が青色になってますよね。この青は今[Enter]キーを押下したときのアクションであることを示しています。

言葉にするとクドクドと長ったらしくなりましたが、実際にやってみると結構高速に実行できます。私はこの方法を多用しています。

マクロダイアログを開くまでは[Alt] > [L] > [P] > [M]のキー押下順です。これは[Alt]キーを押した後は右手の中指([L])、薬指([P])、人差し指([M])の順で押すとすぐに開けるので、おすすめです。


マクロ実行用のボタンを用意する

ロードマップで機能を説明したときの紹介動画でもボタンを使っているものがありましたね。先ほどはキーボード操作を駆使しましたが、たった1クリックで実行する方法もあります。

下図の操作を真似してみてください。

ボタンを用意する様子。ボタンの描画は左クリックを押したまま形を描き、指を離します。

ボタンの大きさ、表示ラベル、場所などは自由に変更できます。上図の内容で説明は事足りていると思うので、文章での案内は省略しますね。


後続記事でマクロを実行する機会が何度もありますが、あなたの好きな方法で実行してください。私は動作原理を伝えたい意図があるので、毎度開発タブからアクセスして実行します。

ボタンを用意したときはこの限りではありません。


ファイルを保存する

ここまでいろいろお伝えしてきましたが、このファイルは今後も使いたいので、ファイルを保存しましょう。

保存の前に、保存する場所を作ります。どこでもいいのですが、よくわからないという方は私がこれから案内するのと同じようにしてください(なんの伏線でもないので、好きなところで大丈夫です)。

デスクトップにひとつフォルダを作りましょうか。

フォルダの名称は「個人サイトの作り方_基礎学習」にしておきましょう(ここを使用するのは基礎学習(第1章、第2章)までです。本格的にサイト作りが始まったら別の場所にフォルダ・ファイルを構築します)。

OK。ではファイルを保存します。

ファイル保存の方法もいろいろありますが、私からは[F12]キーをおすすめします。

保存操作のショートカットって[Ctrl] + [S]が一般的だと思うんですけど、最近のエクセルでそれをやると・・・

[Ctrl] + [S]を押下したときに開くダイアログ

こんなダイアログが開きます。ここの保存フォルダの候補の中に所望のものがあればいいのですが、なかったらその先の操作が面倒なんですよ。

なので、[F12]キーでの保存を下図に案内します。

[F12]キーからフォルダを選択し、ファイル名を設定し保存する様子

すみません汗。ファイルの種類を選択するところが枠内ぎりぎりになっちゃいましたが、必ず「Excel マクロ有効ブック(*.xlsm)」を選択してください。

ファイルにマクロのソースコードを含む場合、そうする必要があるんです。

ファイル名は「01_VBA基礎」としましょう。保存後はExcel上部にあった「Book1」という表記がファイル名である「01_VBA基礎.xlsm」に変わっています。

保存場所のフォルダ選択が適切にできていたら

ファイルがフォルダに保存された様子。↑クリスマスイブにやってるな

このようにファイルが存在しています。これが今回の期待値です。


今回のふりかえり

今回は下記のことをやりました。

  • Excelの起動方法

  • 開発タブの表示設定

  • 開発エディタの初期設定

  • マクロの実装と実行

  • ファイルの保存

以前から知っていたものも多かろうと思います。開発タブの表示なんかは一度きりの作業ですので、困ったらその都度調べる、でも十分です。

今後も使いそうなもの(マクロの実行やファイルの保存)は何度も使う中でご自身に定着させていってもらえたらと思います。


今回の補足

エディタのカスタマイズ

エディタのこの↓赤枠の部分、あなた好みにカスタマイズできます!

赤枠のところは好みのフォント、配色、大きさにできるんです

例えば・・・

カスタマイズする様子です。クリックで拡大表示できます。

こんな風にしたりね。職業エンジニアでもダークモード好みの人はたまにいます。

目が悪い人はフォントサイズを大きめにしても良いですし、フォントの形も好みのものにするとよいです。

ちなみにボタン一つで初期状態に戻すことはできないようですので、戻すときはひとつひとつ手でやらないといけません。ご注意ください!

ちなみに、私は後続記事もデフォルト(最初の状態)でやります。

デフォルトは

  • フォント名が・・・MS ゴシック (日本語)

  • サイズ・・・10

です。

いろいろ細かい設定もできるようですので、あなた好みにカスタマイズしちゃってくださいね。今の段階では各設定内容が何を指しているのかわからないところもあるかもしれません。


VBAの入力候補サジェスト機能

手打ちで進められる方に朗報です。入力を少し手助けしてくれる機能があります。

エディタ上で[Ctrl] + [space]キーを押下してみてください。ズラっとキーワード一覧が出てくるので上下キーで任意のものを選択することができます。

その状態でさらにアルファベットを打ち込むと続いて打てるキーワードの候補を出してくれます。

ここだけ、エディタをカスタマイズしてみてます。

上図では「ms」と打った段階で「MsgBox」が先頭に出てきていますね。これを選択した状態で[Enter]キーを押すとそれを入力した上で改行をします。[Tab]キーを押すと、入力した上でその行に留まります

基本的にはVBAで用意してくれている単語が並ぶのですが、もう少し学習を進めると自分で用意したキーワードも予測変換の一覧に出すことができるようになります。それは次回の#4で案内しますね。

結構便利なので、今後使ってみてください


おわりに

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

初めて手を動かしていただく回でしたが、どうでしたでしょうか。基本的なことばかりでヤキモキされた方もいるかもしれません。

これから少しずつできることが増えて楽しくなるので、期待していてください。

このまま次に進むも良し、少し休憩されるも良しです。

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

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


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