競技プログラミング: C++ STL

個人メモ 競技プログラミング

E869120 さんの記事 を参考にした個人メモ

include

#include <bits/stdc++.h>
using namespace std;

cmath

  • abs(x), sin(x), cos(x), tan(x)

    string

string S = "hoge"; 
S[i] = 'z' // i 文字目が 'z' に変わる
S += T; // 連結 (T は string または char)
S.size() // 文字数
S.substr(l, r) // l 文字目から l+r-1 文字目までの部分文字列を返す

algorithm

  • min(): 引数として 2数 または, {3,5,1,9} 形式で与える
  • *min_element(c + l, c + r): min({c[l], c[l+1], ..., c[r-1]})におなじ
    • min_elementの返却値は最小要素のイテレータ(=抽象化されたポインタのことで、コンテナの要素を指し、移動、要素を参照・変更することが出来る)
  • __gcd(a, b): 最大公約数(C++17からgcd(a,b))
  • reverse(a + l, a + r) : a[l], a[l+1], ..., a[r-1] を逆順に並び替え
    • 文字列反転: reverse(str.begin(), str.end())
  • sort(a + l, a + r) : a[l], a[l+1], ..., a[r-1] を昇順に O(NlogN)
    • sort(a + l, a + r, greater<Type>()); : 降順 も必要
  • lower_bound(a+l, a+r, x): 昇順ソートされた配列aのうち, x以上の要素のうち, 最初の要素のイテレータを返す。つまり, lower_bound(a+l, a+r, x) - a でその index がわかる。O(log N)
    • upper_bound は「x以上」ではなく, 「xよりおおきい」
  • count(a + l, a + r, x): 値がxの個数
  • find(a + l, a + r, x) : 値がxのがあれば最初の要素へのイテレータ。なければ a+r へのイテレータ
  • next_permutation(a,a+4): 部分コンテナ {a[0], a[1], a[2], a[3]} に対して, 順番的に次の a[0], a[1], a[2], a[3] の並び替えのコンテナを a に格納する?
    • a = [2,2,3] のとき, next_permutation(a,a+3) で a は [2,3,2] になる。

vector

vector<Type> a;
// 動的な配列であるが, 名前が先頭要素へのポインタではないので a.begin() を使え
sort(a.begin() + l, a.begin() + r)
a.push_back(x); // 後ろにpush。先頭はない。emplace_back のほうが一時オブジェクトを作らない分速い
a.pop_back(); // 後ろからpop
// a.size(), a[i] は配列とおなじ

stack

stack<Type> a;
// push(x), pop(), size() は vector と同機能
// top() は最終要素の値取得
// empty() は空か判定する

queue

queue<type> a;
// push(x), empty(), size() は stack におなじ
// pop() は先頭からとる。
// front() は先頭要素

queue, vector, functional

  • priority_queue
// 小さい要素のほうが優先度が高い
priority_queue<int, vector<int>, greater<int>> Q1;
// 大きい要素のほうが優先度が高い
priority_queue<double, vector<double>, less<double>> Q2;
// push(x), empty(), size() は stack におなじ
// pop(), top() は優先度の高いものから
// push, pop, top は O(logN)

map

// key: int, value: string (2^31 要素の string 型配列と同じような感じ)
map<int, string> M1;
// key: string, value: double
map<string, double> M2;
M1.clear() // 初期化
M1[2434525] = 5; // アクセスにかかる計算量は O(logN) ただし, N はアクセス数

set, multiset

  • 大体の操作は O(logN)
  • set 内では昇順に要素が並ぶ。イテレーター itr に対し itr++ で次の要素を指す
set<Type> a;
a.insert(x); // すでにある時は追加しない, multisetなら追加する
a.erase(x); // xが値の時, その要素を(全て)削除する, イテレータならその要素のみ削除
// clear(), lower_bound(x)

utility (pair), tuple

  • pair: 2つの要素を持てる値
  • tuple: pair の個数制限なしver
pair<int, string> a; // a.first, a.second で各要素にアクセス
// 大小比較は まず1つ目の要素で比較し, 同じなら2つ目
tuple<int, int, double> a;
a = make_tuple(2,4,5.5) // 引数はコピーされる
get<0>(a) // -> 2

bitset

  • ビット演算が可能
bitset<10000> a; // 10000 桁の2進数
// "110" や 6 で初期化すると 000...000110 となる
a.set(5) // 5桁目を1にする
a.reset(5) // 5桁目を0にする
a[5] // 配列的なアクセスが可能

cassert

  • assert(条件) : 条件がfalseならランタイムエラー

ctime

  • 時間測定
