課外活動9

今日は企業のウェブサイトでよく見かける大きな背景画像の真ん中に文字があるものを作ります.

f:id:Polyomino:20190210221157p:plain

今日の記事は2部構成となっていて,はじめに自分で実装した場合のコード,その後Nuxt+vuetify を利用したものを紹介します.

自力実装

中央に文字を表示する

画面の中央に文字を配置するコードは,以前にも出てきました. 課外活動5 - undefined

このコードの応用です.

まず,基本となるHTMLファイルを作成します.

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>中央に文字がある何か</title>
  </head>
  <body>
    <div class="content">おいしいお米を食べたい</div>
  </body>
</html>

表示すると,シンプルなテキストが表示されています.

次に,画面中央に文字を出します.styleタグを作り headのとじタグの前に入れてください.

body {
  margin: 0;
  padding: 0;
}
.content {
  font-size: 4rem;
  color: white;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

以前にもこのようなCSSを書いたと思います.これらのCSSについて解説します.

デフォルトのCSS,リセットCSS

まずはじめの body に対しての調整についてです.

body {
  margin: 0;
  padding: 0;
}

これらは,bodyタグの margin と padding を 0 にするというものです.なぜこのようなものが必要なのでしょうか?

ブラウザには,デフォルトでCSSの設定が組み込まれています.

この記事の最初にあるHTMLをブラウザで確認してみてください.

f:id:Polyomino:20190210211800p:plain

body {
    display: block;
    margin: 8px;
}

というCSSが適用されています.このCSSを生かしたままレイアウトの調整をおこなっても良いのですが,トラブルの原因となる場合が多々あります.なので,リセットCSSというものがよく用いられます.

リセットCSSはその名の通り,CSSの初期設定をリセットするものです.今回はお試しでレイアウトをしているのみなので,body タグに対して margin: 0; padding: 0; を適用するという簡単なものにしています.

次に contentクラスに対しての操作です.

.content {
  /*文字の設定*/
  font-size: 4rem;
  color: white;

  /*配置の設定*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

font-size

font-sizeは文字の大きさを指定するためのものです. 指定方法は,px指定や%指定,キーワード指定など様々な方法があります.

font-size - CSS: カスケーディングスタイルシート | MDN

4rem は,ルートHTMLのフォントサイズを1remとしたときの4倍という意味です.

なぜ私は,web以外でも一般的に使われている px ではなく,rem という単位をつかったのでしょうか?

それは,pxで指定した場合ユーザの解像度に関わらずpxで指定した値になるためです.

解像度が高いディスプレイで見たユーザには小さく見え,解像度が低いディスプレイで見たユーザは大きく見えてしまいます.

そのため,pxによる指定をする場合注意が必要です.

color

color は文字の色を変更するためのものです.こちらも指定方法が色々あります.

赤色にするものであっても,以下のような複数の書き方があります.

color: red;
color: #f00;
color: #ff0000;
color: rgb(255,0,0);
color: rgb(100%, 0%, 0%);
color: hsl(0, 100%, 50%);

私は,同じプロジェクト内で統一されていればどの指定方法でも良いと思います.

color - CSS: カスケーディングスタイルシート | MDN

display

/*配置の設定*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

配置を調整するためのものです. 近年,スマートフォンタブレットの普及してきました.言い換えると,閲覧者の画面サイズがまちまちになってきたということです.

flaxを用いると様々な画面サイズに簡単に対応することができます.

このあたりは私も理解できていません.いつも雰囲気で書いています.ごめんなさい.

flex - CSS: カスケーディングスタイルシート | MDN

width, height

  width: 100vw;
  height: 100vh;

これらは,その要素の幅と高さを決めるものです.何も指定していなければ,文字を囲う枠の幅になります.

全画面に対して中央に持ってくることを考えた場合,要素の大きさも全画面にしなければなりません.

vw は,ウィンドウの幅を100としたときどれほどかという指定方法です.すなわち,100vwとはウィンドウ幅いっぱいということです.

同様に vh はウィンドウの高さを100としたときの割合による指定方法です.

これらの指定をすることによって画面いっぱいにコンテンツの領域ができます.

背景画像の指定

背景画像の指定は様々な手法がありますが,私が思う簡単な方法を紹介します.

まず画像がなければ表示できないので,写真を入手します. 私はこの画像を使います.

https://free-images.com/display/rice_usd_koshihikari_rice.html

imgフォルダを作りその中にダウンロードした画像を入れます.

その後,CSSを追記します.

/*背景画像の設定*/
background-image: url("img/rice_usd_koshihikari_rice.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;

background-inage に画像のURLを指定することによって背景画像を設定されます.

その他の指定しているものであまり重要なものは無いので説明は省略します."そう書く" 程度に以下のURLを確認しておいてください.

background-size - CSS: カスケーディングスタイルシート | MDN

background-repeat - CSS: カスケーディングスタイルシート | MDN

background-position - CSS: カスケーディングスタイルシート | MDN

これらをまとめたHTMLファイルはこのようになります.

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>中央に文字がある何か</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      .content {
        /*文字の設定*/
        font-size: 4rem;
        color: white;

        /*配置の設定*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;

        /*背景画像の設定*/
        background-image: url("img/rice_usd_koshihikari_rice.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="content">おいしいお米を食べたい</div>
  </body>
</html>

f:id:Polyomino:20190210221157p:plain

Vuetify

Vue.js Material Component Framework — Vuetify.js

Vuetify は,Vue(Nuxt) 向けのUIフレームワークです.

事前準備

昨日はプロジェクトを作成したのみです. テンプレートからプロジェクトを作成した場合,このテンプレートの設定が残っています.

今回は不要なのでその設定を削除します.

layouts/default.vue を変更

<template>
  <v-app>
    <v-content>
      <nuxt />
    </v-content>
  </v-app>
</template>

pages/index.vue を変更

<template>
  <section>
    おいしいお米を食べたい
  </section>
</template>

pages/inspire.vueを削除

package.json があるディレクトリに移動して,以下のコマンドを打ちます.

npm run dev

開発用サーバが立ち上がり,http://localhost:3000 にアクセスすると文字のみが表示された画面がでてきます.

f:id:Polyomino:20190211221850p:plain

Vuetify でそれっぽい画面を作る

画像の配置

まず,プロジェクト内に画像を配置しないといけません.Nuxt.js では,static フォルダ内に画像を入れます.

static フォルダ内に rice_usd_koshihikari_rice.jpg という画像を入れます.

parallax

Vuetify は,v-parallax というコンポーネントが準備されています.

Parallax Component — Vuetify.js

これを利用すると,手軽にかっこいい画面が作ることができます.

pages/index.vue を変更します.

<template>
  <section >
    <v-parallax src="/rice_usd_koshihikari_rice.jpg">
      <v-layout column align-center justify-center class="white--text">
        <h1 class="mb-2 display-3 text-xs-center">おいしいお米を食べたい</h1>
      </v-layout>
    </v-parallax>
  </section>
</template>

画像背景に文字が入ったものができました.

f:id:Polyomino:20190211221652p:plain

よく見ていただくとわかるんですが,高さが 100vh となっていません.

ドキュメント( https://vuetifyjs.com/ja/components/parallax#parallax ) には,height という属性をつけることができると書かれています.

なので,

<v-parallax src="/rice_usd_koshihikari_rice.jpg" height="100vh">

としてみます.

f:id:Polyomino:20190211221800p:plain

すると,レイアウトが崩れてしまいました.ソースコードを見ると,100vhpx となっていることがわかります.

すなわち,v-parallax の height 指定はpxによって指定する必要があります.

フレームワークを使うとこのような場合の調整に苦労します. 今回は諦めます.デフォルトの500pxのまま運用します.

まとめ

いろんな画面サイズに対応するとき flex が便利

フレームワークを使うと簡単に実装できるが,微調整をするとなるとつらい

課外活動8

今日から数日かけて Nuxt.js でダミー企業のウェブサイトを作ります.

Nuxt.js とは?

Nuxt.js は Vue アプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。 はじめに - Nuxt.js

Nuxt.js は,Vue アプリケーションを作成するためのフレームワークということですが,Vueアプリケーションとはどのようなものなのでしょうか?

Vue.js とは?

Vue (発音は / v j u ː / 、 view と同様)はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。 はじめに — Vue.js

Vueは,「ユーザーインターフェイスを構築するためのプログレッシブフレームワーク」です.

user interface

the way a computer gives information to a user or receives instructions from a user

ユーザがコンピュータにデータを入力したり,情報を引き出したりする操作方法の総称

progressive

  1. in favour of new ideas, modern methods and change
  2. happening or developing steadily

日本語に訳すとするならば,「進歩,前進」という意味です.

まず,アプリケーションを作成したとします.その後,環境の変化などにより機能を拡張したりする必要が出てきたとします. このとき,アプリケーションはprogressiveに変化していきます.必要となるフレームワークprogressiveに変化することで無駄の無いものとなります.

Vueの作者であるEvan You氏のスライド https://slides.com/evanyou/progressive-javascript#/20

Nuxt.js でプロジェクトの作成

npx create-nuxt-app <プロジェクト名>でnuxt.jsの環境が整います.

Powershell で以下のコマンドを打ってください.

npx create-nuxt-app szm-corp

? Project name szm-corp
? Project description (My peachy Nuxt.js project) szm-corp website
? Use a custom server framework none
? Choose features to install Linter / Formatter, Prettier
? Use a custom UI framework vuetify
? Use a custom test framework none
? Choose rendering mode Universal
? Author name iPolyomino
? Choose a package manager npm

create-nuxt-app は nuxt.js のプロジェクトを簡単に作成することができるコマンドです. node.js のプロジェクトは,必要となるパッケージの管理で悩むことがありますが,このコマンドを使うことによって簡単に始めることができます.

Choose features to install で,Linter / Formatter, Prettier を選択しています.(選択は矢印キーとスペースで行うことができます.) Linter があることによってソースコードセミコロンの位置などが統一され,読みやすいものとなります.

自力で修正するのは非常に疲れるので,エディッタに自動整形を行うプラグインを入れることをおすすめします.
Extensions で prettier を導入します.
f:id:Polyomino:20190206011337p:plain Settings で format on save を選択します.
f:id:Polyomino:20190206011359p:plain この設定をすることによって,保存したタイミングで自動的に整形されます.

UI framework は,vuetify を用いています.いろいろなフレームワークがありますが,私の好みでvuetifyを選択しました.今後の記事もvuetifyを利用したもので書いていきます.

vuetifyjs.com

# ローカル環境でNuxt.jsを動かす

プロジェクトのフォルダに入り, npm run dev コマンドを打ちます. Vue アプリケーションを作成するフレームワーク

cd szm-corp
npm run dev

開発用サーバが立ち上がり,http://localhost:3000/ へアクセスすることによって作成したウェブサイトを確認することができます.

f:id:Polyomino:20190206011029p:plain

GitHubにプロジェクトをpushする.

コードをGitHubに上げます.GitHubで管理することによって,あとで紹介するNetlifyとの連携を行うことができます.

リポジトリの作成

先日と同じようにGitHubからリポジトリを作成します.

Initialize READMEのチェックを外す,Add .gitignore / Add LICENSE をNone にしておいてください.

create-nuxt-appで作成したディレクトリは既にgitが入っているためです.

リポジトリは自分のものを指定してください.

git add .
git commit -m "first commit"
git remote add origin git@github.com:iPolyomino/szm-corp.git
git push -u origin master

これで,GitHubにpush されました.

Netlify にデプロイする.

ビルドやデプロイなど,色々やってくれるウェブサービスです.今回作成するウェブサイトは静的サイトなので,このサービスを利用します.

www.netlify.com

GitHubアカウントでログイン(連携認証)してください.

ログイン後,新しくサイトを作成します.

f:id:Polyomino:20190206005845p:plain

ウィンドウが出てくるので,先程作成したリポジトリへのアクセスを許可します.

f:id:Polyomino:20190206010056p:plain

デプロイするブランチ,ビルドするコマンドと公開するフォルダの設定をします.

branch to deploy にはmaster,Build command は nuxt generate ,Public directory は dist と設定してください.

f:id:Polyomino:20190206010256p:plain

Deploy Site ボタンを押すと,ビルドが走ります.しばらく待つと,サイトが生成されURLが表示されます.

このURLにアクセスすることによってウェブサイトを確認することができます.

f:id:Polyomino:20190206010636p:plain

今後masterブランチに変更が加わるごとに自動でビルドが走りデプロイされるので,ウェブサイトの管理が非常に簡単です.

まとめ

Nuxt.js はVue アプリケーションを作成するフレームワーク

GitHub + Netlify 便利

課外活動7

Node.js の勉強をします.

環境は,Windows10 使う シェルは PowerShell を想定して記事を書きます.

Node.jsとは?

Node はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。 Node.js とは | Node.js

単語の意味

スケーラブル

  1. used to describe a computer, a network, software, etc. that can be adapted to meet greater needs in the future
  2. designed to work on a large or small scale, according to needs
  3. that can be climbed

https://www.oxfordlearnersdictionaries.com/definition/english/scalable?q=scalable

今回の場合,1番の「将来のニーズに対して適応可能」という意味です.

非同期型

非同期とは、データを転送する際に、送信側と受信側のタイミングの一致(同期)を気にせずにデータをやり取りすることである。

非同期とは (asynchronous) ひどうき: - IT用語辞典バイナリ

イベント駆動

イベントドリブンとは、コンピュータプログラムの開発および実行方式の一つで、利用者や外部の別のプログラムなどが引き起こす出来事に対応する形で処理を記述あるいは実行する方式。

イベントドリブン(EDA)とは - IT用語辞典

Node.js のインストール

PowerShell で以下のコマンドを打って確認してください.

node -v

もし,Node.jsが既にインストールされているのであればバージョン情報が返ってきます.

node -v
v10.13.0

インストールされていなければ,以下のURLからダウンロードしインストールしてください.

nodejs.org

補足:Node.jsはバージョンの更新が頻繁にあるので,nodist を使うことをおすすめします.nodist はwindows において使うことができるnode.js/npm のバージョンマネージャーです.複数のバージョン環境をPC上に作成でき,コマンドでバージョンを切り替えることができます. github.com

プロジェクト(パッケージ)の作成

cd でプロジェクトを作りたいディレクトリに入って以下のコマンドを打ってください.

npm init

パッケージ名やversion,ライセンス等聞かれますがすべて デフォルトでも問題ありません.(enterを押し続けると,デフォルトの括弧でくくられた値となります.)

すると,package.jsonが作成されています.

Node.js によるサーバアプリケーションの作成

Nodejsによるサーバを構築します.初日の図を思い出してください.

f:id:Polyomino:20190125004455p:plain

クライアントは,サーバに対してリクエストを行います.

サーバは,クライアントに対してレスポンスを返します.

すなわち,レスポンスを返す部分を作成します.

先程の 「プロジェクトの作成」で作成したフォルダに index.js というファイルを作成します.index.jsに以下のコードを書いてください.

// httpモジュールの読み込み
const http = require("http");

// ホスト名とポートの定義
const hostname = "127.0.0.1";
const port = 3000;

// リクエストに対してのレスポンスを定義
const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader("Content-Type", "text/plain");
  res.end("Hello world\n");
});

// サーバを起動.起動時に,コンソールにメッセージを表示
server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

node.jsでindex.js動かします.PowerShell で以下のコマンドを打って下さい.

node index.js

package.json に mainとしてindex.js が指定されているため,以下のコマンドでも実行できます.

node .

すると,Server running at http://127.0.0.1:3000/というメッセージが出てきます. ブラウザで http://127.0.0.1:3000/ にアクセスしてみると,Hello world というメッセージが表示されます.

f:id:Polyomino:20190131104051p:plain

HTMLファイルを返してみる.

適当なhtmlファイルを作成します. index.html という名前で保存してください.

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Node</title>
  </head>
  <body>
    Nodeはおもしろいなぁ
  </body>
</html>

リクエストがきたとき,htmlを返すようにindex.jsを書き換えます

const http = require("http");
// File Systemを扱うfsモジュールを読み込み
const fs = require("fs");

// index.htmlを読み込む
const index = fs.readFileSync("index.html");

const hostname = "127.0.0.1";
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  // 返すものはテキストではなくhtml
 res.setHeader("Content-Type", "text/html; charset=utf-8");
  // index.htmlを返す
  res.end(index);
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

ブラウザで http://127.0.0.1:3000/ にアクセスしてみると,「 Nodeはおもしろいなぁ」というメッセージが表示されます.

f:id:Polyomino:20190131110258p:plain

パッケージの利用

すべて自分でコードを書いてもいいのですが,毎回同じコードを書いていては非効率です.また,サーバを立てる,ファイルを返す等の処理は多くの人が利用するものなので,共同(ときには個人)で作り上げてみんなでそれを使ったほうが非常に効率的です.

nodeには標準でnpmというパッケージマネージャがついています. npmを利用することによって,他人の作ったパッケージを自分のパッケージで利用することができます. package.json はそのパッケージを管理するためのjsonファイルです.

引き続き同じディレクトリで作業します.

Nodeでよく用いられるパッケージとして,expressというものがあります.expressを使ってみます.

npm install express --save

するとexpressのインストールが始まります. インストール完了後,package.json を見てみると,"dependencies" に expressが追加されています.

expressを使ってサーバを立ち上げます.app.jsという名前で以下のコードを打ち込んでください.

const express = require("express");

const app = express();
const hostname = "127.0.0.1";
const port = 3000;

app.get("/", (req, res) => res.send("Hello world"));

app.listen(port, hostname, () =>
  console.log(`express server running at http://${hostname}:${port}/`)
);

そして,サーバを立ち上げます.

node app.js

ブラウザで http://127.0.0.1:3000/ にアクセスしてみると,先程同様 Hello world というメッセージが表示されます.

index.htmlを返すサーバにしてみます.

const express = require("express");
const app = express();

const path = require("path");

const hostname = "127.0.0.1";
const port = 3000;

app.get("/", (req, res) => res.sendFile(path.join(__dirname, "/index.html")));

app.listen(port, hostname, () =>
  console.log(`express server running at http://${hostname}:${port}/`)
);

ブラウザで http://127.0.0.1:3000/ にアクセスしてみると,「 Nodeはおもしろいなぁ」というメッセージが表示されます.

この小さな例ではわからないかもしれませんが,プロジェクトが大きくなってきた時,パケージを利用するメリットが大きくなります.

Express 4.x - API Reference

expressには多くの機能があり,ほんの数行書くだけでその機能を作ることができます.仮にすべて自分で実装しようとすると複雑になってしまったり書く量が増えてしまったりと大変なことになります.

時と場合に合わせて適切にパッケージを利用しましょう.

gitignore

npm install express をしたあと,node_modulesというフォルダができていたことに気づいたかもしれません.これは,expressのソースコードなどが入っています.GItでプロジェクトを管理するとき,この node_modules は含めない方が良いです.なぜなら,パッケージは日々いろんな人が更新します.それらが更新されるごとに node_modules の中身も更新されます.この変更も gitで管理してしまうと,自分の変更した点がわかりづらくなったり,リポジトリが重たくなったりしてしまいます.なので,.gitignore というファイルを作成してgitの管理から外します.

.gitignore というファイルを作成し,以下の内容をコピーしてください.

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache

# next.js build output
.next

# nuxt.js build output
.nuxt

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

gitignore/Node.gitignore at master · github/gitignore · GitHub

これで node_modules がGitの管理から外れました.

「別のPCでgit clone してきたとき node_modules が無いじゃないか」と思うかもしれません.しかしこれは心配する必要はなく,npm install というコマンドを打てば package.json にかかれているパッケージ群がインストールされます.

まとめ

nodeは非同期型のイベント駆動の JavaScript 環境

nodeにはnpmというパッケージマネージャがある.

ケースに合わせて適切にパッケージを利用しよう.

課外活動6

情報集収の方法

効率良く勉強するためには,正しい情報を自分にあった方法で仕入れる必要があります.私が数年間Webについて学ぶときに使った手法を紹介するので,自分に合った方法を探してみてください.

本による情報集収

自分の主観で読んで良かった本を選定しました.

技術書は一冊数千円するものがほとんどなので,図書館を活用するとよいです.

セキュリティを理解するために読んでおいた方が良い本

情報セキュリティ読本

セキュリティの基礎中の基礎とよばれることが書かれています. ページ数も非常に少なくきれいにまとまっているので,「セキュリティ?全く知らない😰」という人におすすめです.

体系的に学ぶ 安全なWebアプリケーションの作り方 第2版 脆弱性が生まれる原理と対策の実践

私は第1版しか読んでいないので,第1版の感想です.

どのような攻撃手法があり,どのようにすることによって防ぐことができるのかを実践を交えて理解することができます. またブラウザの保護機能の紹介もあり,何を気をつけると安全なウェブアプリケーションを作ることができるのかを知ることができます.

通信について理解するための本

マスタリングTCP/IP

マスタリングTCP/IP 入門編 第5版

マスタリングTCP/IP 入門編 第5版

通信の基礎中の基礎であるTCP/IPのことが書かれています.

Real World HTTP

ウェブ技術の基礎となるHTTPという技術がどのようなものであるのかを変遷とともに学ぶことができます.

Real World HTTP ―歴史とコードに学ぶインターネットとウェブ技術

Real World HTTP ―歴史とコードに学ぶインターネットとウェブ技術

ハイパフォーマンス ブラウザネットワーキング

どのようにするとハイパフォーマンスなウェブを実現することができるのかということについて書かれています. ワイヤレスネットワークやHTTPの歴史などにも触れられているので,ウェブに関連する技術について広くしることができます.

ハイパフォーマンス ブラウザネットワーキング ―ネットワークアプリケーションのためのパフォーマンス最適化

ハイパフォーマンス ブラウザネットワーキング ―ネットワークアプリケーションのためのパフォーマンス最適化

デザインを考えるときに読んでおいた方が良い本

ノンデザイナーズ・デザインブック

デザイナーでない人がどのようにデザインを考えると良いか基本から書かれています.

配置や色合いを少し工夫をするだけで,自分の作るものの印象が変わったり読みやすくなったりするので,一度読んで意識を変えてみることをおすすめします.

ノンデザイナーズ・デザインブック [第4版]

ノンデザイナーズ・デザインブック [第4版]

ウェブに限らず読んでおいた方が良い本

リーダブルコード

どのようなコードを書けば良いのか.どのようなコメントを書けばいいのかなどということが書かれています.

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

ベタープログラマ

プログラマとして生きていくことを考えたとき,どのようにふるまい,どのように考えると良いのかということについて書かれています.

ベタープログラマ ―優れたプログラマになるための38の考え方とテクニック

ベタープログラマ ―優れたプログラマになるための38の考え方とテクニック

Team Geek

どのようにチームのメンバーと接するとよいのかということなどが書かれています.

Team Geek ―Googleのギークたちはいかにしてチームを作るのか

Team Geek ―Googleのギークたちはいかにしてチームを作るのか

ウェブによる情報集収

HTMLやCSSJavaScriptなどのフロントエンドを取り巻く環境は,年々変化し続けます.これらの最新技術の情報集収は,ウェブ上で行うことをおすすめします.

MDN

Mozillaが管理するウェブ技術に関するドキュメントが多く載っているウェブサイトです.

大体のことは,このウェブサイトで調べれば解決します.

developer.mozilla.org

GitHub

複数の書き方で迷ったとき,他の人がどのような書き方をしているのかを見ることができます. そのフレームワーク/言語がどのような問題を抱えているのか,どのような方向で進んでいくのかという議論も見ることができます.

github.com

Stack Overflow

海外の開発者向け技術軽情報共有サイトです. 情報量が多いです.

stackoverflow.com

Qiita

玉石混交ですが,有益な情報が掲載されていることも多々あります. 日本語で技術系の調べものをするとき,役立ちます.

qiita.com

teratail

僕は使ったことが無いのでわかりませんが,初心者に優しいプログラミング質問サイトというイメージがあります.

teratail.com

つながりによる情報集収

勉強会

勉強会などに参加すると,現在トレンドである技術が学べることがあります.また,一緒に勉強する仲間もつくることができるのでおすすめです.

勉強会に行ったことが無いと言う人は,ひとまずTwitterアカウントとFaceBook アカウントをつくりましょう.多くの場合,連絡先を交換するとなるとこの2つのどちらかです.

connpass

connpass.com

ATND

atnd.org

TECK PLAY

techplay.jp

Doorkeeper

www.doorkeeper.jp

まとめ

学ぶことによって情報の仕入先を変更すると,効率よく学ぶことができます.

課外活動5

今日は,DOMについて説明します.

DOMとは

Document Object Model (DOM) は HTML や XML 文書のためのプログラミングインターフェイスです。ページを表現するため、プログラムが文書構造、スタイル、内容を変更することができます。 DOM は文書をノードとオブジェクトで表現します。そうやって、プログラミング言語をページに接続することができます。 DOM の紹介 | MDN

具体的な例で説明すると,HTMLをJavaScriptで操作するときDOMというものを利用します.

html におけるid

DOM操作をするとき,どのタグ(オブジェクト/ノード)に対して操作を行うのかを特定する必要があります. 特定をするための材料として,htmlタグにidを付加することができます.

付け方は,classと同じようにタグの属性として付けます.

<div id="app"></div>

id はclassとは違い,ドキュメント(HTMLファイル)内で一意でなくてはなりません. つまり,同じHTML内には 同じ id を指定してはいけません.

JavaScript によるDOM操作

DOM操作方法の一つとして,Document.getElementById()innerHTMLを利用する方法があります.

Document.getElementById() | MDN

element.innerHTML | MDN

HTMLで以下のコードがあったとします.

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>DOM操作</title>
  </head>
  <body>
    <div id="message"></div>
  </body>
</html>

<div id="message"></div>にテキストを追加するには以下のようなJavaScriptのコードでできます.

document.getElementById("message").innerHTML = "JavaScriptからHTMLを操作しています"

アプリケーション作成

最後に,いままでやってきたことの復習です.ウェブ上で動作する時計を作成します.

プログラム実装

JavaScriptで時間は,new Date() でDateオブジェクトの作成ができます.

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>時計</title>
  </head>
  <body>
    <div id="clock"></div>
    <script>
    // Date オブジェクトの作成
    const time = new Date();
    // 時間,分,秒の取得
    const hours = time.getHours();
    const minutes = time.getMinutes();
    const seconds = time.getSeconds();
    // clockに対して操作する.
    document.getElementById("clock").innerHTML = `${hours}:${minutes}:${seconds}`;
    </script>
  </body>
</html>

」で囲われた部分は,テンプレート文字列と呼ばれ文字列として扱われます. ただし${}` で囲われた部分に変数を書いた場合,その変数が展開されます.

結果はこのようになります.

f:id:Polyomino:20190128214518p:plain

しかし,このままだとJavaScriptのコードが一度しか実行されないため,時間が進みません.なので,1秒毎に更新されるようJavaScriptを書き換えます.

毎秒実行するには,setIntervalを使います.setInterval を利用するときに関数であったほうが扱いやすいので,描画内容をアップデートする関数を作ります.

    const update = () => {
      // Date オブジェクトの作成
      const time = new Date();
      const hours = time.getHours();
      const minutes = time.getMinutes();
      const seconds = time.getSeconds();
      document.getElementById(
        "clock"
      ).innerHTML = `${hours}:${minutes}:${seconds}`;
    };
    // 初回ロード時実行
    update();

update関数ができたので,setIntervalの引数として渡します.

    const update = () => {
      // Date オブジェクトの作成
      const time = new Date();
      const hours = time.getHours();
      const minutes = time.getMinutes();
      const seconds = time.getSeconds();
      document.getElementById(
        "clock"
      ).innerHTML = `${hours}:${minutes}:${seconds}`;
    };
    // 初回ロード時実行
    update();
    // 1000 ミリ秒(=1秒)ごとにupdateを実行
    setInterval(update, 1000);

これで,毎秒更新される時計が実装されました.

見た目を整える

JavaScript

時間がひと桁であった場合,表示される時間もひと桁です.少し気になるので,ひと桁であった場合0を追加して調整します.

      const minutes = `0${time.getMinutes()}`.slice(-2);
      const seconds = `0${time.getSeconds()}`.slice(-2);

f:id:Polyomino:20190128214626p:plain

2 秒であった場合,02として後ろから2文字文切り出します.16秒であった場合も016となって後ろから2文字分切り出されるので12となります.

CSS

このままだと文字が小さく見にくいので,文字を大きくします.

CSSでidに対するセレクタもあり,<div id="app"></div>に対して適用する場合,#app と書きます.

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>時計</title>
    <style>
      #clock {
        font-size: 10rem;
      }
    </style>
  </head>
  <body>
    <div id="clock"></div>
    <script>
    const update = () => {
      // Date オブジェクトの作成
      const time = new Date();
      const hours = time.getHours();
      const minutes = `0${time.getMinutes()}`.slice(-2);
      const seconds = `0${time.getSeconds()}`.slice(-2);
      document.getElementById(
        "clock"
      ).innerHTML = `${hours}:${minutes}:${seconds}`;
    };
    // 初回ロード時実行
    update();
    // 1000 ミリ秒(=1秒)ごとにupdateを実行
    setInterval(update, 1000);
    </script>
  </body>
</html>

f:id:Polyomino:20190128214728p:plain

だいぶ見やすくなりました.しかし,左上にあるので中央に移動させます.

      body {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
      }
      #clock {
        font-size: 10rem;
      }

中央に移動させることができました.

f:id:Polyomino:20190128214759p:plain

最終的なコードはGitHubにあります.

https://github.com/iPolyomino/szm/blob/master/clock.html

プレビュー https://ipolyomino.github.io/szm/clock.html

まとめ

プログラムからHTML,XMLを操作することができる.このとき用いられるものがDOM

課外活動4

今日は,作ったウェブサイトを公開します.

公開には,GitHub Pagesを利用します.

基本的なgit操作

私はこのウェブサイトでGitについて勉強しました.非常にわかりやすいので,おすすめです.

backlog.com

これの入門編を一通り読んでください.

頻繁に打つコマンドとして以下のものがあります.

  • git status
    • ワークツリーとインデックスの状態を確認する
  • git add .
    • すべてのファイルをインデックスに登録する
  • git commit -m "コミットメッセージ"
    • コミットする
  • git log
  • git push

GitHub を使う

リポジトリ作成

GitHub へログインします.

https://github.com/

リポジトリを作ります.

右上の+ボタン,New repository をクリックします.リポジトリ名を入力し,Create repository をクリックします.

f:id:Polyomino:20190126160352p:plain

リポジトリを作ることができました.

clone

緑のボタンを押してリポジトリのアドレスを確認します.このとき,Clone with SSH となっていることを確認してください.

もし,ssh という選択肢がないのであれば, Connecting to GitHub with SSH - User Documentation で確認しながら公開鍵を登録してください.

f:id:Polyomino:20190126160258p:plain

実際にクローン(ダウンロード)してきます. クローンして期待ディレクトリに移動して,以下のコマンドを打ちます.

僕の場合,このようになります.

git clone git@github.com:iPolyomino/szm.git

Git Bash もしくはPowerShellで, git clone リポジトリ としてください.

クローン完了後,ls コマンドでそのリポジトリがクローンされていることを確認することができます.

commit & push

まず,cd でクローンしてきたディレクトリに入ってください.そして,クローンしてきたディレクトszm に初日に作った hello-world.html を追加します.(コピー&ペーストでOK)

git の状態を確認します.

git status

すると,以下のような結果が帰ってきます.

On branch master
Your branch is up-to-date with 'origin/master'.
Untracked files:
  (use "git add <file>..." to include in what will be committed)

    hello-world.html

nothing added to commit but untracked files present (use "git add" to track)

hello-world.html がgit の追跡対象となっていないことがわかります.なので,追跡対象に追加します.

git add hello-world.html

追加でたか確認します.git status を打ってください.

On branch master
Your branch is up-to-date with 'origin/master'.
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

    new file:   hello-world.html

追加できているようです.

インデクスに追加されたので,コミットの準備ができました.commit します.

git commit -m "add hello-world"

コミットできました.

git status で確認します.

On branch master
Your branch is ahead of 'origin/master' by 1 commit.
  (use "git push" to publish your local commits)
nothing to commit, working tree clean

最後にリモートにpush (アップロード)します.

git push

自分のリポジトリGitHub)を確認すると,ファイルが上がっていることを確認することができます.

f:id:Polyomino:20190126170039p:plain

GitHub Pages に公開する.

GitHub を開いて,Settingsタブに移動します.

f:id:Polyomino:20190126170206p:plain

下の方にある GitHub Pages の Source を master branch にしてsaveボタンを押します.

f:id:Polyomino:20190126170352p:plain

しばらくすると,Your site is published at https://ipolyomino.github.io/szm/ というようなメッセージが出ます.

今回,hello-world.html という名前で公開しているので,このURLの最後にhello-world.html を追加します.

https://ipolyomino.github.io/szm/hello-world.html

というように,https:// <ユーザー名> .github.io/ <リポジトリ名> / <ファイル名> とすることによってアクセスすることができるようになります.

まとめ

Git コマンドを使う

GitHub はGitのホスティングサービス

GitHub Pages でウェブサイトを公開することができる.

課外活動3

動的なコンテンツ(ボタンを押したら表示される内容が変わるなど)というものを見たことがあると思います.

これは多くの場合,JavaScriptによって実装されています.

JavaScript

よく間違えられるのですが,JavaとJavaScirpt は別物でインドとインドネシアぐらい違うので,情報を集めるときには注意が必要です.

JavaScriptscript タグで囲われた場所に書くことができます. 初日の例に書き加えます.

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
  </head>
  <body>
    <h1>HTMLの勉強</h1>
    <p>
      HTMLはHyper Text Markup Languageといってハイパーリンクと呼ばれる
      <a href="https://google.com/">リンク</a> を張ることができます.
    </p>
    <script>
     alert("これがJavaScriptです");
    </script>
  </body>
</html>

f:id:Polyomino:20190125172918p:plain

for文やif文などの基本構文はc言語Javaと似ています.

なので,JavaScript 特有の書き方を紹介します.

定数

定数の宣言は,const と書きます.

const hello = "こんにちは";

変数

変数の宣言は,let と書きます.

let hello = "こんにちは";
hello = "여보세요"

const とは違い,再代入が可能です.

古いレファレンスなどで,var という変数宣言が用いられている場合がありますが,スコープが直感的などバグの原因となりやすいので使うのを控えましょう.

関数

JavaScriptには複数の関数の書き方があります.

const hello = () => {
    console.log("Hello World");
};
function hello() {
    console.log("Hello world");
}
const hello = function() {
    console.log("Hello world");
}

どれも,helloという関数を作ることができ,hello() で実行することができます.

現在の主流は,一番上の書き方なので抑えておきましょう.

developer.mozilla.org

比較演算子

JavaScript の比較演算子は少し特殊です. 以下の例を見てください.

'1'  ==  1         // true
1    == '1'        // true
0    == false      // true

左右で型が違った場合,自動で型を変換して比較を行うので,すべてtrueになります.なので,===を使います.

'1'  ===  1         // false
1    === '1'        // false
0    === false      // false

その他の構文

if 文や for 文はおおよそ他の言語と同じです. 出てきたタイミングで確認すればすぐにわかります.

DevTools

昨日 css の確認をするときに用いたDevToolsですが,JavaScriptの動作の確認にも使うことができます.

一番上の例の alert("これがJavaScriptです");console.log("これがJavaScriptです"); に書き換えてみてください. そして DevTools を Console タブに切り替えると,以下のようになります.

console.log

consoleには,エラーやデバッグのメッセージを出すことに使うことができます.

余力があれば,ブレークポイントなどの使い方も勉強すると良いと思います. developers.google.com

fizzbuzz

プログラミングの練習問題としてfizzbuzzというものがあります.

プレイヤーは円状に座る。最初のプレイヤーは「1」と数字を発言する。次のプレイヤーは直前のプレイヤーの次の数字を発言していく。ただし、3で割り切れる場合は「Fizz」、5で割り切れる場合は「Buzz」、両者で割り切れる場合(すなわち15で割り切れる場合)は「Fizz Buzz」を数の代わりに発言しなければならない。発言を間違えた者や、ためらった者は脱落となる。Fizz Buzz - Wikipedia

すなわち,

  • 3の倍数のときは Fizz
  • 5の倍数のときはBuzz
  • 15の倍数のときは FizzBuzz

と出力するという問題です.JavaScriptFizzBuzzを書くとこのようになります.

for (let i = 1; i <= 30; i++) {
  if (i % 5 === 0 && i % 3 === 0) {
    console.log("FizzBuzz");
  } else if (i % 5 === 0) {
    console.log("Fizz");
  } else if (i % 3 === 0) {
    console.log("Buzz");
  } else {
    console.log(i);
  }
}

CやJavaをしていれば,容易に理解することができると思います.

まとめ

ブラウザで動く言語はJavaではなくJavaScript

DevToolsのコンソールで確認.

基本的構文

  • 定数(const)
  • 変数(let)
  • 関数(アロー関数)
  • 比較演算子(===)