夜行月報

“夜更かし”から“新しい”をみつけるためのブログ

Vue.jsでカスタムディレクティブを実装する方法

ディレクティブの魔法

はじめに

Vue.jsには、v-ifv-modelv-forなどのvから始まる特別な属性があります。これらはディレクティブと呼ばれ、与えられたデータをもとにスマートなDOM操作を行ってくれます。例えばv-ifディレクティブは、与えられたデータを真偽値で評価し、その結果によって、結びついたDOM要素を描画したり削除したりしてくれます。

ディレクティブはDOMの操作において大変便利な機能ですが、Vueがデフォルトで用意してくれているディレクティブでは対応しきれないようなDOM操作を行いたい場面も当然ありますよね。 そのような少々込み入ったDOM操作を行う場合、従来のように対象DOM要素を検索してープロパティを変更してーなどと個別にやってもいいのですが、できればVueのアプリケーションの中に再利用可能な状態で取り込めると便利です。 その需要を満たすべく、Vueにはカスタムディレクティブという機能があります。

今回はそのカスタムディレクティブについて、実際に手を動かしながら学習した内容を書いていこうと思います。

  • はじめに
  • カスタムディレクティブの定義
    • フック関数
    • フック関数の引数
  • プロパティを活用したディレクティブの定義
  • 動的にディレクティブ引数を扱う
  • コンポーネント別に登録する
  • 終わりに
続きを読む

AWSを触りながらネットワーク& サーバーを勉強する

AWSを触りながらネットワーク& サーバーを勉強する

はじめに

最近インフラ周りについて学習を進めているのですが、テキストを読むだけの学習だとどうしても効率が悪い... そこで今回、学習にも便利だというAWSを用いて、実際に手を動かして環境を作りながらインフラについて学んでみました。

学習の道しるべとして、テキストにはAmazon Web Services 基礎からのネットワーク&サーバー構築を採用しています。

以下、AWS内部の用語はいくつか登場しますが、各種サービスの紹介やその使い方の説明等は行わず、あくまでも一般的なインフラについて学んできたことを書いていきます。

IPアドレス

TCP/IPで使われるIPアドレスには、インターネットに接続するためのグローバルIPアドレス*1と、個人のネットワーク内で自由に使用できるプライベートIPアドレスがある。 IPアドレスは前半部分と後半部分に分けられ、それぞれ「ネットワーク部」と「ホスト部」に分けられる。 ネットワーク部は同一ネットワークである限り変わらないが、ホスト部は、そのネットワークを使用する機器やサーバに対して別々の値が割り当てられる。

CIDRとサブネットマスク

IPアドレスの表記にはCIDR表記とサブネットマスク表記がある。

CIDR(サイダー)表記は 192.168.1.0/24 のように表し、これは「192.168.1.0 ~ 192.168.1.255」の範囲を示す(CIDRブロック)。

サブネットマスク表記は 192.168.1.0/255.255.255.0 のように表し、これも「192.168.1.0 ~ 192.168.1.255」の範囲を示す

AWSでは、「Amazon PVC」というサービスがあり、自由なネットワークの作成が可能。

サブネット

CIDRブロックはさらに分割して使用でき、分割した小さなCIDRブロックを「サブネット」と呼ぶ。

例えば、192.168.0.0/16のブロック(192.168.0.0 ~ 192.168.255.255)を、/24で分けるとすると......

| 192.168.0.0 ~ 192.168.0.255 | 192.168.1.0 ~ 192.168.1.255 | 192.168.2.0 ~ 192.168.2.255 |...

のように、256のサブネットに分割できる。

このようにネットワークをサブネットで分けることで、障害耐性やセキュリティを高められる。

AWSでは、インターネットからアクセスできる「パブリックサブネット」と、インターネットからはアクセスできない「プライベートサブネット」がある。 プライベートサブネットは、インターネットから隔離したいサーバーやバックエンドシステムなどに割り当てることでセキュリティを向上させられる。

ルーティングテーブル

TCP/IPを使用した通信ではIPアドレスによって宛先を探してパケットを転送するが、そのためには、ネットワーク機器であるルーターが宛先へ到達するための最適なネットワーク経路を知っている必要がある。 それらを設定した、宛先IPアドレスと送信先ネットワークの対応表をルーティングテーブルという。

ルーティングテーブルの設定は、基本的にルーター同士が互いのルーティング情報を交換することで行われ、必要に応じて自動的に更新される。 この機能は、EGP(Exterior Gateway Protocol)とIGP(Interior Gateway Protocol)にという2種類のルーティングプロトコルよって成り立っている

AWSでは「ルートテーブル」という名称で同機能が提供されており、サブネットごとに設定が可能になっている。

ドメイン名