int start = clock(); // プログラム実行開始から何単位時間経過したかを整数で返す
...
int stop = clock();
double sec = 1.0 * (stop - start) / CLOCKS_PER_SEC; // CLOCKS_PER_SEC 1 秒が何単位時間か
  • 乱数
srand((unsigned)time(NULL));
rand() // 0~2^31-1(コンパイラによる)のランダムな整数を返す関数

ない

  • swap(a, b)
  • __builtin_popcount(x): 整数 x を二進数で表したとき、1 であるようなビットの個数を返す(__builtin_popcountll(x)はlong longに対応)

Progate jQuery

Progate

jQuery 初級編

  • jQuery は JavaScript の構文で書く。
  • 例: $('h1').hide();
  • 構成:
    • jQueryオブジェクトを作成する。
    • そのjQueryオブジェクトに対してメソッドを呼び出す(jQueryのメソッドはjQueryオブジェクトでしか利用できない)
<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <!-- jQueryライブラリの読み込み。ライブラリはインターネット経由で読み込むのが一般的 -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
  <h1>Hello, World</h1>
  <!-- jQuery ファイルである script.js の読み込み
  </body>の直前に書くことで、WEBページの表示速度を速くできる -->
  <script src="script.js"></script>
</body>

// ./script.js
$(function() {
  $("h1").hide(); // h1 の要素を隠す
});

id と class

  • HTMLのタグに名前を付ける方法として、class の他に id がある。classとの違いは 1つのページ内で同じid名を複数回使えないこと。よって, id のほうが jQueryの処理が高速であり, jQuery のセレクタとしては極力 id を使うべき。

  • class のセレクタは .hoge

  • id のセレクタは #hoge

メソッド

  • .fadeOut(): フェードアウトする。引数にミリ秒を指定してその時間を指定可能。
  • .slideUp(): 下から上に消えていく。fadeOut に近い仕様。
  • .show() : CSS で display: none; された要素を表示
  • .fadeIn() : 表示
  • .slideDowm() : 表示
  • .css("color", "red") : color プロパティを red に(変更)する
    • .css('display', 'none') と, .hide() は等価
  • .text("文字列") : 開始タグと終了タグの間の内容を引数の文字列にする
  • .html('<a href="/index">Hoge</a>') : 開始タグと終了タグの間の内容を引数のHTMLにする。クォーテーションに注意。
  • .find("セレクタ"): すべての子孫要素(自分よりも下の階層の要素すべて)の中から、指定したセレクタを持つ要素を(さらに後ろにつけたメソッドの)対象とする。
  • .children(): findの子要素のみ(孫は含まない)バージョン

    イベント

  • $('セレクタ').イベント名(function(){ }); : イベント発生時の処理
    • メソッドとの違いは, 引数が function か ただの変数 か ?
$(function() {
  $("#hide-text").click(function(){ // #hide-text 要素をクリックしたとき
    $("#text").slideUp(); // #text 要素を slideUp する
  });  // なお, #hide-text と #text の位置関係は不問
});
  • イベント内の function における $(this) はイベント要素とおなじ要素(セレクタではない)
$(function() {
  $("li").click(function(){ // 複数の li 要素があるときでも
    $(this).slideUp(); // 「クリックした」 li 要素だけが対象となる
    $("li").css("color", "red"); // これは全てのliが対象になる
  });
});
  • hoger イベント
$("セレクタ").hover(
  function(){
    // マウスを乗せた時の処理(乗せた後ずっと有効)
  }, (function(){
    // マウスを外した時の処理(外した後ずっと有効)
  })
);

変数

var $div = $("div"); // 変数名は慣例で先頭に $ を付ける

メソッドチェーン

$("h1").css("font-size", "20px").text("hoge"); // 同じ要素に複数メソッドを適用

jQuery 中級編

これまでの延長

  • jQuery は HTML の中身を操作するため、HTMLの読み込みが完了してから操作を開始する。そのため、ready イベントを使用して $(document).ready(); の中身に処理を書く。この構文の省略形が $();
  • モーダル: clickイベントなどに基づいて、表示/非表示が行われる要素。
    • モーダルを開く
      1. モーダルを作成して, CSSで非表示(display:none;)にする
      2. 開くボタンに jQuery でクリックイベントを設置して　fadeIn 等でモーダルを表示させる。
    • モーダルを閉じる
      1. モーダル内に閉じるボタンを置いて, クリックイベントを設置して, fadeOut 等でモーダルを閉じる。
  • 複数のセレクタに対して同じcssの{}を適用する場合は, セレクタをカンマで区切る。
  • hover時のみ表示する
    • デフォルトを display:none; にする
    • .hovering { display:none; } をCSSに追加する。
    • hover イベントの最初の関数で $("セレクタ").addClass("hovering") とする。($(this).find("text").addClass("hovering"))
      • addClass: 指定した要素にクラスを追加
    • hover イベントの2つ目の関数で $("セレクタ").removeClass("hovering") とする。

      if文

 $(".faq-list-item").click(function(){
    var $answer = $(this).find(".answer")
    if ($answer.hasClass("open")){ // if (条件式) {}
      $answer.removeClass("open");
      // クリックした要素が open クラスを持っていれば外す
    } else {
      $answer.addClass("open");
      // 持っていなければ与える
    }
  })
  • 条件式になりうるメソッド
    • hasClass("クラス名") メソッド: オブジェクトがそのクラスを持っていればtrue, 持っていなければfalseを返す。
    • js 的な条件式

