前提 本記事ではJavaScriptライブラリ(vanilla-lazyload)を利用して、画像の遅延読み込みに対応する方法について記載します。下記の状況を想定しています。 WordPressを利用していない PageSpeed Insightsで改善項目として「オフスクリーン画像の遅延読み込み」を挙げられた ※記載に誤りがあったり、「もっとよい方法があるよ！」という場合はご教授いただけますと幸いです。 Lazy Loadの導入手順 1.vanilla-lazyloadを読み込む 下記GitHubページにアクセスし、verlok氏のvanilla-lazyloadをダウンロードまたはCDNを利用して読み込みます。 https://github.com/verlok/vanilla-lazyload 自分の環境にダウンロードする場合 「code」ボタンをクリックし、「Download ZIP」を選択します。 ダウンロードしたフォルダの中にある「dist」フォルダの「lazyload.min.js」を自分の環境に保存します。 HTMLのbodyタグ内の最後でlazyload.min.jsを読み込みます。 index.html ～ <script src="path/to/lazyload.min.js"></script> </body> CDNを利用する場合 HTMLのbodyタグ内の最後でlazyload.min.jsを読み込みます。 index.html ～ <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.5.0/dist/lazyload.min.js"></script> </body> 2.imgタグに"lazy"クラスを追加する あとは画像要素に"lazy"クラスを追加するだけで読み込みが遅延されます…なんて便利なんだ。 src属性に「data-」を付けなければならないことにだけ注意が必要です。 <!-- 公式より引用 --> <img alt="A lazy image" class="lazy" data-src="lazy.jpg" /> おまけ　"lazy"クラスを使わない方法 以下は、ページに画像が多い＆すでにいくつもクラスが付いていて一括置換が面倒…となった人向けです。 1.imgタグすべてを遅延読み込みの対象とする vanilla-lazyloadを読み込んだら、imgタグすべてを遅延読み込みの対象とするオプションを設定します。 index.html ～ <script src="path/to/lazyload.min.js"></script> <script> var lazyloadInstance = new LazyLoad({ elements_selector: "img", }); </script> </body> 2.imgタグで「data-src」「src」を使い分ける 先ほどimgタグすべてを遅延読み込みの対象とする設定を行ないました。しかし、ファーストビューに入る画像については、読み込みを遅延させると逆に表示速度が遅くなり、PageSpeed Insightsの評価も下がってしまいます。 LazyLoadによって画像を読み込むには「data-src」属性を用いることになっているので、これを利用して、遅延読み込みしたくないものは「src」を使うと遅延読み込みの対象から外すことができます。 index.html <!-- ファーストビューに入らない画像（遅延読み込みする） --> <img data-src="path/to/img.jpg" alt="mainImg"> <!-- ファーストビューに入る画像（遅延読み込みしない） --> <img src="path/to/img.jpg" alt="img"> 参考サイトさま

