What's New Qiita

20200220のJavaScriptに関する記事は15件です。

  • 投稿日：2020-02-20T23:38:21+09:00

javascript(node.js)のrequest.on()を解説

reqest.on(イベント名, 関数);

イベント名
→　dataイベント
クライアントからデータを受け取ると発生するイベントです。

→ endイベント
データの受け取りが完了すると発生するイベントです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-20T22:43:26+09:00

Azureみたいなウィザードっぽい入力フォームを作りたい Phase2 確認画面実装編(knockout.js使いこなせない)

前の記事の続き。

フォームに入力した内容を、最後に確認画面で出すための実装に挑戦した。

↓こんな感じで入力すると
image.png
こうなる。名前はいま食べてるお菓子からそのまま流用した。
image.png

入力内容の連携にはknockout.jsを使った。data-bindってやつ。
knockout.jsはダウンロードして、フォルダ構成が以下になるように配置。

index.html(本記事のソースをコピペしただけのHTMLファイル)
AdminLTE-3.0.2(フォルダ)
css
img
js
plugins
knockout-3.5.1(フォルダ)
knockout-3.5.1.js

ソースは以下。(クリックするとソースが表示されます)
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>テストページ</title>

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="AdminLTE-3.0.2/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="AdminLTE-3.0.2/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>

<body>
<div class="split-input-form container-fluid">
    <div class="Title">分割入力フォーム</div>

    <div class="docking">
        <div class="docking-body p-3">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a href="#tab1-content" class="nav-link" data-toggle="tab">基本</a>
                </li>
                <li class="nav-item">
                    <a href="#tab2-content" class="nav-link" data-toggle="tab">住所</a>
                </li>
                <li class="nav-item">
                    <a href="#tab3-content" class="nav-link" data-toggle="tab">連絡先</a>
                </li>
                <li class="nav-item">
                    <a href="#tab4-content" class="nav-link" data-toggle="tab">確認</a>
                </li>
            </ul>
            <div class="tab-content">
                <div id="tab1-content" class="tab-pane active">
                    <div>
                        <span>基本の情報を入力します。</span>
                    </div>
                    <br />
                    <div class="font-weight-bold" style="margin: 10px 0px;">基本情報</div>
                    <div>
                        <span>あなたの名前と年齢を入力します。</span>
                    </div>
                    <br />
                    <div class="row form-group">
                        <label class="col-xl-1 d-flex align-items-center">
                            名前
                        </label>
                        <input type="text" data-bind="value: inputName, valueUpdate: 'input'" class="col-xl-11 form-control" id="InputName" placeholder="名前を入力" />
                    </div>
                    <br />
                    <div class="row form-group">
                        <label class="col-xl-1 d-flex align-items-center">
                            年齢
                        </label>
                        <input type="text" data-bind="value: inputAge, valueUpdate: 'input'" class="col-xl-11 form-control" id="InputAge" placeholder="年齢を入力" />
                    </div>
                </div>
                <div id="tab2-content" class="tab-pane">
                    <div>
                        <span>あなたの住所を入力します。</span>
                    </div>
                    <br />
                    <!-- general form elements -->
                    <div class="row form-group">
                        <label for="selectPrefectureLabel" class="col-xl-1 d-flex align-items-center">
                            都道府県
                        </label>
                        <select class="form-control" data-bind="options: prefItems, value: selectedPref" id="selectPrefecture"></select>
                    </div>
                    <br />
                    <div class="form-group">
                        <label for="selectAreaLabel" class="col-xl-1 d-flex align-items-center">
                            地域
                        </label>
                        <div class="custom-control custom-radio">
                            <input class="custom-control-input" data-bind="checked: inputArea" type="radio" id="AreaRadioWest" name="AreaRadio" checked="" value="どちらかというと西">
                            <label for="AreaRadioWest" class="custom-control-label">
                                どちらかというと西
                            </label>
                        </div>
                        <div class="custom-control custom-radio">
                            <input class="custom-control-input" data-bind="checked: inputArea" type="radio" id="AreaRadioEast" name="AreaRadio" value="どちらかというと東">
                            <label for="AreaRadioEast" class="custom-control-label">
                                どちらかというと東
                            </label>
                        </div>
                    </div>
                </div>
                <div id="tab3-content" class="tab-pane">
                    <div>
                        <span>希望する連絡手段を選んでください。(複数選択可能)</span>
                    </div>
                    <br />
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" data-bind="checked: inputContact" type="checkbox" id="customboxMobile" value="携帯電話" />
                            <label for="customboxMobile" class="custom-control-label">
                                携帯電話
                            </label>
                        </div>
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" data-bind="checked: inputContact" type="checkbox" id="customboxPhone" value="固定電話" />
                            <label for="customboxPhone" class="custom-control-label">
                                固定電話
                            </label>
                        </div>
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" data-bind="checked: inputContact" type="checkbox" id="customboxFax" value="FAX" />
                            <label for="customboxFax" class="custom-control-label">
                                FAX
                            </label>
                        </div>
                    </div>
                </div>
                <div id="tab4-content" class="tab-pane">
                    <div>
                        <span>入力した内容を確認します。以下でよろしいですか？</span>
                    </div>
                    <br />
                    <div class="form-group">
                        <div class="row">
                            <label class="col-xl-1 d-flex align-items-center">
                                名前
                            </label>
                            <p class="col-xl-11" id="InputNameResult" data-bind="text: inputName" />
                        </div>
                        <br />
                        <div class="row">
                            <label class="col-xl-1 d-flex align-items-center">
                                年齢
                            </label>
                            <p class="col-xl-11" id="InputAgeResult" data-bind="text: inputAge" />
                        </div>
                        <br />
                        <div class="row">
                            <label class="col-xl-1 d-flex align-items-center">
                                都道府県
                            </label>
                            <p class="col-xl-11" id="InputPrefResult" data-bind="text: selectedPref" />
                        </div>
                        <br />
                        <div class="row">
                            <label class="col-xl-1 d-flex align-items-center">
                                地域
                            </label>
                            <p class="col-xl-11" id="InputAreaResult" data-bind="text: inputArea" />
                        </div>
                        <br />
                        <div class="row">
                            <label class="col-xl-1 d-flex align-items-center">
                                連絡先
                            </label>
                            <p class="col-xl-11" id="InputContactResult" data-bind="text: inputContact" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- jQuery -->
