11月20日〜11月24日の学習内容

11月20日(月)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」
第4章「実践サーバーサイドプログラミング」

  • 17.ユーザーの保存
  • 18.予定の一覧の表示
  • 19.出欠の表示と更新
  • 20.コメントの表示と更新
  • 21.予定の編集と削除
  • 22.デザインの改善
  • 23.セキュリティ対策と公開

先週に引き続きスケジュール調整のWebサービスの作成を行いました。
よくわからないところがたくさん出てきましたが、とりあえず一通りやってしまおうという感じで進めました。

 

17.ユーザーの保存
データを保存できるようにモデルの実装を行いました。
データベースはPostgreSQL、ライブラリはsequelizeを使用。
リレーションの設定のところが難しかったです。

 

18.予定の一覧の表示
作成した予定の一覧を表示できるように実装を行いました。
トップページにログインへのリンクを実装→ログイン時にしか表示されない予定作成フォームを実装→フォームから送られた情報を保存できるように実装→トップページに自分が作った予定一覧を表示されるように実装→予定の内容と出欠表の表示画面の実装
という流れ。
フォームから送られた情報の保存の処理の際に出てきたPromiseっていうのがよく理解できない。

19.出欠の表示と更新
予定の詳細画面で出欠の更新ができるように実装を行いました。
出欠表の表示アルゴリズムを考える→出欠情報を作成する処理を実装→出欠情報を表示させる実装→出欠更新のWebAPIの実装→出欠更新のテストの実装
という流れでした。
出欠情報を作成する際に出てきたMapMapが難しかったですし、この回でもPromiseが出てきました。うーんよくわからん。

 

