1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

俺は弱い(戒め) AjaxとJS編

Last updated at Posted at 2020-12-30

最初に

今回vueとDjangoを使ったアプリを作成したいとのことでakiyokoさんが著作した現場で使える Django REST Framework の教科書 を拝読させていただきました。その中でBootstrapVue、Ajax周り、JavaScriptの細かい部分が分からないとのことだったので分からんところをピックアップしてまとめることにした(不出来な自分への戒め)

variant

<div>
  <b-jumbotron bg-variant="info" text-variant="white" border-variant="dark">
    <template #header>BootstrapVue</template>

    <template #lead>
      This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
      featured content or information.
    </template>

    <hr class="my-4">

    <p>
      It uses utility classes for typography and spacing to space content out within the larger
      container.
    </p>
  </b-jumbotron>
</div>

これだけ見ると初心者は全く分からん。自分も分からん。
まずvariantの意味

スクリーンショット 2020-12-22 18.35.47.png

ほう。分からんw
ここは愚直に公式ドキュメントを読む。

bg-variant prop(info、danger、warning、light、darkなどに設定)を使用して全体的な背景バリアントを制御し、border-variant propを使用してborderバリアントを制御し、text-variantpropを使用してtextバリアントを制御します。 3つの小道具はすべてデフォルトでnullに設定され、ジャンボトロンにデフォルトのスタイルを使用するように指示します。

とある。自分の解釈は
bg-variant propではおしらせ系(警告や危険告知など)、テーマ設定を制御するバリアント。
border-variant propではボーダーの制御
text-variant propでテキスト制御する。
つまり、ここは制御に関しての設定を行う場所ってイメージで落とし込んだ。

Ajax

非同期に(Asynchronouse)、JavaScriptがサーバとXML形式でデータ通信を行うための技術。
だけど最近はXML形式より他の形式で行うことが多々ある(JSONとかあるよね)
ページ遷移を行わずに画面を更新できることからユーザビリティの向上が期待され、開発者目線ではクライアントサイドとサーバサイドの処理を明確に切り分けることができるなどのメリットがある。
以下のaxiosは実装法の一つ。
参考記事

axios

axiosとはブラウザやnode.js上で動くPromiseベースのHTTPクライアントです。(promiseベース?。HTTPクライアント?)

Promiseベース

参考記事によると非同期のAPI処理を良い感じにしてくれるやつ。
コールバック地獄を改善してくれる良いやつ
参考記事

HTTPクライアント

HTTP送受信で作られるクライアント、サーバのクライアント側のこと指している?(ググっても良い感じのは出てこない)
HTTPの良さそうな記事

三項演算子(調べて思い出した。俺は....弱い)

変数 ? 真にしたいこと : 偽にしたいこと

変数が真となれば真にしたいことが起こる。偽なら偽にしたいことが起こる。
以上。
精進しろ自分。

参考サイト

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?