竹の子エンジニア

30代から目指すエンジニアの日記

Audibleを使ってみた感想

日記

前回Audibleを使ってみると書きました。

takecho.hatenablog.com

で、実際にAudibleを試したみた感想なんですが、
思いの外よかったです。

あくまで個人的にではあるのですが
これまでの義務教育の賜物のせいか専門的な本を読もうとするだけで
若干の拒絶反応がでてきます。

ですがオーディオブックは歩いている最中などに聞いているだけで
読み切ったという達成感を得られることができるので、本に馴染みのない方には
おすすめです。

また、読むことと聞くことで頭の入り方も違うように感じており
頭の中で聞いた声を反芻することで記憶への定着もしやすいのではないかと思っています。

それと、個人的には専門的な本に関しては読み返すということをめったにしない
勉強嫌いな私ですが、オーディオブックであれば簡単に聞けるので
また聞き返してみたいと思います。

今回、前回の記事でも触れておりますが
以下の本を聞いていたわけですが、この本自体もなかなかおもしろい内容でした。

自分を操る超集中力

自分を操る超集中力

本の内容をざっくりと紹介すると、脳の仕組みについても触れつつ
如何に集中力を発揮し、パフォーマンスを向上させるかにフォーカスした内容です。

この本の内容もなかなかおもしろく、集中力をあげるための方法が
すぐにでも実践できる内容ばかりなので
自分自身のパフォーマンスに悩んでいる人はぜひ読むことをおすすめします

アウトプットももうちょっと細かく意識する

日記

どうもこんばんわ。

最近ブログを書いてたりしていて思うこととして、
アウトプットが余りにも雑すぎると思ったので
もうちょっと意識的に何を訴求したいのかを考え、
自らのフィードバックを潤ったものにしたいと思います。

はい。

今度からがんばります！！

そういえば、SOFTWARE SKILLSという書籍を購入しました。
Kindleだと書籍版の半分の値段だったので勢い余って。

SOFT SKILLS　ソフトウェア開発者の人生マニュアル

SOFT SKILLS　ソフトウェア開発者の人生マニュアル

まだ読み始めたばかりなので、感想も何もないんですが、
ネットサーフィンをしているとちょこちょこ良書！という紹介があるので
前々から気になっていました。

読み終えることができ、気分が乗れば感想をあげます。

途中から前半部分の意識を全部投げ捨てたような投稿なのは
愛嬌ということで。

では！

GitHubの使い方について

GitHub

GitHubのアカウントは以前から登録しており、
GitHubに関して学びたいと思っていたものの手つかずだったため
暇な時間を利用してのメモ。
GitHubのアカウント登録については端折ります。

GitHubとは

自分の書いたコードを全世界に公開するサービス。
また、ブランチの管理などをすることができる。
有料版であれば、非公開設定をすることができる。

用語

　プログラムのソースコードなどのデータを保存しておく場所

　自分のPC上のリポジトリ

　GitHub上のリポジトリ

  • インデックス

　リポジトリにコミットする前の準備用のファイル。（直訳で目次）
　コードをコミットする前に、インデックスに変更した内容を追加する必要がある。

  • コミット

　インデックスの内容を読み取り、変更点をローカルリポジトリに登録する。
　コミットのコマンドを打たないと、クライアント環境で書いたコードなどは
　ローカルリポジトリにも反映されない。
　また、リモートリポジトリには反映されない。

  • プッシュ（送信）

　ローカルリポジトリにコミットした内容を、リモートリポジトリに反映させる。

GitHubにコードを公開するまでの流れ

クライアント環境で書いたコードをGitHub上に公開するまでの
流れは以下のとおりになります。

1. インデックスに追加
　クライアント上で変更した内容を、インデックスに追加する。
2. コミット
　インデックスの内容を読み取り、ローカルリポジトリにコミットする。
3. プッシュ
　ローカルリポジトリの内容をリモートリポジトリ（GitHub)にプッシュ（反映）する。

GitHubの操作方法

以上の内容をもとに、実際にGitHubと連携してみます。

リモートリポジトリを作成する

まず、GitHub上にリモートリポジトリを作成します。
GitHubにログインし、アカウント画像の左側の＋ボタンをクリックし、
[New repository]をクリックします。

f:id:take9021:20181119100905p:plain

リポジトリの名前（Repository name)、
説明文(Description)を入力します。

公開範囲は有料版を購入しないとPrivateに設定できないため
Publicに設定します。

【Initialize this repository with a README】は、リポジトリの中にあらかじめ
READMEファイルを作成しておく場合に、チェックします。
この設定はあとから設定できるため、任意の設定を実施ください。
私はひとまず、チェックを入れ、Add .gitignore:None、Add a licens: Noneと
設定しております。