20.コメントの表示と更新
webpackとjqueryを使用して出欠とコメントの更新して表示させる実装を行いました。
AJAXによる出欠の更新→コメントの表示の実装→コメントの更新のwebAPIの実装
AJAXによるコメントの更新→Promiseチェインを利用した書き直し(リファクタリング
という流れです。
またPromiseが出てきました。ここで「Promiseの本」というページが紹介されていたのでよく読んでおこうと思います。

 

21.予定の編集と削除
予定の内容を編集したり削除したりできるように実装を行いました。
予定編集フォームの実装→予定編集を反映させる実装→予定が編集できることのテスト
→削除機能の実装

 

22.デザインの改善
Bootstrapを使ってページのデザインを修正しました。
ここでJavaScriptの変数thisについても学習しました。

 

23.セキュリティ対策と公開
第4章の最後です。セキュリティ対策を行ってHerokuにデプロイしました。
行うべきセキュリティ対策の確認→CSRF脆弱性の対策→ログインできなかった際のリダイレクト機能の実装→Herokuへの公開

 

これで「プログラミング入門Webアプリ」を全て終えることができました。後半よくわかってない部分も多かったんですが、一通りやったことで開発の流れがだいたい掴めたと思います。
よく理解できてない部分を中心に復習しながら次の学習に移りたいと思います。

 

11月21日(火)の学習内容

jQueryについて学習することにしました。
Udemy」の「速習+詳細+実例 jQuery講座」です。
動画が細かく分かれているので、よく理解できなかった部分を繰り返し視聴しやすくて便利ですね。
セクション1〜セクション15まで学習しました。
セクション4のdeferredのところで出てきたpromiseは、前日たくさん出てきたpromiseと同じものかな?このdeferredの仕組みも難しいです。
とりあえずコールバック地獄を避けるため、ということはわかりました。

 

11月22日(水)の学習内容

昨日に引き続き「Udemy」の「速習+詳細+実例 jQuery講座」でjQueryの学習です。
セクション16〜セクション27(最後)まで学習しました。
これでjQueryでどんなことができるかなんとなくわかった気がします。

並行してCSV形式のテキストデータをブラウザ上にテーブ表示させるプログラムの作成を課題として取り組んでいます。

  • 表示ボタンをクリックするとテキストエリアに入力したデータを改行区切りの配列、さらにカンマ区切りの配列にして二重配列を作る。
  • 結果表示の<div>タグに<table>タグ→<tr>タグ→ <td>タグを作成して二重配列からデータを取得して表示させる。
  • チェックボックスにチェックが入っていたら、テキストエリアの一行目は<th>タグを作成してそこにデータを表示させる。

というところまで実装できました。
二重配列を作る処理、テーブルタグに表示させていく処理についてアドバイスをいただきました。ありがとうございます。

 

11月24日(金)の学習内容

CSV形式のテキストデータをブラウザ上にテーブル表示させる課題の続きです。

  • 変数名などを変更(前日変数名の付け方についてアドバイスをいただいたので)
  • ヘッダーテキストボックスの実装(チェックボックスにチェックが入ってない時はヘッダーテキストボックスに入力したテキストデータを<th>タグに表示)
  • テキストボックスでのEnterキーの無効化
  • LocalStorageの実装(ヘッダーテキストボックスに入力したデータのみLocalStorageに保存、読み込み時にLocalStorageにデータがある場合はテキストボックスに表示させる
  • 表示ボタンを押した時、結果表示欄にすでにデータが表示されていたら削除して、新しいデータを表示
  • テキストボックスに何も入力されてない状態で表示ボタンを押すとLocalStorageのデータの値が空に上書きされないように修正

以上を行いました。LocalStorageの実装に苦戦しました。
最後にコードのインデントが揃ってないので見辛いと指摘され、フォーマットの仕方を教わりました。(エディタはVS Code を使用しています。Macはシフト+オプション+F)
インデントのことを全然気にしてなかったので今後気をつけたいと思います。

11月16日〜11月17日の学習内容

11月16日(木)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」
第4章「実践サーバーサイドプログラミング」

昨日に引き続きフレームワークについての学習です。

05.継続的インテグレーション
継続的インテグレーション(Continuous Integration)という概念を学びました。
ここではCircleCIというWebサービスを使用して自動でビルドとテストを実行しました。

 

06.クライアントのフレームワーク
webpackというフレームワークを使用して

・複数のファイルにまたがるJavaScriptを一つにまとめる
・HTMLでJSでもNode.jsのモジュールを利用する

ということができました。

 

07.DOM操作のフレーム
DOM(Document Object Model)操作を行うためにjQueryというフレームワークを使用しました。
ここではjQueryを利用して簡単なアニメーションの実装を行いました。

 

08.AJAX
AJAX(Asynchronous JavaScript + XML エイジャックス)
JavaScriptから非同期のリクエストを行いユーザーインターフェースの更新を行う技術(Googleマップとか)
単一のWebページで複数の機能を表現したアプリケーションをシングルページアプリケーションという(SPA)
AJAXの機能を利用して自動的にサーバーの状態(ロードアベレージ)を取得するWebページを作成しました。
AJAXの通信のリクエストは同じ生成元(ホスト、スキーム、ポート)が一緒であるURLにしかアクセスできないようになっている。(同一生成元ポリシー)

 

09.WebSocket
WebbSocket=Webサーバーとブラウザでの双方向通信の規格
リアルタイム性を求める場合、AJAXの通信では短い間隔でHTTPのリクエストを何度もサーバーに送らなければならないためサーバに負荷がかかる(プル通信)
WebSocketはサーバーから任意のタイミングでクライアントに情報を送信することができる(プッシュ通信)
Socket.IOというライブラリを使用しました。

 

11月17日(金)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」
第4章「実践サーバーサイドプログラミング」

  • 10.RDBMSSQL
  • 11.データモデリング
  • 12.テーブルの結合
  • 13.インデックス
  • 14.集計とソート
  • 15.「予定調整くん」の設計
  • 16.認証の実装とテスト

今度は主にデータベースについての学習を行いました。

 

10.RDBMSSQL
Relational Database Management System(RDBMS)の一つであるPostgreSQLを使用。
psqlの起動→CREATEデータベース→データベースに接続→CREATEテーブル(列を定義)→INSERT(行を追加)→SELECT(データを取得)→DELETE(WHEREで条件を指定してデータを削除)という流れでデータベースの操作を行いました。
そのほかにはDROP(テーブル自体を削除)とUPDATE(データを上書き)も。CREATE,DROPDDL(Data Define Language)
SELECT,INSERT,DELETE→DML(Data Manipulation Language)

 

11.データモデリング
RDBにおけるデータモデリングについて
データ中心アプローチ
 1)データベース管理したい対象(エンティティ)を決める
 2)エンティティの関わりを考える(リレーションシップ)
   リレーションシップを持つ両者の数の対応がどうなっているか
    →カーディナリティ(1対多、1対1など)
   必ず関係が成り立つか、成り立たない場合もあるのか
    →オプショナリティ
   片方のエンティティが存在しないともう片方も存在できないか
    →エンティティの従属性(従属エンティティ、独立エンティティ)
 3)データとして持つ項目をまとめる
   各エンティティに含まれるデータの項目(属性)をまとめる
   全体像がわかりやすいようにER図にまとめる