jQuery 上級編

要素のindex

  • eqメソッド: $('li').eq(2) で, $('li') のうち, インデックス番号が 2 すなわち, 3番目の li 要素を示す。
  • indexメソッド: $('li').index($('.active')) で. li 要素のうち, .active でもあるもののインデックス番号を返す。つまり, $('li').index($(this)) で li のうち現在対象となっているもののインデックス番号が分かる。この番号は変数(この変数はただの整数なので先頭に$をつけない)などに格納して使用するのがよい。
  • prevメソッド: jQueryオブジェクトの兄弟要素（同じ階層の要素）の中から1つ前の要素を返す。(一つ後は next メソッド)
<ul>
  <li>1</li> <!-- これは $('.selected').prev() -->
  <li class="selected">2</li> <!-- これは $('.selected') かつ $('li').eq(1) すなわち, $('li').index($('.selected')) は 1 である。-->
  <li>3</li> <!-- これは $('.selected').next() -->
</ul>
  • lengthメソッド: $('li').length で li の要素数を返す。length の後ろに括弧はつけない。

関数

  • js と同じ

値のget, set

  • textメソッド: (html, css など, 引数をセットするメソッドは大抵同様)
    • $("h1").text("hoge"); : 引数に指定した文字列を(<h1></h1>の間)にセットする(前述)
    • var txt = $("h1").text(); : 引数を与えないと, 要素の持つ文字列を取得して返す。
  • attrメソッド:
    • $("h1").attr("id", "title");: 引数2つのときは id="title" という属性をセットする
    • var url = $("img").attr("src"); : 引数1つのときはその属性名の属性値を取得して返す

  • valメソッド:

    • var value = $("input").val();: input に入力されている値を返す
    • 引数を与えれば, デフォルトで値を指定できる。
    • 多分 value 属性の値を返すやつ

  • submitイベント

$(function() {
  // 送信ボタンがクリックされたとき, Enter キーでフォームが送信されたときにイベントが発生
  $("#form").submit(function(){
    var textValue = $("#text-form").val();
    $("#output-text").text(textValue);
    return false;
  })  
});
  • 選択肢式のセレクトボックス
<!-- $("#select-form").val() で male または female の選択されているほうを取得できる -->
<select id="select-form" class="select-form">
  <option value="male">男性</option>
  <!-- val("male") のようなデフォルト値指定は select でも有効-->
  <option value="female">女性</option>
</select>
  • カスタムデータ属性: html ではdata-から始まる属性名を自由に使用可能。
  • animation メソッドは hover 等の関数として使う。
$(this).animate({
  "font-size":"30px"
},300); // 300 ミリ秒のアニメーション。時間は 'slow'や'fast'といった文字列で指定することもできる。
  • ページ内リンク
<!-- 方法1: html の href による実装 -->
<a href="#hoge">idがhogeである要素に飛ぶ</a>
<!-- #hoge は id が hoge である要素のセレクタ -->

// jQuery による実装1
$('html, body').scrollTop(500); // ページ最上部から 500 pxの位置に移動
// jQuery による実装2
$('html, body').animate({
  'scrollTop': 500
}, 1000); // 上の 1000ミリ秒での移動 ver.
  • offsetメソッド: 要素の表示位置(ページの上端からの距離とページの左端からの距離)がピクセル単位で連想配列の形で返される。
var offset = $("h1").offset(); // -> {top:240,left:100}
// h1の位置に移動
$('html, body').scrollTop($("h1").offset().top);

Progate Node.js

Progate

Node.js I

  • express: npm install express
  • Embedded JavaScript: npm install ejs
    • 以下の開始括弧から閉じ括弧までが複数行にまたがってもよい
    • <% jsの構文 %>
    • <%= 変数 %> で変数を埋め込む
// ./app.js
const express = require('express');
const app = express();

app.use(express.static('public')); // CSSや画像ファイルを置くフォルダ(./public)を指定

