N予備校:プログラミング入門 Webアプリ 6日目

学んだこと

Node.js

  • JSでプログラミングすることのできる、サーバーサイド向けのプラットフォーム
  • バージョン管理にはnodebrewを使用
    • パスを通す必要がある
    • パスとは、コマンドとなるプログラムが含まれているディレクトリの設定のことで、 PATHという名前の環境変数に値を代入することで、設定することができる
    • echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.profile
    • .profileというシェルの起動時に自動的に実行されるシェルスクリプトファイルに追記を行う。
    • >>追記を行えるが、怖かったらvimを使用したほうがいい
  • 今回使用するバージョンはV8.9.4
  • nodeを使用する際のコマンドライン引数はprocess.argvで取得できる
    • [2]から始まる
    • [0]はnodeコマンドのファイルパス
    • [1]は実行しているプログラムのファイルのパス

集計処理

  • const fs = require('fs');という記載方法でNode.jsに用意されたfs(FileStream)というモジュールを呼び出せる
  • APIの詳細はNode.jsのAPIで確認できる。
  • Node.jsでは、入出力が発生する処理をほとんど Streamという形で扱う
    • 非同期で情報を取り扱うための概念で、情報自体ではなく情報の流れに注目する
  • 連想配列Mapは便利。
  • map関数で配列の各要素に与えられた関数を適用できる

アルゴリズム

  • オーダ記法でO(α2)は遅い。毎回再起で計算しなおすフィボナッチ数列等。
  • プロファイルツールとしてnodegrindというツールを使用
  • メモ化を使用して処理を高速化。
    • 一度計算した値はMapに格納しておき、その値を使用する。

ライブラリ

  • 汎用的な処理を実装する際には、ライブラリが存在するかどうか探す習慣は非常に大切
  • npmはNode.js用のパッケージマネージャ

Slack用bot作成

導入ライブラリ - yo - Yeoman(ヨーマン) と言う、Google 社が作成したひな形作成ツール - generator-hubot - Yeoman を利用した Hubot というボットのジェネレーター - Hubot - Hubot は GitHub 社が作った、ボットを作成するためのフレームワーク - CoffeeScript - JavaScript をより便利に書くために作られた言語(AltJS と呼ぶ)の一種

感想

ついにWebサービスを作り出す第一歩を踏み出した!
Node.jsという今時なプラットフォームを使用し開発を進めていけるという点は非常に良い部分ではないかと思う。(まだJSで書いているだけなので、特に素晴らしと感じた点はない。)
Slackは会社でも使用されているので、何かいい感じのbotを作成してみようかという気になった。

N予備校:プログラミング入門 Webアプリ 5日目 (3)

学んだこと

GitHub

