WEBエンジニア就活RTA #7

学んだこと

同期通信・非同期通信

• 通信＝サーバへの通信（HTTPリクエスト・レスポンス）
• 同期通信
  • クライアント➡️WEBサーバへHTTPリクエストを送る
  • WEBサーバからクライアントへHTTPレスポンスを返す
  • クライアントがレスポンスを待ち，受け取ったら，次の操作を行える
  • 以上のリクエスト・レスポンスを逐次的に行う必要がある
• 非同期通信
  • クライアント➡️WEBサーバへHTTPリクエストを送る
  • サーバサイドの処理中，クライアント側は自由に操作可能
  • サーバサイドからレスポンスが返ってくると，それを受け取る
  • リクエスト，レスポンスの順序が無視できる
• 仕組み自体は同じだが，同期・非同期”処理”は，プログラム内での処理における話．通信はアプリケーション間やクライアント-サーバ間での話．

Ajax

• htmlの一部を更新する通信方式や実装手法全般を指す（↓がわかりやすい）

• なぜAjax？

  • ページ遷移をしたくない（keyword:SPA,React）
  • 非同期なので，コンテンツが途切れない
    • クライアントからWEB APIに対してリクエストを送る
    • レスポンスが返ってくるまで，クライアント側にはコンテンツが表示される
    • レスポンスが返ってきたタイミングで，コンテンツを更新する
  • Ajaxの実装方法として代表的なものは以下
    • XHR（XML HTTP Request）
      • Fecth API以前の非同期通信の標準
      • モダンなアプリケーションでは使われていない
    • JQuery
      • JavaScriptのライブラリ
      • 非同期通信の他にも，DOM操作，イベント処理，アニメーションなど多くの機能がある
      • 現在は下火？
    • Fetch API
      • HTTPリクエストのためのAPI
      • 多くのブラウザで標準実装されている
    • axios
      • 非同期通信のためのHTTPクライアントライブラリ
      •  

  • Ajax送信の歴史！fetch、axios、jQuery、XMLHttpRequest – console dot log

  • ajaxまとめ(xhr, jquery, axios, fetch) | 感情的プログラミング伝記 | タウン情報誌 AIR函館 - 北海道函館市の食・呑・遊をご紹介！

  • 用途にもよるが，axiosかFetch APIの２択かなという印象．その中でも，axiosの方が機能が充実していて，簡単に実装できそう
    • Fetch APIはカスタマイズ性が高いが，その分必要なコード量も多い
    • Axiosはよりリッチな機能群を持っているが，カスタマイズ性は劣る 

    • CRUD操作から見るAxiosとFetch APIの違いとは？

その他

• エスケープシーケンス
  • 「文字出力の制御」を行うための文字
  • エスケープシーケンス自身は表示されない 
  • 文字色の変更やカーソルの移動，改行，文字の消去などができる
• colorama
  • pythonのprintと組み合わせて，ターミナルにカラフルな出力を行える
  • 必要パッケージをpipインストールした上で，githubリポジトリのdemo.pyをコピペして手軽にお試し可能．

今日のまとめ

• 最近，インフラやセキュリティ周りの知識も知っておきたい気持ちが出てきた
• Try Hack Meを少しやってみた．WEB開発の息抜きに競プロとTryHackMeをやる生活を続けたら，フルスタックエンジニアになれるんじゃねえかあ！！！？？？