app.get('/top', (req, res) => {
  const items = [
    { name: "hoge", id: 3 },
    { name: "fuga", id: 5 }
  ]
  res.render('top.ejs', {items:items});
  //  /top を GET すると ./views/top.ejs を描画する
  // 第二引数は ejs に渡すオブジェクト
});

app.listen(3000); // サーバを立ち上げるポートを指定
<!-- ./views/top.ejs -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <link rel="stylesheet" href="/css/style.css">
    <!-- css の href は ./public からのパスを指定 -->
    <script src="/send_url.js"></script>
  </head>
  <body>
    <h1>Hello World</h1>
    <a href="/">トップへ戻る</a> <!-- 内部遷移はパスのみでOK -->
    <img src="/image/top.png"> <!-- 画像のパスも ./public から -->
    <ul class="table-body">
    <!-- ejs はこんな感じの forEach などでループを組むとよい -->
        <% items.forEach((item)=>{ %>
            <li>
                <span class="id-column">
                    <%= item.id %>
                </span>
                <span class="name-column">
                    <%= item.name %>
                </span>
            </li>
        <% }) %>
    </ul>
  </body>
</html>

/* ./public/css/style.css */
html {
  font-size: 100%;
  font-family: 'Hiragino Sans', sans-serif;
  line-height: 1.7;
  letter-spacing: 1px;
}
  • あと, ./public/image/top.png が必要
  • node app.js として実行すれば http://localhost:3000 でアクセスできる。

Node.js II

  • npm install mysql
  • ブラウザのリロードは直前のリクエストをもう一回行う機能。直前にPOSTしているともう一回POSTされてしまう。
  • よって, POST の後の結果の取得はリダイレクトさせたほうが良い。
const express = require('express');
const mysql = require('mysql');

const app = express();
app.use(express.static('public'));
app.use(express.urlencoded({extended: false}));
// http://expressjs.com/en/4x/api.html#express.urlencoded

const connection = mysql.createConnection({ // 接続情報の定義
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'list_app'
});
// connection.query('クエリ', クエリ実行後の処理) でクエリを DB に対して実行して結果を受け取る

app.get('/index', (req, res) => {
  connection.query("SELECT * FROM tableA", (error, results) => {
    // results は {"カラム名1":値, "カラム名2":値} をレコード情報とするリスト
    res.render('index.ejs', {items: results});
  })
});

app.post('/create', (req, res) => { // index.ejs で POST されることを想定
  // データベースに追加する処理を書いてください
  connection.query(
    "INSERT INTO items(name) VALUES (?)",
    // クエリに変数を与えたい場合は第一引数のクエリに ? を用いる
    // ? には第二引数の配列要素が入る
    [req.body.postInfo],
    // その場合, 第三引数がクエリ実行後の処理
    (error, results) => {
      res.redirect("/index"); // クライアントにリダイレクトせよという要求を行う
    }
  )
});
app.listen(3000);
<!-- POST するフォーム -->
<form action="/create" method="post">
    <input type="text" name="postInfo">
    <!-- /create に post された情報を express が受け取ってパースすると req.body.postInfo の値がフォームにテキスト入力した値になる -->
    <input type="submit" value="作成する">
</form>

Node.js III

DELETE 機能

app.post('/delete/:id', (req, res) => { // /delete/3 などを受け取ると
  // req.params.id に 3 が格納される
  connection.query(
    "DELETE FROM items WHERE id = ?",
    [req.params.id],
    (error, results) => {
      res.redirect('/index');
    }
  )
});
<!-- postでリクエストする時は入力する項目がなくてもフォームを使う -->
<form action="/delete/<%= item.id %>" method="post">
    <!-- /delete/3 などにPOST-->
    <input type="submit" value="削除">
</form>

PUT 機能

該当レコードの更新フォームを取得

<a href="/edit/<%= item.id %>">更新</a> <!-- /edit/53 など-->
  • 上により, req.params.id に 53 が入る
app.get("/edit/:id", (req, res) => {
  connection.query(
    "SELECT * FROM items WHERE id = ?",
    [req.params.id],
    (error, results) => {
      res.render('edit.ejs', {item: results[0]});
      // id に対応するレコードを渡す
    }
  )
})

更新情報をPOSTして一覧を取得

  • edit.ejs は更新フォーム
<form action="/update/<%= item.id %>" method="post">
<!-- フォームの送信先は /update/53 -->
    <input type="text" name="itemName" value="<%= item.name %>">
    <!-- value属性: フォームに入力済みでレンダリングされる -->
    <!-- name属性: POST 時点で送信される値の key -->
    <input type="submit" value="更新する">
