MacのMySQL操作
準備
MySQLサーバーを立ち上げる
$ sudo mysql.server start
エラーが起きた場合
$ sudo mysql.server start . ERROR! The server quit without updating PID file (/usr/local/var/mysql/xxxxxxxxxxxxx.local.pid).
権限を変えてやる必要がある。
$ sudo chown -R _mysql:_mysql /usr/local/var/mysql
MySQLサーバに接続
~ $ mysql -u root
データベースの一覧を見る
show databases;
データベースの作成
create database [データベース名];
データベースの削除
drop database [データベース名];
操作対象のデータベースを見る
select database();
操作するデータベースの選択
use [データベース名];
※大文字小文字は区別されない。
作業用ユーザーの作成
create user [ユーザー名] identified by '[パスワード]';
権限の設定([データベース名]における全ての権限を与える)
grant all on [データベース名].* to [ユーザー名];
応用編
権限の設定+ユーザー作成
grant all on [データベース名].* to [ユーザー名] identified by '[パスワード]';
ホスト名を確認
show variables like 'hostname';
データベースから退出
\q
MySQLサーバーを停止
$ sudo mysql.server stop
ユーザーを指定してMySQLにログイン
$ mysql -u [ユーザー名] -p [パスワード(省略可)] [データベース名]
テーブルを作る(例文)
~ $ create table users ( id int not null auto_increment primary key, name varchar(255), email varchar(255) unique, password char(32), score double, sex enum('male', 'female') default 'male', memo text, created datetime, key score (score) );
データベースのテーブルを確認
show tables;
Dockerについてまとめ
Docker
軽量な仮想化環境 Build once, run anywhere
公式サイト
今回はUbuntu(Vagrant)上にDockerを作成していく
Vagrantに仮想化環境を用意(Ubuntu)
$ vagrant box add trusty64 https://cloud-images.ubuntu.com/vagrant/trusty/current/trusty-server-cloudimg-amd64-vagrant-disk1.box
Vagrantの仮想化準備
$ vagrant init trusty64
Vagrantfile
のプライベートネットワークのコメントを外す。
$ vagrant up
$ vagrant ssh
システムを最新の状態へ
$ sudo apt-get update
Dockerのインストール
$ sudo apt-get install docker.io
Dockerを実行できるように設定
$ sudo ln -sf /usr/bin/docker.io /usr/local/bin/docker
Dockerのバージョンを調べる
$ sudo docker --version
Dockerを仮想化環境で作っていく
Dockerのイメージを検索する(centOSの場合)
$ sudo docker search centos | more
Dockerのイメージを引っ張ってくる(centOSの場合)
$ sudo docker pull centos
Dockerのイメージの一覧を見る(引っ張ってこれたか確認)
$ sudo docker images
Dockerのイメージの詳細を見る
$ sudo docker inspect [ID(一意に決まる部分のみで良い) or centos:[TAG名]]
どういう設定になっているか見ることができる。
Dockerイメージの削除
$ sudo docker rmi [ID]
rmi = remove image
コンテナーを作る
$ sudo docker run centos echo "hello world"
前半のsudo docker run centos
でコンテナーを作り、
後半はそのコンテナー上でecho "hello world"
が実行される。
作られたコンテナーの"実行中"の一覧を見る
$ sudo docker ps
作られたコンテナーの一覧を見る
$ sudo docker ps -a
最新の5個だけ見たいという場合
-n=5
をつける。
コンテナー削除
$ sudo docker rm [コンテナーID(一意に決まれば良い)]
コンテナーのメモリの状況を3秒ごと表示させるコマンドをバックグラウンドで走らせる
$ sudo docker run -d [イメージ名] free -s 3
-d
バックグラウンド
-s [数字]
[数字]秒ごとに
実行中のコンテナーのログを見る
$ sudo docker logs [コンテナーID]
タスクをフォアグラウンドに持ってくる
$ sudo docker attach --sig-proxy=false [コンテナーID]
CTRL + C
で抜ける。
タスクをストップさせる
$ sudo docker kill [コンテナーID]
タスクを再開する
$ sudo docker start [コンテナーID]
イメージを作成していく
コンテナーを立ち上げる。インタラクティブモード、ターミナルを立ち上げる。bashシェルを立ち上げる
$ sudo docker run -i -t centos /bin/bash
色々設定。
イメージを作成
sudo docker commit [コンテナーID] [ユーザ名]/[わかりやすい名前]
イメージができたか確認
sudo docker images
Docker Build
イメージからコンテナーを立ち上げて、変更を加えてイメージにするという流れを自動化する。
Dockerfileを作成する
$ vi Dockerfile
下記を記入する。
FROM centos MAINTAINER [名前] <[メールアドレス]>(決まりではない) # RUN: buildするときに実行される RUN echo "now building..." # CMD: runするときに実行される CMD ["echo", "now running..."]
buildする。
$ sudo docker build -t [ユーザ名]/[わかりやすい名前]
イメージができたか確認
$ sudo docker images
実際に走らせる
$ sudo docker run [イメージ名]
Webサーバをインストールして、runの時に立ち上げてブラウザで中身を確認する
Dockerfileを書き換える
$ vi Dockerfile
buildの時にWebサーバをインストール
FROM centos MAINTAINER [名前] <[メールアドレス]>(決まりではない) RUN yum install -y httpd ADD ./index.html /var/www/html/ EXPOSE 80 CMD ["/usr/sbin/httpd", "-D", "FOREGROUND"]
index.htmlを作成
$ vi index.html
buildする
$ sudo docker build -t [ユーザ名]/[わかりやすい名前] .
最後の.
は忘れないようにすること!
runさせる。(コンテナー側のポート8080を80にリダイレクトさせたい、バックグラウンド)
$ sudo docker run -p 8080:80 -d [イメージ名]
192.168.55.44:8080
にアクセスする。
Vagrantの設定〜開発準備まで
大まかな流れ
1. Box(テンプレート)を取得。
導入
$ vagrant box add [Box名] [Box URL]
Boxの一覧を見る
$ vagrant box list
vagrant boxes
と調べると
boxがまとまったサイトが出てくる。
Boxの削除
$ vagrant box remove [Box名]
2. 仮想マシンを初期化。
仮想マシン初期化
$ vagrant init [Box名]
3. 仮想マシンを起動。
仮想マシンを立ち上げる
$ vagrant up
Vagrantの様々なコマンド
Vagrantの状態を見る
$ vagrant status
スリープさせる
$ vagrant suspend
スリープ状態から復帰させる
$ vagrant resume
終了させる
$ vagrant halt
立ち上げる(既出)
$ vagrant up
仮想マシン自体を削除する
$ vagrant destroy
※仮想マシンに設定していたものも消えるので注意すること。
Vagrantfile
は残る。
仮想マシンに接続する
$ vagrant ssh
Webページを作ってブラウザで見よう
Webサーバをインストール
$ sudo yum -y install httpd
Webサーバを立ち上げる
$ sudo service httpd start
仮想マシンを再起動してもWebサーバがonになるように設定
$ sudo chkconfig httpd on
ファイアウォールを切る
$ sudo service iptables stop
仮想マシンを再起動してもファイアウォールを切るように設定
$ sudo chkconfig iptables off
カレントディレクトリを見る
$ pwd
htmlファイルを置く
Cent OSでは、以下の場所に作成することが望ましい。
/var/www/html
上記の場所にindex.htmlを作成
$ sudo vi index.html
vim
はデフォルトでは入っていない
ファイルの中身の確認
$ cat [ファイル名]
ネットワークの設定をする
仮想マシンから出る
$ exit
Vagrantfileの中にネットワークの設定がある
Vagrantfileを開く
$ vim Vagrantfile
設定変更
下記のプライベートネットワークの設定のコメントを外す。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
設定を変更したらリロードする
$ vagrant reload
Macの中と仮想マシンの共有フォルダについて
Vagrantfileがあるフォルダで$ vagrant ssh
したら、
仮想マシン上の/vagrant
と対応している。
/vagrant
フォルダをWebサーバのドキュメントルートに設定する。
今ある内容を削除する
$ sudo rm -rf /var/www/html
シンボリックリンクをはる
sudo ln -fs /vagrant /var/www/html
仮想マシンの接続を切る
$ exit
VagrantfileのあるフォルダがWebサーバのドキュメントルートとなっている。
応用
ローカルIPアドレスではなく、好きなローカルドメインに設定したい
モジュールのインストール
$ vagrant plugin install vagrant-hostsupdater
Vagrantfileの設定を変更
この部分に下記内容を追加
config.vm.hostname = "[好きなドメイン]"
参考画像
最後に
この設定をしておかないと 「このサイトにアクセスできません」と表示されてしまう
$ sudo systemctl stop firewalld
以上です。
Reactの勉強4日目(ステートの更新)
本日の課題
テキストエリアに対して、即座に文字数をカウントして出力
解答
<body> <div id="app"></div> <script src="react/react.js"></script> <script src="react/react-dom.js"></script> <script> var TextAreaCounter = React.createClass({ propTypes: { text: React.PropTypes.string, }, getDefaultProps: function() { return { text: '', }; }, getInitialState: function() { return { text: this.props.text, }; }, _textChange: function(ev) { this.setState({ text: ev.target.value, }); }, render: function() { return React.DOM.div(null, React.DOM.textarea({ value: this.state.text, onChange: this._textChange, }), React.DOM.h3(null, this.state.text.length) ); } }); ReactDOM.render( React.createElement(TextAreaCounter, { text: "あいうえお" }), document.getElementById("app") ); </script> </body>
テキストエリアに入力すると、
注意点
getInitialState()
メソッドを追加して、初期値を返して、
データに変更(テキストエリアの内容に変更)があった際に、
this.setState()
によって更新していく!
_textChange()
はイベントリスナー
this.setState()
_textChange: function(ev) { this.setState({ text: ev.target.value, }); },
render()
メソッドの方では、
this.props
ではなく、this.state
から値を取得するように変更
onChange
はキャメルケース。※clickの場合もonclick
ではなく、onClick
render: function() { return React.DOM.div(null, React.DOM.textarea({ value: this.state.text, onChange: this._textChange, }), React.DOM.h3(null, this.state.text.length) ); }
勉強になりました。
Reactの勉強3日目(コンポーネントを組み立てる)
本日の課題
以下のDOM構成を自分でコンポーネントを組み立てて表示する
<div id="app"> <div class="test"> <span class="first">テスト1</span> <span>テスト2</span> <span class="last">テスト3</span> </div> </div>
解答
<body> <div id="app"></div> <script src="react/react.js"></script> <script src="react/react-dom.js"></script> <script> var Component = React.createClass({ render: function() { return React.DOM.div( { className: "test" }, React.DOM.span( { className: "first" }, "テスト1" ), React.DOM.span(null, "テスト2"), React.DOM.span( { className: "last" }, "テスト3" ), ) } }); ReactDOM.render( React.createElement(Component), document.getElementById("app") ); </script> </body>
これ、あっているのかな、、、^ ^;
注意点
var Component = React.createClass({ render: function() { } });
render()
は必須のメソッド
その他、任意指定のメソッドとプロパティ
プロパティ
<script> var Component = React.createClass({ render: function() { return React.DOM.span( { className: "test" }, "これは" + this.props.name + "です" ) } }); ReactDOM.render( React.createElement(Component, { name: "テスト" }), document.getElementById("app") ); </script>
プロパティへのアクセスはthis.props
を経由
propTypes
プロパティの名前、型の宣言!
var Component = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired, }, render: function() { return React.DOM.span( { className: "test" }, "これは" + this.props.name + "です" ) } });
name: React.PropTypes.string.isRequired
この指定によって
name
は必ず文字列で指定してあげなければなりません。
値を省略すると
ReactDOM.render( React.createElement(Component, { // name: "テスト" }), document.getElementById("app") );
できる限り宣言することで、
長いソースコードを追いかけやすくする、
チェックしやすくすることを意識しましょう!
勉強になりました。
次回予定
テキストエリアに対して、即座に文字数をカウントして出力
Vue.jsの勉強1日目
Vue.js初心者の僕が、
Vue.jsを使いこなせるようになるまで
地道に頑張ります。
このブログはメモ的に使っていきますので、
よろしくお願いします。
※毎日更新ではありません。 1日1個とも限りません
本日の課題 ①
最初はいつもの「Hello Vue!」の表示、でいきましょう。(spanタグ
で囲う)
①の解答
<body> <div id="app"> <span> {{ message }} </span> </div> <script src="vue/vue.min.js"></script> <script> var ap = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body>
el:
で対象となるHTML要素を取得!
ここでは、<div id="app">
が対象。
data:
はバインドする値!
ここでは、{{ message }}
のmessage
と紐づけられた。
バインド (bind)とは
あっちとこっちを紐付ける、関連付ける、割り当てることです。 http://wa3.i-3-i.info/word12448.html
本日の課題②
② spanタグ
にクラス属性test
をつける
②の解答
<body> <div id="app"> <span v-bind:class="className"> {{ message }} </span> </div> <script src="vue/vue.min.js"></script> <script> var ap = new Vue({ el: '#app span', data: { message: 'Hello Vue!', className: 'test' } }) </script> </body>
el:
のHTML要素取得にはCSS的な要素の指定でOK!
この部分el: '#app span',
data:
の中には様々な指定ができる!
<span v-bind:class="className">
とclassName: 'test'
が結びついている。
スタイルも当てられる!
<div id="app"> <span v-bind:style="style" v-bind:class="className"> {{ message }} </span> </div> <script src="vue/vue.min.js"></script> <script> var ap = new Vue({ el: '#app span', data: { message: 'Hello Vue!', className: 'test', style: "color: red" } }) </script>
勉強になりました。
次回予定
ループと条件分岐について
具体的には次回考えます。
Reactの勉強2日目(DOMの作成)
本日の課題
以下のDOMをReactで作成
<div id="app"> <div class="test"> <span class="first">テスト1</span> <span>テスト2</span> <span class="last">テスト3</span> </div> </div>
解答
<body> <div id="app"></div> <script src="react/react.js"></script> <script src="react/react-dom.js"></script> <script> ReactDOM.render( React.DOM.div( { className: "test" }, React.DOM.span( { className: "first" }, "テスト1" ), React.DOM.span(null, "テスト2"), React.DOM.span( { className: "last" }, "テスト3" ), ), document.getElementById("app") ); </script> </body>
注意点
class
属性を指定する際、
React.DOM. * のパラメーターには気をつけないといけない。
ReactDOM.render( React.DOM.div( { class: "test" }, React.DOM.span( { class: "first" }, "テスト1" ), React.DOM.span(null, "テスト2"), React.DOM.span( { class: "last" }, "テスト3" ), ), document.getElementById("app") );
class: "test"
としてしまうと。。。
コンソールエラーが出てしまう。
正しくは、className: "test"
勉強になりました。
次回予定
以下のDOM構成を自分でコンポーネントを組み立てて表示する
<div id="app"> <div class="test"> <span class="first">テスト1</span> <span>テスト2</span> <span class="last">テスト3</span> </div> </div>