プログラミング入門ナビ

GCP CloudSQLにMySQL Workbenchから接続する方法について解説!

2020-10-13 By プログラミング入門ナビ編集部

この記事では、GCP CloudSQLにMySQL Workbenchから接続する方法について説明します。

この記事は、オンライン講座「はじめてのSQL ・データ分析入門 -データベースのデータをビジネスパーソンが現場で活用するためのSQL初心者向コース」のサポート記事です。

なお、アクセス時期によっては実際のサイトと記事中の画像で表示が異なる場合があります。

GCPとは

・GCPはGoogle Cloud Platformの略で、Googleが提供するクラウドコンピューティングサービスのことを指します。

・Cloud SQLはGCPのサービスの一つで、クラウド上にMySQLサーバーを構築することができます。

・Cloud SQLの利用には課金が発生しますが、Googleから付与される無料クジレットの適用対象です。

CloudSQLのセットアップ

GCPプロジェクトの設定

Google Cloud Platformのコンソールを開いて、Googleアカウントでログインします。

ログインできたら、画面左上のロゴの右隣のボタンをクリックします。

すると、自分が管理しているプロジェクトを参照できます。

右上の「新しいプロジェクト」を押して、新規プロジェクトを作成します。

適当なプロジェクト名を記入して「作成」ボタンを押します。プロジェクト名は、ここでは「cloudsql-demo」とします。

プロジェクトを作成すると、以下のようなコンソール画面が表示されます。

GCPを初めて利用する場合は、機能制限を解錠するために請求情報の登録を行います。

「お支払い」を押してクレジットカードの登録を行ってください。

Cloud SQLインスタンスの作成

GCPプロジェクトのセットアップが完了したら、次はSQLインスタンスの作成を行います。

左上のメニューを押して、「SQL」をクリックします。

「インスタンスを作成」をクリックします。

「MySQL」を選択します。

適当な「インスタンスID」を入力します。ここでは「cloudsql-demo」とします。

そしてパスワードを指定します。「生成」ボタンで生成した場合は、パスワードを忘れずにメモするようにしてください。

「データベースのバージョン」は、ここではMySQL8.0とします。

最後に「作成」ボタンを押します。

このような画面が表示され、インスタンスの作成が開始されます。

インスタンスIDの左に緑色のマークが出現したら、インスタンスが作成完了した合図です。

インスタンス接続の設定

次は、インスタンスに外部から接続するための設定を行います。

画面上部の「編集」ボタンをクリックします。

「接続」をクリックします。

「パブリックIP」がチェックされていることを確認します。そして「ネットワークを追加」ボタンをクリックします。

ここでは全てのIPアドレスからの接続を許可するため、「新しいネットワーク」の「ネットワーク」欄に「0.0.0.0/0」と記入します。

記入できたら「完了」を押してください。

補足としては、ここで固定IPアドレスを個別に指定すれば、全てのIPアドレスではなく特定のIPアドレスにのみ接続を許可することもできます。すなわち不正なIPアドレスからの接続を遮断して、よりデータベースのセキュリティを高めることができます。

固定IPアドレスをお持ちで、よりセキュアなデータベース運用を考えている方は参考にしてみてください。

最後に「保存」をクリックして、設定を保存します。

WorkbenchからCloud SQLに接続する

それでは、クラウド上のCloud SQLにMySQL Workbenchから接続してみましょう。

MySQL Workbenchは手元のPCにインストール済みであるものとします。

サーバーのパブリックIPの確認

まず、MySQLサーバーのパブリックIPを確認します。

この場合は「34.83.193.169」がMySQLサーバーのパブリックIPとなります。

パブリックIPを固定していない場合は、インスタンスを再起動するたびにIPアドレスが変わるので、その都度新しいIPアドレスを確認するようにしてください。

MySQL Workbenchの接続設定

MySQL Workbenchを起動します。

プラスアイコンをクリックします。

このようなウィンドウが表示されるので、「Connection Name」に適当な接続名を記入します。ここでは「cloudsql-demo」とします。

そして「Parameters」の「Hostname」に先ほど確認したCloudSQLのサーバーのパブリックIPを入力します。

