2
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 1 year has passed since last update.

はじめに

今回、初めて投稿します。お見苦しい内容かもしれませんが、お付き合いください。
また、開発といいつつ、最新の技術を使用しているものではなく、あくまでも個人の判断で選定していますのでご了承願います。

第3位 nameとidを同名にする意味

これは、HTML(開発時はjinja2)で、<input>等を使用した際に、そのタグに対してつける名前のようなものです。
記述方法は、<input type="text" id="xxx" name="xxx">となります。
このidとnameは、同じ名前をつけないといけないのか?と問われると、別名でも構いません。
(細かいことを言うと、同名でなければいけないものもありますが・・・。)
しかし、わざわざ同名をつけているのです。それはなぜかというと・・・。

同名の方が管理しやすい!

この一言につきます。

本来、nameにつけた名前は、request時のparameterとして利用されます。
また、idにつけた名前は、javascript等のscriptでで使用します。
これらを踏まえた上で、jinja2ファイル内のjavascript等で使用するときと、サーバーに処理を投げて、その中で同じ要素なのに、使用する名前が違うと…?わかりにくいですよね。
プログラムを書く上で、わかりにくいのは良いことではありません。

初めてプログラムを書く人が、なぜわざわざ同じ名前を要素につけているんだ?と感じそうですが。
こういった事情を知った上で、同名をつけているんだなって思うと、凄く納得できます。

第2位 非同期通信を実施するAjax

Ajax(エイジャックス)とは何か。を説明する前に、同期通信と非同期通信について理解する必要があります。
同期通信と非同期通信は、どちらも「サーバへの通信方法」を表す言葉です。

すごく簡単に言うと。
同期通信とは、Web画面から何か処理をして、サーバーへ処理を投げてから次に画面が読み込まれるまでは処理ができず待つような通信。
非同期通信とは、Web画面から何か処理をして、サーバーへ処理を投げますが、画面上は別の操作ができてしまうような通信。

例:テレビで録画番組を見ようとした際、リモコンで録画番組を見るためのボタンを押した際
  同期通信:読込中は別の操作は受け付けず、読込が完了するまで待つ必要があります。
  非同期通信:読込中に画面上は別番組に変更できたり、音量調整をしたりできます。

(やっとAjaxの説明を…。)

Ajaxとは、Webブラウザ内で非同期通信を行いながら、インターフェイスの構築(Webの画面構築)を行うプログラミング手法です。
この名前は、実は略語です。何の略かというと。

略名 名前 説明
A Asynchronous 非同期
Ja JavaScript 主に動的コンテンツ(Webページ)を作成できる言語
X XML タグで囲むことで構造を表現するマークアップ言語

と言われても…って思いますよねw
詳細が知りたい方は、インターネット検索すると、すんごい数の参考ページが出てきますのでそちらで。。

結局、Ajax通信をすると何がいいかというと、スマートでかっこいいWeb画面が作れる!!
でも実際は、その分JavaScriptをガンガン書くので、ソースは長々しくて汚くなりがちです。。。

以上。

第1位 selectboxで検索もできるSELECT2

SELECT2とは。selectboxの進化系です。以上です。

は、流石に乱暴すぎますので、まずselectboxってどんなものかと言うと。
どこかで見たことのあるこちらです。

スクリーンショット 2022-12-22 20.33.07.png
スクリーンショット 2022-12-22 20.39.59.png
上の画像で、出社をクリックすると下の図のように項目が展開されます。

こういった場合、今回のように項目数が少ない場合は、問題なく画面上に表示されますが、
項目数が100や1000を超えてしまうと…。スクロールで指がつりそうになりますよね。

そこで登場するのがSELECT2です!!
実物はこちらです。

スクリーンショット 2022-12-22 20.55.57.png
クリック前は、selectboxと全く一緒。

スクリーンショット 2022-12-22 20.56.11.png
クリックすると、項目がずらっと出てくるのは一緒ですが、検索ワードを入力できます。
試しに「ダコ」と入力すると。
(魚:fish:じゃないのがいる?気のせいですよ。。)

スクリーンショット 2022-12-22 20.56.34.png
このように、selectboxの中から「ダコ」を検索した項目だけ表示されるので、その中から選択できます。

また、このSELECT2とajaxを組み合わせると、選択して次の表示がされて。
と言ったように、すごくかっこいいWeb画面ができます!!!
みなさんお試しください:smile:

最後に

技術的には、難しいものではないですが。
知らないことを知って、実際に使って、肌で感じると身に付くし、出来上がった時は楽しいです。
Webの画面などは、特にわかりやすいので、簡単な機能でも自分が作ったら感動できます。

これからも、新しいことを知りながら、日々学ぶ姿勢で仕事なり私生活なりを充実していきたいと思います。

2
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
2
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?