</form>
  • POST 情報のうち, id と itemName の値により DB を更新してリダイレクト
app.post('/update/:id', (req, res) => {
  connection.query(
    "UPDATE items SET name = ? WHERE id = ?",
    // ? を複数用いた場合はその順番に配列が反映される
    [req.body.itemName, req.params.id],
    (error, results) => {
      res.redirect('/index');
    }
  )
});

Node.jsの開発環境を用意しよう！

windowsOS

  • Node.js (LTS) のインストール
  • 設定は全てデフォルト
    • ただし, Tools for Native Modules (C/C++のコンパイラが必要なnpmモジュールが...) のみチェックを入れるとよい。
    • インストールの後に Chocolatey とかのインストールが自動で開始する。

      macOS

  • Node.js (LTS) のインストール
  • 設定は全てデフォルト

Node.jsの新規アプリケーションを作ろう！

cd <ディレクトリ>
npm init --yes
npm install express ejs
vi ./app.js
mkdir views
vi ./views/hello.ejs
node app.js
npm install nodemon # ファイルが変更されると自動でサーバーを再起動してくれる
./node_modules/.bin/nodemon app.js # nodemon でサーバを起動するとき (npm start できるようにしておくと楽)

// ./app.js
const express = require('express');
const app = express();
app.get('/', (req, res) => {
  res.render('hello.ejs');
});
app.listen(3000);
<!-- ./views/hello.ejs -->
<h1>Hello World</h1>

Node.jsアプリケーションとMySQLを接続しよう！

# データベース名: list_app
# テーブル名: users
# は作成済みとする。
# 以下ではそのDBに接続する。
npm install mysql
vi ./app.js

// ./app.js
const express = require('express');
const mysql = require('mysql');
const app = express();

const connection = mysql.createConnection({ // 接続設定
  host: 'localhost',
  user: 'root',
  password: '[設定したパスワード]',
  database: 'list_app'
});

connection.connect((err) => { // 接続できないときエラーを出力ようにする
  if (err) {
    console.log('error connecting: ' + err.stack);
    return;
  }
  console.log('success');
});

app.get('/', (req, res) => { // / を GET したとき
  connection.query(
    'SELECT * FROM items',
    (error, results) => {
      console.log(results); // DB の中身を標準出力するようにする
      res.render('hello.ejs');
    }
  );
});

app.listen(3000);

Progate SQL

Progate

SQL I

基本用語

  • テーブル: 表
    • カラム: 列
    • レコード: 行
  • SLQ: クエリを書くための言語。大文字小文字を区別しない。
  • クエリ: データベースに送る命令。改行の有無に関わらず, ; までが1つの命令。(例: SELECT hoge FROM fuga;)

抽出

  • SELECT カラム名 : 取り出すカラムの指定
    • SELECT カラム1, カラム2 のように複数カラムを指定可能。(全カラムを指定するときはSELECT *とする)
  • FROM テーブル名 : 対象となるテーブルの指定
  • WHERE カラム名=値: カラム名の項目が値となるレコードのみを取り出す
  • 値
    • 文字列, 日付: " または ' で囲む必要がある (例: "2017-07-01")
    • 数値 : 囲まない
  • 演算子
    • = >= <= > <
    • LIKE: where name LIKE 文字列: name カラムの値が文字列か。ただし, 文字列にはワイルドガードを利用できる。
      • ワイルドガード: %は0文字以上の任意 ( "hoge%" -> "hoge", "hogera" )
  • 条件式: date >= "2017-07-01" は "2017-07-01"以降の値なら真
    • 否定: NOT hoge=3
    • AND, OR
  • WHERE name IS NULL: nameカラムがNULLであるデータを取り出す (<-> IS NOT NULL)
    • name = NULL は不可

並べ替え

  • ORDER BY 並び替えの基準のカラム 並べ替え規則
    • 並べ替え規則: 昇順ASC(ascending order), 降順DESC(descending order)

制限

  • LIMIT 123: 上から123レコードのみ取り出す(クエリの末尾に記述)

SQL II

その他

  • SELECT DISTINCT(カラム名) : SELECT カラム名 に加えて, 重複要素を削除
  • SELECT name, price * 1.08 : price カラム全体の値を 1.08 倍してとりだす。
    • カラム同士の演算も可能
    • 演算は ORDER BY や AVG の引数にすることも可能

