web技術をちとかじろう

Web技術を支えている技術の紹介

誤解を恐れず、8割方おふざけで行きます。1
しっかり学びたい人は、こちらへ。

developer.mozilla.org

登場人物の入場です。

  1. ステートフル(stateful)
  2. ステートレス(stateless)
  3. リクエスト(request)
  4. レスポンス(response)
  5. クッキー(Cookie)
  6. プロトコル(protocol)
  7. ポート番号(port)

今日のWeb技術ライブ会場に集まってくれた子は、以上の7名だよ。
※説明の関係上、登場順番と関係なく説明していきます。

プロトコル」が結ぶ不思議な握手

まず、このライブ会場で一番使われるのは、「リクエス」と「レスポンス」。
一般の世界では、「コール」&「レスポンス」というよ。2
出演者が呼びかけたら(コール)、観客が返す(レスポンス)が基本なんだ。
ここ(Web技術ライブ会場)でもアクセスするために、
ブラウザからWebサーバーに向けてリクエストするんだ。
そしたら、html・画像などをレスポンスするって、決まりなんだ。
この決まりのことを、「通信プロトコル」(今回はHTTP)というんだ。
間違えると、リクエストが届かないんだ。
実際のライブなんか、そうだよね。
思い付きのコールをすると、微妙な空気になるでしょ。
相手が人間の時でさえ、そうなんだから、
ましてや機械相手(サーバー)。
プロトコルを間違えた通信が届くわけないよね。
まぁ、安心して。
Web技術世界は安心設計。 ブラウザがサポートしてくれるから。

HTTPプロトコルの中身は、知りたいならこのリンクを見てね。

HTTP | MDN

話の都合上、ここから出演者と観客の関係性が逆になります。
前章では、出演者がメイン(一般ユーザー視点)でしたが、メイン(一般ユーザー視点)は観客に切り替わります。3

フルとレス

このライブに来てくれる観客には、2種類の楽しみ方をする人がいるよ。
それは、「ステートフル」と「ステートレス」だよ。
一般人の世界では、「ファンクラブ会員」と「非会員」というらしいね。

会員のチケット(ステートフル)には、登録している名前が印刷されているよ。
なぜって。
それは、ライブ運営元が君の情報を知っているからだよ。
なんなら、ライブ終わりに推しからメールが来ることだってあるかもしれない。
なぜって。
それは、ライブ運営元が君の情報を覚えているからだよ。

逆に、非会員のチケット(ステートレス)には、名前が印刷されてないよ。
(※実際にはチケット支払い時の名義が印刷されていることもあります。)
推しからのメールも来ないよ。
それは、ライブ運営元が君の情報を知らないからだよ。
どこに送っていいかが、分からないよね。

Web上のコンテンツは、基本的に何もしなければステートレスの状態だよ。
(※ブラウザにGoogleアカウント等の記憶させるている場合、違うこともあります。)
つまり、同じページ(ライブ)に何回足を運んだところで、君が来たということは伝わってないの。
それは、サーバー(ライブ運営元)が君の情報を知らないからだよ。
(※ただし、自己満足として、ブラウザの履歴に残ります。厳密にはアクセスログは残るよ。)
それでは満足できない君は、会員(ステートフル)にならないとね。
会員になる方法は、

  1. ライブ運営元に、君の情報を登録すること。
  2. アカウントを持っていることを証明すること。

これがすべてだよ。簡単でしょ。
ただ、2番の証明が大変なんだ。
Webでは、説明した通りプロトコル(HTTP)に沿った上で、
証明しないといけないんだ。

セッションという目には、見えない関係性

証明が大変だ。
でも、安心して。便利な奴がいるんだ。
Cookie(クッキー)」って奴なんだ。
もし、彼がいなければ、
君はライブ会場に入る時だって、
ファンクラブのサイトを移動する時だって、
自分が会員であることを、自分で証明する必要があるんだ。
移動するたびに、IDとパスワードを手に持たなくてはいけないんだ。
つらいよな。
そこで、頼れるクッキー君の登場だよ。
彼は、必要とあらば君の頭に搭乗(登場)するんだ。帽子のようにね。
そして、代わりにIDとパスワードを持ち、君と一緒に移動してくれる。
これで、会員だと証明をしながら、君は手ぶらで移動ができるね。