<script src="AdminLTE-3.0.2/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="AdminLTE-3.0.2/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="AdminLTE-3.0.2/js/adminlte.min.js"></script>
<!-- knockout.js  -->
<script src="knockout-3.5.1/knockout-3.5.1.js"></script>

<script>
    $(function () {
        var viewModel = {
            //
            // 初期値は空文字
            //
            inputName: ko.observable(''),
            inputAge: ko.observable(''),
            prefItems : ['北海道', '本州', '四国', '九州'],
            selectedPref: ko.observable('北海道'),
            inputArea: ko.observable(''),
            inputContact: ko.observableArray()
        };
        ko.applyBindings(viewModel);
    });
</script>

</body>
</html>

knockout.js、まだよくわかってないけどいい感じ。
今は入力フォームを監視して、入力された値を確認画面にそのまま反映してるだけで、まだ氷山の一角って感じ。
例えば、「基本」タブの「名前」を「姓」「名」って分ける修正をするときに、ViewModelだけ更新すればUIも動的に変わってくれるって使い方ができそう。
ていうか、それが主目的のライブラリなんだっけか････？

もうちょい勉強して、拡張しやすいコードに更新したいですね。
でも、今は先に進むことを考えよう････

次は、画面最下部にあるボタンの実装をやろう。
下の画面の「確認および作成」「＜前へ」「次：ディスク」 のとこね･･･
image.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-20T17:55:30+09:00

誕生日から年齢、曜日、干支、誕生石、星座を求める Javascript (OS X AppleScript)

概要

　AppleScript のスクリプトエディタで動作する、Javascript です。（OS X で動作します。）
誕生日を入力し、基準日（省略すると現在日付）現在の年齢を計算します。
誕生日の曜日、干支、誕生石、星座も表示します。
誕生日の入力は、和暦："元号yy年mm月dd日"、西暦："yyyy/mm/dd" どちらの形式でもOKです。

　Scriptフォルダに入れとくと、メニューバーから起動できて便利に使えると思います。

ソース

　スクリプトエディタの画面で、Javascript に設定してソースをコピし、保存します。

年齢計算Javascript.scpt
// 誕生日の曜日と年齢、干支、誕生石、星座を求める。
var app = Application.currentApplication()
app.includeStandardAdditions = true

var ans = app.displayDialog("誕生日を入力 (yyyy/mm/dd か 元号nn年mm月dd日)", {defaultAnswer: ""})
var iDate = ans.textReturned
var sDate = new Date(gengoChack(iDate))
var ans = app.displayDialog("計算の基準日を入力 (yyyy/mm/dd)入力を省略すると今日を基準に計算します。", {
    defaultAnswer: ""})
if (ans.textReturned == "") var tDate = new Date()
    else var tDate = new Date(ans.textReturned)