イシュー管理とWikiによるドキュメント作成

  • issuesタブでイシューを管理
  • イシュー番号(#〇)を記載するとリンクできる
  • WikiタブでWikiを作成可能
  • WikiMarkDownで編集可能
  • Gistを使うと、小さなメモを公開または非公開で、管理可能

GitとGitHub

  • git clone コピーしたアドレスというコマンドで、自端末にリポジトリをコピーできる
  • git pull origin masterというコマンドで、masterブランチの最新の内容を取得できる

GitHubへのpush

  • git config --globalコマンドでgitに自分の情報を登録できる
    • user.nameで名前
    • user.emailでメールアドレス
    • core.editorで編集エディタ
  • 登録した情報はgit config -lで確認できる
  • git initコマンドで、ローカルリポジトリを作成できる
  • git addコマンドで、ステージングにファイルを追加できる
  • git statusコマンドで、ステージング状況を確認できる
  • git commit -m "コミット内容"で、コミットできる
  • git logコマンドで、コミットログを確認できる
  • git pushコマンドで、ローカルの変更をリモートのリポジトリに反映できる

Gitのブランチ

  • git branchコマンドで、現在のリポジトリにどのようなブランチがあるかを確認
    • *がついているブランチが現在のブランチ
  • git branch gh-pagesコマンドでgh-pagesブランチが作成できる。
    • gh-pagesブランチは特別なブランチ
    • このブランチにpushするとGitHubPagesというサイトに自動的にWebページとしてリポジトリ内容が公開される
  • git checkoutコマンドで、ブランチを切り替えることができる
  • git margeコマンドで、他のブランチからの変更を取り込める

ソーシャルコーディング

  • ブランチは機能開発や不具合修正を同時並行で行うために使う
  • 変更した内容が衝突するようなマージを行うとコンフリクトが発生する
    • 手動で修正して、コミットすると解消できる
  • プルリクエストを利用して、ソーシャルコーディングを行うことができる

感想

Gitの使い方を丁寧に進めることができ、非常によかった。
今までSubversionしか使用したことがなかったが、Gitに少し慣れることができた。
覚えることは多いが、開発の進め方が今どきになってきてワクワクが止まらない!

N予備校:プログラミング入門 Webアプリ 5日目 (2)

学んだこと

  • 通信とネットワーク
  • サーバーとクライアント
  • HTTP通信
  • 通信をするボットの開発

通信とネットワーク

  • 電気通信には2つの方式がある
    • 回線交換方式
      • 通信を始める前に、回線の占有を行う
      • 電話などはこの方式
    • パケット交換方式
      • 情報を細かくパケットに分割
      • インターネットはこの方式
      • 送信元、送信先の情報等を付けて送信
      • こうすることで、バラバラな経路で通信可能
      • 経路遮断等に強いため、災害時に強い
  • IPアドレスはインターネット上の住所
  • TCP
    • 相手の通信状況を確認して接続を確立して、データの転送が終わったら切断する
  • UDP
    • 相手との接続を確立しないでいきなりデータを送る
  • pingコマンドでネットワーク疎通を確認
コマンド 操作
tcpdump TCPUDP で行われる通信のパケットの内容を見る
curl 第一引数に指定された URL にアクセスして、コンテンツを取得する
ping ホストに対して、パケットが届くのかの確認をしたり、その応答時間を調査できる

サーバーとクライアント

  • サーバークライアント型通信
    • サービスを提供するコンピューターをサーバー、サービスを受ける側のコンピューターをクライアントと呼ぶ
    • ネットワークは、サーバーから放射状にクライアントにつながる
  • P2P (Peer to Peer) 型通信
    • 全てのコンピューターがサーバーでもありクライアントでもあり、相互に通信し合う
    • ネットワークはメッシュ状
  • tmuxというソフトウェアを使用すると、1つのコンソールで、複数コンソールを操作したり、コンソールの状態を維持することが可能
コマンド 操作
nc TCPUDP の読み書きを行う
telnet リモートのコンピューターにアクセスし、ターミナルのセッションを開始するためのコマンド。全ての通信を平文で送信するため、セキュリティ上の理由で現在はssh等の代替プロトコルを使用することが多い

HTTP通信

HTTPとは、HyperText Transfer Protocolの略称で、HTMLなどの HyperTextを受け渡すためのTCP/IP上で実現するプロトコルの一つ

  • HTTPではデフォルト80番ポートを使用
  • HTTP のリクエストは、TCP/IPを使い、通常のテキストでやりとり
  • HTTPをSSLTLSという方式で暗号化して通信を行うプロトコルHTTPSという
  • HTTPSのデフォルトのポートは、443番
  • DNSは、ホスト名を IP アドレスに変換するシステム

通信をするボットの開発

  • curl を使ったボットを作る際には、リクエストのヘッダでボットであることを伝える
    • 不具合が発生した際に、サーバーの管理者がボットからのアクセスを遮断しやすくするため
  • cron を利用すると、シェルスクリプトなどをスケジュールに合わせて動かすことができる
    • crontabコマンドでスケジュールを設定できる

感想

通信関連はざっくりとした説明だったが、概要をつかむにはいいのかなと感じた。

N予備校:プログラミング入門 Webアプリ 5日目

学んだこと

  • 標準出力
  • vi
  • シェルプログラミング

標準出力

  • 標準入力をうけて、標準出力標準エラー出力を出す。これが、 Linuxコマンドラインプログラムの仕組み
  • 標準出力をファイルに書き出すことを、リダイレクトという

    • コマンドの最後に>と記述すると標準出力をファイルに保存できる
    • >>とするとファイルに追記
    • 2>とすると標準出力ではなく、標準エラー出力を出力
    • 2>&1とすると標準出力と標準エラー出力の両方を出力
  • パイプ(記号|)でコマンド同士をつなぐと、一つ目のコマンドの標準出力を、2つ目のコマンドの標準入力にできる

    • ls /bin | lessと入力するとls /binの結果をlessコマンドで開け、そのまま閲覧可能
コマンド 可能な操作
cat 複数のファイルの中身を結合して、標準出力に出力。
less 与えられたファイルの中身をvimの操作で閲覧可能
grep ファイルや標準入力の中から特定の単語を検索する。第一引数に「含まれるかどうかを判定する単語」を、第二引数に「検索したいファイル名」を入力。正規表現でも検索可能。

vi

  • CUIエディタ
  • Ubuntuにはvim(viクローン)がインストールされているためそれを使う。
  • vimtutorでチュートリアル
  • コマンドモードでは以下の操作が可能
    • カーソルを動かす
    • ファイルの保存、vimの終了
    • 切り取り貼り付け、編集操作
  • インサートモード
    • 文字を入力するモード
      • iで挿入、aで追加
    • コマンド 操作
      vim ファイル名 ファイル開く
      esc コマンド入力モード。vim上でコマンドを入力する前に必ず押す。
      :q ファイル閉じる
      :q! 編集内容を破棄して終了
      :w ファイルの保存
      i カーソルの前側に文字を入力
      a カーソルの後ろ側に文字を入力
      x 不要な文字を削除

シェルプログラミング

  • シェルとは、OSの中核となる部分(カーネル)を包み込み対話をする機能
  • bashと呼ばれるシェルを利用
  • シェルスクリプトbashで実行する場合、#!/bin/bashと記述する必要がある。
    • これをシバン (shebang)という。
  • コマンド上でchmod a+x ファイル名と実行すると、どのユーザ、グループであっても実行可能となる。
  • ./ファイル名シェルスクリプト実行可能
コマンド 操作
touch 引数で渡された名前のファイルが存在しなかった場合には、空ファイルを作成し、存在した場合には、そのファイルやディレクトリの更新日時を更新する。
chmod ファイル権限を変更する。
echo 第一引数で与えられた文字列を、そのまま標準出力に出力する。
read 第一引数で与えられた名前の変数に、標準入力で与えられた文字を代入する。

感想

vimの操作を学んだことにより、黒い画面をカタカタ操作するそれっぽいエンジニアへの一歩を踏み出した感がある。

N予備校:プログラミング入門 Webアプリ 4日目

学んだこと

  • LinuxというOS
  • ファイル操作

LinuxというOS

ファイル操作

ファイル操作コマンド

コマンド 出来る操作
pwd 現在のディレクトリの表示
ls ファイル・ディレクトリの一覧表示
cd カレントディレクトリの変更
mkdir ディレクトリの作成
rm ファイルやディレクトリの削除。ディレクトリは-rを付けないと削除できない。もしくはrmdirコマンド。
cp ファイルやディレクトリのコピー
mv ファイルやディレクトリの移動
find ファイル・ディレクトリの検索
man マニュアル表示

感想

ファイル操作コマンドはこれから頻繁に使うことになると思うので、必ず覚えたい。

N予備校:プログラミング入門 Webアプリ 3日目

学んだこと

  • Web ページの企画とデザイン

Web ページの企画とデザイン

「あなたのいいところ診断」というWEBページの作成。

  • 入力欄はinputタグ(HTML)
  • type属性にtextと記載するとテキストフィールドになる。
  • margin と padding という 2 種類の余白

    • margin は境界線より 外側 の余白、padding は境界線より 内側 の余白
    • border は none(非表示)にした場合でも、あくまで見えないだけで両者の境界として存在している
  • メソッドのコメントはJSDoc形式

/**
* 名前の文字列を渡すと診断結果を返す関数
* @param {string} userName ユーザーの名前
* @return {string} 診断結果
*/
  • 正規表現で文字列置換
    • /\{userName\}/gで{userName} という文字列自身に合うものを複数回適用するという意味
  • console.assertでテスト記載可能。
    • 第一引数には、正しい時に true となるテストしたい式を記入
    • 第二引数には、テストの結果が正しくなかった時に出したいメッセージを記入
  • 何もない場所に、プログラムから利用できるエリアを確保するためには、 divタグを利用
    • このタグを使ってマークアップしておくと、そこにプログラムから何かしらの表示をさせたり、スタイルシートで表示を変更したりすることができて便利
  • () => {}という記述で無名関数を記載可能。(アロー関数)
  • JavaScript の論理評価
    • true 以外の値でも殆どの場合 true と評価される
    • 以下の値はfalseになる
      • false
      • null
      • undefined
      • 空文字列 ''
      • 数値の 0
      • 数値の NaN (非数という、数値にできないことを意味する特殊な値)
  • URIエンコード
    • encodeURIComponent 関数で 文字列を URI エンコードされたものへ変換
    • decodeURIComponent 関数で URI エンコードされた文字列から元のものへ復元

感想

第1章終了!!
第1章はjavascript,HTML,CSSについて学べた。ここまでが書籍になっているのかな?全てのコードについて記載されており、コピペでも実行できるので、初心者でも割と進めやすいんじゃないかな~と感じた。
第2章はGitの操作等なじみのない部分が入ってくるので楽しみ。

N予備校:プログラミング入門 Webアプリ 2日目

学んだこと

JavaScriptの基礎

コレクション

  • 配列の要素数を超えた場合はundefinedが返される
  • pushで要素追加

関数

  • 関数の記述はfunction
  • 引数に型は指定しない(動的型付けなので当然か・・・)

オブジェクト

  • C#のclassに似た存在
  • オブジェクトは、 { } で宣言し、その中にプロパティを プロパティ名: 値 の形式で宣言

CSSの基礎

  • Cascading Style Sheets (カスケーディング・スタイル・シート)の略
  • HTMLの装飾に使用
  • CSSも別ファイルにまとめるべき(メンテナンスのしやすさ向上)
  • table, td, th {}と書けば、表を表す table 要素、表のセルを表す td 要素、表のヘッダのセルを表す th 要素の3つに適用できるセレクタとなる
  • ブラウザ右クリックの検証で確認可能
  • class属性は、その名前にもとづいて HTML タグを分類する機能
  • 特定のclassを対象にし、CSSで見た目を指定したりすることができる
  • .face { color: darkblue; }という書き方でcssファイル上で指定可

感想

動的型付けに慣れない・・・。