入力できたら、「Test Connection」ボタンを押して接続を確認しましょう。

パスワードの入力が求められるので、自分で設定したパスワードを入力してください。「Save password in valut」のチェックボックスをチェックして、「OK」を押します。

このような表示が出てきたらテスト接続成功です。

コネクションが追加されるので、クリックします。

このような画面が表示されたら接続成功です。

MySQL WorkbenchからCloudSQLのサーバーに接続することができました！

クリーンアップ

SQLのサーバーが起動している場合は、起動時間に応じて課金が発生します。無料クレジットの範囲内であれば請求は発生しませんが、無料クレジットの消費を抑えるためにも、作業が終わったらインスタンスを停止しておきましょう。

またサーバーを停止していてもストレージ代などで課金は発生するので、作業が完全に終了しインスタンスが不要になったら、忘れずに削除するようにしてください。

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

前置演算と後置演算の違いについて！変数へ代入した結果が異なる理由を徹底解説！

2020-09-30 By プログラミング入門ナビ編集部

はじめに

JavaScriptで演算を行う時、予想と違う結果になって悩んだことはありませんか？

バグのもとにもなりますし、理由がわからないと修正方法もわからず困ってしまいますよね。

この記事では、よくある原因の１つである前置演算・後置演算の挙動の違いについて解説します。

意外に正しく理解できていないことも多いので、自信のない方はぜひこの機会に学習してくださいね。

前置演算・後置演算とは

まず、前置演算・後置演算とは何かについて説明します。

インクリメント・デクリメント

JavaScriptに限らず、多くのプログラミング言語に存在する演算方法としてインクリメント・デクリメントがあります。

前置演算と後置演算はこの演算に関わるトピックであるため、先にこの内容について理解しておきましょう。

インクリメント（increment）は英語で増加の意味で、値を１増やすことです。

下記のように変数の横にプラスを２回書くとインクリメントされて値が１増えます。

var x = 10;
x++;  //インクリメント
console.log(x);  //11

デクリメント（decrement）は英語で減少の意味で、値を１減らすことです。

下記のように変数の横にマイナスを２回書くとデクリメントされて値が１減ります。

var x = 10;
x--;  //デクリメント
console.log(x);  //9

前置演算・後置演算とは、このインクリメント・デクリメントを変数の前に書くか（前置）、後に書くか（後置）のことを指します。

前置演算の場合

前置演算では、変数の前に演算子を書きます。

例えばインクリメントする場合は下記のようになります。

var x = 10;
++x;  //前置演算
console.log(x);  //11

後置演算の場合

後置演算では、変数の後に演算子を書きます。

例えばインクリメントする場合は下記のようになります。

var x = 10;
x++;  //後置演算
console.log(x);  //11

変数単体の演算では同じ結果になる

上記のように、変数x（初期値：10）について、前置・後置に関わらず演算後の変数の値は同じ（11）です。

この通り、変数単体で演算を行う場合の結果は前置演算・後置演算とも同じとなります。

変数への代入結果

前置演算・後置演算で挙動が異なるのは別の変数への代入時です。

下記の例を見てください。

var x = 10;
var y;

var a = 10;
var b;

var y = ++x;  //前置演算
var b = a++;  //後置演算

console.log(x);  //11
console.log(y);  //11
console.log(a);  //11
console.log(b);  //10

このように、前置演算と後置演算で代入先の変数の値が異なっていますね。

一体なぜなのでしょうか。

前置演算と後置演算の違い

実は、前置演算では先にインクリメント（またはデクリメント）を行ってから他の処理を行い、後置演算では先に他の処理を行ってから最後にインクリメント（またはデクリメント）を行うという挙動の違いがあります。

文章では理解しづらいため、実際にインクリメントするときに起きていることをコードを見ながら確認しましょう。

前置演算で実際に起きていること

前置演算では先にxをインクリメントした後、yにxを代入します。

var x = 10;
var y;

y = ++x;  //「++x; の後に y = x;」と同じ

console.log(x); //11
console.log(y); //11