var youbi = '日月火水木金土'[sDate.getDay()]
var age = tDate.getFullYear() - sDate.getFullYear()
var mDate = new Date(tDate.getFullYear() + "/" + (sDate.getMonth() + 1) + "/" + sDate.getDate())
if (tDate < mDate) age = age - 1
ans = tDate.getFullYear() + "/" + (tDate.getMonth() + 1) +"/" + tDate.getDate()
var eto = ('申酉戌亥子牛寅卯辰巳午未')[sDate.getFullYear()%12]

app.displayDialog(iDate + " " + youbi + "曜日、" + eto + "年生まれのあなたは\n" +
    yymmdd(tDate) + "現在の年齢は " + age + "才で、\n" +
    "誕生石は" + stone(sDate.getMonth()) +
    "、星座は" + seiza((sDate.getMonth() + 1), sDate.getDate()) + "です。")

function yymmdd(wDate) {
    return wDate.getFullYear() + "/" + (wDate.getMonth() + 1) + "/" + wDate.getDate()
}

function stone(MM) {
    var ishi = ["ガーネット","アメジスト","アクアマリン","ダイヤモンド","エメラルド","真珠","ルビー",
            "ペリドット","サファイア","オパール","トパーズ","タンザナイト"]
    return ishi[MM]
}

function seiza(MM, DD) {
    var seiza = ""
    if (MM == 3 && DD >= 21)　ans  = "牡羊"
    if (MM == 4 && DD <=19)　ans  = "牡羊"
    if (MM == 4 && DD >= 20)　ans  = "牡牛"
    if (MM == 5 && DD <=20)　ans  = "牡牛"
    if (MM == 5 && DD >= 21)　ans  = "双子"
    if (MM == 6 && DD <=21)　ans  = "双子"
    if (MM == 6 && DD >= 22)　ans  = "蟹"
    if (MM == 7 && DD <=22)　ans  = "蟹"
    if (MM == 7 && DD >= 23)　ans  = "獅子"
    if (MM == 8 && DD <=22)　ans  = "獅子"
    if (MM == 8 && DD >= 23)　ans  = "乙女"
    if (MM == 9 && DD <=22)　ans  = "乙女"
    if (MM == 9 && DD >= 23)　ans  = "天秤"
    if (MM == 10 && DD <=23)　ans  = "天秤"
    if (MM == 10 && DD >= 24)　ans  = "蠍"
    if (MM == 11 && DD <=21)　ans  = "蠍"
    if (MM == 11 && DD >= 22)　ans  = "射手"
    if (MM == 12 && DD <=21)　ans  = "射手"
    if (MM == 12 && DD >= 22)　ans  = "山羊"
    if (MM == 1 && DD <=19)　ans  = "山羊"
    if (MM == 1 && DD >= 20)　ans  = "水瓶"
    if (MM == 2 && DD <=18)　ans  = "水瓶"
    if (MM == 2 && DD >= 19)　ans  = "魚"
    if (MM == 3 && DD <=20)　ans  = "魚"
    return ans + "座"
}

function gengoChack(ymd) {
    var ans = ymd
    var gengo = ymd.substr(0,2)
    var dif = 0
    if (gengo == "明治") dif = 1867
    if (gengo == "大正") dif = 1911
    if (gengo == "昭和") dif = 1925
    if (gengo == "平成") dif = 1988
    if (gengo == "令和") dif = 2019
    if (dif == 0) return (ans)      // 西暦をそのまま返す

    var wk = ans.substr(2, (ans.length - 2))    // 元号を削除
    var nen = wk.split('年')[0]
    var tuki = wk.split('年')[1].split('月')[0]
    var hi = (ans.split('月')[1]).split('日')[0]
    nen = Number(nen) + Number(dif)
    return nen + "/" + tuki + "/" + hi  // 和暦を西暦に変換した値を返す
}

コメント歓迎

　もっとエレガントな方法がありましたら、是非コメントをお願いします。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-20T17:35:26+09:00

【Bootstrap】Bootstrap4のバリデーションフォームをブラウザ機能は無効にして使いたい

目的

Bootstrap4のValidation Formを使ってフォームを作成した時、ブラウザ機能によるバリデーションメッセージも表示され何だか見づらい・・・

is-invalidクラスをJavascript(jQuery)で動的に制御してBootstrapのバリデーションメッセージだけを表示させてスッキリさせたい。

実際に作りたい画面

下のようなinputとtextareaの混ざったシンプルなフォーム。Bootstrapのバリデーションメッセージのみを表示させたい。

codepen_bootstrap_validationForm.png

実装

HTML

<!-- novalidateでブラウザのバリデーション機能を無効にする　-->
<form action="javascript:void(0)" novalidate="novalidate">
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control" id="validationServer01" placeholder="First name">
      <div class="invalid-feedback">
        Please provide a First name.
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control" id="validationServer02" placeholder="Last name">
      <div class="invalid-feedback">
        Please provide a Last name.
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" >
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <textarea type="text" class="form-control" id="validationServer03" placeholder="City"></textarea>
        <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control" id="validationServer04" placeholder="State">
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control" id="validationServer05" placeholder="Zip">
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

