常連

注目の的

社会貢献

質問力

拍手喝采

自己紹介

いつもお世話になっております。

1週間ほど悩みすぎて解決策が思いつかなったのでご質問させていただきました。

タイトルにもありますように、スクロールで可視範囲に入ったとき、
ターゲットのclassに対してaddするのではなく、ターゲット外の指定したclassにaddしたいのですが、
これはどういった感じの処理にすればいいのかご教示いただけませんでしょうか？

IntersectionObserverを使えばいいと調べたところ、下記のようになりましたが手詰まりとなっています。

```javascript
  const options = {
    root: document.querySelector('.hoge'),
  }
  const observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.intersectionRatio > 0) {
        entry.target.classList.add('is-active');
      } else {
        entry.target.classList.remove('is-active');
      }, options);
    });
  });
```


お手数おかけいたしますが何卒宜しくお願いします。

スクロールで可視範囲に入ったとき、ターゲットの要素ではなく、別の要素にclassを付与したい

### 前提
laravel学習中の初心者です。よろしくお願いします。
例として、ユーザーテーブル(users)とテスト(tests)テーブルがあります。
多くのユーザーが多くのテストを解きます。テストを解くと点数がつきます。
また、ユーザーは解いたテストにメモを残したい場合があるとします。
ユーザーとテストのレコード数はいづれも膨大にあるとします。

### 実装したいこと
ユーザーの解いたテストの点数やメモをデータベースに保存したいです。

### 考えてること
3つの方法を考えました。

1つは、user_testという1つの中間テーブル（点数カラム、メモカラムを追加)を作る方法です。
疑問点として、このテーブルのメモカラムはデフォルトとしてnullが入ると思うのですが、膨大なレコード数になるであろうこのテーブルに膨大なnullの情報は無駄な気がしました。

2つ目は、2つの中間テーブル(点数テーブル、メモテーブル)を作る方法です。(それぞれ点数カラム、メモカラムを追加)
疑問点として、laravelの中間テーブルの命名規則に反していると思うのですが、大丈夫なのでしょうか。attach, sync, detachなどの操作は可能ですか？

3つ目は、中間テーブルではないのですが、2つのテーブル(点数テーブル、メモテーブル)を作る方法です。(それぞれ主キーはオートインクリメントで複合ユニークキー(user_idとtest_id)を設定)
疑問点は、オートインクリメントが無駄であることと、プライマリーキーを使ったアクセスではないためアクセスが遅くなるのではないかと思いました。
通常のコントローラーを作ってデータへの操作が簡単そうだったので選択肢に入れました。

良い方法を教えていただきたいです。

### 補足情報（FW/ツールのバージョンなど）
必要でしたら追記します。

laravelの中間テーブルの設計

下のような配列があるとき、①・②を繰り返し全ての`name`を出力したいです。
① その階層にある `name`を`console.log`で出力
② `group` と言う `key` がある場合は下の階層へ

現状は2階層までと決まっているので直打ちで作成したんですがこれから増えるようなので
簡潔に階層がどう増えたり減ったりしても対応できるコードに修正したいです。

```javascript
const arr = [
  {
    name: 'taro',
    group: [
      {
        name: 'kota',
        group: [
          {
            name: 'hiro'
          }
        ]
      },
    ],
  },
  {
    name: 'tatsuya',
    group: [
      {
        name: 'shota'
      }
    ]
  }
]
```

自作コードがなく申し訳ありませんが、ご教示のほどよろしくお願い致します。

【Javascript】配列の中の配列の中の配列の中の... 階層が分からない配列のループの回し方

### 前提・実現したいこと

iframe内にあるページ（以下、「子ページ」。親ページと同じドメインにあります）の
フォーム内の<button>のクリック数を
親ページのGoogleタグマネージャー(GTM)/Google Analytics(GA)で計測しようと試みています。

Google Analyticsで2重に集計しないようにするため、
子ページにはGTMのタグは設置しません。

Googleタグマネージャーについては、
ほぼ初めて利用しているため、どこが間違っているのか、合っているかもよくわからない状態です。

