【IntelliJ IDEA】JavaScriptのバージョン変更

2カ月くらい前から、eclipseを卒業してIntelliJ IDEAを使い始めました。
うろ覚えでソースコードを書いても、自動的に正しいコードへ置き換えてくれるので便利すぎて涙が出そうです。

とはいえまだまだ機能を使いこなせてません。。
前回の記事を書いた時にもこんなエラーが。

f:id:mnbee:20181027101810p:plain

JavaScriptのバージョンが合っていないですと…!
どこかで作業環境のバージョンを確認できるところがあるんでしょうか。
IntelliJ IDEAの使い方」で確認してみます。

pleiades.io

 
JavaScript言語バージョンの選択」の項にめっちゃ書いてた。
しかも自分で変更できるのね…なんだかカルチャーショック。

信頼性の高い効率的なコーディング支援を行うには、アプリケーションのすべてのJavaScriptファイルで使用される言語バージョンをデフォルトで指定する必要があります。

  1. 設定/環境設定ダイアログ(Ctrl+Alt+S)で、言語とフレームワークの下にあるJavaScriptを選択します。 JavaScriptページが開きます。
  2. ドロップダウンリストから、サポートされているJavaScript言語のバージョンを選択します。

手順に従って開いてみると…
f:id:mnbee:20181027103909p:plain オワーッ!確かにES6じゃないー!

ES6に変えてみます。
f:id:mnbee:20181027104054p:plain f:id:mnbee:20181027104233p:plain 「let」からエラーが消えました。
代わりに「var」に「letかconstを使ったほうがええで」というメッセージが。
し、親切~!!

これでES6もばっちり勉強できます…!ありがたや!
 

…なんですけど、
現場の指定言語はJavaScript2.0(ES5)であったことが先日判明しました…。
JQueryもダメなのね!

折角ES6の勉強始めたのになあ…ぐすん。

【JavaScript】ラベルから表示値を取得して計算

先週金曜日に、「水曜日までに修正してねー」と言われた設計書(もういない人が作ったやつ)で疑問に感じたことについて。なんか不要な画面項目が定義されているなー?と感じたので、修正作業に入る前にJavaScriptで動作確認しておきます。


デモ用HTML(修正前)

<body>
<div>
    全体の予定人数:<label id="total">40</label><input type="hidden" id="prevTotal" value="40"><br>

    第一事業部の予定人数:<input type="text" id="div1" value="10"><br>
    <input type="hidden" id="prevDiv1" value="10">

    <input type="button" value="計算(Jquery)" onclick="calcForJquery()">
    <input type="button" value="計算(Js)" onclick="calcForJs()">
</div>
</body>

処理概要

  • 計算ボタンを押下すると、テキストボックス("div1")に入力された値をもとに計算を行い、ラベル("total")を再表示する
  • 再表示するラベルの値は (変更後のテキストボックスの値 - 変更前のテキストボックスの値) + ボタン押下前のラベルの表示値で算出する

    例1:
    第一事業部("div1")の予定人数を20人に変更した場合、
    全体の予定人数("total")には(20-10)+40=50が表示される

  • 計算ボタンを押下する度に、ラベルの表示値は再計算される

    例2:
    例1の後、第一事業部の予定人数を5人に変更した場合、
    全体の予定人数には(5-20)+50=35が表示される

設計書で「うーん…」ってなっているのは、ラベルの表示値と同じ値をもつhidden項目("prevTotal")が定義されちゃってることなんですよね。
Submitしてサーバ側で処理するならともかく、JavaScriptだと別に必要ないよなーってことを念のため。

デモ用HTML(修正後)

ラベルと対になるhidden項目("prevTotal")は削除しちゃいます。
"prevDiv1"の方は、変更前の"div1"の値を保持する必要があるため残しておきます。

<body>
<div>
    全体の予定人数:<label id="total">40</label><br>

    第一事業部の予定人数:<input type="text" id="div1" value="10"><br>
    <input type="hidden" id="prevDiv1" value="10">

    <input type="button" value="計算(Jquery)" onclick="calcForJquery()">
    <input type="button" value="計算(Js)" onclick="calcForJs()">
</div>
</body>

その1:JQueryでお試し実装

function calcForJquery() {
    var total = $("#total");
    var inputDiv = $("#div1");
    var prevDiv = $("#prevDiv1");

    var diffDiv = parseInt(inputDiv.val()) - parseInt(prevDiv.val());
    total.text(parseInt(total.text()) + diffDiv);
    prevDiv.val(inputDiv.val());
}

うむ、textメソッドを使えばラベルを直接操作できますね。

その2:素のJavaScriptでお試し実装

function calcForJs() {
    var total = document.getElementById("total");
    var inputDiv = document.getElementById("div1");
    var prevDiv = document.getElementById("prevDiv1");

    var diffDiv = parseInt(inputDiv.value) - parseInt(prevDiv.value);
    total.textContent = parseInt(total.textContent) + diffDiv;
    prevDiv.value = inputDiv.value;
}

プロパーの方にJQueryを使えるか確認したところ、曖昧な反応を返されたのでJQueryを使わない版でも。
こっちはtextContentプロパティでラベルの表示値を操作します。
JQueryを引きずってメソッドと勘違いしてエラーを出しまくったのはご愛敬。。

各要素とプロパティにアクセスする方法が変わるだけですね。(そりゃそうか、JQueryで実現できるんだし…)
万が一のため、こちらの書き方も忘れないようにメモしておきます。