でも、少し考えてみてよ。
いつも君の頭の上には、クッキー君。
つまり、IDとパスワードが終始4頭の上。
不用心だね。

そこで日常でよく使われているのが、session(セッション)という連携技だね。
詳しくは説明しないが、
ページにログインすれば、特殊な文字列が発行されるんだ。
その発行した文字列を、クッキー君に渡すんだ。
そうすれば、アクセスする度にクッキー君が持っている文字列を見て、
サーバーが「この前のあの子だね」と通してくれるんだ。
顔パスだね。5
これで、君は「ステートフル」。

入り口は一つではない

実は、Webライブ会場の入り口は、実は一つじゃないんだよ。
知ってた?
普段君が利用する入り口は、80番・43番。
一般のライブでは、正面玄関がそれにあたるよ。
みんなが、利用する入り口だね。
でも、裏口もあるんだよ。
関係者専用入り口・機材搬入口のことだよ。
Webライブ会場の裏口は、21番(FTP)・22番(SSH)っていう入り口なんだ。
この番号を「ポート番号」と呼ぶんだよ。
まとめると、
ブラウザで利用するとき使う入り口は、TCPポート80、 TCPポート443。
Webサーバーの運用で使うのが、TCPポート21、 TCPポート22。

ちなみに、この扉は一定のルールを守れば、あけ放題だよ。
ただ、楽屋泥棒には気を付けてね。
そして、裏口から入る時は気を付けてほしいんだ。
ブラウザ上で煌びやかに輝いているHTML達が、文字列の塊だったいう事実。
(※一応ブラウザからでも、文字列して見れます。)
アイドルと同じだね。
あと、約束があるんだ。
コマンドを安易に使い、息の根を止めてはだめだよ。
バックアップは必ずとってね。
楽しいひと時が終わりを告げちゃうからね。

後日談

普通に書いた方が、楽だったのではと感じている。
そもそも、Web技術ライブ会場ってなんぞやって感じである。
ブログのタイトルを付けたときは、もっとまともに書くつもりのだったのになぁ。

しっかり学びたい人は、やっぱりこちら。

developer.mozilla.org


  1. 最後まで駆け抜けるために、一旦、自分を誤魔化す。しっかりしたものを書こうと意気込むと途中でやめたくなると思うから。卒業論文と同じ。後から肉付け。その後からは、きっと来ない。
  2. APIを呼び出すときにcallと使うので、Web技術世界でも「コール」&「レスポンス」でもいいかもしれない。
  3. すいません。書きながら違和感に気づきました。
  4. ※終始というのは、セッションが終わるまでを指します。
  5. サーバー上に格納されているセッション情報とcookie上の文字列と照合する。

怒りの僕はコピペをする

なぜかコーディングで詰まる時

些細な事、コーディングが止まることがある。
エラーが出るわけでもない。ひっそりと、動かない。

今日のエラーは、この方でございます。
erbファイル内でのif構文さんです。
(言い訳:特に今回は動作環境がProgate上であるため、いつもより手間取った。ブラウザのほうを見ればよかったのだろう)
下記は、間違ったコードです。(動きません)

<%= if ○○ %>

10分ぐらい時間を無駄にしてしまった。
正誤判定をしてくださるProgate様に向かって、
「あってるんですけど!」と何回連呼したことか。
キーボードから手を放し、 PCとタイマンを張っているそいつが、
他人なら「プログラミングは向いてないよ」というかもしれない。
ただ、心配しないで。
そこで終わる人こそが本当に向いてないのである。
(負け惜しみである。)

このような時の解法(介抱)

それは、コピペです。(今回の事例だと) 間違っていると思われる箇所を探り当て
その行の下に、公式ドキュメントから取得した構文を!

<%= if ○○ %>
<%  if false %> ##公式からコピペ
<%= コメント %> ##公式からコピペ
<% end %>    ##公式からコピペ

そうすると、分かる。差分で気づく。
ifの前にイコールなど必要ないと。
怒る必要などない。
以上。

そもそも書いてある。公式ドキュメントより

以下の画像は公式ドキュメントから引用

出力がいらないコードのif構文さん

後日談 (実話です)

そもそも、progateをやりながら余計なことを考えてるのがいけないんだよな。
ふと思いついた小説の名前
「しばらく、名もなく、しょうもなく」
主人公は、3人にして会話劇にするか。
はたまた、1人にしてこの3つの回送をしながら旅をさせるか。
考えていた。
この小説に名前を付けたばかりに、 しばらく、こんなしょうもないことを考える羽目になりそうだ。

