<p>下記のようなjsonから値を取り出す際の方法。</p><pre><code>"japan": [{
      "code": 1,
      "name": "hokkaido",
       "ja": "北海道",
       "type": "region",
      },
    {
      "code": 2,
      "name": "tohoku",
      "ja": "東北",
      "type": "region",
    },
    {
      "code": 3,
      "name": "kanto",
      "ja": "関東",
      "type": "region",
     }
   ]
}</code></pre><p><br>nameがkantoである先頭の要素を取得したい場合はfindを使用すると便利。</p><pre><code>const kanto = json.japan.find((v) =&gt; v.name == "kanto");

console.log(kanto.ja) // 関東</code></pre><p><br>typeがregionである要素を全て取得したい場合はfilterを使う</p><pre><code>const regions = json.japan.filter(function(item, index){
  if (item.type == "region" ) return true;
});

console.log(regions) // [{},{}...] 配列で取得できる</code></pre><p><br></p>

JSON配列から要素の値を検索して取得する

<p>サイドバーでposition:stickyを使いたいときに適切に指定してみても効かなくて小一時間悩みました。<br>結論から言うと原因はリセットCSSで使用しているress.scssでした。<br><br>判明するまでの解決方法を整理します。<br></p><h2 id="h12f2b5955b">1. stickyコンテナーは適切な高さを持っているか</h2><p>stickyコンテナーはstickyを指定した直の親です。以下の場合は.containerが親です。</p><pre><code>&lt;div class="container style="display: flex;"&gt;
&lt;div class="main"&gt;
&lt;/div&gt;
&lt;div class="side" style="position: sticky; top: 0;"&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre><p><br>上記の例の場合、display: flexで.mainと.sideが横並びになっているので、.containerの高さと.sideの高さは同一となりstickyは動作しません。以下の場合だと動作します。</p><pre><code>&lt;div class="container style="display: flex;"&gt;
&lt;div class="main" style="height: 1000px;"&gt;
&lt;/div&gt;
&lt;div class="side" style="position: sticky; top: 0; height: 100px"&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre><p><br>この場合は.containerが.mainと同一のheight1000px、.sideは.containerよりも低いheight: 100pxとなるためstickyが動作します。<br></p><h2 id="h34c251af52">2. 親にvisible以外のoverflow属性が指定されてないか</h2><p>sticky要素の親にoverflow: visible以外の指定(hidden, scroll等)がある場合に不能になります。<br><br>今回自分の原因はこれでした。リセットCSSでress.cssを使用していてその中にoverflow-y: scrollがあったことによるものでした。</p><pre><code>html {
  box-sizing: border-box;
  overflow-y: scroll; /* All browsers without overlaying scrollbars  ←これが原因 */
  -webkit-text-size-adjust: 100%; /* iOS 8+ */
}</code></pre><p><br>コメントアウトして無事動作確認。<br></p><h3 id="h64ae03923e">overflow:visible以外が存在するかチェックする方法</h3><p>jQueryを使用していれば開発者コンソールで以下を入力して動作チェックできます。</p><pre><code>$(".sticky要素").parents().css("overflow", "visible")</code></pre><p><br>親要素全てがoverflow:visibleとなるので、入力した後stickyが動作していればどこかの親にoverflow: visible以外の指定がされていることがわかります。</p>

position: stickyが効かない場合に確認すること。リセットCSSにも注意

<h2 id="hdbc740ce5c">証明書のインストール</h2><p>発行通知メールから証明書ダウンロード<br>中間証明書ダウンロード<br>クロスルートなし、中間CA証明書<br><img src="https://images.microcms-assets.io/assets/d2098da0e58c40478bafe48a8ee351e4/8eab4835aa804792a62b431d75da1a75/_2020-11-03_18.07.44.png" alt=""><br></p><h2 id="h890f3b5eb6">証明書と中間証明書をダウンロード</h2><p>証明書と中間証明書を結合<br>半角文字等入る場合があるので注意<br></p><h2 id="ha2e7ca0ea2">結合証明書と秘密鍵をサーバーにアップロード</h2><p>/etc/httpd/sslフォルダに置く<br><strong>秘密鍵のパスフレーズを解除する</strong><br><code>openssl rsa -in xxxxxxx.key -out xxxxxxx.key</code><br>/etc/httpd/conf.d/ssl.confで新しい結合証明書、秘密鍵のパスを指定<br><code>httpd -t</code><br>で文法的に問題ないかチェック</p><pre><code>service httpd stop
service httpd start</code></pre><p>ブラウザで期限をチェック</p>

