常連

自己紹介

一定量スクロールしたらヘッダーが固定されるようにしてます。
その場合の、アンカーリンクのズレの解消方法が解らなくて困っています。

一定量スクロールでヘッダー固定の記述
---
```ここに言語を入力
$(function(){
var windowWidth = $(window).width();
var windowSm = 767;
if (windowWidth > windowSm) {
    //横幅767px超のとき（タブレット、PC）に行う処理を書く
	var _window = $(window),
		_header = $('header'),
		heroBottom;
	
	_window.on('scroll',function(){
		heroBottom = 500;
		if(_window.scrollTop() > heroBottom){
			_header.addClass('fix');   
		}
		else{
			_header.removeClass('fix');   
		}
	})
	_window.trigger('scroll');
} else {
//横幅767px以下のとき（つまりスマホ時）に行う処理を書く
$(function(){
    if(window.innerWidth < 767){
            $('header').removeClass('fix');
            }else {
            }
});
}	
});
```


アンカーリンクのズレ解消用記述
---

**別ページのアンカーリンクへスムーズスクロールで移動しつつ、fixedナビの高さ分を自動でマイナスもするjQueryコード – 0017 **
[https://0017.org/1789.html](https://0017.org/1789.html)

こちらのサイトを参考にさせていただいたところ
他ページからのアンカーリンクはズレずに表示されるのですが、
同じページからのアンカーリンクの場合ズレてしまいます。





```ここに言語を入力
$(function() {
var headerHeight = $('header').outerHeight();   //fixedのヘッダーの高さを取得
var urlHash = location.hash;    //URLハッシュを取得
var animeSpeed = 500;   //スクロールのアニメーションスピード
if(urlHash) {
    $('body,html').stop().scrollTop(0);
    setTimeout(function(){
        var target = $(urlHash);
        var position = target.offset().top - headerHeight;
        $('body,html').stop().animate({scrollTop:position}, animeSpeed);
    }, 100);
}
$('a[href^="#"]').on({
    'click': function(){
        var href= $(this).attr("href");
        var target = $(href);
        var position = target.offset().top - headerHeight;
        $('body,html').stop().animate({scrollTop:position}, animeSpeed);   
    }
});
});
```


変更した内容
---
```ここに言語を入力
$(function() {

if ($('header').css('position') !== 'fixed') {
		headerHeight += headerHeight;
	}
	
var headerHeight = $('header').outerHeight();   //fixedのヘッダーの高さを取得
var urlHash = location.hash;    //URLハッシュを取得
var animeSpeed = 500;   //スクロールのアニメーションスピード
if(urlHash) {
    $('body,html').stop().scrollTop(0);
    setTimeout(function(){
        var target = $(urlHash);
        var position = target.offset().top - headerHeight;
        $('body,html').stop().animate({scrollTop:position}, animeSpeed);
    }, 100);
}
$('a[href^="#"]').on({
    'click': function(){
        var href= $(this).attr("href");
        var target = $(href);
        var position = target.offset().top - headerHeight;
        $('body,html').stop().animate({scrollTop:position}, animeSpeed);   
    }
});
});
```

**JavaScript - javascript、offset().topの値が、固定ヘッダーの前と後でずれてしまう｜teratail **[https://teratail.com/questions/182348](https://teratail.com/questions/182348)
こちらを見て途中から固定になるのが原因だと思って、
こちらを参考にさせていただき、書き直してみましたが変わりませんでした。

teratailの質問されていた記述を下記のようにして試してみたところ
アンカーリンクのズレはなくなったのですが、固定ヘッダーが効かなくなってしまいました。
```ここに言語を入力
$(function () {
	if ($('header').css('position') !== 'fixed') {
            headerHeight += headerHeight;
        }
    $('a[href^="#"]').click(function () {
        //ヘッダーの高さを取得
        var headerHeight = $('.scroll-header').height();
        console.log(headerHeight);
        //アンカーの値取得
        var href = $(this).attr("href");
        //移動先ターゲットを取得
        var target = $(href == "#" || href == "" ? 'html' : href);
        console.log(target);
        //ターゲットの座標を取得
        var target_offset = target.offset().top;    
        console.log(target_offset);
        var position = target.offset().top - headerHeight; //ヘッダの高さ分位置をずらす
        $("html, body").animate({ scrollTop: position }, 400, "swing");
        return false;
    });
});
```

全くの初心者のため、自分では解決出来そうにありません。
どなたかご教授いただけないでしょうか。
よろしくお願いいたします。

途中から固定ヘッダーになる場合のアンカーリンクのずれを解消したい

# 前置き

私が勤務している会社ではWebサービスを開発・運営しているのですが、全くと言っていいほど、npmの依存ライブラリーを更新しておりません。
セキュリティーアラートが何らかのライブラリにGitHubから通知された時のみ、新しいバージョンに更新する程度です。

依存ライブラリーの更新は定期的に行った方が良いのではないかと思うのですが、以前、とある依存ライブラリーにセキュリティーアラートがGitHubから通知されてアップデートをしたら、サービスの一部に不具合が起きてしまいました。

なので、迂闊に依存ライブラリーは更新してはいけないものなのだと思いました。

とは言え、定期的にnpmの依存ライブラリーは更新していかないと、後で困るようなことも聞いており、出来れば、安全にアップデートしていければ良いなとも思っております。

そこで、以下、質問となります。

# 質問
## 質問1
 `devDependencies`としてインストールしたnpmライブラリであれば、気軽にアップデートしても大丈夫でしょうか？

 `devDependencies`としてインストールしているライブラリAが依存しているライブラリBに、`dependencies`としてインストールしているライブラリCも依存しているとした場合、ライブラリAをアップデートすることで、ライブラリーBもアップデートされ、それによって、ライブラリCとライブラリBの互換性が合わなくなり、ライブラリCが動かなくなるのような理解であっていますでしょうか？　そんなことはなく、その辺りは、npmがうまいこと、依存関係を解決してくれるのでしょうか？_

## 質問2
npmの依存ライブラリーを安全に更新する為には、何を前提として理解している必要があったり、何に気をつけたり、何をすれば良いのでしょうか？
現状、自分の中では、「依存ライブラリーを迂闊にアップデートするのは怖い」といった感じで、何を理解しなければいけないかがわかっていない状態です。。。

## 質問3
どのくらいの頻度で依存しているライブラリーはアップデートするのが良いのでしょうか？

## 質問4
「うちの開発現場では、このような頻度で、このような仕組みや体制でライブラリーのアアップデートを行なっているよ！」のような、情報提供がもし可能であれば、合わせてお願いしたいですm(_ _)m

npmライブラリのアップデートに関するリスクと安全なアップデート方法について

### 前提・実現したいこと

フォーム1から別ページのフォーム2へ値を飛ばして、フォーム2を開いた時にはフォーム1で選んでいた項目が選択されている状態にしたいです。

フォーム1からフォーム2へ移った時にURLを見ると

http://example/form2/?iro=あか+濃いめ&kudamono=ばなな

と言うふうにエンコードされており、”iro”の受け取りができません。
（スペースが+に変換されていることが原因？）

スペースが+に変換されているので、URLを直接
http://example/form2/?iro=あか%20濃いめ&kudamono=ばなな

というふうに変換して、アクセスすると受け取りは正しくできています。


なので、スペースを+ではなく%20として値を飛ばしたいのですが、方法が分からず困っております。

### 試したこと

[Replacing the plus sign (+) in URL with %20 in a HTML form](https://forums.asp.net/t/1767509.aspx?Replacing+the+plus+sign+in+URL+with+20+in+a+HTML+form+)

上記サイトを参考にformタグに
```
onsubmit="replacespace();
```
を追加し、

formタグの下に
```
<script>
function replacespace() {
    var p = document.getElementById('color')
    p.value = p.value.replace(/\s+/g, 'SPACE');
}
</script>
```
こちらを追加したのですが、
http://example/form2/?kudamono=ばなな

このようになったしまい　”iro”　の値が取得されないようになってしまいました。

もしわかる方がいらっしゃいましたら、ご教授いただけますと幸いでございます。
宜しくお願い致します。





### 該当のソースコード

```フォーム1

<form action="form2" method="GET">
    <dl class="form_wrap">
        <div class="form_content form_row">
            <dt>いろ</dt>
            <dd id="color">
                <select name="iro">
                    <option value="">選択して下さい</option>
                    <option value="あか 濃いめ">あか 濃いめ</option>
                    <option value="あか 薄め">あか 薄め</option>
                </select>
            </dd>
            <dt>くだもの</dt>
            <dd id="fruits">
                <select name="kudamono">
                    <option value="">選択して下さい</option>
                    <option value="りんご">りんご</option>
                    <option value="ばなな">ばなな</option>
                </select>
            </dd>
        </div>
    </dl>
    <div class="form_submit">
        <button type="submit" class="submitbtn">送信する</button>
    </div>
</form>
```


```フォーム2
<form action="" method="GET">
    <dl class="form_wrap">
        <div class="form_content form_row">
            <dt>いろ</dt>
            <dd id="color">
                <select name="iro" >
                    <option value="">選択して下さい</option>
                    <option value="あか 濃いめ">あか 濃いめ</option>
                    <option value="あか 薄め">あか 薄め</option>
                </select>
            </dd>
            <dt>くだもの</dt>
            <dd id="fruits">
                <select name="kudamono">
                    <option value="">選択して下さい</option>
                    <option value="りんご">りんご</option>
                    <option value="ばなな">ばなな</option>
                </select>
            </dd>
            <dt>さかな</dt>
            <dd id="fruits">
                <select name="sakana">
                    <option value="">選択して下さい</option>
                    <option value="さんま">さんま</option>
                    <option value="イワシ">イワシ</option>
                </select>
            </dd>
        </div>
    </dl>
    <div class="form_submit">
        <button type="submit" class="submitbtn">送信する</button>
    </div>
</form>
```