データベースのインポート→データの抽出→非正規形の問題点
非正規形→データモデリングをテーブル設計に生かす(「人」と「日記」というエンティティで分割)→データの重複がなくなり管理がしやすい構造(正規形)

 

12.テーブルの結合
一つのSELECT文で複数のテーブルにまたがるデータを取得する(テーブルをつなぐための列が必要なのでテーブル設計が正しく行われていることが前提)
内部結合(INNER JOIN) と外部結合がある。外部結合はさらに左外部結合(LEFT JOIN)、右外部結合(RIGHT JOIN)、完全外部結合(FULL JOIN)の3種類がある。
ORDER BY 句によって並び替えも行いました。

 

13.インデックス
RDBのパフォーマンスについて
インデックスを設定することによって検索の処理を速くすることができる。
実行にかかった時間を調べる(EXPLAIN ANALYZE)
インデックスを追加(CREATE INDEX)
シーケンシャルスキャンとインデックススキャン 
B木(B-tree)というデータ構造について

 

14.集計とソート
集合と要素という考え方 SQLは集合指向言語
集計関数
AVG(平均) COUNT(要素の数) MIN(最小値) MAX(最大値) SUM(合計)
GROUP BY 句 グループ化 
HAVING 句 グループを対象とする条件を指定
SQLの実行順序
FROM→WHERE→GROUP BY→HAVING→SELECT→ORDER BY

ここまでがデータベースについてに学習でした。続いてスケジュール調整のwebサービスの開発に入っていきます。

 

15.「予定調整くん」の設計
要件定義(機能定義と非機能定義)→用語定義→データモデリング(エンティティ、ER図)→URL設計→モジュール設(MVC Model, View, Controllerについて)→GitHub認証のアプリケーション登録

 

16.認証の実装とテスト
Expressでひな形の作成→ディレクトリをGit管理できるように設定→セキュリティ対策のためhelmetモジュールをインストール(X-Powered Byヘッダの除去)→Routerモジュールのファイル作成→GitHub認証の実装→Routerオブジェクトをテストする(mocha, supertest, passport-stub)→認証時のテスト

11月13日〜11月15日の学習内容

11月13日(月)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」
第3章「サーバサイドプログラミング入門」
21.認証された投稿の一覧表示機能
22.データベースへの保存機能の実装
23.トラッキングCookieの実装
24.削除機能の実装
25.管理者機能の実装
26.デザインの改善

  

先週に引き続き匿名掲示板を作成しています。

 

21.認証された投稿の一覧表示機能
Basic認証の実装→ログアウト機能の実装(モジュール追加)→実装されていないURLには404-NotFoundを返す処理を追加→投稿内容一覧ページを作成→未対応のメソッドに400-BadRequestを返す処理を追加
という流れでした。

 

22.データベースへの保存機能の実装
PostgreSQLというデータベースを利用して投稿したデータをファイルに保存する機能を実装していきました。(データの永続化)
PostgreSQLのインストール→パスワードの設定→データベースの作成→sequelizeというモジュールをインストールしてPostgreSQLを利用できるように設定→データベースの構成を考える(データモデリング)→データの保存を行うモジュールの作成→データベースに保存する処理を実装→データベースからデータを読み出して表示する処理を実装→取得したIDから降順にソートして表示する処理を実装

 

23.トラッキングCookieの実装
ユーザーの行動を追跡するために付与されるトラッキングCookieについての学習。
cookiesモジュールのインストール→Cookieを使ってトラッキングIDを実装→トラッキングIDを保存して表示する→サーバーに閲覧情報のログを残す処理を実装
という流れを行いました。

 

24.削除機能の実装
削除UIの作成→削除ボタンの実装(ユーザーと投稿したユーザーが同じ場合のみ削除ボタンを表示)→削除処理の実装→削除時のログも残す処理を実装

 

25.管理者機能の実装
管理人の投稿機能の実装→ログアウトページにログインへのリンクを付ける→管理人の削除機能の実装→投稿したアカウントが分かるように実装

 