集計関数

  • SELECT SUM(カラム名) : 合計を1列で得る。後に where を用いた場合は最終結果で SUM される。
  • AVG() : 平均。分母も where などの最終結果の列数。
  • COUNT() : 列数。値が null のときは数えない。また, カラムとして * を指定でき, このときは null 関係なくレコード数になる。
  • MAX(), MIN()

    グループ化

  • GROUP BY カラム名: 指定したカラムで、完全に同一のデータを持つレコードどうしが同じグループとなる(FROM の後ろに書く)
  • GROUP BY を用いる場合、SELECT で使えるのは、
    • GROUP BYに指定しているカラム名(表示させるため)
    • 集計関数 (COUNT(*) でグループに属していたレコード数。たいていグループに関する合計とかをしりたいので, SELECT SUM(price), user FROM list GROUP BY user みたいに使う)
  • GROUP BY カラム1, カラム2 で2つのカラムの組が完全に一致したものをグループ化
  • HAVING 条件 で条件を満たすグループのレコードのみ表示
    • HAVING: グループ化されたデータを検索対象
    • WHERE: グループ化される前のテーブル全体を検索対象

      順番

  • 書く順番: SELECT -> FROM -> WHERE -> GROUP BY -> HAVING
  • 実行順番: FROM-> JOIN, ON -> WHERE -> GROUP BY -> 集計関数 -> HAVING -> SELECT, DISTINCT -> ORDER BY -> LIMIT

SQL III

その他

  • サブクエリ: クエリの中に入れるクエリ。()で囲む必要があり, 末尾の;は不要。全体の実行はサブクエリが実行された後。
    • サブクエリの実行結果で単体の値を返し, それを条件式中に入れる。
  • カラム名の後ろに AS をつけることで, カラム名にエイリアスを与えられる。(SELECT内で使用する?)
SELECT name AS elder
FROM namelist
WHERE old > 60;

テーブルを紐づける

  • TableAの外部キー -> TableBの主キー (キーはあるカラム)
  • tableA に tableB を結合する。
    • ONは結合条件でテーブル名.カラム名を利用する
    • 複数のテーブルに同じカラム名が存在するときもテーブル名.カラム名で指定
    • 外部キーが null のとき
      • JOIN のとき除外される
      • LEFT JOIN のとき, tableAは全て残されて, 外部キーが null であるレコードの tableB は全て null になる
FROM tableA
JOIN tableB
ON tableA.ref_key = tableB.main_key
  • JOIN (or LEFT JOIN) ON は連続して複数書くことで3つ以上のテーブルを結合可能(tableB,CをtableAに結合する。)

SQL IV

  • レコードの取得: これまでやってきた SELECT
  • レコードの追加: 多くの場合, id カラムには AUTO INCREMENT という機能で児童に番号が振られる。そのとき, 以下の カラム1 と対応する値 57 は省略可能
INSERT INTO テーブル名 (id, user, old)
VALUES (57, "yamada", 23);
  • レコードの更新: WHERE 省略時は全レコードを対象とする
UPDATE テーブル名
SET name = "yamaguchi", old = 25
WHERE id = 57;
  • レコードの削除: WHERE 省略時は全レコードを対象とする
DELETE FROM テーブル名
WHERE id = 57;

MySQLの開発環境を用意しよう

Windows

インストール

  1. https://dev.mysql.com/downloads/windows/installer/5.7.html にアクセス
  2. mysql-installer-community-5.7.30.0.msi をインストール
  3. 枠の下の「いいえ、ダウンロードを開始してください」
  4. インストーラー からインストール(全部デフォルト)
  5. 環境変数からC:\Program Files\MySQL\MySQL Server 5.7\bin にパスを通す
mysql --version

動作確認

管理者として以下を実行

net start mysql57
mysql --user=root --password ## パスワードが要求される(******)
> exit; ## exit で脱出できる
net stop mysql57 ## サービス停止

macOS

  • Homebrewのインストール
  • MySQLのインストール
brew install mysql@5.7
echo 'export PATH="/usr/local/opt/openssl@1.1/bin:$PATH"' >> ~/.bash_profile ## インストールした時の説明に書いてある
source ~/.bash_profile
mysql --version

brew services start mysql@5.7
mysql_secure_installation
## 以下, 質問は全てenter
  • 起動
brew services start mysql@5.7
mysql --user=root --password # ログイン
> exit;
brew services stop mysql@5.7

MySQLでデータベースを作成しよう

  • 起動, ログインは前述
SHOW databases; -- データベースの表示
CREATE DATABASE データベース名; /* データベースの作成 */
USE データベース名; -- データベースの使用
SHOW tables; -- テーブル一覧の表示
CREATE TABLE テーブル名 (`id` int auto_increment, `name` text, primary key (id));
/* テーブルの作成: `id` は auto_increment な整数 かつ 主キー, 他に `name` カラム(文字列) */
DESCRIBE テーブル名; /* カラム情報の表示 */
/* この後はこれまでやってきた話 */