たぶん、これも技術記事ではない。

「お前が言うな」を乗り越えて

脳内音声が響き渡る

Progateをコツコツ取り組んでいる。
(ほかのこともやっているよ。頑張っているよ)
今はRailsのコースを黙々とやっている。1
低音ボイスで、「あるんじゃない。⤵ なぜなのか。

エラーの原因はこれだ。
日本語を読めていない 
読み飛ばし。やったつもり。指定の文字になっていない。
なぜなのか。
エラーが出たら、それらは急に光りだす。僕の目にはそう映る。

日頃、他人のモニタを指さして、(一応教える名目で)
「ここ読んでみ!」 とか
「エラー読んでみ!」 とか
言っている奴がこのざまだ。
過去の自分に盛大にいじられるわけだ。
脳内で「お前はもう言うな」なわけであふれ散らかす。

そういえば、すでに僕の中には、「お前が言うな」があふれていることに
これを気にして、「おまいう」から避ける人生を送れば、いつか最寄りのコンビニにさえいけなくなってしまう。
(たぶん、60ぐらいかな。もしそうなら、40くらいで一回記憶を消すのが楽ではないんだろうか?)
だがら、乗り越えるすべを考えなければならない。

追伸
そろそろ、技術記事を書けという感じもあるが気にしない。
明日か明後日か書くと思う。たぶん。


  1. しっかりと身にはなっている。flash機能とか知らなかったですし。会社で使おう!スクールに入った意味は?って聞かれると

知っているが故に学習速度落ちていると感じる問題

前置き

只今、地道にProgate(※学習サイト)をやっている。
出来るから、楽しいよね。
嘘。そろそろ作業感に変わってきた。
出来るところは、飛ばせばいい。これは正しい。
時間は有限である。
(「時間はあくま無限であり、自分以外の物質と接する時間が有限である。と屁理屈こねていたのが数年前がちと懐かしい。)
ただ、何が分からなくて分かるかが曖昧な場合は、猪突猛進してもいいのではないかと思い始めた。
同じところを何も考えずにグルグル回るのは、どうかと思うが。(育成ゲームかな?)
今回は、他人に教える順番を参考にする機会になった。
そして、今回の問題を考えるきっかけにもなった。

タイトルの問題を考えたきっかけ

きっかけは、彼の登場だ。Rubyコースでお目見えした。
それは、「クラスメソッド」。
何ぞ!!。
Ruby独自仕様?
横にある「インスタンスメソッド」と何が違うの?

いや、違った。ただの「static method」だった。
phpを中途半端にかじっており、僕はいつもそれを「スタティックメソッド」と呼んでいた。
僕は、「クラスメソッド」という名には対応できなかったできなかったのだ。
その後、調べた。そしてようやく理解した。
ただ、Progateを進めていくと、クラスメソッドの説明が出てきた。
無事解決!!

さて、このタイミングで調べる意味はあったでしょう?

今回の件に関した僕の答え:今回はなかったが、別に調べたければ。
端的に言えば、中途半端な知識・理解が学習を妨げたのだ。
ただ、タイトルに書いた通り、あくまでも「落ちていると 感じる」問題だと思う。
そもそも、中途半端ではない知識をどれだけ持っているんだろうか。
その中途半端な知識が妨げるなら、完璧or何もないをもってして勉強を始めるべきなのか。
こう考えると、学習速度を気にしてお勉強をすることが途端に重労働に感じてくる。
だから、お勉強をやめた。(bad end)

そんなわけには、いかない。すきだから。

bad endにしないためにも、考え方を変えないといけない。
目の前の教材によって、対応を変えなければいけないと考えた。
今回の場合は、「1コースを終わってから、調べる。もしくは、タイパを求めるならそもそも動くな。」という対応策が、僕の中では最善手なように感じる。
また、ちょっとした気づきも大切だと再認識した。
「クラスメソッド」は「スタティックメソッド」という気づき。
もちろん、スタティックメソッドは何なのかという中身も大事だが。
この気づきが、誰かに教える際に役に立つはずだ。

ただ、気づきはいずれ当たり前となり、忘れるのだが。

考えをまとめておこう!

ブログを始めるよ