26.デザインの改善
Bootstrapのテンプレートを利用してデザインを改善しました。
ファビコンの表示設定→jadeファイルにBootstrapのcssJavaScriptのテンプレートを読み込む設定→ログアウトリンクのデザインを変更→投稿フォームのデザインの変更→投稿一覧のデザインの変更→投稿日時を日本時間、日本語表示に変更
という流れでした。

 

これで匿名掲示板の機能の実装は一通り終わった感じです。

 

11月14日(火)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」
第3章「サーバサイドプログラミング入門」
27.脆弱性
28.XSS脆弱性の対策
29.パスワードの脆弱性の対策
30.セッション固定化攻撃脆弱性の対策
31.より堅牢なセッション管理

 

セキュリティ関連の学習を行いました。

 

27.脆弱性
OSコマンドが実行できてしまうOSコマンドインジェクションへの対応

  

28.XSS脆弱性の対策
投稿にJavaScriptを埋め込むことでページを書き換えることができてしまうXSSクロスサイトスクリプティング脆弱性についての学習。
リグレッション(コードを修正することで本来あった機能が失われてしまう)という概念も学びました。

 

29.パスワードの脆弱性の対策
ハッシュ関数を使用する(SHA256)
辞書攻撃で検証→パスワードジェネレータでパスワードを複雑なものに変更

 

30.セッション固定化攻撃脆弱性の対策
セッション固定化攻撃(セッションハイジャック)→トラッキングidにトラッキングidとユーザー名を結合したもののハッシュ値を利用するcryptoモジュール→ハッシュ値を表示しないように修正

 

31.より堅牢なセッション管理
ラッキングidのハッシュ値を推測してなりすますことができてしまう。
秘密の鍵を結合したハッシュ値を利用して推測を難しくする→元々のトラッキングidのランダム関数も推測しづらいものに変更

  

11月15日(水)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」
第3章「サーバサイドプログラミング入門」
32.CSRF脆弱性の対策
33.Herokuへの安全な公開

第4章「実践サーバーサイドプログラミング」
01.Webフレームワーク
02.ExpressのAPI
03.GitHubを使った外部認証
04.テスティングフレームワーク

 

32.CSRF脆弱性の対策
CSRFクロスサイトリクエストフォージェリ(シーサーフ)
外部サイトからのリクエストによって意図しない処理を行なってしまう脆弱性

・ワンタイムトークンを消費する形で処理を行う
・処理の際にid/passで認証←利便性が損なわれる
・リクエストのヘッダーのrefererをチェック←改ざんが可能

投稿時のワンタイムトークンの実装→削除時のワンタイムトークンの実装

 

33.Herokuへの安全な公開
herokuで動かせるようにコードを修正→herokuにデプロイ
httpでのアクセスを禁止する修正→パスワードの更新(パスワードジェネレータ)

 

これで作成した匿名掲示板をWeb上に公開することができました。
セキリュティ対策の実装については結構複雑で大変でしたね。
第3章が終わり第4章「実践サーバーサイドプログラミング」に入っていきます。

 

01.Webフレームワーク
Web Application Framework (WAF)についての学習。
Webフレームワークを利用することで効率的にWebサービスが開発できるようですね。
ここではNode.jsのフレームワークExpressを利用しました。Expressの特徴は

・堅牢性の高いルーティング
・高いパフォーマンス
・シンプル

Express application generatorをインストール→debugモジュールでデバッグログを出力→モジュールエラーログだけ出力
という流れを行いました。

 

02.ExpressのAPI
セキュリティに関する設定を行いました。helmetモジュールを組み込むことで
x-powered-byというレスポンスヘッダ情報を隠すことが簡単にできました。
後半のRouterオブジェクトとApplicationオブジェクトの所がいまいち理解できていない感じです。

 

03.GitHubを使った外部認証
OAuth2.0という外部認証の大まかな仕組みについて学習しました。
passportモジュール、done関数、シリアライズとデシリアライズ、Node.jsのイベントループの仕組み、process.nextTick、この辺よくわかってない気がします。要復習。

 

04.テスティングフレームワーク
MOCHAというテスティングフレームワークを使用しました。

ユニットテスト(モジュール単体のテスト )
結合テスト(複数のモジュールのテスト )
システムテスト(システム全体 )
ブラックボックステスト(外側のインタフェースからのみテスト)