そもそもこのやり方、方向性自体が間違っているのかもしれないので、
コーディングを修正すればよいのか、まったく別の方法がありそうか、
ご教授いただけると幸いです。

### 該当のソースコード

###### 親ページに記述したJS
・#iframeは、iframeのID
・#submitは、iframe内のボタンにつけたID
・親ページにて、ChromeのデベロッパツールのConsoleで、この「click」は表示されるので、
　子ページからのデータを送ることはできているかもしれない。
・だが、GAではイベントの計測がされない。
・eventCategoryなどは、親ページにてテキストリンクで使っているものを流用しており、
　そのテキストリンクでは計測はできている。

```html
<script>
$(window).on("load", function(e){
    $("#iframe").contents().find("#submit").on("click", function(e){
        console.log("click");
        ga('send', { 
            hitType: 'event',
            eventCategory: 'CATEGORY',
            eventAction: 'ACTION',
            eventLabel: 'LABEL',
            eventValue: 1
            });
    });
});
</script>
```
----
###### 子ページに記述したJSとボタン
```HTML
<button type="button" class="ga_clikEvnt_count" id="submit">検索する</button>
```
※子ページにGTMタグを設置した場合は、
　このボタンをクリックしたときにイベントとして計測できることは確認済み。
　子ページにGTMタグを設置せずに、親ページのGTMタグで計測したい。

### 試したこと

・iframeの代わりにインクルードファイルやJSで読み込むことを試したが、
　子ページにあるJSと親ページのJSでコンフリクトが起こるため断念。
　（それぞれのJSが別会社が作ったモジュールのため改造するのが困難）

https://2m3g1.com/4599.html
こちらも参考にしてみましたが、計測できず。

iframe内にあるボタンを、親ページに設置したGoogle Analyticsで計測したい

JavaScriptとPHPで掲示板を作っています。

コメントの入力値を安全に受け取って安全に出力したいので、エスケープすべきタイミングを知りたいのですが、次の流れであっていますか？


###コメントの投稿と出力の流れ
➀JavaScriptからPHPへコメントをPOSTする際はエスケープ不要

➁PHPでその $_PSOT['comment_str'] というコメントを次のようにエスケープする
```php
$comment_str = filter_input(INPUT_POST, 'comment_str', FILTER_SANITIZE_SPECIAL_CHARS);
```
➂データベースにinsertする値も次のようにそのまま$comment_strを渡しエスケープ不要
```MySQL
$query = "insert into comments ( comment_str ) ( {$comment_str} )";
```
➃コメントの出力時は、XSSを防止するために以下を通してエスケープする
```JavaScript
// AJAXでデータベースから取得した値
var json = {
    0: {
        author: 'Aさん',
        comment: 'こんにちは'
    },
    1: {
        author: 'Bさん',
        comment: '<p>さようなら</p>'
    },
};

// ループでエスケープしながら出力
for (var item in json) {
    var obj = json[item];
    var comment = obj.comment
    var comment = escStr(comment);
    $('ul').append('<li>' + comment + '<li>');
}

// エスケープ関数
function escStr(str){
 	return str.replace(/&/g,"&amp;")
	.replace(/"/g,"&quot;")
	.replace(/'/g,"&#039;")
	.replace(/</g,"&lt;")
	.replace(/>/g,"&gt;");	
}
```
ざっとこちらの流れで実装したところなのですが、何かたりない部分ございませんでしょうか？

掲示板で、送信や出力でいつエスケープするのか知りたいです

いつもお世話になっております。
現在、jsをwebpackで勉強中です。

今回の質問はwebpackは余り関係ないのですが
webpackでうまくまとめれたら便利だなと思い質問致しました。

##問題点
parameterName.jsに変数だけをまとめて、他のjsで変数を利用する、といった形にしたいです。
webpackをgulpの方で管理し、webpackでjsを一つにまとめた後、指定したフォルダに書き出しする設定になっています。

webpack.config.js
```
module.exports = {
    entry: "./src/js/main.js",
    output: {
        filename: "main.js"
    },
    devtool: 'source-map'
}
```
main.js
```
import {parameterName} from "./parameterName";
import {a} from "./a";
parameterName();
a();
```