無事にラベルの項目を直接操作する方法が確認できました。
ですよねー!って感じですが。

こうやって確認するのはそんなに時間がかからないんですけど…
あちこちの人に説明しなくちゃいけないから、設計書を直すのは何倍も時間がかかっちゃうんですよね…あううう。

参考

【JavaGold 実践】defaultメソッドの多重継承

JavaSE8 Goldの黒本・紫本の一周目が完了しました。
…が、覚えること多すぎてサッパリダメだ…!

サーっと読んで問題解くだけじゃ身に付きませんね。。
2周目以降、躓いたところは実際にコードを書いて復習したいと思います。

今回は、インターフェースのdefaultメソッドの仕様について。
同一のシグニチャを持つdefaultメソッドを多重継承してみます。

1. 継承関係のないインターフェースの場合

interface Parent1 {
    default void print() {
        System.out.println("Parent1");
    }
}

interface Parent2 {
    default void print() {
        System.out.println("Parent2");
    }
}

class Child implements Parent1, Parent2 {   // コンパイルエラー発生
 // オーバーライドなし
    public static void main(String args[]){
        Child c = new Child();
        c.print();
    }
}

エラーの内容:Child inherits unrelated defaults for print() from types Parent1 and Parent2.

デフォルトメソッド同士に関係性がないと、継承しちゃダメですよーって意味でしょうか。Childのprintメソッドを実行したとき、どちらのインターフェースの処理を実行すればよいかが分からないのがアカンと。

2. 実装したクラスでオーバーライド

interface Parent1 {
    default void print() {
        System.out.println("Parent1");
    }
}

interface Parent2 {
    default void print() {
        System.out.println("Parent2");
    }
}

class Child implements Parent1, Parent2 {
    @Override
    public void print() {
        System.out.println("Child");
    }

    public static void main(String args[]){
        Child c = new Child();
        c.print();
    }
}

コンパイルエラーが消えました。Childのprintメソッドで実行する内容が確定したからですね。
実行すると「Child」が表示されました。

3. インターフェースに継承関係を持たせる

interface Parent1 {
    default void print() {
        System.out.println("Parent1");
    }
}

interface Parent2 extends Parent1 {
    default void print() {
        System.out.println("Parent2");
    }
}

class Child implements Parent1, Parent2 {
 // オーバーライドなし
    public static void main(String args[]){
        Child c = new Child();
        c.print();
    }
}

この場合はコンパイルエラーが発生しません。
実行すると「Parent2」が表示されました。
継承関係で一番下のインターフェースで定義されたメソッドが一番新しい定義=最優先で実装される、っていう感じなのかなあ。

4. 子インターフェースを多重継承

interface Parent {
    default void print() {
        System.out.println("Parent1");
    }
}

interface Child1 extends Parent {
    default void print() {
        System.out.println("Child1");
    }
}

interface Child2 extends Parent {
    default void print() {
        System.out.println("Child1");
    }
}

class GrandChild implements Child1, Child2 {  // コンパイルエラー発生

    public static void main(String args[]){
        GrandChild c = new GrandChild();
        c.print();
    }
}

Child1とChild2はそれぞれParentを継承。
しかし、Child1とChild2自体には継承関係がないため、このパターンでもコンパイルエラーが発生します。

まとめ

  • 継承関係のないデフォルトメソッドを多重継承するとコンパイルエラー
  • 実装クラス・インターフェースでデフォルトメソッドをオーバーライドすればOK
  • 継承関係のあるインターフェースだったらデフォルトメソッドを多重継承しても問題なし。継承されるのは最下層の子インターフェースのメソッド

【早速ブログ書くところから躓きました】Markdownとは何ぞや

はてなブログさんの編集方法で、さっそく見慣れぬ単語が!
その名は「Markdown」!

……すみません、ほんとうにヘッポコSEなのです。。
名前ぐらいは存じていましたが、実態はさっぱり…。

というわけで、今日はこちらのサイトを備忘録。
www.asobou.co.jp nasust.hatenablog.com

あと、はてなブログさんの記事も備忘録。
help.hatenablog.com

練習として今回の記事はMarkdownで記述してみました。
確かに「すっぴん」の状態でも、意味ごとに文章をまとめられる、かも…?

(今回の記事だと、構造化するところがほとんどありませんでしたが)

今後の記事もMarkdownで記述して練習してみます!
業務中のメモにも取り入れて練習してみよう。。

自己紹介とブログの方針について

はじめまして、mnbeeと申します。

私のプロフィールについてはざっと以下のとおり。

  • 今年で入社6年目の下っ端SE
  • 利用する言語は主にJavajavascript(JQuery)をほんとにちょっと。
  • 大規模Webアプリケーション開発(炎上)に放り込まれること幾度
  • 正直、新人に毛が生えたレベルの実力しかないのでは…と最近になってようやく心配し始めた(遅)
  • 今年11月末にJavaGold SE8の資格取得を目論見中

 

このブログは主に

  • 業務中や勉強中に調べたことについての備忘録、リンク集
  • Webアプリケーションの作成練習状況(詳細についてはまた後ほど)
  • JavaGold資格取得にむけて状況報告 など

の目的で利用していきたいと思います。

初めのうちは、自分の尻叩き・壁打ちとして活用できたらと。

 

何卒よろしくお願いします。