linux + apache2.4.43でのSSL設置

<p>正規表現での置換が使えるエディタであれば使えるテクニックだと思います。<br>静的に記述された画像のパスをテンプレートエンジン仕様のパスに変換する際に便利。</p><pre><code>&lt;img src="assets/img/page/front/slide01_pc.jpg"&gt;
 &lt;!-- ↑を↓に一斉変換したいとき --&gt; 
&lt;img src="{{ asset('assets/img/page/front/slide01_pc.jpg') }}"&gt;</code></pre><p><br>エディタ上で⌘+Fで検索窓を開き、正規表現を有効、<br>検索を以下のように（末尾に半角スペース入れる）</p><pre><code>"/assets/img/(.*)"</code></pre><p><br>置換の文字列は以下のように（末尾に半角スペース入れる）</p><pre><code>"{{ asset('assets/img/$1') }}" </code></pre><p><br>検索窓はこんな感じ<br><img src="https://images.microcms-assets.io/assets/d2098da0e58c40478bafe48a8ee351e4/597c8002cf38405ca798e1f7260b62dd/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-10-07%209.42.37.png" alt=""><br><br>正規表現を（）で括って検索すると、(n)でn番目のグループにマッチした文字列を$1,$2..で参照表示できます。</p>

VS CODEで正規表現を使い、部分的に文字列を置換する

<p>リンターとは:<br>ソースコードを読み込んで内容を分析し、問題点を指摘してくれる静的解析ツール。</p><h2 id="h73985523a8">stylelint</h2><p><a style="color:#065588" href="https://stylelint.io/" target="_blank" rel="noopener noreferrer">https://stylelint.io/</a><br>CSS, SCSSなどのリンター</p><h3 id="he62827c7dd">プロジェクト内に配置する基本の.stylelintrc</h3><pre><code>{
&nbsp;"extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
&nbsp;"rules": {
&nbsp;&nbsp;"at-rule-no-unknown": [ true, {
&nbsp;&nbsp;&nbsp;"ignoreAtRules": [
    "return",
    "function",
&nbsp;&nbsp;&nbsp;&nbsp;"extend",
&nbsp;&nbsp;&nbsp;&nbsp;"extends",
    "for",
&nbsp;&nbsp;&nbsp;&nbsp;"ignores",
&nbsp;&nbsp;&nbsp;&nbsp;"mixin",
&nbsp;&nbsp;&nbsp;&nbsp;"content",
&nbsp;&nbsp;&nbsp;&nbsp;"include",
    "custom-media"
&nbsp;&nbsp;]
&nbsp;}],
&nbsp;&nbsp;"indentation": 2,
  "no-descending-specificity",
&nbsp;&nbsp;"number-leading-zero": null,
&nbsp;&nbsp;"unit-allowed-list": ["em", "rem", "s", "px", "%", "deg", "vw", "vh"]
 }
}</code></pre><p>stylelint-config-standardとstylelint-config-recess-orderを使用。</p><h4 id="h57b339fd58"><br>stylelint-config-standard</h4><p><a style="color:#065588" href="https://github.com/stylelint/stylelint-config-standard" target="_blank" rel="noopener noreferrer">https://github.com/stylelint/stylelint-config-standard</a><br>GoogleやAirbunbなどのスタイルガイドを参考にしたconfig。</p><h4 id="he7b9ef480d"><br>stylelint-config-recess-order</h4><p><a style="color:#065588" href="https://github.com/stormwarning/stylelint-config-recess-order" target="_blank" rel="noopener noreferrer">https://github.com/stormwarning/stylelint-config-recess-order</a><br>Bootstrapで使われているstylelintのconfig。CSSのプロパティの順番を規定。<br></p><h2 id="h8f3aaee66b">ESLint</h2><p>JavaScriptやTypeScriptなどのリンター。<br>基本の.eslintrc.js</p><pre><code>module.exports = {
&nbsp;root: true,
&nbsp;parser: 'babel-eslint',
&nbsp;parserOptions: {
&nbsp;&nbsp;sourceType: 'module'
 },