parameterName.js
```
export function parameterName(){
	var hoge;
	hoge = 'xyz';
}
```
a.js
```
export function a(){
    console.log(hoge);
}
```
index.html
```
~省略~
<body>
    <main>
        <article>
            <section>
                 <h1>hello</h1>
            </section>
        </article>
    </main>
<script src="/js/lib/jquery-1.11.3.min.js"></script>    
<script src="/js/main.js"></script> 
</body>
```

この様にparameterName.jsで定義した変数hogeを、a.jsで変数を呼び出した場合、
```ここに言語を入力
Uncaught ReferenceError: parameterName is not defined
```
とエラーになり、変数の利用が出来ないです。

##知りたいこと
どの様にして、別ファイルjsの変数を別ファイルjsで呼び出せますでしょうか？

a.jsにしか使わない変数であればa.jsに記載すればよいのですが、別のjsでも同じ変数を使う場合等があると想定した場合に、一つに
まとめておいた方が便利かなと思います。

自作関数も同じように、別のjsファイルで呼び出せ無いのも単純な勉強不足だとは思いますが、皆様はどの様に書いていますでしょうか？

変数を全て一つのjsにまとめると可読性も良いかな？
と単純な思いで「まとめたい」と書きましたが、ここらへんも何かアドバイスがあればご教授をお願いいたします。

webpackを使って管理のしやすいjsファイルを作りたい

処理速度や負荷に関する質問です。

下記の2つの文は、どちらが良いでしょうか。
1
```C#
int gokei = 0;
int kingaku = 0;
for(int i = 0; i < suryo.Length; i++)
{
    kingaku = suryo[i] * tanka[i];
    gokei += kingaku;
}
```
2
```C#
int gokei = 0;
for(int i = 0; i < suryo.Length; i++)
{
    int kingaku = suryo[i] * tanka[i];
    gokei += kingaku;
}
```

上記1の方は、変数`kingaku`の宣言は1回だけなので、内部で
メモリの場所を確保したりする回数も1度だけです。
ひとつのメモリを書き換えるだけで済むので、処理は若干早いような気がします。
しかし、for文が終わった後もその変数はスコープを抜けるまで残り続けます。

2の方は、ループ毎に変数`kingaku`を作成していますが、for文を抜けると
変数は破棄されると思います。

例文のようなものなら差は無いでしょうが、大きなプログラムだと
差が出てくるのではないかと思いました。

どちらが良いでしょうか。

変数をループの外で作るか内で作るか

### 前提・実現したいこと

gulp ejs で　編集したファイルだけをコンパイルしたい。

### 発生している問題・エラーメッセージ

gulpでejsをhtmlにコンパイルしているのですが、一つのejsファイルを変更すると全てのejsファイルがhtmlにコンパイルされてしまいます。

フォルダ階層-------------
.
├── _src/
│   ├── index.html
│   └── about/
│       ├── index.html
│       └── profile.html
│   └── ejs/
│       ├── index.ejs
│       ├── about/
│           └── index.ejs
│           └── profile.ejs
├── gulpfile.js
├── node_modules
├── package.json



### 該当のソースコード

```gulpfile.js
// ディレクトリ設定
var dir = {
    src_main: '_src', // _srcフォルダ置き換え
    dist: 'dist', // destフォルダ置き換え
}

gulp.task("ejs", function() {
    return gulp.src(
        [dir.src_main + '/ejs/{,**/}*.ejs','!' + dir.src_main + "/ejs/**/_*.ejs"]
    )
    .pipe(plumber())
    .pipe(ejs({}, {}, { ext: '.html' }))
    .pipe( gulp.dest( dir.src_main ));
});

gulp.task('default', ['ejs']
gulp.watch([dir.src_main + '/ejs/{,**/}*.ejs],['ejs']);
);
```

### 試したこと

下記の説明通りにも実践してみましたが、こちらで編集したejsファイルのみをhtmlに出力する事はできましたが、フォルダ階層を守ったまま出力する事ができませんでした。
https://makochin-web.net/2459.html

