ためすう

type_info を使ってみる (C++)

2019-11-24

やったこと

データ型を確認するために

  • type_info

を使ってみます。

確認環境

$ g++ --version
g++ (Homebrew GCC 9.2.0) 9.2.0
Copyright (C) 2019 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

調査

test.cpp

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

int main() {
    int a1;
    long int a2;
    string a3;
    char a4;
    vector<int> a5;

    cout << typeid(a1).name() << endl;
    cout << typeid(a2).name() << endl;
    cout << typeid(a3).name() << endl;
    cout << typeid(a4).name() << endl;
    cout << typeid(a5).name() << endl;
}

出力結果

i
l
NSt7__cxx1112basic_stringIcSt11char_traitsIcESaIcEEE
c
St6vectorIiSaIiEE

参考

第2回 大規模Webサービスの開発オリエンテーション (大規模サービス技術入門)

2019-11-24

Web開発者のための大規模サービス技術入門の読書メモです。

大規模データの難しさ

第一のポイント「メモリ内で計算できない」という点

メモリはディスクの10^5 ~ 10^6以上高速

hdparm 転送速度の差が分かる

ボトルネック見極め作業の基本的な流れ

  • ロードアベレージを見る
  • CPU、I/Oのいずれかがボトルネックかを探る

ロードアベレージを見る

システム全体の負荷状況を示す指標

CPU、I/Oのいずれかがボトルネックかを探る

sar, vmstat で時間経過とともにCPU使用率やI/O待ち率の推移が確認できる

大規模環境では、I/O負荷を抱えるサーバはそもそも分散させるのが難しい上に、ディスクI/Oが多発するとサーバが簡単に遅くなってしまうという本質的な問題がある

大規模データを扱うために

  • いかにしてメモリで済ませるか
  • データ量の増加に強いアルゴリズム、データ構造
  • データ圧縮、情報検索技術

参考

  • [Web開発者のための大規模サービス技術入門]

最小値を求める (C++)

2019-11-23

やったこと

最小値を求めるために

  • min
  • min_element

を使ってみます。

確認環境

$ g++ --version
g++ (Homebrew GCC 9.2.0) 9.2.0
Copyright (C) 2019 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

調査

test.cpp

$ g++ --version
#include <bits/stdc++.h>
using namespace std;

int main() {
    int a;
    int b1 = 3;
    int b2 = 1;
    int b3 = 5;

    a = min({b1, b2, b3});
    cout << a << endl;

    // max と同じこと
    cout << min({b1, b2, b3}, greater<int>()) << endl;

    // int型配列の最小値
    // min_element は iterator が返却される
    int t[] = {4, 2, 5};
    cout << *min_element(t, t+3) << endl;

    // vector 型の最小値
    vector<int> v = {3, 1, 5};
    cout << *min_element(v.begin(), v.end()) << endl;
}

出力結果

1
5
2
1

参考

find, rfind を使ってみる (C++)

2019-11-23

やったこと

find rfind を使ってみます。

確認環境

$ g++ --version
g++ (Homebrew GCC 9.2.0) 9.2.0
Copyright (C) 2019 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

調査

test.cpp

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

int main() {
    string s1 = "abcdefgabc";
    cout << s1 << endl;

    // 見つかる abc
    cout << s1.find("abc") << endl;
    cout << s1.find("abc", 3) << endl;

    // 見つからない xyz
    cout << s1.find("xyz") << endl;
    cout << string::npos << endl;

    // 後ろから検索
    cout << s1.rfind("abc") << endl;
}

出力結果

abcdefgabc
0
7
18446744073709551615
18446744073709551615
7

参考

substr を使ってみる (C++)

2019-11-23

やったこと

substr を使ってみます。

確認環境

$ g++ --version
g++ (Homebrew GCC 9.2.0) 9.2.0
Copyright (C) 2019 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

調査

test.cpp

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

int main() {
    string s1 = "abcdefg";
    cout << s1 << endl;

    // 3文字目以降
    cout << s1.substr(2) << endl;

    // 4文字目から2文字取る
    cout << s1.substr(3, 2) << endl;
}