JS

$('form').on('submit', (e) => {
  const formContents = e.target.querySelectorAll('input.form-control, textarea.form-control')
  for(const index in formContents) {
    if(!formContents[index].value) {
      $('#' + formContents[index].id).addClass('is-invalid')
    } else {
      $('#' + formContents[index].id).removeClass('is-invalid')
    }
  }
 })

ブラウザのバリデーションメッセージをカスタムする方法もあるようですが、今回はBootstrapにこだわりました。。
これでバリデーションエラーがBootstrap一律になって見やすくなった！！！:relaxed:

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-20T16:17:21+09:00

IM-FormaDesignerの画面モードを取得する

はじめに

intra-martのIM-FormaDesignerでは、ローコード開発を行うことが可能です。
画面上の制御が必要な場合は、JavaScriptでスクリプトを実行することも可能です。

やったこと

IM-FormaDesignerの画面モードを取得しました。
- 登録：REGISTRATION
- 更新：EDIT
- 参照：REFERENCE

document.getElementsByName('imfr_response_type')[0].value

わかったこと

画面モードを取得する事で、新規登録のみ行いたい処理などを制御することが可能である。

つぎにやること

画面モードを隠しパラメータに保持する。

メリット

アクション設定の条件式などに使用できる。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-20T15:26:24+09:00

【Node.js】FetchでフォームデータをPOSTする

Node.jsアプリケーションなどでFechを用いてファイルなどのフォームデータをPOSTしてみる

FetchAPIのデフォルトのコンテンツタイプヘッダは Content-Type': 'application/json になっています

一方、HTML等のFormを用いてPOSTしたときのコンテンツタイプヘッダは Content-Type': 'multipart/form-data です

コンテンツタイプヘッダを指定してPOSTするのでは駄目

コンテンツタイプヘッダを Content-Type': 'multipart/form-data と指定してfetchしてみてもデータは送信できません。

multipart形式ではバイナリデータを転送できるため、サーバー側がフィールドデータがどこで終わり、次のフィールドデータがどこから始まるかを知る為に、ブラウザ側でboundaryというものを設定します。

そのため、コンテンツタイプヘッダをオーバーライドするだけではboundaryの設定が正常に出来ません。

解決策

コンテンツタイプヘッダをオーバーライドするだけでは上記のような問題が発生してしまうので
明示的にコンテンツタイプヘッダを明示的に削除してあげる必要があります。

index.js
const fileInput = document.querySelector('#your-file-input') ;
const formData = new FormData();

formData.append('file', fileInput.files[0]);

// 送信用データを設定
const options = {
  method: 'POST',
  body: formData,
  headers: {
    'Content-Type': 'multipart/form-data',
  },
};

// ここで明示的に消してあげる
delete options.headers['Content-Type'];

// 設定したデータをPOST
fetch('your-upload-url', options);

参考記事

この記事に助けられました。感謝してもしきれない。
Uploading files using 'fetch' and 'FormData'

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-20T14:28:44+09:00

あっさり読むrails⑤　（非同期処理　メニュー追加)

はじめに

以前の記事で非同期処理について書かせて頂きました。
今回は、その別バリエーションを書かせて頂きます。

実行

前回は"フォームに入力した文字が別の場所に表示させる"コードについてお話しましたが、今回は"ボタンを押すとプルダウンメニューが表示される"コードについて書かせて頂きます。

まずは、元となるビューファイルです。

index.html.haml
.btn　表示させる
= form_with model:@sample, local: true do |f|
  .pulldown

btnを押してpulldownの所にプルダウンメニューを表示させるわけですね。

CSSはとりあえず次の様に書いておけば、ボタンっぽくなるでしょう。

.btn{
 background-color: #F999;
 padding: 5px;
}

次にJSのファイルです。とりあえず、「ボタンを押したら発火する」だけのコードを書きます。

$(".btn").on("click", function(){

});

中にはなにも書いてませんので、追加するビューコードと追加するための処理を書いていきます。

$(".btn").on("click", function(){
  let Form = `
  <form action = "/" accept-charset = "UTF-8" method = "POST" class = "menu">
      <select class = "pulldown__menu" name = "menu">
  `
  $(".pulldown").html(Form);
});

この時クラス名を間違えると、プルダウンメニューが追加されない、CSSが適用されないなどの不具合が起きますので、
慎重に記述してください。

これでプルダウンメニューが追加されるようになりますが、今は中身が空っぽなので何も選ぶ事はできません。
そのため、プルダウンメニューの中身を追加するコードを書いていきます。