### 補足情報
gulp 3.9.1

ここにより詳細な情報を記載してください。

gulp ejsで編集したファイルのみをhtmlに出力したい。

### 背景色に角度を斜めにつけて、うまくレスポンシブできるようにしたい。

背景色に角度をつけて、斜めにカットした形にする場合のレスポンシブの設定についてお聞きします。
関連情報を探してやってみたのですが、レスポンシブで幅を狭めると、右下や左上が、一部平行になってしまったりして、うまくいきませんでした。
@mediaで、細かく設定をしてもなかなかスムーズに行かず、そんな中、下記のサイトを見つけました。

[きれいにレスポンシブ表示される斜めにカットされた背景をCSSだけで実現する](https://qiita.com/suzunedp/items/122c6aa241f93ee62884)
（これによると、@mediaで、細かく設定しなくてもレスポンシブが可能）

上記の記事のサンプルよりも角度をつけて「７２度」にしたいのですが、関数などがよくわかりません。

角度の変更はtransform: rotate(XXdeg);で変えられることはわかりましたが、他の数値も調整しないとやはり角が欠けたりします。
![イメージ説明](e465523ccb976deb43259afd2996b5d5.png)

![実際の縮尺](45f3f355f4768a71394c5203cd506cf1.png)
↑実際にやりたい高さと幅のイメージです。

右下を７２度の角度で、それを保ったまま、レスポンシブに対応させるためには、calcの数値をどのようにしたら良いでしょうか？

背景色に角度をつけて、斜めにカットした形にする場合のレスポンシブの設定について

現在、趣味でwebアプリを作成しているのですが、URLルーティングの参考としてメルカリのURL構造を調べていたところ、すべてのリンクにおいて「/category/」「brand/」のように「/」で終了しているのですが、これは1つのディレクトリにindexファイル1つだけを設置しているということですか？
またこれはwebサービスにおいて特殊な例なのでしょうか。webサービスの一般的なディレクトリ構造についても教えて頂けると幸いです。

Webサービスの一般的なURL構造について教えてください

### 前提・実現したいこと
box1をホバーした際、box2とbox3の両方にエフェクトをかけたいです。


### 現状
box1をホバーした際、「box2が大きくなりつつ透明になっていくという動作を繰り返す」というホバーエフェクトを実装しました。
次に、box1をホバーした際、box2に対するエフェクトはそのままに、box3の色を変化させようとして、下記のように実装したのですが、
box1をホバーしても、box3の色が変化しません。ちなみにbox3自体をホバーすると、ちゃんとbox3の色が変化します。

### 該当のソースコード

```
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>hover-efects</title>
    <style>

      .box1 {
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: #39f;
        position: absolute;
        left: 200px;
        top: 200px;
        z-index: 1;
      }

      .box2 {
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: #6cf;
        position: absolute;
        left: 200px;
        top: 200px;
      }

      .box1:hover + .box2 {
        animation: a 1.2s infinite;
      }

      @keyframes a {
        0% {
        }
        100% {
          background: #6cf;
          opacity: 0;
          height: 120px;
          width: 120px;
          left: 150px;
          top: 150px;
        }
      }

      .box3 {
        background-color: #333;
        border: 2px solid #333;
        color: #fff;
        line-height: 50px;
        position: absolute;
        left: 500px;
        top: 200px;
        width: 100px;
        text-align: center;
      }
      .box3:hover {
        background-color: #fff;
        border-color: #59b1eb;
        color: #59b1eb;
      }

      .box1:hover + .box3 {
        background-color: #fff;
        border-color: #59b1eb;
        color: #59b1eb;
      }

    </style>
  </head>
  <body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3">box3</div>
  </body>
</html>
```


### 試したこと
`.box1:hover + .box3{}`という書き方自体が間違っているのかなと思い、
box4とbox5を定義して、下記のように実装したところ、box4をホバーするとちゃんとbox5の色が変化しましたので、
何か他の原因があるのかもしれないです。例えば1つのboxに対しては1つのエフェクトしか設定できないなどのルールがあるのでしょうか？
```
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>hover-efects</title>
    <style>

      .box4 {
        background-color: #333;
        border: 2px solid #333;
        color: #fff;
        line-height: 50px;
        position: absolute;
        left: 500px;
        top: 200px;
        width: 100px;
        text-align: center;
      }
      .box5 {
        background-color: #333;
        border: 2px solid #333;
        color: #fff;
        line-height: 50px;
        position: absolute;
        left: 200px;
        top: 200px;
        width: 100px;
        text-align: center;
      }
      .box4:hover + .box5 {
        background-color: #fff;
        border-color: #59b1eb;
        color: #59b1eb;
      }


    </style>
  </head>
  <body>
    <div class="box box4">box4</div>
    <div class="box box5">box5</div>
  </body>
</html>
```
ぜひご回答をよろしくお願いします。

:hoverにおける複数のホバーエフェクトの設定について

### 環境
Laravel5.5
PHP7.2
MySQL5.7.23

### 前提・実現したいこと
ひとつの記事に対しコメントをすることが出来、そのコメントに返信が出来るような機能を開発しています。
まさにyoutubeのようなコメント欄を作りたいです。
コメントに返信をすると一段下がったような表示になり、一定数のコメントがたまるとreadmoreが出てくるようなイメージです。


### DB構成
** Posts table**
|column|type|key|comment|
|:--|:--:|--:|
|post_id|int|PRIMARY KEY|記事ID
|post_body|text||記事本文
|post_user|string|uuid|ユーザー
|created_at|timestamp||投稿日時

** Comments table**
|column|type|key|comment|
|:--|:--:|--:|
|comment_id|int|RIMARY KEY|コメントID
|comment_body|text||コメント本文
|comment_user|string|uuid|ユーザー
|parent_podt|int|FOREIGN KEY : posts(post_id)|親記事  
|parent_comment|int|nullable|親コメント
|created_at|timestamp||投稿日時

記事に対してのコメントだった場合は`parent_comment = null`となります。
逆にコメントに対しての返信だった場合は`parent_comment`にコメントIDが入ります。

### ソースコード
```php
//uuidなどは省略
$comments[
['comment_id'=>1,'comment_body'=>'aaa','parent_post'=>1,'parent_comment'=>null],
['comment_id'=>2,'comment_body'=>'bbb','parent_post'=>1,'parent_comment'=>null],
['comment_id'=>3,'comment_body'=>'ccc','parent_post'=>1,'parent_comment'=>1],
['comment_id'=>4,'comment_body'=>'ddd','parent_post'=>1,'parent_comment'=>1],
]

```

これを表示しやすいように加工するにはどうしたらいいでしょうか？
`$comments->groupBy('parent_comment')`を使ってみましたが、Viewでループを何度もまわさないと思ったように表示できませんでした。
```php
$comments=$comments->groupBy('parent_comment');
$comments[
	"" =>[
		['comment_id'=>1,'comment_body'=>'aaa','parent_post'=>1,'parent_comment'=>null],
		['comment_id'=>2,'comment_body'=>'bbb','parent_post'=>1,'parent_comment'=>null],
	],
	1 =>[
		['comment_id'=>3,'comment_body'=>'ccc','parent_post'=>1,'parent_comment'=>1],
		['comment_id'=>4,'comment_body'=>'ddd','parent_post'=>1,'parent_comment'=>1],
	],
]

```



**あいまいな質問になっていると思いますが、youtubeみたいなのコメント欄をLaravelで作るにはどうしたらいいか教えてください。**
よろしくお願いします。




### 余談
質問とは直接関係がなく申し訳ありませんが、ついでに質問させてください。
DBを作るときにvarchar 30などサイズを決めると思いますが、これは出来る限り指定したほうがいいのでしょうか？
参考となる記事などでも構いませんので、その理由も教えていただけると幸いです。

コメント返信のDB構造と表示方法

### 質問

PHPにおいてpassword_hash()はなぜ安全なのでしょうか？
暗号アルゴリズム、ストレッチング回数、ソルトなどパスワードの解析における情報は全てそのハッシュに収められています。従って、password_verify()単独で真偽判定が可能であり、それは本当に便利なのですが、その分、ハッシュが漏洩した際に十分安全ではないと言えるのではないでしょうか？

password_hash()の安全性について

なんでfetchAllメソッド使うんですか？
SBCreativeのPHP超入門になんどもfetchAllで取得してforeachでまわしてる文が出てくるんですけど未だに理解してません。

fetchAll()→該当する全てのデータを配列として返す

という意味みたいなんですが、
該当するデータなんて一件ぐらいしかないのになんで
わざわざ**全てのデータを配列として返すfetchAll**を使うんですか？

なんども
foreach ( $stmt->fetchAll () as $row ) {
がでてきて意味が解りません。


```php
foreach ( $stmt->fetchAll () as $row ) {
	$_SESSION ['customer'] = array (
			// idというキーで$row['id']を入れる
			'id' => $row ['id'],
			'name' => $row ['name'],
			'address' => $row ['address'],
			'login' => $row ['login'],
			'password' => $row ['password']
	);
}
```

[コード](http://qiita.com/icelandnono/items/b24a805e3bfdf89f0941)

```php
<?php require 'menu.php'; ?>
<?php
session_start ();
// unset→指定した変数を破棄する
unset ( $_SESSION ['customer'] );
$pdo = new PDO ( 'mysql:host=localhost;dbname=takahashi1;charset=utf8', 'takahashi', 'takahashi' );
$stmt = $pdo->prepare ( 'select * from customer where login=? and password=?' );
// var_dump($stmt);
$stmt->execute ( array (
		$_POST ['login'],
		$_POST ['password']
) );

// foreachは配列とオブジェクトをループして使うための構文
// 配列ではないが使いやすくするために特別にforeachの反復処理で使えるように作られている
// $rowという変数に入れる
// $rows = $stmt->fetchAll ();
// var_dump($rows)
foreach ( $stmt->fetchAll () as $row ) {
// foreach ( $rows as $row ) {
	// 連想配列$_SESSION['customer']にキーを指定して追加し、値として連想配列を代入
	$_SESSION ['customer'] = array (
			// idというキーで$row['id']を入れる
			'id' => $row ['id'],
			'name' => $row ['name'],
			'address' => $row ['address'],
			'login' => $row ['login'],
			'password' => $row ['password']
	);
}
if (isset ( $_SESSION ['customer'] )) {
	echo 'いらっしゃいませ、', $_SESSION ['customer'] ['name'], 'さん。';
} else {
	echo 'ログイン名またはパスワードが違います。';
}
?>
```

なんでここではfetchじゃなくてfetchAllなのでしょうか。
fetchとfetchAllの使い分けもできません。

fetch→一行づつ取得
fetchAll→全データを配列に変換。全ての結果行を含む配列を返す

PHP fetchAllメソッドって何で使うんですか？

mySQLでPHPにて下のようなテーブルからPDOで接続し、曜日を取得します。

+----+-----+
|ID    |曜日1|
+----+-----+
|0     |日曜  |
|1     |月曜  |
|2     |火曜  |
|3     |水曜  |

下のように、データを取得するのにforeachを使う方法で取得しています。


```ここに言語を入力
	$w_list="SELECT `曜日1` FROM 曜日マスタ WHERE ID= "1";
	
	$w_stmt = $dbh->query($w_list);
	
foreach($w_stmt as $w_name){
	
	$list_name=$w_name['曜日1'];
}
```
IDに対応した曜日１は１つだけなので、わざわざループするのもなんだか変ですが、この方法しか知りません。一文でシンプルに取得する方法があるはずだと思うのですが、ネットで検索してもわからずモヤモヤしています。

どなたかお詳しい方、ご教示いただけないでしょうか。
どうぞよろしくお願いいたします。

PDOでforeachを使わず値を取得する方法　PHP

mysqlを学習してるのですが
mysqlを使う利点って何でしょうか？調べている内に
書き方によってセキュリテイーが突破されるとか
クエリの書き方によって遅くなるとか聞いたのですが
じゃあなんのメリットがあるのかと思いました。
テキストファイルじゃ都合が悪いのでしょうか？
mysqlの文法を覚えなくて済むならそうしたいし
またｃ言語のように木構造やソートのアルゴリズムを
phpで構築できないものでしょうか？
よろしくお願いします

データベースにmysqlをつかうメリットは何ですか

## 環境
macOS Sierra
Python3.6.0

## わからないこと
初歩的な質問になってしまいますが、「データベースを使うこと」の意味はなんでしょうか？

例えば、userとpasswordを登録し、参照し使えるようなプログラムを書く時、dictionary機能で十分だと思うのです。

以下、簡単なログイン機能をpickleでつくってみました。
```
# accounts.pickleファイル内に{"user1":"pass1","user2":"pass2"}があるとします。
import pickle

def open_file():
    with open('accounts.pickle', mode='rb') as f:
        accounts = pickle.load(f)
    return accounts

def save_file(accounts):
    with open('accounts.pickle', mode='wb') as f:
        pickle.dump(accounts,f)

def add_account(accounts):
    while True:
        new_username = input('Enter a new username:')
        if new_username not in accounts:
            new_password = input('Enter a new password:')
            accounts[new_username] = new_password
            save_file(accounts)
            print('NOW YOU HAVE A NEW ACCOUNT.')
            break
        else:
            print('ALREADY EXIST!')
            continue

def login(accounts):
    username = input('Enter your account name:')
    if username in accounts.keys():
        password = input('Enter your password:')
        if password == accounts[username]:
            print('LOGIN SCCEEDED!')
        else:
            print('WRONG PASSWORD!')
    else:
        print("NO EXIST")

accounts = open_file()
add_account(accounts)
login(accounts)
```

結局のところ、情報の単純なファイル管理と、データベースでの管理の違いはなんでしょうか？
userに対する情報量が多くなってくるとめんどくさいのでデータベースを・・・という考えなのでしょうか。
それとも、セキュリティ面からの必要性でしょうか（だとすればどう違うのでしょうか）


以上、データ保存についてよくわらない小生にご教授くださいm(_ _)m

追記：
誤解を招く例文で申し訳有りません。自分は必ずしも「ログイン機能」を作りたいわけではありません。

「果物の名前と値段」、「映画の作品名と監督名」などの管理を「データベースで行う」のか「平ファイルで行う」のか、そこらへんの判断基準はどうであろうかというのがこの質問の意図です。

わかりにくくてすみません・・・。

データベースを使うこととバイナリデータファイルに保存することの違い

###前提・実現したいこと
PHPで掲示板を作っています。僕はcsvファイルに保存しておくようにしようと考えたのですが、データベースを使っていることが非常に多い気がします。これはなぜでしょうか？
csvを使うメリット、デメリット、DBを使うメリットデメリット、よろしくお願いします。

PHP,ファイルに保存するのはなぜ進められていないか

お世話になります。

皆様の回答、いつも参考になり大変助かっております。

JS勉強のために現在、色々なサイトのJSのcodeを見たりして勉強しております

今回勉強のために下記のサイトを見ていたのですが
ttps://www.sugashichiya.com/satei/platinum/
（httpsのhを抜いています）
計算ボタンを押したときに動くJSはどれになるのでしょうか？？

いつも私が探すときはChromeのDeveloperTOOLSでクリックするボタンの要素などがあればその要素の
〇〇buttonなどを探して見ているのですが

探し方が甘いのかも知れないですが見つけることが出来なかったです

そこで、もしかしたら自分の探し方は実は非効率的で
こんなツールを使えばすぐに分かるとか、その探し方じゃダメなど先輩方のお知恵を
お借りできればと思い投稿させていただきました。

話をマトメますと動作しているJSを調べる方法を知りたいのですが
私のやり方が間違っている若しくはモットいいやり方があるなどありましたら教えていただけると幸いです。

環境はWindows１０を使用しております

Javascriptの調査方法

ちょっとしたエラーなどで例外を投げていいものなのでしょうか？

例外を投げる場合、投げない場合はどのように区別すればいいのでしょうか？