ここではユニットテストを実践しました。 

 

こんな感じで振り返ると、よく分かってないなって部分が色々出てきますね。

11月8日〜11月10日の学習内容

11月8日(水)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」

第3章「サーバサイドプログラミング入門」

04.ライブラリ

05.Slackのボット開発

06.HubotとSlackアダプタ

07.モジュール化された処理

08.ボットインターフェースとの連携

 

04.ライブラリ

npm (Node.jsのパケットマネージャ)を使ってパッケージを作成→パッケージを使ったアプリケーションの作成

 

以下のページは時間のあるときに目を通しておきます。

標準ビルトインオブジェクト - JavaScript | MDN

Node.js v6.11.1 Documentation

 

 

05.Slackのボット開発

Slackというチャットツールの使い方を学びました。

アカウントの作成→メンション機能(remind)

プライベートチャンネルの作成→javascriptのコードを投稿

 

06.HubotとSlackアダプタ

Slack上で動くタスク管理ボットを作成していきます。

・yo

・generator-hubot

・CoffeeScrip

の3つのパッケージをインストール

 

HubotというGitHub社のボット作成のフレームワークを使用しました。

まずはHubotを動かしてみようということで以下の流れ

Hubotの作成→Slackに新しいworkspaceを作成→Slack AppでHubotの設定→Slackにチャンネル作成→チャンネルにhubotを招待→ボットの起動→botに機能追加(おみくじ)

 

07.モジュール化された処理

要件を考える際に要件漏れがないかをチェックするためのCRUDという概念を学びました。

Create(生成)Read(読み取り)Update(更新)Delete(削除)

更にCRUD操作に要件漏れがないかチェックするためのオブジェクトのライフサイクルについても学びました。

 

Hubotに実装するタスク管理のパッケージを作成しました。 

タスクを作成するtodoコマンドの実装→未完了のタスクを表示するlistコマンドの実装→テストの追加→doneとdonelistの実装→delコマンドの実装

という流れで作成することができました。

 

08.ボットインターフェースとの連携 

07.モジュール化された処理 で作ったnmpパッケージを利用してタスクを管理するhubotをSlack上で起動することができました。

 

11月9日(木)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」

第3章「サーバサイドプログラミング入門」

09.同期I/Oと非同期I/O

10.例外処理

11.HTTPサーバー

12.ログ

13.HTTPのメソッド

14.HTTPのフォーム

15.テンプレートエンジン

 

09.同期I/Oと非同期I/O

同期I/Oと非同期I/Oの違いについて学びました。

Node.jsはデフォルトでは非同期→Syncで同期化

 

10.例外処理

タスク管理ボットでのタスク情報の永続化に対応しました。

同期的にタスクをファイルに書き出すように実装→ボットを起動した時にファイルを読み込む機能を実装

try-catch文=例外処理(tryの処理でエラーが出たらcatchの処理を実行する)

 

11.HTTPサーバー

Node.js(httpモジュール)を使ってHTTPサーバーの作成を行いました。

 

12.ログ

アクセスログの出力とエラーログの出力を行いました。

 

13.HTTPのメソッド

GETメソッドとPOSTメソッドについて学びました。

switch文を使ってGETとPOSTのリスエストを実装しました。

 

14.HTTPのフォーム

formタグとPOSTメソッドでサーバーにデータを送信する機能を実装しました。

 

15.テンプレートエンジン

jade(現Pug)というテンプレートエンジンを利用してHTMLを動的に出力することができました。

 

11月10日(金)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」

第3章「サーバサイドプログラミング入門」

16.Herokuでwebサービスを公開

17.認証で利用者を制限する

18.Cookieを使った秘密の匿名掲示板

19.UI、URI、モジュールの設計

20.フォームによる投稿機能の実装

 

16.Herokuでwebサービスを公開

HerokuというWebサービスを動かすことができるプラットフォームの使い方を学びました。

Herokuのアカウントを作成→コンソール上でherokuコマンドが使用できるようにするためにHeroku CLIをインストール→Herokuで起動できるようにファイルを修正→Herokuにサーバーを作成→デプロイ(サーバー上に配置)

という流れでした。

 

17.認証で利用者を制限する

ユーザー名とパスワードを入力するBasic認証の実装について学びました。

ステータスコード  

200-OK リクエストの成功

401-Unauthorized アクセス権不正