DROP TABLE テーブル名; /* テーブルの削除 */ 
DROP DATABASE データベース名; -- データベースの削除

Progate JavaScript

Progate

JavaScript I

  • console.log
  • コメントと文末の;
  • 数値, 文字列
  • 四則演算と%
  • let, const と変数の命名
  • テンプレートリテラルと ${var} による変数の埋め込み
  • if, else, else if, 真偽値, 比較演算子, &&, ||
  • switch, case, break, default

JavaScript II

  • while, for, ++, --
  • 配列, length, オブジェクト, 入れ子
  • 存在しないindexやプロパティにアクセスすると, undefined が得られる
for (let i = 0; i < array.length; i++) {}

JavaScript III

  • 関数, 引数
const func_1 = function(){};
const func_2 = () => {};
  • {}によるスコープ

Javascript IV

  • オブジェクトのプロパティの値として関数を指定することもできる。
  • クラス, 継承
class Hoge {
    constructor(x) {
        console.log("constructed"); // インスタンス生成直後に実行される
        this.var1 = 0; //下で, hoge.var1 としてアクセス可能。
        this.var2 = x;
    }
    get_var2() { // メソッドの定義。括弧必須
        console.log(this.var2);
    }
    get_var2_wrapper() {
        this.get_var2(); // メソッド内で他のメソッドを呼べる
    }
}
const hoge = new Hoge("fuga"); // インスタンスの生成
hoge.get_var2(); // -> "fuga"

class HogeHoge extends Hoge { // Hoge クラスの継承
    // 未指定のメソッドやコンストラクタは継承される。
    constructor(x, y) {
        super(x); // 親クラスの constructor(x) が実行される
        this.y = y; // 追加で実行
    }
    add_new_method() { // メソッドの追加
        return this.var1; // メソッドの戻り値はreturn
    }
    get_var2(){ // メソッドのオーバーライド。こちらが呼び出される。
        console.log(this.var2);
        console.log(this.y);
    }
    get_var2_wrapper() {
        super.get_var2_wrapper(); // 追加的にオーバーライドするとき
        this.get_var2();
    }
}
const hogehoge = new Hoge("fugafuga",2);

JavaScript V

デフォルト export

  • 呼び出される側のファイル
    • export default は1つのみ。
    • クラス以外の変数や関数も同様に export, import 可能
class Hoge {}
export default Hoge; // これで他のファイルから Hoge クラスが使用可能になる。
//
  • 呼び出す側のファイル
    • default を使って export したとき限定で, import Hoge from "ファイルパス" の Hoge は異なる識別子でもよい。
    • ファイルパスの拡張子.jsは省略可能
    • ファイルパスを相対パスとするときは, import するファイルから見た, export したファイルのパス
import Hoge from "ファイルパス";

名前付き export

  • 呼び出される側のファイル
class Hoge {}
const hoge = 3;
const fuga = "fuga";
export {Hoge, hoge, fuga};
  • 呼び出す側のファイル
import {Hoge, hoge} from "ファイルパス";

外部パッケージの呼び出し

  • モジュールによってエクスポートの方法が異なり, それに伴い呼び出し方が異なるらしい。以下はデフォルトエクスポートの場合。
import fs from 'fs'; // var fs = require('fs'); と同じ(はず)。
import readlineSync from "readline-sync"
const str = readlineSync.question("標準入力にこのコメントをつけて文字列を受け取り, その値を返す: ");
const num = readlineSync.questionInt("整数を入力: ");

JavaScript VI

  • 配列操作メソッド
    • push : python の append
    • forEach: array.forEach((num) => {console.log(num);});
      • 配列の中の要素を1つずつ取り出して, それを実引数とする callback 関数を全ての要素に繰り返し行う。何も返さない。
    • find: 上同様のコールバック関数を引数とする。その戻り値が true である最初の配列要素を返す。
    • filter: 上同様で, 戻り値が true である配列要素からなる配列を生成して返す。
    • map: forEach 同様で, callbackの戻り値から新しい配列を作成して返す。

JavaScript VII

  • コールバック関数とは引数として渡される関数である。

ES6の開発環境を用意しよう！

macOS

  • 環境構築
# Homebrew のインストール
brew -v
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew -v

# nodebrew のインストール
brew install nodebrew
nodebrew -v

# nodejs のインストール
## パスの追加
echo $SHELL
#### echo $SHELL の結果が /bin/bash のとき
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
source ~/.bash_profile
#### echo $SHELL の結果が /bin/zsh のとき
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc
source ~/.zshrc
## 安定版のインストール
nodebrew setup
nodebrew install-binary stable
nodebrew use stable
node -v
  • 必要に応じて