そのため、前置演算での代入の後、yは１増えた後のx（つまり11）、xはインクリメントされた値（つまり11）となる訳です。

後置演算で実際に起きていること

後置演算では先にbにaを代入した後、aをインクリメントします。

var a = 10;
var b;

b = a++;  //「b = a; の後に a++;」と同じ

console.log(a); //11
console.log(b); //10

そのため、後置演算での代入の後、bは１増える前のa（つまり10）のまま、aはインクリメントされた値（つまり11）となる訳です。

まとめ

JavaScriptでの前置演算・後置演算の違いについて解説しました。

実はJavaScriptに限らず、C言語やJava等の一般的なプログラミング言語でも同じ違いがあります。

慣れるまではややこしいですが「前置演算は（代入の）前に演算」「後置演算は（代入の）後に演算」と語呂合わせで覚えるのがおすすめです。

正しく理解し使い分けて、バグを未然に防ぎましょう！

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

簡単なウェブページを作りながらHTMLの基礎を習得しよう！演習形式で徹底解説！

2020-09-30 By プログラミング入門ナビ編集部

はじめに

HTMLを学んでいるみなさん、学習は順調ですか？

やはりHTML学習の醍醐味といえばウェブページを自分で作れるようになることですよね。

この記事では、簡単なウェブページ作成を通してHTMLの基礎習得に欠かせないHTML要素を網羅的に学習します。

演習形式で回答も丁寧に解説するので、手っ取り早くHTMLの基礎を習得したい方や、これまで学んできた基礎知識をおさらいしたい方にもおすすめです！

動画解説

本記事の内容を動画でも解説しています。

演習問題：HTMLの基礎

演習回答：HTMLの基礎

演習問題

それでは早速ですが演習問題です。

完成イメージ

下記のようなウェブページを制作してください。

前準備：素材の入手

テキスト

こちらのリンク先からコピー＆ペーストして使用してください。

画像

こちらのリンク先からダウンロードし、これから作るhtmlファイルと同階層に配置してください。

情報のグループ化

ウェブページの見た目には影響しませんが、情報のグループ化は意味付けや後からデザインをつける時の利便性の観点で非常に重要です。

今回は下記のようにグループ化してください。

ヒント

「三毛猫モモの紹介ページ」はページ自体のタイトルですのでh1要素、他の見出し（プロフィール、好きな食べ物、SNS）はh2要素を使いましょう。

画像の表示にはimg要素が使えますね。

プロフィールは順序付きリスト、好きな食べ物は説明リストを使います。

「フォロー」の部分はご自身のツイッターアカウント、または講師の中村のアカウント（https://twitter.com/ynakayu）をa要素で記述しましょう。

著作権表示はsmall要素でできます。

演習回答

ウェブページは作成できましたか？ここからは回答例を解説していきますので、必ず自分で演習ページを作ってから見てくださいね。

まずは簡単におさらい

コードの全体例に入っていく前に、それぞれの要素についておさらいしていきましょう。

まず先に答えが見たい方はスキップして下の方の「回答コード例」を先に見ても構いませんが、間違えた箇所があったらここに戻って各要素の詳細を確認してください。

見出し

各話題に入る前の冒頭部で、そこで記述される内容のテーマをわかりやすく目立たせるために使われるのが見出しです。

見出しの大きさによってh1、h2、h3、h4、h5、h6までの要素が用意されており、数字が小さいほど大きい見出し、大きいほど小さい見出しになります。

<h2>見出しにしたい部分</h2>

簡単なようでいて、忘れがちな細かいルールもあるので自信がない方は下記の記事で復習しておきましょう。

HTMLで見出しを書いてみよう！意外と知らないルールについても解説！

画像

画像を表示させるにはimg要素を使用します。この要素ではsrc属性を使って画像のパスを指定するのでしたね。

<img src="cat.jpg">

どこにある画像を指定するかによって、パスの指定方法が異なります。下記の記事で詳しく説明しているので、気になった方は確認してください。

HTMLに欠かせない「属性」とは？画像の表示方法を例にわかりやすく解説！

説明リスト

プロフィールの部分で生年月日等を説明しているように、ある用語や文言の説明に特化したリストを説明リストと呼びます。