IPアドレスはインターネット上の住所のようなものだが、特定のWebサイトにアクセスする際は、IPアドレスではなく「https://www.google.com」などのドメイン名が使用されることが大半。

ドメイン名はピリオドで区切られており(ラベルと言う)、右から順に「トップレベルドメイン」「第2レベルドメイン」「第3レベルドメイン」......と呼ぶ。

最終的にドメイン名をIPアドレスに変換する仕組みをDNS(Domain Name System)と呼び、ドメイン名をキーとして、対応するIPアドレスを引き出すことを「名前解決」と言う。 この機能は、世界中にあるDNSサーバーが担っている。

スポンサーリンク

 

NAT

NAT(Netwrok Address Translation)は、プライベートIPアドレスをパブリックIPアドレスに変換する装置。 NATを利用することで、プライベートサブネットに存在するホストでもインターネットと通信を行える。この通信はプライベートサブネット → インターネットの方向でしか許可されないため、セキュリティを高められる。

NATにはIPアドレスだけでなくポート番号も同時に変換するものがあり、これをNATP(Network Address and Port Translation)またはIPマスカレードとも呼ぶ。

これを用いれば、1つのグローバルIPをNATを通して共有することで、複数のホストがインターネットに接続できるようになる。 家庭用のネットワーク機器や集合住宅などなどは、この仕組みを用いてネットに接続している。(IPアドレスの枯渇にも、これで対応している)

セキュリティ対策

パケットフィルタリング

ルーターやサーバーなどの機器において、パケットに含まれるIPアドレスやポート番号などの情報から、そのパケットを受け入れるかどうかを判断する仕組み。 設定によって、特定のIPアドレスから送信されてきたパケットのみ許可/拒否する、といった制限が可能になる。

AWSでは、「セキュリティーグループ」というサービスでこの機能を設定できる。

ネットワーク関連のLinuxコマンド

lsof コマンド

各ポート番号の先で、どのプログラムが待ち受けているかを確認できるコマンド。

nslookup コマンド

DNSサーバでどのように名前解決が行われているのかを調査する際によく使われるコマンド。 ドメイン名 → IPアドレス(正引き)、IPアドレス → ドメイン名(逆引き)のそれぞれの変換が可能。

pingコマンド

サーバー間の疎通を確認する用途でよく使われるコマンド。 指定したホストに対して「ICMPエコー要求」というパケットを送信し、ホストがそれを受け取って「ICMPエコー応答」というパケットを返す、という一連のやりとりから、通信の確認やその時間を計測したりできる。

pingを投げた先のサーバーがファイアーウォールの設定等でICMPを弾いていた場合、「pingの応答は返ってこないけど、ホストのWebサイトにはアクセスできる」という状況になる。 つまり、pingへの応答がないからといって、そのサーバーが停止してしまっているという証明にはならない。

curlコマンド

curlは「HTTPやFTPなど、様々なプロトコルを用いて通信を行う」コマンド。 例えば、

curl www.example.com

とタイプすると、www.example.comのHTMLコンテンツを取得できる。

traceroute コマンド

これからアクセスをする、宛先へのネットワーク上の経路を確認するためのコマンド。 実行するとパケットの流れを見ることができ、想定していないネットワーク経路を通っていないかなど、ルーティング設定の確認等に使用される。

TCP/IPを用いた通信の仕組み

TCP/IPを用いした通信は、OSI基本参照モデルをTCP/IP向けにアレンジしたモデル(アプリケーション層、トランスポート層、インターネット層、インターフェース層からなる)を用いて行われる。

ここでは、モデルに存在する4つの階層を意識した処理を通じて通信が行われる。流れとしては、以下のような感じになる。

  1. ブラウザが、入力されたドメイン名に対して名前解決を行うため、DNSサーバーに処理を依頼するためのリクエストデータを作る。
  2. 1 のデータはUDP(User Datagram Protocol)*2によって、トランスポート層でカプセル化される。
  3. 2のデータはインターネット層でIP(インターネットプロトコル)によってカプセル化される。
  4. 3で IPアドレスがつき、イーサネットなどの規格に沿ったヘッダーを付与してLANなどに流される。
  5. イーサネットでは、ARPというプロトコルを用いてMACアドレスとIPアドレスを結びつける対応表を作成し、データを送信する。
  6. DNSサーバまでデータが届くと、名前解決が行われ、これまでとは逆の順序で対応するIPアドレス情報が帰ってくる。
  7. 取得したIPアドレスにHTTPで接続し、TCPでリクエストを投げ、最終的に目的となるレスポンスが返ってくる。

最後に

クラウドインフラとはいえ、やはり自分で手を動かして学ぶと違いますね。テキストを追っかけるだけの学習より、何倍も納得感を感じながら進められるので、単純に吸収率が高いのかもしれません。

