ためすう

最小値を求める (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 ディレクトリ以下に出力されます

参考

JavaScript で参照渡し Object.assign()

 2019-11-10

やったこと

JavaScript の Object.assign() を使ってみます。

調査

参照渡し (意図せず値が変わってしまう)

Console

o = {a: 100, b: 200}
{a: 100, b: 200}

var o2 = o
undefined

o["a"] = 555
555

o2
{a: 555, b: 200}

Object.assign() を利用する場合

Console

o = {a: 100, b: 200}
{a: 100, b: 200}

var o2 = o
undefined

var o2 = Object.assign({}, o)
undefined

o["a"] = 555
555

o2
{a: 100, b: 200}

参考

React をインストールして立ち上げてみる

 2019-11-10

やったこと

React を Mac にインストールして、起動してみます。

確認環境

$ node -v
v10.16.0
$ create-react-app --version
2.1.3

調査

$ create-react-app sample

サーバー起動

$ cd sample
$ yarn start

http://localhost:3000/ にアクセスするとページが見れます。