## npm init
npm init -y

# babel (新しい規格で記述されたコードを古い規格に書き換えるパッケージ)のインストール
npm install --save @babel/core @babel/cli @babel/preset-env # --save-dev でいい気がする
vi babel.config.js

# コンパイル ( package.json の scripts に "build" とかで登録しておくと楽 )
./node_modules/.bin/babel src --out-dir dist # src はコンパイル元ファイルのディレクトリ, dist はコンパイル先ディレクトリ
  • babel.config.js の中身
const presets = [
  [
    "@babel/env",
  ],
];

module.exports = { presets };

windowsOS(macOSとの差分)

https://github.com/nullivex/nodist/releases で nodest (NodistSetup-v0.9.1.exe ) をインストール

nodist -v
nodist + 10.13.0 # node のバージョンを指定してインストール
nodist global 10.13.0 # そのバージョンを有効化する
node -v

npmパッケージを使ってみよう！

  • npm で --save をつけずにインストールすると, package.json に追加されないままnode_modules内にインストールされる。

Progate Sass I

Progate

Sass とは

  • CSSのメタ言語で, 記述量が減り, 再利用が簡単になる。
  • SASS記法とSCSS記法(以下ではSCSS記法を扱う。拡張子は.scss)

入れ子構造

  • 1つのセレクタの中に別のセレクタを入れ子にして指定できる。(以下のCSSとSassは等価)
    • メリット: header というクラス名を複数回書かなくて済む
.header {
    width:100%;
}
.header ul {
    padding:10px;
}
.header ul.hoge { /* <ul class="hoge"> に有効*/
    font-size:10px;
}
.header:hover {
    color:red;
}

.header {
    width:100%;
    ul {
        padding:10px;
        &.hoge { /* ul.hoge と等価 */
            font-size:10px;
        }
    }
    &:hover { /* .header:hover と等価 */
        color:red;
    }
}

変数

  • 注意
    • CSS は上から順に読み込まれるため, 変数名は定義を先にする必要がある。
    • ブロックスコープ
  • 代入: $変数名: 値;
  • 参照: $変数名

mixin

  • 関数みたいな感じ
@mixin hoge { /* hoge という mixin を定義 */
    margin:20px;
    color:red;
}
li {
    @include hoge; /* これで, hoge の margin と color が追加される。*/
    padding:10px;
}

@mixin fuga($color) {
    color:$color;
    font-size:14px;
}
.list {
    @include fuga(red)
    width:80%;
}

関数

  • lighten: より明るい色を返す関数。color:lighten(red,40%); のように使う

import

  • 読み込むファイルのファイル名は _hoge.scss のように先頭は _ にする必要がある。
  • 変数を一つのファイルにまとめるなどの使い方をする。
@import "_hoge.scss"; /* @import "hoge" のように アンダーバーと拡張子は省略可能 */
header {
    width:100%
    color:$base-color; /* 個の変数は _hoge.scss で定義されている */
}

Progate HTML&CSS 記事

Progate

検証ツール（デベロッパーモード）の使い方

検証ツールの開き方

html の確認と一時的な編集

  1. 開発ツール側の右上のアイコン > webページ側を左クリック で検証ツール(上)内の該当htmlが分かる。
  2. 上の該当htmlを右クリック > Edit as HTML で編集可能

css の確認

  1. 開発ツール側の右上のアイコン > webページ側を左クリック
    • 検証ツール(中央左)内でStylesを選択しているとき該当要素で有効となっているCSSが分かる。
    • 取り消し線があるのは上書きされた要素。
    • 中央右は該当要素のボックスモデル。単位は px で, 要素の値が - のものは 0px
    • Filter の横の :hov は :hover 等の状態のページ状態とCSSを確認可能。
    • CSS や ボックスモデル の値は値を左クリックして書き換え可能
    • チェックボックスでプロパティの無効化可能
    • CSS の {} の { の後ろあたりをクリックすることでプロパティを追加可能

HTML & CSS の開発環境を用意しよう！

  • Atom: https://atom.io/ のダウンロード
  • 作成したhtmlファイルを 右クリック > プログラムから開く > Google Chrome
    • macOS の場合は「このアプリケーションで開く」
  • ファイルを更新した時はブラウザをリロードする。

自分で作ったWebページをインターネット上に公開しよう！

  1. GitHub にリポジトリを作成する(以下, ユーザー名をprog-8とする)
    • リポジトリ名を prog-8.github.io としたとき, 公開URLは https://prog-8.github.io となる。
    • リポジトリ名を hoge (上記以外)としたとき, 公開URLは https://prog-8.github.io/hoge となる。
  2. master ブランチの html へのパスが自動で公開される。