<dl>
  <dt>用語1</dt>
    <dd>説明1</dd>
  <dt>用語2</dt>
    <dd>説明2</dd> 
  <dt>用語3</dt>
    <dd>説明3</dd>
</dl>

各タグの意味や使い方を忘れてしまった方は下記の記事からおさらいしましょう。

説明リストとは？HTMLで用語説明ページを作るのに最適！使い方を確認しよう

順序付きリスト

好きな食べ物など、文言を順番つきで列挙する用途には順序付きリストを使用します。

<ol>
  <li>項目１</li>
  <li>項目２</li>
  <li>項目３</li>
  ・・・略・・・
</ol>

順序のない箇条書きを使うこともできます。これらの違いやタグの意味については下記から確認してください。

HTMLでリストを書く方法！箇条書きと順序付きリストの違いは？入れ子にする方法も確認しよう

著作権表記

著作権や商標登録など、ページ全体に関する細目を表記するにはsmall要素を使用します。

<small>ここに細目を記述</small>

詳しくは下記の記事も参考にしてください。

HTML文書で著作権表示などの細目を表記するには？small要素の使い方をマスターしよう！

情報のグループ化

文章の内容に合わせてarticleやsection等の要素を使い分けてグルーピングすると、文章の構造がわかりやすくなる、スタイルを当てやすくなるというメリットがあります。

自信のない方は下記記事で詳しく説明していますので、目を通してみましょう。

情報のグループ化は重要！div要素だけでなく意味に応じてarticleやsection等を使い分けよう！

回答コード例

それでは、今回の演習の回答コード例はどのようになるのか見てみましょう。

お手元のコードと比較し、間違いがあったら前項に戻って復習をお忘れなく！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三毛猫モモの紹介ページ</title>
</head>
<body>
  <header>
    <h1>三毛猫モモの紹介ページ</h1>
    <p>三毛猫のモモについて紹介します。</p>
  </header>

  <main>
    <article>
      <h2>プロフィール</h2>
      <img src="momo.jpg">
      <dl>
        <dt>生年月日</dt>
        <dd>2020年1月1日</dd>

        <dt>性別</dt>
        <dd>メス</dd>
        
        <dt>出身地</dt>
        <dd>東京</dd>
      </dl>
    </article>

    <article>
      <h2>好きな食べ物</h2>
      <ol>
        <li>焼き魚</li>
        <li>刺身</li>
        <li>かつお節</li>
      </ol>
    </article>
  </main>

  <aside>
    <h2>SNS</h2>
    <p>Twitterで<a href="https://twitter.com/ynakayu">フォロー</a>してください。</p>
  </aside>

  <footer>
    <small>&copy; 2020 Momo.</small>
  </footer>
</body>
</html>

よくある質問

演習について、受講者の方からよくいただく質問と回答を掲載します。

講師と同一の手順で記述していく必要がありますか？

動画を見ながら進めてくださった方の中には、講師の記述していく順番と全く同一の方法で書いた方がいいのか気にされる方もいらっしゃるようです。

答えはNoで、同じ手順で書く必要はありません。

実際、どんな順番で書いたとしても最終的に正しい記述になっていれば全く同じ表示結果となります。

詳しくは下記の記事でも解説していますので参考にしてください。

HTMLの正しい書き順は？タグが先？コンテンツが先？

表示されたページの見た目（文字サイズやフォント）が若干違います

お手元の演習回答のウェブページ表示結果が、この記事や動画内で解説している表示結果と若干異なることを気にされる方もいらっしゃるようです。

文字のサイズやフォントのみの違いであれば、全く問題ありません。

使用しているブラウザやOSによってこの辺りは若干見え方が異なるためです。

HTML文書の構造が同じであれば正しく記述できていますので、問題ありません。

まとめ

演習方式でHTMLの基礎となる代表的な要素の使い方を解説しました。

簡単なウェブページを作りながら進めると、表示結果を確認しながら楽しく学べますね。

ぜひ、覚えた知識をもとにご自身でも簡単な紹介ページを作ってみてはいかがでしょうか。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する