出力結果

abcdefg
cdefg
de

参考

第1回 大規模Webサービスの開発オリエンテーション (大規模サービス技術入門)

2019-11-17

Web開発者のための大規模サービス技術入門の読書メモです。

ユーザが利用している大規模サービスに変更を加えるにあたって規模を考慮しない中途半端な実装を放り込むことは、容易にシステム停止を招く原因となり得ます。

スケールアウト

サーバーを横展開、つまりサーバの役割分担を行ったり、台数を増やしたりすることでシステム全体トータルでの処理能力を上げて負荷を分散する方法

スケールアップ

ハードウェアの性能を上げるなどして処理能力を稼ぐ方法


サーバーのスペックを選ぶとき

  • IO負荷が高い場合サーバ メモリ重視
  • CPU負荷が高いサーバはCPU重視

参考

  • [Web開発者のための大規模サービス技術入門]

export を使ってみる ( JavaScript )

2019-11-11

やったこと

export を使ってみます。

調査

エクスポートされたモジュールは、宣言のあるなしにかかわらず strict モードで動作します。

sample.html

<script type="module">
import greet from './my-module.js';

console.log('start');
console.log(greet());

</script>

my-module.js

export default function greet(x) {
  return 'heloooo!';
}

sample.html をローカルで開く (コンソール出力)

[Log] start (sample.html, line 4)
[Log] heloooo! (sample.html, line 5)

※ Safari で CORS を無効にするとローカルのブラウザで確認できます。

参考

アロー関数を使ってみる ( JavaScript )

2019-11-11

やったこと

アロー関数を使ってみます。

調査

アロー関数式は、より短く記述できる、通常の function 式の代替構文です。

Console

var f = () => 'return value';
undefined

f()
"return value"
var f2 = (a, b) => a + b;
undefined

f2(100, 50)
150

var f3 = (a, b) => { return a * b }
undefined

f3(20, 4)
80

参考

webpack を使ってみる

2019-11-10

やったこと

webpack を使ってみます。

React を webpack を使って起動します。

確認環境

$ node --version
v10.16.0
$ npm --version
6.9.0

調査

環境準備

必要なパッケージをインストールしていきます。

$ echo "{}" > package.json
$ npm install --save-dev webpack babel-loader babel-core babel-preset-react
$ npm install --save react react-dom

.babelrc の作成

$ touch .babelrc
{
  'presets': [
    '@babel/preset-env', '@babel/preset-react'
  ]
}

webpack.config.js の作成

$ toucn webpack.config.js
module.exports = {
  entry: './entry.js',

  output: {
    filename: 'output.js'
  },

  module: {
    rules: [
      {
        loader: 'babel-loader',
        exclude: /node_modules/,
        test: /\.js$/,
      }
    ]
  }
}

js ファイルの作成

entry.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';

ReactDOM.render(
  <Hello />,
  document.getElementById('root')
);

Hello.js

import React from 'react';

export default function Hello() {
  return <h1>Hello!!!</h1>;
}

ビルド

$ ./node_modules/.bin/webpack --config webpack.config.js

動作確認

index.html

<div id="root"></div>
<script src="/path/to/output.js"></script>

/path/to はご自身のパスに変更してください。

参考

Babel を使ってみる

2019-11-10

やったこと

Babel を使ってみます。

React で JSX で記述されているコードを JavaScript に変換します。

確認環境

$ node --version
v10.16.0
$ npm --version
6.9.0

調査

JSX

JSXは、JavaScriptの構文に対する拡張である

環境準備

$ echo "{}" > package.json
$ npm install --save-dev babel-cli babel-preset-react

ファイル作成

sample.js

ReactDOM.render(
  <ul>
    <li>aaa</li>
    <li>bbb</li>
  </ul>,
  document.getElementById('root')
)

変換

$ ./node_modules/.bin/babel --presets=react sample.js -d out
sample.js -> out/sample.js

out ディレクトリ以下に出力されます

参考