1日目:Googleスプレッドシートを始めよう。 – 1週間でプログラマーになろう。(30分のプログラミング学習、入門講座)

1週間でプログラマーになる実践講座、1日目の画像 プログラミング講座
cattle
cattle

今日から、私と一緒にプログラミングの第一歩を踏み出します!
プログラミング言語は『人間が機械に気持ちを伝える為の言葉』です。スプレッドシートを使えば、5分~10分でプログラミングの学習環境が整います。遊びや仕事で活用出来ますし、他人との共有も可能です。

– 画像や絵で手順をご紹介します。
これまで、一度もスプレッドシートを使ったことが無い方でも、ご安心下さい。画像を用いて、手順を分かり易く紹介致します。

途中からご覧になった方は、全体のロードマップをご確認頂けます。

わからない所があれば、ページ下部のコメント欄、又はtwitterからご相談頂けます。

1日目:Googleスプレッドシートを始めよう。 – 1週間でプログラマーになろう。(30分のプログラミング学習、入門講座)

前半(10分)、後半(20分)、合計30分の実践講座となっております。
途中で休憩を挟みながら、ご自分のペースでじっくりと進めて行きましょう。

前半(10分)- プログラミング環境を整えよう。

Googleのアカウントを持っていない方は、初めにアカウントを新規作成して、ログインしましょう。

Googleスプレッドシートを作成して、プログラミング環境を整えましょう。

・Googleアカウントにログインしたら、Googleシートへアクセスします。

スプレッドシートのトップ画面の画像

パーソナル、ビジネスとありますが、今回は「パーソナルのGoogleスプレッドシートを使ってみる」をクリックします。

・次に、空白のスプレッドシートを新規作成します。

スプレッドシート新規シート作成ボタンの画像

「空白」をクリックして、新しいスプレッドシートを作成します。

※ テンプレートが表示されていない場合は、画面左上のメニューから、 設定→ 「ホーム画面に最近使用したテンプレートを表示」にチェックを入れましょう。

新規スプレッドシートの画像

まっさらなシートが作成されました。

スプレッドシート、プロジェクト名称変更の解説画像

「無題のスプレッドシート」をクリックして、分かり易い名前に変更しましょう。

※ 名前を変えると自動的にスプレットシートが保存されます。

以上で、プログラミングを始める準備が全て整いました。お疲れ様です。

cattle
cattle

Googleアカウントの作成から始めた方は、お茶など飲みながら一旦休憩しましょう!後半からは、早速スクリプトを書いていきます。もし余力があれば、続けて進めましょう。

後半(20分) – プログラムを実行してみよう。

前半最後の画面から、続けて実践して行きます。

スクリプトエディタを開いて、コードを実行してみましょう。

まずは、スクリプトエディタを開きます。

スクリプトエディタの開き方の画像

画面左上のメニューから「ツール」をクリックし、「スクリプトエディタ」を選択しましょう。

スクリプトエディタの画像

この画面で、プログラムコードを書き込んでいきます。

function myFunction {
}

以下の様に、{ と、} の間を、一行改行しましょう。(エンターキー)

function myFunction {
  
}

この改行して出来た新しい行に、以下のコードを記述します。コピーペースト推奨です。

console.log('hello world');

プログラムコードは、基本的に全て半角英数字で記入します。入力ミスや、全角で入力しない様にお気を付け下さい。

function myFunction {
  console.log('hello world');
}
スクリプトエディタの確認画像

この様になればOKです。

console.logの行先頭に空白がありますが、これはインデントと呼ばれる物で、プログラムコードを読み易くする目的で使われます。一般的に、スペースキーではなく、Tabキーを使ってインデントを作ります。

コードを弄った際に、赤い四角で囲った部分のすぐ上、「コード.gs」の左側に、赤い*マークが付きました。これは、そのコードが未保存状態である事を示しています。「Ctrlキー + Sキー」または、画面左上のファイル → 保存とすることで、コードを保存できます。実際に、保存してみましょう。
(*マークが消えたら、きちんと保存出来たという事になります。)

さぁ、このコードを実際に動かしてみましょう!

スクリプトエディタの実行画像

「実行」→ 「関数を実行」→ 「myFunction」とクリックして行きます。

…何も起きない。と思ってしまいますが、プログラムはきちんと動作しています。

エラーメッセージの様な物が出てきた時は?
スプレッドシートファイルがまだ保存されていなかったり、プログラムコードにお間違いがありませんか?何かエラーが起きた際は、エラーメッセージにその理由が書いてある事が大半ですので、焦らずに対処出来ます。英語で出てきた時は、諦めずにGoogle翻訳を使ってみましょう。解決方法としては、エラーメッセージを丸ごとコピーして、それをそのままGoogle検索でサーチしてみます。英語の情報であっても有益な物がとても多いので、こちらもGoogleのサイト翻訳機能をフル活用しましょう。

スクリプトエディタのログの出し方の画像

「表示」→「ログ」とクリックします。

ログの画像

「hello world」とログが出力されました。

※ ログを待機しています。しばらくお待ち下さい。と出ている場合は、そのままの画面で待っていれば、その内にメッセージが出力されます。

ログとは?
プログラマーが開発を行う際に、意図した動作になっているか確認に利用します。スプレッドシートのスクリプトエディタでは、console.log()という魔法のおまじないでログを扱えます。地味ですが、とても大切な機能です。

cattle
cattle

お疲れ様でした!本日はここまでです。明日以降は、パズルゲームの様にもっとロジカルで本格的になっていきます。プログラミングの面白さがより伝わると思いますので、お楽しみに。

本日のまとめ

・自分で書いたプログラムを実行出来ました。

・console.log()で、ログを表示出来ました。

・プログラマーへの偉大なる第一歩を踏み出しました。

次回、条件分岐 (if) を使ってみよう。

コメント