4/27(月)〜30(木) の学習ログです(主にvue.jsとセキュリティ)

こんにちは、安藤です。

今日は夏を感じるくらいの陽気で気持ちがいいです。

 

有り難いことに僕には一緒にプログラミングの学習をしている仲間がいます。

その仲間が先日のミーティングでファイナルファンタジーの話で盛り上がっていまして、僕もその話に入りたくて昨日からFF Ⅳを始めました。

 

このFF4のアクションを、有名な本「7つの習慣」などに出てきます「緊急度と重要度」の4象限で分類すると、私にとっては「緊急ではなく重要なこと」になります。

ここに分類されるものは、それこそ今勉強しているプログラミングや英語などです。

ゲームなので、一見「緊急ではなく重要でもないこと」に分類されそうに見えますが、共通言語として相互理解のため、またエンタメのエッセンスを知るため、また文化を知るためと、かなり多くの要素が含まれています。コスパいいやん。

一言でいうと「楽しい」です。

また、これから最新の技術を学びアウトプットして世の中にリリースするには、ゲームの世界はとても適しているとも考えています。

理由は、そこで起こることが「人の生死に直接関わらないから」です。

誤解がないように説明すると、医療では人の生死が関わります。自動運転の技術も同様だと思います。この分野では最新の技術を運用してテストを繰り返し、安全の確証を得てから出ないとユーザーにお届けできません。

つまり、最新の技術から一周遅れで世の中にリリースされます。

ゲームは直接生死を司りませんので、技術をユーザーに届けやすい分野かなと考えています。

 

長くなりましたが、自分の思考のログとしてこのブログに残しておきたいと思います。

ということで、学習のログです。

 

4/27(月)

vue.jsで、「bitcoin価格表示アプリ」の学習をしました。

bitcoinの価格はAPIからデータを取得して表示させる
HTTPクライアントaxiosを使う
Coin Desk Bitcoin Price Index APIを使う
、、、と、進めていたらこのAPI使えねーじゃんか!!
ということで、手を動かす学習から動画閲覧のみの学習へ。

 

余談です。
ドラマ「M 愛すべき人がいて」が面白くて、影響を受けて高校生ぶりに浜崎あゆみさんを聴ました。懐かしかったw

 

 

4/28(火)

◎Vue.js
<テンプレート構文について>
●v-onceディレクティブ
初回だけテンプレートを評価し、それ以降は静的なコンテンツとして扱いたい場合に使う。
描画更新のパフォーマンスを上げたい時に使う

●v-preディレクティブ
要素と全ての子要素のコンパイルをスキップしたい時に使う
ユースケースとして
・生のmustacheタグを表示したい時
xss対策
・ディレクティブのない大量のノードをスキップすることで、コンパイルのスピードを上げる

●v-htmlディレクティブ
プレーンなhtmlを挿入したい時に使う
指定したinner htmlの要素を更新できる
【注意点】
xss脆弱性を引き起こす可能性があるため、慎重に使用すること。
・使用するデータやテンプレートは信頼できるもののみとする
・サービスを利用するユーザーが入力したコンテンツには絶対に使用しないこと。

●v-cloak(クローク:覆い隠す)ディレクティブ
使いどころは、ページを表示開始し始めてからインスタンスの作成が終わるまでの間にmustacheタグなど、コンパイル前のテンプレートが表示されてしまうのを防ぎたい場合。
要はチラつきを防止したい時ということ。
【流れ】
インスタンスコンパイルが終了するまで非表示にしたい要素に、v-cloakディレクティブを設定する。
CSSでv-cloakがついている要素を非表示にする。
v-cloakをCSSセレクタとして使うには「[ ] 」ブランケットを使う。

ex) [v-cloak] { display: none; }
③v-cloakディレクティブはインスタンスコンパイル)の準備が終わると自動的に取り除かれる。そのタイミングでCSSも当たらなくなる。

●v-textディレクティブ
mustache構文の代わりにディレクティブを使いたい場合に使用する。
どちらを使ってもいいけど統一すること。

 

4/29(水)

◎Vue.js
<テンプレート構文について>
バインディング
mustacheタグのテキストはバインディング式と呼ばれている。
【式の種類】
JavaScript
データバインディング内部でjs式を利用できる
※注意点として、各バインディングは、単一式のみを含むことができる。文は動作しない。

式は「=」の右辺に記述できるもの。
フロー制御も動作しないので、三項演算子を使う。
・フィルタ

 

4/30(木)