(前略)
  var list = [ "--", "東", "西", "南", "北"];
  let Form2 = `
    ${list.forEach(function(value){
      let wrapper = `<option value>${value}</option>`
    $(".pulldown__menu").append(wrapper);
  })
  }
  `
(後略)

（注意）無駄な記述があるコードになっています。
修正でき次第、更新します。

全体の流れとしては、

①ボタンをクリックしたらフォームを表示させる(html)
②メニューで表示させる値を配列で用意する(list)
③メニューの項目一つ一つを、eachメソッドで追加(append）していく

となります。

全体のJSコードは次の通りです。

$(function(){
  $(".btn").on("click", function(){
    let Form = `
    <form action = "/" accept-charset = "UTF-8" method = "POST" class = "menu">
        <select class = "pulldown__menu" name = "menu">
    `
    $(".pulldown").html(Form);

    var list = [ "--", "東", "西", "南", "北"];
    let Form2 = `
      ${list.forEach(function(value){
        let wrapper = `<option value>${value}</option>`
      $(".pulldown__menu").append(wrapper);
    })
    }
    `
  });
});
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-20T14:25:54+09:00

【binarysearch.io】Codewars と併用すると良いかもしれないオンラインプログラミング学習サイト

Twitter でのつぶやきで知ったオンラインのプログラミング学習サイトです。

  • Java, Ruby, Python, C++, JavaScript に対応しています (2020/02/20現在)。
  • チャットしながら複数人で解答を作っていくという醍醐味があるみたいですが、今回は一人で(他人のチャットに邪魔されずに)学習する方法をお教えします。
  • Codewars よりも問題の質が安定しているという印象を受けました。(公式が作成した問題のみ)
  • 競技プログラミングではないので、プログラミング学習のドリルとして使う、プログラミングのレベルアップに使う等の用途に向いていると思います。

1. https://binarysearch.io/ にアクセスし「Get Started」をクリックしてサインアップを行います。

image.png

2. 「Full Name」「Username」「Email」「Password」を入力して「Sign up for Binary Search」をクリックします。

image.png

3. 2で登録した「Email」に登録確認用メールが送信された旨が表示されるので、メールアプリを開いて確認用のリンクをクリックします。

image.png

image.png

4. メールアドレスの確認が完了したら「Start」ボタンをクリックします。

image.png

5. https://binarysearch.io/ のログイン後の画面が表示されます。問題を解くには「Create room」ボタンを押します。

image.png

6. Difficulty で問題の難易度を選びます。外国人の方からチャットで話かかけられたりしないように Capacity を「1 player」にしておく(または Private にしておく)と良いかもしれません。

image.png

7. room を作成したら「Start Room」ボタンを押して問題を開始します。(今回は Easy で作成しました)

image.png

8. 「引数として与えられた配列の長さが１かどうかを返す」よう関数を完成させなさい、という問題です(注記：こんな簡単すぎる問題ばかりではありません)。解答言語としてJavaScriptを 選択しました。

image.png

9. 解答を作成したら「Run▶」ボタンをクリックします。「Correct!」と表示されたら「Submit code」ボタンをクリックします。

image.png

image.png

10. 問題によっては、「Solution」というタブに解法・解説が提示されることがあります。(この問題は簡単すぎなので解説がないんだと思います)

image.png

11. 別の問題を解くには「Start Room」ボタンを再度押して次の問題を開始します。部屋を抜けるには画面右上の×ボタンをクリックします。

image.png

最後に

公式の問題ばかりなので(?)問題の質が安定している(均一)なのが良いですね。気になったのは同じレベルで学習を続けていると同じ問題が出てくることがあることですが、そのまま解いちゃえば良いので大きな問題ではないと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-20T14:25:54+09:00

【binarysearch.io】Codewars と併用すると良いかもしれないオンラインプログラミング学習サイト (Master algorithms together)

Twitter でのつぶやきで知ったオンラインのプログラミング学習サイトです。

  • Java, Ruby, Python, C++, JavaScript に対応しています (2020/02/20現在)。
  • チャットしながら複数人で解答を作っていくという醍醐味があるみたいですが、今回は一人で(他人のチャットに邪魔されずに)学習する方法をお教えします。
  • Codewars よりも問題の質が安定しているという印象を受けました。(公式が作成した問題のみ)
  • 競技プログラミングではないので、プログラミング学習のドリルとして使う、プログラミングのレベルアップに使う等の用途に向いていると思います。

1. https://binarysearch.io/ にアクセスし「Get Started」をクリックしてサインアップを行います。

image.png

2. 「Full Name」「Username」「Email」「Password」を入力して「Sign up for Binary Search」をクリックします。

image.png

3. 2で登録した「Email」に登録確認用メールが送信された旨が表示されるので、メールアプリを開いて確認用のリンクをクリックします。

image.png

image.png

4. メールアドレスの確認が完了したら「Start」ボタンをクリックします。

image.png

5. https://binarysearch.io/ のログイン後の画面が表示されます。問題を解くには「Create room」ボタンを押します。

image.png

6. Difficulty で問題の難易度を選びます。外国人の方からチャットで話かかけられたりしないように Capacity を「1 player」にしておく(または Open to public を Private にしておく)と良いかもしれません。

image.png

7. room を作成したら「Start Room」ボタンを押して問題を開始します。(今回は Easy で作成しました)

image.png

8. 「引数として与えられた配列の長さが１かどうかを返す」よう関数を完成させなさい、という問題です(注記：こんな簡単すぎる問題ばかりではありません)。解答言語としてJavaScriptを 選択しました。

image.png

9. 解答を作成したら「Run▶」ボタンをクリックします。「Correct!」と表示されたら「Submit code」ボタンをクリックします。

image.png

image.png

10. 問題によっては、「Solution」というタブに解法・解説が提示されることがあります。(この問題は簡単すぎなので解説がないんだと思います)

image.png

11. 別の問題を解くには「Start Room」ボタンを再度押して次の問題を開始します。部屋を抜けるには画面右上の×ボタンをクリックしてから「Leave」を選択します。

image.png

最後に

公式の問題ばかりなので(?)問題の質が安定している(均一)なのが良いですね。気になったのは同じレベルで学習を続けていると同じ問題が出てくることがあることですが、そのまま解いちゃえば良いので大きな問題ではないと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-20T12:45:58+09:00

preventDefault, stopPropagation, stopImmediatePropagationまとめ

はじめに

Javascriptでアプリ開発していると、なんとなく"予防的"に、preventDefaultとstopImmediatePropagationをコード中で併記する変な癖がついてしまっていました。（違いは理解しているつもりだったのですが、IME関連の処理を書いている時からpreventDefaultが効かなくなったりして混乱してしまったみたい。）

確認用として、これらでキャンセルできるイベントについて整理します。

テスト条件

次のようなHTMLで、contentEditableな要素を含むアプリを想定します。

<html>
<body>
<div id="div0" contentEditable="true">入力欄</div>
</body>
</html>

このHTMLに対して、Javascriptでは次のイベントリスナーを登録しておきます。

const div0 = document.getElementById("div0");
div0.addEventListener("keydown", OnKeydown1, false);
div0.addEventListener("keydown", OnKeydown2, false);
div0.addEventListener("input", OnInput, false);
div0.addEventListener("keyup", OnKeyup, false);
window.addEventListener("keydown", OnKeydownWin, false);
window.addEventListener("keyup", OnKeyupWin, false);

addEventListenerの登録順序も表記の順とします。

さて、これを実行し、要素div0の中でキー入力を行うと、次の順でイベントが発火します。

  1. OnKeydown1
  2. OnKeydown2
  3. OnKeydownWin
  4. OnInput
  5. OnKeyup
  6. OnKeyupWin

これがデフォルトの状況となります。OnKeydownWinとOnKeyupWinはバブリングにあたります。

発火を抑制できるイベント

上記の条件下において、OnKeydown1 イベントの中でpreventDefault、stopPropagation、stopImmediatePropagationのいずれかをcallした場合、2～6のイベントでキャンセルされるものを以下の表記に記載します。×印のついたイベントはキャンセルされ、なにも記述の場合は発火することを意味します。

イベント名 preventDefault stopPropagation stopImmediatePropagation
OnKeydown2 ×
OnKeydownWin × ×
OnInput ×
OnKeyup
OnKeyupWin

preventDefaultとstopPropagationもしくはstopImmediatePropagationを併記した場合は、どちらかで×印が付いているイベントはキャンセルされます。

簡単に挙動を纏めると、次のようになります。preventDefaultでキャンセルできるのはデフォルト処理であり、今回のcontentEditableな要素に対してのキー入力では、文字入力がキャンセルされます。よってOnInputがキャンセルされます。 一方で、もう一つ登録されたOnkeydown2やバブリングであるOnkeydownWinはキャンセルされずに発火します。また、OnKeyupはkeydownとは独立したイベントとみなされ、キャンセルできません。

stopPropagationはバブリングだけをキャンセルします。よって、OnkeydownWinがキャンセルされます。しかし、 Onkeydown2は同じ要素の同じイベントに登録されたリスナーであってバブリングではないのでキャンセルできません。

Onkeydown2もキャンセルしたい場合にはstopImmediatePropagationを使います。これはバブリングに加えて、同じ要素の同じイベントに続けて登録されたリスナーもキャンセルします。

例外

IME制御は上記が当てはまらない場合があります。詳しくは以前のまとめへ

さいごに

まとめて思うのは、OnKeydown2だけをキャンセルして、バブルリングのOnKeydownWinは発火させることはできないのだろうか。私の場合は、それがやりたかった為に無意識にコードをこじらせている部分があります。。。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-20T11:36:59+09:00

Laravel DB.com ” New！！ チーム共有機能 ”

Laravel DB.com ってなに？

Laravel DB.com ってなに？前回の紹介記事です！
https://qiita.com/daisu_yamazaki/items/068595670bdc2b6fe3fc

New「チーム共有機能」

シェア機能のことです。

「シェアData 送信側」

1. [シェアData]作成

2. [シェアData]IDをコピー

ここでコピーしたIDを相手に知らせます。

「シェアData 受信側」

1.[シェアData]読み込み

相手は送られてきた[シェアData]IDを貼り付けます。

2.「Read」ボタンをクリックしてデータを受信表示しましょう。

3.シェアデータの複製が完了しました。

受信側にデータが入りましたので、受信側もそのデータを活用できるようになります。

現在はベータ版機能として、「１データのみ共有可能」 になります。
それだけでも、便利になるはずですので、お試しいただければと思います。

Laravel専用ツール！！

日本から世界へ！世界で使われるプロダクトになることを願っております。
是非、応援の程よろしくお願いいたしますm(_ _)m
ツイッターのフォローも興味があれば！！
Twitter： LaravelDB.com

LaravelDB.com解説ページ一覧

コード書かずに超スピード開発~（DEMO動画あり）~最新版『 Laravel DB.com 』

https://qiita.com/daisu_yamazaki/items/068595670bdc2b6fe3fc

LaravelDB.com 対応カラム一覧

https://qiita.com/daisu_yamazaki/items/92dc3cc599a264c3fb0f

LaravelDB.com テーブル命名ルール

https://qiita.com/daisu_yamazaki/items/1cb5987cc6d1008def82

LaravelDb.com integerの注意点

https://qiita.com/daisu_yamazaki/items/f2e6d58cfa20fa81fd54

LaravelDB.com Faker（テストデータ投入）

https://qiita.com/daisu_yamazaki/items/57669e8fa2c256d85c95

以上

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-20T11:36:59+09:00

【LaravelDB.com】New !! ”チーム共有機能 ” 早々に追加された訳

Laravel DB.com ってなに？

Laravel DB.com ってなに？前回の紹介記事です！
https://qiita.com/daisu_yamazaki/items/068595670bdc2b6fe3fc

なぜ１週間程度で”Team共有機能”を実装したのか？

私は、G'sACADEMYや大学院/大学などで先生をしてます。
Team開発や、メンターとのオンラインMTG用にあった方が助かるとの希望をいくつか聞きました。更にTwitterでもアンケートを取り、微妙な数字でしたが、とりあえず学生の意見もあったのでシンプルな機能であれば実装しようと思いました。

「どうやったら？早く、シンプルに実装可能か？」を仕様検討していたのですが、一つの方法を昨日考えつきました。昨日から朝まで実装、不具合があったので、さっきの午前中までかかり完成（ベータ版としておきます）。
必要な気がしてたので、まずは実装して、これから改善ですね。スピードは時間を有意義に使うための重要なスキルですね。これで、少しでも、オンライン上でデータのやり取りができたら良いのですが。。。また、追加機能・改修等があれば記事を追加して行きたいと思います。

New「チーム共有機能」

シェア機能のことです。

【シェアData 送信側】

1. [シェアData]作成


POINT：
この時点で共有データが作成されます。
見せたい相手にIDを渡しておいて、変更があれば「Create a [Share ID]」ボタンを押すと毎度データ更新されることを知っておきましょう！ 「データ更新したので見てください！」って後から言えるってことですね。

2. [シェアData]IDをコピー

ここでコピーしたIDを相手に知らせます。

【シェアData 受信側】

1.[シェアData]読み込み

相手は送られてきた[シェアData]IDを貼り付けます。
こちらのIDを知っていれば誰でも読み込めます！見て欲しい人に渡しましょう！
※LOGIN（Googleアカウントで）しないと見れないことは認識しておいてください。

2.「Read」ボタンをクリックしてデータを受信表示しましょう。

3.シェアデータの複製が完了しました。

受信側にデータが入りましたので、受信側もそのデータを活用できるようになります。

現在はベータ版機能として、「１データのみ共有可能」 になります。
それだけでも、便利になるはずですので、お試しいただければと思います。

Laravel専用ツール！！

日本から世界へ！世界で使われるプロダクトになることを願っております。
是非、応援の程よろしくお願いいたしますm(_ _)m
ツイッターのフォローも興味があれば！！
Twitter： LaravelDB.com

LaravelDB.com解説ページ一覧

コード書かずに超スピード開発~（DEMO動画あり）~最新版『 Laravel DB.com 』

https://qiita.com/daisu_yamazaki/items/068595670bdc2b6fe3fc

LaravelDB.com 対応カラム一覧

https://qiita.com/daisu_yamazaki/items/92dc3cc599a264c3fb0f

LaravelDB.com テーブル命名ルール

https://qiita.com/daisu_yamazaki/items/1cb5987cc6d1008def82

LaravelDb.com integerの注意点

https://qiita.com/daisu_yamazaki/items/f2e6d58cfa20fa81fd54

LaravelDB.com Faker（テストデータ投入）

https://qiita.com/daisu_yamazaki/items/57669e8fa2c256d85c95

以上

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-20T11:22:40+09:00

【JavaScript】書き方まとめ　全4種類

JavaScriptとはどういうものか

簡単に言うとウェブページをリロードすることなく画面に変化を起こせるもの

例えばこの画面の左側（スマホの場合上）に記事をいいねするボタンやストックするボタンがあります
それらにカーソルを合わせると色が変わる、
クリックすると画像が変化するなどの処理はJavaScriptで書かれています

いいねとストックはチェックマークがついた状態がデフォルトです（すっとぼけ）

1.HTMLファイルに直接書き込む <script>

<script>と</script>の間にJavaScriptの処理を書き込みます
コンソールにHello Worldが表示されます

html
<script>
console.log('Hello World');
</script>

2.HTMLの要素の属性として書き込む(イベントハンドラ)

実行ボタンを押すとアラートが表示されます
実行のタイミングはイベントハンドラによって異なる

html
<input type="button" value="実行" onclick="alert('Hello World')">

イベントハンドラ例

イベント
ハンドラ		 動作
onLoad ページや画像の読み込みが完了した時に発生
onClick 要素やリンクをクリックした時に発生
onSubmit フォームを送信しようとした時に発生
onKeyDown キーを押した時に発生

3.外部ファイルに書き込む

拡張子が.jsのファイルを作り
JavaScriptファイルをHTMLファイルで読み込むことができます

hello.js
function hello() {
 consol.log('hello');
}
html
<!DOCTYPE html>
<html>
<head>
<title>任意のタイトル</title>
<script src="hello.js"></script>//ここでJavaScriptが実行される
</head>
・
・
</html>

4.URL記述

javascript:関数と書くとJavaScriptの処理をURLのように扱うことができます
こんにちはをクリックするとコンソールにHello Worldが表示されます

html
<a href="javascript:console.log('Hello World')">こんにちは</a>

まとめ

４つ目のURL記述を初めて知り、これを機にJavaScriptの書き方についてまとめました
JavaScriptはHTML、CSSをやってきた人にとって初めての本格的なプログラミングになると思うので
書き方さえ覚えてしまえば
ググる→コピペ→うまく動く→書いてあることを理解する
の繰り返しで行けると思います！
頑張ってください:muscle:
最後まで目を通していただきありがとうございました！
images.jpeg

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-20T10:16:14+09:00

isotope で整列した際に要素がガタつくのをどうにかしたい。

http://staging.alitomo.com/form/gallery/
上記サイトでisotopeを使用して要素のフィルタリングしているのですが、
フィルタリングした際の挙動として、アニメーションの終了間際にガタつく現象が発生してしまいます。

transform プロパティでcssがガタつくときの対処法 – Creator Note

[ CSS3 ] transform プロパティを使って CSS アニメーションを実行した際に要素がガタつくのを防ぐ方法 ｜ memocarilog

上記辺りの記事を参考にガタツキの原因を考えて、色々調べてみましたが、うまくいきません。

使用しているisotopeを発火させるためのscriptは下記になります。

    // filter items on button click
    $('.iso_btn').on( 'click', 'button', function() {
        var filterValue = $(this).attr('data-filter');
        $container.isotope({ filter: filterValue });
        localStorage.setItem('btn_dr',filterValue);
        $('.iso_btn button').removeClass('is-checked');
        $(this).addClass('is-checked');
        //console.log(filterValue);
    }); 
        // init Isotope
    var $container = $('.gallery_box');
        $container.imagesLoaded(function(){
            $container.isotope({
            itemSelector: '.th_box',
            transitionDuration: '0.5s',
        });

    });

どなたかご指導よろしくお願いします。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-20T04:54:05+09:00

初心者によるプログラミング学習ログ 244日目

100日チャレンジの244日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。

すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

244日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
JavaScriptの最新記事を毎日チェックされたい方はフォローお願いします。

日付別

タグ一覧