2018-11-24

11月23日の学び

linux

たまにしか使わないのでいつも迷います。。。

リダイレクト

標準入力・標準出力・標準エラー出力の向き先を変更する
1> で標準出力のリダイレクト、2>で標準エラー出力のリダイレクト
1>の1は省略可能

$ ls 存在しないファイル 2> test.txt
$ cat test.txt 
ls: foo: No such file or directory

標準エラー出力のリダイレクト

&はファイル記述子の複製を行う
&1は標準出力の複製を作成

# 以下のコマンドを実行すると標準エラー出力の出力先はtest.txtとなる
ls 存在しないファイル > test.txt 2>&1

一括リダイレクト

#command &> file
#若しくは
#command >& file
#で以下と同じ効果となる

command > file 2>&1

qiita.com

2018-11-22

11月21日の学び（React）

フロントエンド

Reactを実行した。やはり手を動かさないとわかったという資格はない。
全てコマンドを打つだけで実行できるところに感激した。
「reacのアプリ」と「公開するwebページ」の差分がいまいち見えない。前者は後者の一部にすぎないのでは？？？

npmをインストール

省略

create-react-appをインストール

$ npm install -g create-react-app

アプリケーションの作成

以下のコマンド実行後3000番にアクセスするとアプリが動いている

$ create-react-app react_test
$ cd react_test
$ npm start

Compiled successfully!

You can now view react_test in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://10.0.1.3:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

ディレクトリ構成

ディレクトリ構成も自動で作成される

$ ls
README.md         package-lock.json public
node_modules      package.json      src

パッケージ化

$ npm run build

> react_test@0.1.0 build **********/react_test
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  34.45 KB  build/static/js/1.2dd891c4.chunk.js
  763 B     build/static/js/runtime~main.229c360f.js
  711 B     build/static/js/main.dfde7675.chunk.js
  512 B     build/static/css/main.3335127e.chunk.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  http://bit.ly/CRA-deploy

$ ls
README.md         node_modules      package.json      src
build             package-lock.json public
pidepide-no-MacBook-Air:react_test pide$ ls build/
asset-manifest.json
favicon.ico
index.html
manifest.json
precache-manifest.a902ec76247e158cc6af7751031476f5.js
service-worker.js
static

生成されたbuildディレクトリ内のindex.htmlは人が読める形式ではない。

$ less index.html
<!doctype html><html lang="en"><head><meta charset="utf-8"><link rel="shortcut icon" href="/favicon.ico"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><title>React App</title><link href="/static/css/main.3335127e.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.leng

React 版の Hello, world! - React 入門

次回予告？

次はこのあたりかも qiita.com

2018-11-21

11月21日の学び（AWSインスタンス）

AWS

AWSのインスタンスの種類

オンデマンドインスタンス：従量課金・1時間単位で課金される
リザーブドインスタンス：全て前払い・1年/3年単位・サーバ用途向け
スポットインスタンス：入札形式・安いときはとにかく安い・安価になるけれど、利用するインスタンスの利用価格が変動しており、自分が入札した価格を利用価格が上回ると強制的にインスタンスが削除

2018-11-18

11月18日の学び（React.js）

フロントエンド

フロントエンドはそこまで深く踏み込む気はないが動作概要だけでも知っておくこと。

React.jsとは

JavaScriptでの開発に用いられるUI用の汎用ライブラリ
比較対象として挙げられるBackbone.jsやAngular.jsとも併用できます。

SPA

シングルページアプリケーション
仮想DOMの利用により効率的な画面更新が可能

webpack

React.jsやCSSなど複数のソースファイルから配布用のパッケージを作成するツール
以前はgruntやgulpといったツールが利用されていたらしい

React.jsの動作①

ブラウザは直接Reactのソースコードを読み込めないため、先にindex.html内のタグを経由してReactの実行ファイルのapp.jsを読み込む
内でReactの適用がなされる

React.jsの動作②

ページ状態を保持している「プレーンなJSのオブジェクト」に「テンプレート的な関数」を作用させて、「仮想DOM」と呼ばれるDOMの設計図を取り出す。
その設計図を使って本物のDOMを構築する。

ここでいう「プレーンなJSのオブジェクト」とは、JSONをパースしたりするだけで取得でき、タグとかの文字列を一切含まない、クリーンなデータを保持しているJSオブジェクト

React.jsプロジェクトの作成

npmとyarnの2通りの方法がある

npmの場合

ブラウザに読み込ませるソースコード用のディレクトリsrcを作成
React.jsのソースコードのapp.jsをsrc内に作成
webpackが生成するブラウザ動作用のjsファイル出力先としてdistを作成
"npm run build"コマンドでwebpackを利用して配布用のパッケージを作成する

2018-11-17

11月18日（Node.js）

フロントエンド

フロントエンドにはそんなに踏み込む気はないが、簡単にでも手を動かす・動かさないで全然異なるため軽くでも触っておく。
まぁ確かに画面作るのにわざわざJava + Tomcatとかは面倒。。。

Node.jsの概要

JavaScriptで動作するサーバ環境（一般的にはWebサーバ）
WebサーバというとApacheやIISなどを想定するが、Node.jsはそれらを一切使用しない
代わりに「サーバを作る」ところから実装を始める（わずか数行で簡易Webサーバを作成可能）

もう少し詳しく

シングルスレッド・非同期IOなのが特徴。チャットのようにリアルタイムでどんどん情報が更新されるのには向いているが、CPUリソースを大量に消費するような処理を行うプログラムには向いていない。

JavaScriptでサーバサイド処理を実装
非同期IO・ノンブロッキングIOを採用
イベント駆動型
シングルスレッド
GoogleのJavaScriptエンジンV8で動作

ハロワコード

node hello_world.jsで実行できる

var http = require('http');
  
var server = http.createServer(function(req, res){
        res.writeHead(200, {'Content-Type': 'text/plain'});
        res.write('Hello Wrold');
        res.end();
});

server.listen(1234);
console.log('サーバを起動しました。');