◎Vue.js
<テンプレート構文について>
●ローカルフィルタ(vueインスタンス内に定義)
式の終わりに任意のフィルタを追加することができる
{ { 式 | フィルタの名前  } }
●グローバルフィルタ(vueインスタンス生成前に定義)
Vue.filter(フィルタ名、フィルタ動作)
●フィルタの連結
複数連結することができる
パイプでつなぐ
●フィルタには引数を渡すことができる●v-bind 省略記法
「:」を残して「v-bind」は省略できる
出力されるhtmlは同じ
可読性は完全な構文。記述を統一することも大切

 

◎セキュリティ
ホワイトハッカーについて
攻撃者としてのハッカーと同等のスキルを持ち、その知識と技術をセキュリティのために使う人間のこと。
●ホワイトハッカー(Ethical Hacker)のスキル
・防御→防衛手段の立案、機器の構築・設定など
・監視→状況の確認、対策など
・検出→異常の確認と特定など
・分析→インシデントの確認や根本原因の特定など
・対応→適切で効率的な対応とフィードバックなど

経済産業省情報処理振興課より、今後必要となるセキュリティ人材
・ホワイトハッカーのような高度なセキュリティ技術者
・安全な情報システムを作るために必要なセキュリティ技術を身につけた人材
・ユーザー企業において、社内セキュリティ技術者と連携して企業の情報セキュリティ確保を管理できる人材

●ホワイトハッカーに必要な基本項目
【知識】
・OSやネットワークの基礎知識
・セキュリティの基礎知識
・攻撃者に関する基礎知識
・攻撃手法の基礎知識
・リスク評価手法や脆弱性診断手法
・インシデント対応や運用手順
【技術】
使用する技術は攻撃者が使うものとほぼ同じ。
一見、攻撃されているのか、ホワイトハッカーに調査されているのか見分けがつかない。
【倫理観】
クライアントの同意と強い倫理観攻撃面に加えて防御面の知識と技術も必要
・過去の事例
・最新のテクニック

ハッカーとクラッカーについて
ハッカーとは?
→優れたコンピュータスキルを持つ個人で、コンピュータのソフトウェアやハードウェアを作成して調査することができる人物のこと。
クラッカーとは?
→ハッキングの技術を犯罪に利用する人
Crime Hackerの略
一般的はハッカーと区別するために使われる言葉。

●攻撃が生まれる方程式
攻撃 = 方法 + 脆弱性 + 動機
【動機の種類】
・国家的な利害関係
・金銭
・享楽
・怨恨
【攻撃特定性】
・高い→そのターゲットを攻撃するしか意味がない場合
・低い→攻撃できればどこでもいい場合
多くは動機に依存する。ハッカーの種類1】
・ブラックハット → 犯罪
・ホワイトハット → セキュリティ
・グレーハット → ブラックとホワイトを行ったり来たりする人。再犯者。ハッカーの種類2】
サイバーテロリスト → 国家的な破壊行為
ハクティビスト → 政治的なもの。自分の主義主張のため。
・国営ハッカー → 国家的な活動ハッカーの種類3】
・スーサイドハッカー → 自爆型。サイバーテロリストに多い。
スクリプトキディ → スキルの低い人達

 

とうとうフロンドの技術に飽きてしまい、セキュリティの学習を再開しました。

深夜3時、 「もう頭も体も動かない」ってところからでしたが、 なんか停止してたはずの頭が動くわって(笑)

この状況で始めちゃう時点でバグってますが。。。学び始めたら楽しい。

vuejsも継続するけど、学習内容を増やして並列で行っていくことにしました。

仲間がすでにそのように多動的な学習に取り組んでいて、刺激を頂きました。

 

Vue,jsは「一旦やっとかなきゃ」ってことで。

セキュリティは単純に興味があること。

だから楽しさが全然違うのですね。

多動するとそういったことが明確になるのでいいですね。比較できるから。

医学を学んでいた時は、解剖生理、薬理、生化学みたいに飽きたら次、また飽きたら次って色々してました。結果、めちゃ成果が出ました。

今回も同じようにめちゃ成果が出ると嬉しいです。

 

ということで、引き続き、vue.jsとセキュリティを中心に学習を進めていきたいと思います。

頑張ります。

 

学習教材①

Udemy

Vue JS入門決定版!jQueryを使わないWeb開発

中村祐太さん

 

学習教材②

Udemy

情報セキュリティEthical Hacking

阿部ひろゆきさん