まだまだAWSには山のように機能がありますので、それらを1つ1つ試しながら、ネットワークやサーバーなど、インフラに関する知識をどんどん増やしていきたいなと思います。 それでは、今回はこの辺りで。

*1:AWSでは「パブリックIPアドレス」と呼ばれる

*2:TCPがデータの順序や破損を検知するのに対し、UDPは最低限の正常性確認以外は何もしないコネクションレスなプロトコル

「インフラエンジニアの教科書」を読んだまとめ(2/2)

インフラの世界を知る

こんにちは!シロネコ書房です。

前回に引き続き、「インフラエンジニアの教科書」から学んだ内容をアウトプットしていきたいと思います。今回はネットワークから!

(前半はこちら) www.yako-geppo.com

続きを読む

「インフラエンジニアの教科書」を読んだまとめ(1/2)

インフラの世界を知る 皆さんこんにちは、シロネコ書房です。

エンジニアになって早一年。Web周りの技術やプログラミング言語についての知識は多少ついてきたものの、インフラやネットワークについての知識はまだまだという毎日を送っています。

そうした知識を得るためのいい教材でもないかなと探していたところ、「インフラエンジニアの教科書」という書籍がなかなか良さそうという噂をキャッチ。 なんでも、あの言わずと知れた巨大サービス、LINEの急成長期を支えたインフラエンジニアが執筆した本だとのこと。 光の速さで購入・読了したので、今回はそこから学んだことをアウトプットしていこうと思います。

続きを読む

Railsプロジェクトで、FactoryBotを用いたテストデータを作成する方法

FactoryBot RailsでRpsecを用いたテストを行う場合、FactoryBotを使ってテストデータの生成を行うことがよくあるかと思います。 その際、どうすれば効率よく適切なテストデータを作成できるのか、という点について勉強したことをメモしていこうと思います。 [:contents]

続きを読む

「プロになるためのWeb技術入門 ――なぜ、あなたはWebシステムを開発できないのか」を読んだまとめ(2/2)

Webの世界を知る

こんにちは、シロネコ書房です。

今回は、 「プロになるためのWeb技術入門 ――なぜ、あなたはWebシステムを開発できないのか」のまとめのその2になります。

その1となる前回の記事も、よければご覧くださいませ! 

www.yako-geppo.com

続きを読む

「プロになるためのWeb技術入門 ――なぜ、あなたはWebシステムを開発できないのか」を読んだまとめ(1/2)

Webの世界を知る


お久しぶりです、シロネコ書房です。

文系 & 未経験からWebエンジニアになってはや一年。
去年の今頃は、全てが初めての環境にてんやわんやな日々を送っていましたが、ようやくエンジニアとして基本的なプログラミング周りの知識は付いてきたかなーというところです。

しかし、その範囲は恐ろしく限定的......!

特にネットワークやWebのなんたるかなど、インフラ分野に関する知識は、ふわっともやっとなんとなーくしか理解していない現状。

そこに危機感を抱かずしてどうして一人前のエンジニアになれようか!

というところで、そのあたりの知識を学習できそうな教材を探していたところ、

「プロになるためのWeb技術入門 ――なぜ、あなたはWebシステムを開発できないのか」

という書籍の評判が良さげだったので、早速購入。

一通り読めたので、脳みそへの定着も兼ね、学んだことのアウトプットを行っていこうと思います。

内容ですが、書いていたらとても長くなってしまったので、今回は前半部分として書いていこうかと思います。

続きを読む

高齢者と呼ばれた時、私は「殺人マシーン」になる前に運転免許証を返納しようと思う

そのドライブは、いつだって命がけ

皆さんこんにちは、シロネコ書房です。

 

昨月、運転免許を取得してから早1年を迎えまして、面倒臭がりながらも初回更新の手続きに行ってきました。

内容としては、簡単な更新書類の作成と、視力検査、写真撮影&2時間の法定教習。

……え?ただでさえ手続きの待ち時間長い上に、講習って2時間もあるの!?

なんて最初は驚きましたが、「運転経験の浅い奴らにこそきっちりと念をおしておきたい」という交通安全神の気持ちも分からなくはないので、こちらも至って真面目な姿勢で講習を受けてきました。

というか、「居眠りしたりスマホいじってたりすると再講習になりますよ」なんてクギ刺されちゃ、自ずと瞼もリフトアップしますよ……。(しかし中には、10時に初回講習受けて、終わったのが16時になった人もいるとか)

 

そんなこんなで無事新しい免許証を手に入れることが出来たわけですが、その講習で聞いた「高齢者と自動車運転」の話がなんとも衝撃的なものだったんです。

もうね、「もぅマヂ無理。じじイになったら免許返納しょ……」ってすごく思いました。

しわくちゃになった自分への備忘録的な意味合いもかねて、その内容を記録していきたいと思います。