設定後、[Create repository]をクリックし、リポジトリを作成します。

f:id:take9021:20181119101249p:plain

リポジトリが作成されると、以下のように表示されます。
リポジトリ名と、説明文（description)が表示されることを確認します。

f:id:take9021:20181119134537p:plain

リモートリポジトリとの連携方法

リモートリポジトリを作成後、クライアント環境のコマンドラインにて
リモートリポジトリを操作できるよう設定します。

以下の操作はCentOSで操作しています。

CentOSにgitのインストール
すでにインストールされている可能性があります。

# yum install git
Githubのリポジトリをclone

GitHubにあるリモートリポジトリをクライアント環境に
clone(複製）します。
GitHubよりClone用のURLを取得します。

緑色の[Clone or download]をクリックすると、
Clone用のURLが取得できます。
f:id:take9021:20181119130115p:plain

上記のURLを元に、CentOS上で以下のコマンドを実行します。

# git clone https://github.com/[ユーザーID]/[リポジトリ名].git

コマンドを実行すると、カレントディレクトリにリポジトリ名の
フォルダが作成されます。

変更した内容をインデックスに反映

上記でリポジトリの複製後、リポジトリのファイルを変更し、
その変更情報をインデックスに反映させます。
今回、新たにtextファイルを追加し、インデックスに反映します。

//hoge.textを作成
# touch hoge.text
//変更状況をインデックスに反映
# git add .
//変更内容を確認
# git status
# On branch master
# Changes to be committed:
#   (use "git reset HEAD <file>..." to unstage)
#
#       new file:   hoge.text
変更内容のコミット
git commit -m "<変更した内容を入力する>"
変更内容のpush(masterブランチに反映する）
# push -u origin master
Username for 'https://github.com': [GitHubのユーザー名を入力]
Password for 'https://username@github.com': [GitHubのパスワードを入力]
//ユーザー名：パスワードを入力すると以下のようなメッセージが表示されます。
Counting objects: 3, done.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (2/2), 265 bytes | 0 bytes/s, done.
Total 2 (delta 0), reused 0 (delta 0)
To https://github.com/[ユーザー名]/[リモートリポジトリ名].git
   a21171d..848282e  master -> master
Branch master set up to track remote branch master from origin.

以上を実施後、GitHubのリポジトリを確認すると以下のようになります。
※commitした内容、回数などが増えていることを確認してください。
f:id:take9021:20181119134237p:plain

以上が、リモートリポジトリにpushするまでの操作方法になります。

ブランチについて

Gitではブランチという概念があり、
ブランチという単位でソースコードを分岐して記録していくためのものです。
ブランチを操作する場合は、以下の操作を実施します。

ブランチの作成
//branch1という名前でブランチを作成します。
# git branch branch1
//ブランチの表示 
//*がついている方が現在のブランチになります。
# git branch
  branch1
* master
ブランチの切り替え

ブランチを切り替える場合は、以下の操作を実施します。

//ブランチの切り替え
# git checkout branch1
//ブランチの表示
//*が切り替え先のブランチになっていることを確認します。
# git branch
* branch1
  master

ブランチを切り替えた後、試しにファイルを作成し
リモートリポジトリにプッシュしてみます。

//huga.textを作成
# touch huga.text
// インデックスに追加
# git add .
//コミット
# git commit -m "create huga.text"
//リモートリポジトリにプッシュ
# git push -u origin branch1

プッシュが完了すると、以下のように表示されます。
また画面上のbranchのプルダウンメニューよりブランチを切り替え
huga.textが表示されることを確認してください。

f:id:take9021:20181119141839p:plain

■おまけ
ブランチを元のブランチに切り替え、フォルダの中身を表示すると、
huga.textなどがないことを確認できます。

# git checkout master
Switched to branch 'master'
# ls
hoge.text  README.md
ブランチのマージ

分岐したブランチを一つのブランチに統合する場合は、以下の操作を実施します。

//統合する先のブランチに切り替える
# git checkout master
Switched to branch 'master'
//統合する元のブランチを指定し、ブランチを統合する
# git merge branch1
//マージされる内容が表示（huga.textの作成）
Updating 61de984..2e1bee7
Fast-forward
 huga.text | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 huga.text
//あとはいつもどおりpushする(commitなどは不要）
# push -u origin master

以上の操作を実施すると、branch1で変更した内容が
masterブランチでも反映されます。

DockerでReact開発環境の構築

Docker React インフラ

CentOS上のDockerでReactの開発環境を構築します。

Dockerについては

ちなみに前回、前々回でDockerの使い方については触れました。
takecho.hatenablog.com

ただ上記についてはDocker-composeでの利用方法になっており、
Dockerへの理解が及ばないため
使い慣れないうちはDocker単体で使ってみるのがよさそうですね。。

Dockerの使い方については別途書きたいと思います。

DockerでReact開発環境の構築

本題ですがDockerでReactの開発環境を作ってみたいと思います。

フォルダ構成

まず、CentOS上でReactの開発環境を作るためのフォルダ
およびファイル構成についてです。
今回以下のようなフォルダ構成にしています。

/usr/local/react-app
              ├── docker
              │       └── node
              │               └── Dockerfile
              └── docker-compose.yml

nodeのイメージを取得

Reactの開発環境を構築するにあたり、nodeのイメージが必要になるため、
事前に以下のコマンドを入力し、imageを保存しておきます。
今回はnode:8-alpineを取得します。

# docker pull node:8-alpine

上記を実行すると、imageをダウンロードしてくるためしばらく時間がかかります。
ダウンロードが完了したら、以下のコマンドを実行し、imageがダウンロード
できていることを確認します。

# docker images
REPOSITORY            TAG                 IMAGE ID            CREATED             SIZE
docker.io/node        8-alpine           df48b68da02a     2 months ago     65.7 MB

Dockerfileの編集

/usr/local/react-app/docker/node/Dockerfileを編集します。
内容は以下の通りです。

FROM "node:8-alpine"
WORKDIR /usr/src/app/react-sample

docker-compose.ymlの編集

/usr/local/react-app/docker-compose.ymlを編集します。

version: "2"
services:
  node:
    build: ./node
    environment:
      - NODE_ENV=production
    volumes:
      - ./:/usr/src/app
    ports:
      - "3000:3000"

次にdocker-composeをビルドします。
ビルドしたときにエラーが表示された場合は行末を参照してみてください。

# docker-compose build

create-react-appの実行とアプリケーションの作成

# docker-compose run --rm node sh -c "npm i -g create-react-app && create-react-app react-sample"

上記のコマンドを実行すると、CentOS上の/usr/local/react内に
react-sampleというフォルダが作成されます。

yarn installの実行

yarn installコマンドを実行し、package.json にリスト化されている全ての依存関係を
node_modules 内にインストールします。

# docker-compose run --rm node sh -c "cd react-sample && yarn install"

サーバの起動

最後にReactサーバを起動します。

# docker-compose run --rm --service-ports node sh -c "cd react-sample && yarn start"

サーバが起動すると、コンソールに以下のように表示されます。
f:id:take9021:20181116101800p:plain

起動確認

サーバの起動後、以下のURLにアクセスし、起動を確認します。
http://localhost:3000

以下の画面が表示されれば、完了です。
f:id:take9021:20181116101908p:plain

docker-compose build実行したときのエラー

私のdockerのバージョンが古かったせいか、以下のエラーが表示されました。

Building node
Step 1/2 : FROM "node:8-alpine"
ERROR: Service 'node' failed to build: Error parsing reference: "\"node:8-alpine\"" is not a valid repository/tag: invalid reference format

調べてみるとdockerのバージョンが古いせいで起きているよう？
このときのdockerのバージョンは以下でした。

# docker -v
Docker version 1.13.1, build 8633870/1.13.1

なのでdockerをアンインストールし、リポジトリを指定し、
yumでdocker-ceを指定しインストールしたところ
dockerのバージョンアップができ、buildも成功しました。
dockerのインストール方法については、下記公式ドキュメントを参考にしています。
Get Docker CE for CentOS | Docker Documentation

'リポジトリの追加
# yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

' docker-ceのインストール
# yum -y install docker-ce

' dockerのバージョン確認
# docker -v
Docker version 18.09.0, build 4d60db4

Dockerコンテナへのアクセス

Docker インフラ WordPress

前回Docker上にWordPress環境を構築する記事を書きましたが、
今回コンテナ内のWordPressの設定ファイル[wp-config.php]を
設定したかったので、Dockerコンテナ上にアクセスする方法のメモです。

ちなみに前回の記事は以下です。
takecho.hatenablog.com

Dockerコンテナへのアクセス

まず、以下のコマンドを実行し、コンテナの名前を確認します。

# docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                  NAMES
8fdf9949e232        wordpress:latest    "docker-entrypoint..."   35 seconds ago      Up 34 seconds       0.0.0.0:8000->80/tcp   wordpress_wordpress_1_60c1b6e90265
bdd78ecec3eb        mysql:5.7           "docker-entrypoint..."   35 seconds ago      Up 35 seconds       3306/tcp, 33060/tcp    wordpress_db_1_b126fe15c45c

行末のNAMESのところです。
今回wordpressのコンテナにアクセスしたいので、名前は「wordpress_wordpress_1_60c1b6e90265」になります。

名前を確認したところで、以下のコマンドを実行します。

# docker exec -it wordpress_wordpress_1_60c1b6e90265 /bin/bash

すると、以下のように表示され、コンテナ内の操作が可能になります。

root@8fdf9949e232:/var/www/html#

コンテナへのファイルコピー

ホストからコンテナへファイルコピーする場合は、以下を実行します。
以下は/tmp/hoge.txtをコンテナ内の/var/www/html直下に格納しています。

# docker cp /tmp/hoge.txt wordpress_wordpress_1_60c1b6e90265:/var/www/html

コンテナからファイルコピー

コンテナからホストへコピーする際は、以下を実行します。
以下は、コンテナ内の/var/www/html/hoge.txtをホスト側のカレントディレクトに
hoge.txtとして保存しています。

# docker cp wordpress_wordpress_1_60c1b6e90265:/var/www/html/hoge.txt hoge.txt

vimが使えない

コンテナ内にアクセスできたのはいいのですが、
vimが使えなかったので、vimをインストールします。
コンテナによりvimのインストール方法は違うみたいですが、
私はapt-getでインストールできました。

以下のコマンドを実行するとvimのインストールができます。
ちなみにunzipなんかも入ってなかったので個別でインストールしました。

# apt-get update
# apt-get install vim

Dockerを使ってWordPress環境の構築。

Docker インフラ WordPress

どうこもんにちは。（修正なし）

タイトルのとおりなんですが、備忘録です。
ちなみにDockerについては、一回だけ作っただけの
初心者です。

今回CentOS 7.1（WindowsのVirtualBox上）にDockerと
Docker composeをインストールしてWordPress環境を構築してみます。
※SELinuxを有効にしているとエラーが頻発するので、無効に。

Dockerに関しての説明は省くとして、
Docker composeは、複数のコンテナで実現されているサービスを
構築・実行する手順を自動的にする機能らしいです。

今回のWordpressとかだと、WordpressコンテナとMariaDBコンテナを
作成するとして、Docker Composeを使えば、設定ファイル（yml)を記述して
コマンドを実行するだけで、設定情報にそってサービスの作成と起動と連携を
一括で管理してくれるものらしいです。

やったこと。

Dockerのインストール

CentOS環境にDockerをインストールします
rootユーザー環境で実行しています。

# yum -y install docker

dockerの起動と、自動起動の有効化

# systemctl start docker
# systemctl enable docker

docker composeのインストール

docker composeの最新版に関しては、以下を参照ください。 最新Releaseのインストール方法についても書いてあります。 github.com

# curl -L https://github.com/docker/compose/releases/download/1.23.1/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
#chmod +x /usr/local/bin/docker-compose

docker composeのインストール確認

上記コマンド実行後、以下を入力します。

# docker-compose -version
docker-compose version 1.23.1, build b02f1306

WordPressの構成ファイル作成

WordPressをDockerで動作させるための構成ファイルを 任意のディレクトリに作成します。（私の場合、/usr/local/wordpress/以下）

クイックスタート・ガイド：Docker Compose と Wordpress — Docker-docs-ja 17.06.Beta ドキュメントhttp://docs.docker.jp/compose/wordpress.htmldocs.docker.jp

上記サイトにもありますが、以下の感じでymlファイルを作成

version: '2'
services:
  db:
    image: mysql:5.7
    volumes:
      - "./.data/db:/var/lib/mysql"
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: wordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    links:
      - db
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_PASSWORD: wordpress

プロジェクトの構築

上記、ymlファイルができたら以下のコマンドで 環境を構築します。

# docker-compose up

コマンド実行後、ブラウザでhttp://localhost:8000と入力すると WordPressの実行画面が表示されました。

ひとまずここまで。

ものすごく個人的なメモ

JavaScript

JavaScriptについて話しを聞く機会があったので
JavaScriptを含め、いろいろと用語についての個人的なメモです。
あくまで個人的なメモなので、おそらく第三者が見てもわからないと思いますが悪しからず。

バックエンド

WebサイトやWebサービスの構築において、サーバやデータベースなどの
システム側の構築や管理を行うのがバックエンド

フロントエンド

Webサイトでユーザが目にするデザインやレイアウトを表現するのがフロントエンド

サーバサイド

サーバ側で動くシステム
対義語？クライアントサイド

JavaScriptの歴史

以下を参照

qiita.com

JavaScriptの用語あれこれ

以下を参照

qiita.com

JDKとは

Javaのプログラムを作成する時に必要になる開発キット

React.js

仮想DOMという概念がある。
操作と出力の間に入る感じ。