実現したい機能 親のチェックボックスにチェックが入ったら、子のチェックボックスにもチェックを入れる 親のチェックボックスでチェックが外れたら、子のチェックボックスからもチェックが外れる 子のチェックボックスでチェックが入ったり、外れたりしても親のチェックボックスは反応しない サンプルページ Github コード HTML index.html <ul> <li class="checkbox"> <input type="checkbox" name="parent">親チェックボックス <ul> <li class="checkbox"><input type="checkbox" name="child1">子チェックボックス1</li> <li class="checkbox"><input type="checkbox" name="child2">子チェックボックス2</li> <li class="checkbox"><input type="checkbox" name="child3">子チェックボックス3</li> </ul> </li> </ul> JavaScript check.js $(function (){ $('input[name^="parent"]').change(function() { if ($(this).is(':checked')) { $(this).parents('.checkbox').find('input:checkbox').prop('checked', true); }else{ $(this).parents('.checkbox').find('input:checkbox').prop('checked', false); } }); }); 解説 コードの解説 前提として、親のチェックボックスである<input type="checkbox" name="parent">の状態が変化した時、check.jsが発火する。 <input type="checkbox" name="parent">の状態がcheckedになった際、次の処理が行われる。 check.js $(this).parents('.checkbox').find('input:checkbox').prop('checked', true); このコードがそれぞれ何を指すのか分解してみる。 $(this): <input type="checkbox" name="parent">の指定。 parents('.checkbox'): <input type="checkbox" name="parent">の親である<li class="checkbox">の指定。 find('input:checkbox'): <li class="checkbox">の中にある<input type="checkbox">を探す。 prop('checked', true): checked入れる。 以上を踏まえて、文章にしてみると、 <input type="checkbox" name="parent">の親である<li class="checkbox">を探して、その中にある<input type="checkbox">の状態をcheckedにする。 となる。 .prop('checked', false)の場合は、checkedを外す処理が行われる。 仕組みの解説 このコードが何故親のチェックボックスに反応して、子のチェックボックスも反応できるようになるのかというと、親と子における<li>タグと<input>タグで同じclass名を付けているから。 checkedにする動きで考えてみる。 check.js $('input[name^="parent"]').change(function() { if ($(this).is(':checked')) { if文のtrue分岐に入る時点で、親のチェックボックスにはcheckedが入っている。 その状態で、 check.js $(this).parents('.checkbox').find('input:checkbox').prop('checked', true); このコードが動くと、親の状態とかは関係なく、jsは<li class="checkbox"><input type="checkbox">の構成をしている部分をHTMLから探す。 その結果、<li class="checkbox"><input type="checkbox">の構成をしていて、まだcheckedが入っていない、子のチェックボックスにcheckedが入り、親と子で同時にチェックが入る(ように見える)。 流れを簡潔にまとめると、以下のようになる。 1. 親のチェックボックスにチェックが入り、check.jsが発火 2. <li class="checkbox"><input type="checkbox">に該当するHTMLタグの状態をcheckedにする 3. 親にはもうcheckedが入っているから見た目に変化はない。子はcheckedに変化 参考資料 .parent() | jQuery 1.9 日本語リファレンス | js STUDIO 親にチェックするだけで、子や孫のチェックボックスもまとめてチェック出来る | かちびと.net 【脱jQuery】.parents()で親要素よりも上の要素の取得をネイティブJavascriptに書き換え | ウェブラボ（株）スタッフブログ | ウェブラボ（株）スタッフブログ

Flask でフォームを作っていて、 送信ボタンを押したときにフォームの中身が全部消えるのが嫌だったので、 対策方法をメモっておきます。 できること Flaskでフォームを保持する方法がわかる 辞書でフォームのデータを引っ張っておく request.formに辞書の形でフォームのデータが内包されているため、 これを次のレンダー時に引っ張ってくるようにしましょう。 from Flask import request @app.route('/', methods=["GET", "POST"]) def index(): if request.method == 'POST': # POSTの場合 return render_template('index.html', form_data=request.form) else: # GETの場合 return render_template('index.html') セッションに保管しておいて、次来たときでも呼び出せるようにしておくのもいいですね。 from Flask import request,session @app.route('/', methods=["GET", "POST"]) def index(): for request.form in key: session[key] if request.method == 'POST': return render_template('index.html', form_data=session) else: return render_template('index.html') HTML側で細工しておく 力技ですが、HTMLに{% if %}とかを入れて対処しましょう。 {% if form_data %} <input type={{type}} class="form-control" id={{id}} name={{id}} value="{{session[id]}}"> {% else %} <input type={{type}} class="form-control" id={{id}} name={{id}}> {% endif%} フォームが一つとかだけならいいんですが、同じようなフォームを複数扱う場合に大変なので、 マクロ機能を使うと大変便利です。 え？違う内容のフォームがたくさんある？…力技でどうにかしましょう {% macro form(id) -%} {% if form_data %} <input type={{type}} class="form-control" id={{id}} name={{id}} value="{{session[id]}}"> {% else %} <input type={{type}} class="form-control" id={{id}} name={{id}}> {% endif%} {%- endmacro %}

備忘録として、QiitaでJavaScriptの記事を書いていきたいと思います。相当初歩的な内容なので、暖かく見守っていただけると幸いです。 やりたいこと 私は経済学部に所属しているので、身近なGDPを計算する簡単なWEBアプリケーション（以下アプリ）を作成しようと思います。 ↓これが完成品です↓ https://ryo-04.github.io/GDP jQueryとかも一旦使わないピュアなJavaScriptでコードを書きますので、超初心者も安心です。 （自分も超初心者） GDPの公式 GDPの計算の公式は、 Y = C + I + G + (X - M) Y：GDP C：民間消費 I：民間投資 G：政府支出（消費 + 投資） X：輸出 M：輸入 こんな感じです。 「経済学興味ないよ」って方は、これを覚える必要はありませんが、一応UI（ユーザーインターフェイス）に説明として書くようにしましょう。 簡単な設計 それでは簡単にアプリの設計をしましょう。 とはいえ、面倒なので今回はデザインとかは完全にスキップしてCSSのファイルは作りません。 やりたいことは、C, I, G, X, Mを入力して、ボタンを押したらYが出力される、ってだけの処理。 必要な機能はざっと以下の通り。 ・HTMLのinput要素 ・計算開始用のボタン ・inputから数字を読み取って計算 ・HTMLに計算結果を表示 やることはこれだけですね、単純で明快です。 ファイルを作る では早速ファイルを作ります。 ……とその前にフォルダ（ディレクトリ）を作って、適当に名前をつけます。 今回はGDPと名付けましょう（安直）。 GDP/index.html GDP/script.js この二つのファイルだけ作ったら、次はいよいよコードを書いていきます。 HTMLを書く では、HTMLのコードを書いていきます。 まずはinput要素から書きましょうか。 index.html <p>民間消費（C）: <input id="c" type="number" value=""></p> <p>民間投資（I）: <input id="i" type="number" value=""></p> <p>政府支出（G）: <input id="g" type="number" value=""></p> <p>輸出（X）: <input id="x" type="number" value=""></p> <p>輸入（M）: <input id="m" type="number" value=""></p> 1行目を書いたらコピペで5つに分身させて、id要素だけ変えましょう。その方が楽だしミスもないです。 そして、その下にボタンを配置します。 index.html <button id="keisan_button"><p id="keisan">計算開始！</p></button> 思わず押したくなるようなボタンが出来上がったら、今度は計算結果を出力する場所を用意します。 index.html <p id="output">GDP: <span id="y"></span>億円</p> これでHTMLの準備は完了です。 JavaScriptを書く前に、bodyの1番下にscript.jsを読み込むための「魔法の一文」を加えましょう。 index.html <script src="script.js"></script> 一応、body内のコードを全て書くとこうなります。 index.html <!-- 前略 --> <body> <p>民間消費（C）: <input id="c" type="number" value=""></p> <p>民間投資（I）: <input id="i" type="number" value=""></p> <p>政府支出（G）: <input id="g" type="number" value=""></p> <p>輸出（X）: <input id="x" type="number" value=""></p> <p>輸入（M）: <input id="m" type="number" value=""></p> <button id="keisan_button"><p id="keisan">計算開始！</p></button> <p id="output">GDP: <span id="y"></span>億円</p> <script src="script.js"></script> </body> JavaScriptを書く 次にアプリの機能を作っていきましょう。 私はJavaScript初学者なので、もっと良い記述方法もあると思いますが、とりあえず今は「動けばOK」精神で書きます。 まずはinput要素から数値を取り出して、計算結果を返すmath()を作ります。 script.js function math(){ let c = parseInt(document.getElementById("c").value); let i = parseInt(document.getElementById("i").value); let g = parseInt(document.getElementById("g").value); let x = parseInt(document.getElementById("x").value); let m = parseInt(document.getElementById("m").value); return c + i + g + (x - m); }; 変数c, i, g, x, mに、それぞれの数値を代入します。このコードもコピペ推奨です、コピペは神。 そして、returnで計算結果を戻り値として返します。 一応、parseIntで数値として取り出すよ〜的なこと書いたんですが、無くても大丈夫かも？（HTML側でtypeをnumberで指定しているため） 次に、このmath()をボタンのクリック時に呼び出すコードを書きましょう。 script.js document.getElementById("keisan_button").onclick = function(){ let y = math(); document.getElementById("y").textContent = y; }; なんか、この1行目はもっと綺麗に書ける気もするのですが、機能すれば良いのでとりあえずこれでよし。 ボタンがクリックされたら、先ほど作ったmath()を呼び出して変数yに代入。 その後、span id="y"に表示してねって感じ。 正直、ひとつのfunctionにまとめても書けるけど、どっちが良いのか分からなかったので2つに分けました。 一応、index.htmlのパスをコピーして、Chromeで確認してみてください。 終わりに とりあえず簡単なアプリを作ることができました。 デザインとか、もう少し機能つけてみたりしたら需要あるかも？？ この記事を通して、JavaScriptでアプリ開発することのハードルが下がれば良いなと思っています。

1.はじめに 1-1.きっかけ 業務でアプリ開発を運用するようになった 1-2.経歴 電子工学専攻 組込みエンジニア歴　3年目 Webの業務経験なし 業務ではC言語を扱う はじめてMacBookを使用 保有資格は基本情報技術者試験 2.試験について 2-1.試験概要 HTML5、CSS3などの最新のマークアップを使って マルチデバイスに対応したWebコンテンツをデザイン・制作できる。 この認定の取得を通じて、下記のスキルと知識を持つ Webプロフェッショナルであることを証明できます。 HTML5を使ってWebコンテンツを制作することができる。 ユーザー体験を考慮したWebコンテンツを設計・制作することができる。 スマートフォンや組み込み機器など、様々なデバイスに対応したコンテンツ制作ができる。 HTML5で何ができるのか、どういった技術を使うべきかの広範囲の基礎知識を有する。 2-2.出題範囲 1.1 Webの基礎知識 1.1.1 HTTP, HTTPSプロトコル（重要度：8） 1.1.2 HTMLの書式（重要度：9） 1.1.3 Web関連技術の概要（重要度：6） 1.2 CSS 1.2.1 スタイルシートの基本（重要度：7） 1.2.2 CSSデザイン（重要度：9） 1.2.3 カスケード（優先順位）（重要度：2） 1.3 要素 1.3.1 要素と属性の意味（セマンティクス）（重要度：10） 1.3.2 メディア要素（重要度：6） 1.3.3 インタラクティブ要素（重要度：7） 1.4 レスポンシブWebデザイン 1.4.1 マルチデバイス対応ページの作成（重要度：4） 1.4.2 メディアクエリ（重要度：5） 1.4.3 スマートフォンサイト最適化（重要度：3） 1.5 APIの基礎知識 1.5.1 マルチメディア・グラフィックス系API概要（重要度：5） 1.5.2 デバイスアクセス系API概要（重要度：4） 1.5.3 オフライン・ストレージ系API概要（重要度：8） 1.5.4 通信系API概要（重要度：3） 2-3.参考合格体験記 2-4.学習方法 Ping-tがいいらしい 3.学習 4.学習時間 日付 内容 時間 5.合格体験記 5-1.得点 5-2.感想 参考文献 特定非営利活動法人エルピーアイジャパン