続きを読む

かき氷が一年中食べられるお店、埜庵(のあん)で最高の冷涼体験を!

最高に涼しい夏を 食べに行こう!

皆さんこんにちは、シロネコ書房です

 

日差しが日に日に強くなり、今年もうだるような夏がやって来ようとしています。

そんな季節に食べたいのが、キンキンに冷たく甘いかき氷

甘いシロップとふわふわの氷に包まれる冷涼体験は、この時期ならではの贅沢ですよね。

 

そんな「かき氷」にこだわり続けるのが、神奈川の鵠沼海岸(くげぬまかいがん)にあるかき氷専門店の「埜庵(のあん)」。

かき氷を提供するお店は数あれど、ここほど美味しい氷を出してくれるところはそうそうないと僕は思っています。

夏本番まではまだ時間がありますが、今年も早速彼女と食べに行ってきちゃいました。

続きを読む

Eggs 'n Things(エッグスンシングス)湘南江の島店で、デカ盛りオシャレな朝食を!

生クリームの暴力

皆さんこんにちは。シロネコ書房です。

季節もだいぶ夏色に染まってきた今日この頃、僕はね、ハワイの朝食を食べに行ってきたんですよ。

「えー!?ハワイ!?羨ましいいぃぃぃぃぃい!」

うんうん、羨望の眼差しをありがとう。

まぁ、僕くらいになるとね、休日にかるーくワイハの朝食食べに行ったりしちゃうわけ。

まぁそんな中でもね、今回はちょっといいお店見つけたんで、それをみんなに紹介しようと思うよ。

 

ということでやってきたのは、江の島でおなじみ小田急江ノ島線の終点、片瀬江ノ島駅!

片瀬江ノ島駅

……え?ハワイはどうしたって?向かうなら成田だろって?

ちょっと待ってくださいよ、誰がハワイ「に」朝食食べに行ったなんて言いました?

僕はね、ハワイ「の」朝食食べに行ったって書いたんですよ?

今更文句言われたってそんなもん見間違える方がわる(ry

 

……ということでね、皆さま、茶渋以下の茶番にお付き合いいただいて、本当にありがとうございます。そしてごめんなさい。

しっかりとしたお詫びになるように、ここからは心を込めて、「Eggs 'n Thingsエッグスンシングス) 湘南江の島店」の食レポをお伝えしていきます!

続きを読む

" スイカ先生 "が私に教えてくれたこと

大事なことは全部スイカが教えてくれた

夕飯の買い出しに出かけようと家を出ると、むわっとした熱気が体にまとわりついた。

じめじめとしつこい暑さ。これだから日本の夏は嫌いだ。

今にも泣きだしそうな空を懸念して、折りたたみ傘を1つもっていく。気が付けば、曇り空を見上げるだけの日々が続いていた。

じきに夏がやってくる。

 

この季節になると、私は嫌でもあの緑の玉のことを思う。

なぜなら、私は" 彼 "から人生の"いろは"を教わったからだ。

続きを読む

ギフトにピッタリのパスタ、パドンニで “濃厚オシャレ” な一品を!

パドンニで濃厚パスタ!

皆さんこんにちは、シロネコ書房です。

長らくお待たせしました!「パドンニでオシャレ度120点の料理を作ろうシリーズ」、第3回目にして最終回の開幕です。

シリーズの締めにふさわしい最高の一品を作り上げられるよう、頑張っていきますよー!

※前回、前々回のパドンニ記事はコチラ

 

www.yako-geppo.com

  

www.yako-geppo.com

 

続きを読む

【仕事と人生】「会社の奴隷」を抜けだしたければ、「学歴」より先に「やりたいこと」を手に入れろ

あなたは人か家畜か

今、労働はかつてない速度で私たちを殺しにかかってきている。

様々な分野で技術が発達し、モノが増え、経済的に豊かになったのにも関わらず、私たちの仕事は一向に楽になる気配を見せない。

外国で日本の「過労死」が報じられたり、『ちょっと今から仕事やめてくる 』や『「死ぬくらいなら会社辞めれば」ができない理由(ワケ)』といった労働に関する書籍が注目を集めることからも、人々がどれだけ労働に疲弊しているかが分かる。

それでも、人々は日々うなだれながら街を歩き、毎朝青白い顔をして「会社に行かなきゃ……」と駅までの道を這いずるように進むのだ。

 

しかし、そんな彼らに「辛いなら仕事辞めたら?」と助言すると、「そんなことできるわけないじゃないか!」と声を大にして反論される。

この矛盾じみた彼らの行動も、しかしよく考えれば当然のものだということが分かる。

なぜなら、私たちは「そう」思うように、この日本で「労働のため家畜」として育てられてきたのだから。

続きを読む