/logoutにアクセスしたら401を返すことでログアウトの実装もしました。

 

18.Cookieを使った秘密の匿名掲示板

秘密の匿名掲示板の作成に向けて「匿名ではあるが同じユーザーであることを認識する」ためにWebブラウザに情報を記録するCookieの仕組みについて学びました。

最後にアクセスした時間をCookieに記録することと、有効期限を設定することができました。

 

19.UI、URI、モジュールの設計

秘密の匿名掲示板の作成に向けて、UI (ユーザーインタフェース)設計、URI 設計、モジュール設計について学びました。

今回はステータスコード302-Foundを返すことで別のページに転送するリダイレクトする処理を実行しました。

 

20.フォームによる投稿機能の実装

投稿機能の実装を行いました。

HTTPサーバーを実装→モジュールを2つ作成→投稿フォームをjadeで作成→投稿されたログを書き出し投稿フォームにリダイレクトするようにモジュールを修正

という流れでした。

 

そのほか、「CSVファイル」についてと「LocalStorage」についても勉強しました。

 

 

N予備校のプログラミングコースは第3章に入って段々内容が複雑になってきた感じがします。 

 

11月6日〜11月7日の学習内容

11月6日(月)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」

第2章「準備をしよう」

06.シェルプログラミング

07.通信とネットワーク

08.サーバーとクライアント

09.HTTP通信

10.通信をするボットの開発

11.GitHub で Web サイト公開

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

13.Git と GitHub の連携

 

まで学習を進めました。

シェルスクリプトで簡単なプログラムを組んだり →06.シェルプログラミング

HTTPサーバーを立てたり →09.HTTP通信

1時間ごとにニコニコ動画のランキングデータを取得するBotを作ってみたり →10.通信をするボットの開発

なかなか面白かったです。

 

後半はGitHubのアカウントを作成して GitHubの基本的な使い方(フォークやクローンなど)を学びました。

 

ただ、13.Git と GitHub の連携 を一通り終えて、Ubuntuを終了後、再度起動しようとした時にvagrant ssh で接続しようとするとpasswordを求められるようになってUbuntuを起動できなくなってしまいました。

途中で誤って.sshディレクトリを削除してしまったのがまずかったっぽいです。

とりあえずVagrantfile内に記述されてるpasswordを入力すれば起動できるということは分かったのですが、

毎回passwordを入力するのは大変なので、結局VirtualBoxVagrantをインストールし直して、環境構築をやり直しました。

 

おかげで前回の復習にもなったので、良かったことにします。

 

そのほか、先週の学習で難しいと感じた

正規表現 →第1章 15.診断機能の開発

・無名関数(アロー関数)→第1章 16.診断機能の組込み

の解説をしていただきました。ありがとうございます。

 

11月7日(火)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」

第2章「準備をしよう」

14.GitHub への push

15.Git のブランチ

16.ソーシャルコーディング

 

第3章「サーバーサイドプログラミング入門」

01.Node.js

02.集計処理を行うプログラム

03.アルゴリズムの改善

 

 14.GitHub への push

 ローカルでリポジトリを作成してリポジトリに変更を加える→ステージング→コメントを付けてコミット→GitHubリポジトリを作成→GitHubにプッシュ

って流れをやりました。

 

15.Git のブランチ

ブランチとマージの概念を学びました。

ローカルでブランチを作成→ブランチでファイルの変更、コミット→GitHubリポジトリに、作成したブランチをプッシュ

ローカルのブランチをマスターにマージ→GitHubリポジトリにプッシュ

って流れをやりました。

 

16.ソーシャルコーディング

コンフリクトについての解説のあと、コンフリクトの修正とプルリクエストの出し方を学びました。

 

これで第2章「準備しよう」が終わりました。

GitHubを使って複数のメンバーで開発を進める流れがなんとなくイメージできた気がします。

 

続いて第3章「サーバーサイドプログラミング入門」に入ります。

 

01.Node.js

サーバーサイド向けのプラットフォームのNode.jsについての学習です。

nodebrewというNode.jsのバージョン管理のツールをインストール→Node.jsのインストールを行いました。

Node.jsを使って階乗関数のプログラムを作成しました。

 

02.集計処理を行うプログラム

csvファイルのデータから「2010年から2015年にかけて15歳~19歳に人が増えた割合の都道府県ランキング」というものを作成しました。