&nbsp;env: {
&nbsp;&nbsp;browser: true,
 },
&nbsp;extends: 'standard',
&nbsp;plugins: [
&nbsp;&nbsp;'html'
 ],
&nbsp;'rules': {
&nbsp;&nbsp;'arrow-parens': 0,
&nbsp;&nbsp;'generator-star-spacing': 0,
&nbsp;&nbsp;'indent': [2, 2],
&nbsp;&nbsp;'no-var': 2,
&nbsp;&nbsp;'semi': [2, 'always'],
&nbsp;&nbsp;'new-cap': 0
 }
}</code></pre><h2 id="h0353998dfb"><br>Prettier</h2><p>コードフォーマッター（ソースコードを整形してくれるツール）。読み方はプリティア。上記のstylelintとESLintと組み合わせて使用する。<br>以下のような様々な形式にサポートしている。</p><ul><li>JavaScript</li><li>JSX</li><li>Flow</li><li>TypeScript</li><li>JSON</li><li>HTML</li><li>Vue</li><li>Angular</li><li>Ember / Handlebars</li><li>CSS</li><li>Less</li><li>SCSS</li><li>styled-components 💅</li><li>styled-jsx</li><li>GraphQL</li><li>Markdown</li><li>YAML</li></ul><h2 id="h3f38fc7fc6"><br>Editor Config for VS Code</h2><p><a style="color:#065588" href="https://editorconfig.org/" target="_blank" rel="noopener noreferrer">https://editorconfig.org/</a><br>EditorConfigとは、異なるテキストエディタ間でも共通の設定を定義することができるプラグインです。EditorConfigを導入することにより複数人での開発がスムーズになります。<br>基本の.editorconfig</p><pre><code># editorconfig.org
root = true
​
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
​
[*.md]
trim_trailing_whitespace = false</code></pre><h2 id="h609dcc6eca"><br>VSCodeで自動整形できるようにする</h2><h3 id="hdf431491df"><br>1.「stylelint」「ESLint」「Editor Config for VS Code」をインストール</h3><p>VS Codeの上部メニューバーの「View」&gt;「Extensions」を選択（またはサイドバーから選択）して上部検索窓から「stylelint」「ESLint」「Editor Config for VS Code」をそれぞれ検索してインストール。<br>※ 似たような名前の異なるプラグインに注意<br></p><h3 id="hcf83e1357e"><img src="https://images.microcms-assets.io/assets/d2098da0e58c40478bafe48a8ee351e4/51115d890b164225b22594901c408f92/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-08-30%2014.18.29.png" alt=""></h3><p><img src="https://images.microcms-assets.io/assets/d2098da0e58c40478bafe48a8ee351e4/2a8eb194651f433395062bc6cc6d5e3a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-08-30%2014.18.46.png" alt=""><br><img src="https://images.microcms-assets.io/assets/d2098da0e58c40478bafe48a8ee351e4/60a5221387db495399a3c489ac308180/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-08-30%2014.19.14.png" alt=""><br></p><h3 id="he654a867b8">2. settings.jsonに追記</h3><p>VS Codeの上部メニューバーの「View」&gt;「Command Parrete」を選択（またはShift + Command + P）して「settings.json」を検索&amp;表示<br>settings.json</p><pre><code>{
&nbsp;"editor.defaultFormatter": "esbenp.prettier-vscode",
&nbsp;"editor.formatOnSave": true,
&nbsp;"css.validate": false,
&nbsp;"scss.validate": false,
&nbsp;"eslint.format.enable": true,
&nbsp;"editor.codeActionsOnSave": {
&nbsp;&nbsp;&nbsp;"source.fixAll": true
&nbsp;},
&nbsp;// …その他の設定
}</code></pre><h3 id="h105baef55e"><br>3. VS Codeを再起動</h3><p>これで完了です。<br><br></p>

フロントエンド開発で使用するリンターとVSCodeでのセットアップについてまとめてみました。

# VS Code

VS CODEで正規表現を使い、部分的に文字列を置換する

開発で使用するリンターとVSCodeでのセットアップについて