頭のなかで考えたを、ブログにまとめておこうと思う。
ただ、所詮は頭の中。
少しでも外へ出そうとすれば、途端手が止まる。
そんなものである。
しかし、頭から出さなければ、結論の出ないまま堂々巡り。
布団と布団の間と時々床ですべてが終わる。

この頃、厳密にいうと違うが「もったいないのではないか」と思い、キータッチをしている最中である。
たぶん、僕は続けることに関して、下手だ。重症だ。
僕がブログを始めるのは、今回で2回目であり結局面倒になってやめた。
今回もやめるかもしれない。次こそは、しっかりやるぞという意気込みは特にない。
毎日書こうとも思ってない。
とても、自堕落な性格である。
それでも、新しい出発点として楽しんでみる。
疲れたら、また新しい出発点を探せばいいだけと言い聞かす。

書くきっかけ

ブログを書くきっかけとして、あげられるものは数点ある。
しかし、それを書き起こすと私小説が完成してしまう。
なので、かっこがつく場所だけ抜粋する。
(※「かっこがつく場所」で、「格好いいの意味」と「記号のかっこがつくという意味」でダブルミーニングを仕掛けようとしたのは、内緒である)
この2点である。

  • 自身の得意分野の伸びしろのなさを絶望への対策。
  • 社内でエンジニアとして後輩を教えることになった。

自身の得意分野の伸びしろのなさを絶望

今の絶望を、新しい絶望に切り替えるためにブログを書くということ。
僕は、中小企業でWebエンジニアをしている。
その他の業務もあるが、世間的にはWebエンジニアになるであろう。それかコーダーか。(何も知らない片方の上司にはコーダーと言われた。)
先に述べておくが、会社のせいで伸びしろがないかといわれると違うとは、思っている。(少しは思っているかもしれません。すいません。)
なぜ、この職種なのかといわれると、得意な振りをし続けられる自身があるからだ。
ただ、この得意な振りというのが厄介で、時々その振りがほどける時間がやってくる。
井の中の蛙がここは井戸だと認識して、ネット情報にゆでられるときである。
そして、自分の勉強量が足りないのか・プログラミング等以外の能力を伸ばさないのが悪いのかetc.という不安とともに、泡沫Timeが始まってしまうのだ。
もちろん、結論は出ない。泡沫であるからして、時間がたてばいずれ消える。そして、またできる。
少なくとも、僕の能力では、自身の目に見える形で成長させることは不可能だと絶望している。

後輩を教えることになった

教えるためにしっかりと言語化できるように精進するため。あとは、傲慢さへの禊。
会社で後輩に教えることになった。
よくエンジニアとして、人に教えることは自身の成長に良いといわれている。
それは、僕も賛成です。
ただ、特定の環境では、地獄であると思う。
意図せず相手にとって難易度の高いことを教えたり、自分ができるがゆえにスキップする恐れがあるからだ。
他に指導できるエンジニアがいたり、その後輩に検索能力が備わっており、議論ができたりするならまだしも、それができない。
そして、一番の懸念点は、「彼が、なぜ分からないかが分からない」というタイミングの訪れである。
自分の中の傲慢さがあふれようとする。(頑張って止めてます。なぜ、分からなかった頃の自分を思い出せないんでしょうね。と思いながら顔を見られないように頑張ります。)
誰も得をせぬ。
だから、いろんな状況下を想定してサポートする方法を模索する必要があると近頃は感じている。
さもなくば、僕が僕をいやになる日が来てしまう。

ということでブログを始める

とは言ったものの、ブログを書くというのはテーマ曖昧。
それだけだと、いつもの泡沫Timeにかき消される。
そこで作戦を考えた。
「プログラミングスクールに入り、カリキュラムに沿って考えたことを書こう」というものだ。
ただ、高いのは嫌。会社を辞めて覚悟を決めるのは、愚か。(※あくまで僕の場合)
実際の名前は出さないが、頑張ってみようと思う。
(※名前を出さない理由は、まだ、それほどやっていないので良し悪しが変わらないから)
スクールの序盤のほうは、やったことがあり飛ばせばいいのだが、初心に帰るという意味で一から真面目にやる所存であるw。 自分の成長を願い。そして、後輩の気持ちを少しで感じられればいいなぁという気持ち(禊も含む)を抱きながらコツコツ頑張ってみます。

その先には転職があるのか。副業があるのか。ニートがあるのかは分からない。