csvファイルからデータを読み取る→csvファイルからデータを抜き出す→抜き出したデータを連想配列で格納し、データを計算→計算したデータを並び替えて表示

という流れで実装していきました。

 連想配列のMap(文字列を添字として配列)とデータの並び替えの実装の時に出てきたmap関数(配列の各要素に与えられた関数を適用)の部分の理解がまだ追いついてない感じです。

 

03.アルゴリズムの改善

フィボナッチ数列を出力するプログラムの作成を行いました。最初に作ったプログラムは時間のかかる処理だった(指数オーダー)ため、連想配列を使ってメモ化によるアルゴリズムの改善を行いました。

プロファイルツール(nodegrind)を使って処理にかかる時間なども調べました。

 

こんな感じですね。十分に理解できていない部分があるので、授業テキストを読み直したいと思います。

11月3日〜11月5日の学習内容

11月3日(金)〜11月5日(日)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」

第2章「準備をしよう」

02.コンピューターの中身

03.ファイル操作

04.標準出力

05.vi

 

を学習しました。

この辺はLInuxのコマンドを色々使いながらLinuxの操作に慣れていくって感じですね。

とりあえずUbuntuの起動と終了の仕方はマスターしたかなーと思います。

 

03.ファイル操作 

ではLinuxMacとの共有フォルダを作成しました。

これでLinuxMacでファイルのやり取りができるようになりました。

 

05.vi 

ではCUIエディタのvimでファイルの編集を行うことができました。

 

 

ITパスポートの学習の方は

平成29年度 イメージ&クレバー方式でよくわかる 栢木先生のITパスポート教室 (情報処理技術者試験)

の第4章ネットワーク

を読み進めました。

11月1日~11月2日の学習内容

11月1日(水)の学習内容

N予備校プログラミングコース

www.nnn.ed.nico

の「プログラミング入門Webアプリ」から学習を始めています。

授業動画と授業テキストで学習を進めていくかたちです。

すでに

 

第1章「はじめよう」

01.プログラミングを体験してみよう

02.はじめてのHTML

03.さまざまなHTMLタグ

04.HTMLで作る自己紹介ページ

 

までは学習済みで、この日は

 

05.はじめてのJavaScript

06.JavaScriptでの計算

07.JavaScriptで論理を扱う

08.JavaScriptのループ

09.JavaScriptのコレクション

10.JavaScriptの関数

11.JavaScriptのオブジェクト

 

まで学習しました。

 

最後はJavaScriptを使って、時間あてゲーム(ダイアログのOKボタンを押して10秒たったと思ったら何かキーを押して10秒±0.5秒だったら「〇秒でした。すごい」と表示され、それ以外だと「〇秒でした。残念」と表示されるゲーム)を作成することができました。

動画を見ながら、授業テキストにあるコードを入力していくだけなんですが、その通りに動くと気持ちがいいですね。

 

11月2日(木)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」

第1章「はじめよう」

12.はじめてのCSS

13.CSS を使ったプログラミング

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

15.診断機能の開発

16.診断機能の組込み

17.ツイート機能の開発

 

第2章「準備しよう」

01.LinuxというOS

 

まで学習しました。

第1章後半はHTML・JavaScriptCSSの知識を組み合わせて、あなたのいいところ診断のWebページ(名前を入力すると〇〇さんのいいところは〇〇〇です、と診断結果が表示され、診断結果をツイートできるボタンも設置されたページ)の作成を行いました。

 

正規表現 15.診断機能の開発

・無名関数(アロー関数)→16.診断機能の組込み

この辺がちょっと難しく感じたので、再度確認しておこうと思います。

あとは、ツイート機能の実装の際にリバースエンジニアリングという概念を学びました。

 

第2章に入り、Linuxの環境構築を行いました。

ちなみにPCはMacを使用しています。(Mac初心者でもあります)

 

VirtualBox
Vagrant

の2つのソフトウェアをインストールして仮想環境を構築し、UbuntuLinux)を無事インストールできました。

 

並行してITパスポートの資格取得に向けても学習を進めています。

平成29年度 イメージ&クレバー方式でよくわかる 栢木先生のITパスポート教室 (情報処理技術者試験)

という本を使用しています。

とりあえずひととおり目を通していこうと思います。

第1章ハードウェア

第2章ソフトウェアとマルチメディア

第3章システム構成

 まで読み進みました。