Javaの勉強を開始。とにもかくにも環境構築から！

世界一の人気を誇ると言われるJavaですが、

学生の頃数カ月授業受けていただけなので知識がほとんどありません。

とりあえずHello World.からスタートしたいと思います。

さて、レッツ環境構築！

普段Bracketsでjavascript等書いていましたが、

これだけだとJavaは動かなさそうです・・・

書いたソースコードをコンパイルして、

実行した結果を出力して・・・

今回は実行環境を作る記事です。

結論から申し上げますと、

eclipse の日本語版をインストールしました。

こちらの記事が大変参考になりました！

Eclipseのインストールから使い方まで～EclipseでJavaプログラムを実行してみよう！ | サービス | プロエンジニア

日本語版の.zipファイルの分があるので

（上記の記事の中の「Pleiades All in One」参照）それを解凍して実行です。

1.5GBほどあったのでDLに結構時間がかかりましたが、解凍した後にすぐ日本語版として使えるのはありがたいですね。

そしてそして・・・

Eclipseの外観が白っぽかったので、Eclipseのテーマの変更でググりつつ・・・

ウィンドウ > 設定> 一般> 外観からダークテーマを選択。続きまして、

ウィンドウ >設定> 一般> 外観> 色テーマにてSublime Text2を選択。

見た目がグッとクールになりました。

bracketsを使っている時も、外観をsublime textそっくりにしていたので、こういったダークテーマは落ち着きますね！！

Javaの勉強も進めていきたいと思います。

ごらん頂きありがとうございました。

それではまた次回！

PAIZAのCランクの過去問に挑戦してみた！

PAIZAというサービスをご存知でしょうか。

ITエンジニア、プログラマ用の転職サービスです。

登録して用意された問題をこなすと、S～Eのランクを貰えるようです。

アルゴリズムを考える力、処理速度を速くする力を試せるようです。

Java等のメジャーな言語はモチのロン、たくさんの言語で挑戦できます。標準入力でデータが渡されるので、それを扱って問題をこなします。(javascriptで標準入力ってどうやるんだろ…まだググってません)

ランクを図る挑戦はしなかったものの、腕試しという事で解いてみました。

やった問題はCランクの問題で、平均解答時間は35分程度でした。

一応正答したものの、

かかった時間は2時間超え！

同じエラーで1時間以上詰まったのは痛かったですね。。。とほほ。。。ランクをちゃんと手に入れるには、解けるだけでなく速さも大事です。(コーディング速度も処理速度も)

今回悩んだエラーはもうバッチリ、もう騙されないぞと前向きに教訓としておきます。

配列の最後の文字を.slice(0,-1)で削除したり、変数（定数）の中身が文字列か否かを判定したりできるようになって良かったです。（だいぶ初歩的な気はしますがｗｗｗ）

他の過去問も解いて、自信がついたらランクをゲットするべく挑戦してみよう！

ご覧頂きありがとうございます、それではまた次回！

letで変数ならconstは定数！しかしconstには意外な盲点が？

現在のjavascriptでは、何かを宣言する際に

var,let,const

というキーワードを用います。

今回の記事の主役、3兄弟ですｗｗ

それぞれの意味が僕の中であやふやだった為、

自分用という意味も込め記事に起こします。

パターン1：numという7が入った変数を作りたい！

パターン2：numという7が入った定数を作りたい！(あとから上書きされないように)

パターン1は

var num = 7;

もしくは、

let num = 7;

でOKです。

パターン2は

const num = 7;

でOKです。

constで宣言した方はこれであとからnum = 77;のように上書きしようとしても

エラーが出るようになりました。上書きされる心配なし！

配列に関しては上書きされるので注意が必要です・・・(後述しますが、配列の場合でも上書きされないようにすることもできます)

しかし、変数を宣言したい時にvarとletのどちらで宣言したら？という話になりますね。

結論、新しく実装された宣言文のletでOKです。varは昔のコードと互換性を持たせる為に残されているんだとか。

なので使用率としては、const > let > var

ということになりそうです。

基本的に再代入する必要がない数の方が多いからです。(僕の場合ですが...)

varに関しては皆無に近いかもしれません。

letとvarの違いはズバリ、スコープです。

宣言した変数の有効な範囲が異なります。

{

    var num = 7;

}

のように書くと、{ }の外、すなわちブロックの外でも

numが普通に使えてしまいますが、

{

    let num = 7;

}

のように記述すれば、{ }の外ではnumは使用できません。

ローカルな変数として使えますね。

とうことは…スコープを狭くすることによってバグの可能性を

減らせます！！やったね！！

さて残るはconstで宣言した配列を上書きできてしまう件についてですが…フリーズという処理を行うことで中身を不変にできます。

配列の中身を不変にしたい場合、constで宣言するだけでは不十分

という事ですね。

const num = [1, 2, 3]

num[0] = 2;

と記述すると「constでnum配列が宣言されているから、きっとこの配列の要素は1,2,3の3つ、配列長も3で固定なんだ！」

って僕は最初思っちゃいましたが…

普通に代入できましたΣ(ﾟдﾟ；)

なのでnum配列の要素は2,2,3ですね。

不変にしたい場合は、

const num = [1, 2, 3]
Object.freeze(num);//追加した行
num[0] = 2;

これでOKです。numの中身は1,2,3のままです。

"use strict";を記述してstrictモードにしないと

コンソールエラーが出ないので注意！

変数か定数か宣言するだけでも意外と奥が深くて面白いですね！

まつわるネタがまだまだありそうです。

それではまた次回。ご覧頂きありがとうございます！

電卓を作ってみよう。何から始めたらよいかな？？

javascriptの勉強が進んできたので何か作ってみたいと考え、

電卓をセレクト。

今の自分にとって難易度がちょうどよさそうな気がしています・・・

1 2 3

4 5 6

7 8 9

+,-,×,÷,=

最も簡素に作るとこんな感じでしょうか。

見た目に関してはHTMLやCSSでなんとかできそうです。

1や+などのボタンがクリックされる度にjavascriptでクリックを検出

する事ができればきっと・・・

function add(a,b) {
    return a + b;
}

こんな具合に

四則演算の関数作って呼ぶだけでよさそうなんて思ったのですが、

1→+→2→=

と入力して解の3を表示するのと、

1→+→1→+→1→=

と入力して解の3を表示するのでは話が違うなぁ・・・とか懸念材料がありますので、意外と歯ごたえがありそうな予感ｗｗｗ

if文を短く書く！三項演算子とは？

今回は三項演算子で短くif文を書こう！どうやって書くのか？という記事です。

三項演算子という言葉自体なんとなく知っていて、

どうやらif文を短く記述できるらしいぞ、という所までは知っていました。けれど・・・

「今のifやelseで十分じゃないか？」という考えが首をもたげており、覚えようとまではしていませんでした(笑)

しかし、サンプルプログラムなどでソースコードを読むときに三項演算子らしきものが使われているのを見ても正直わからない、読めない・・・

初心者とは言え、調べれば分かる事をそのままにしておくのはよくないなぁと思い記事にして学んでみます。

これから必ず役立つ筈ですし！

それでは参りましょう・・・

MDNのリファレンスによれば、「条件 (三項) 演算子は JavaScript では唯一の、3 つのオペランドをとる演算子です。この演算子は、 if文のショートカットとしてよく用いられます。」とあります。

気になる構文を見ていきましょう。

条件式 ? trueの場合の処理 : falseの場合の処理

ということで・・・

おお・・・

一行で済んだ！

↓いつもの自分はこのような書き方をしていましたが↓

if(条件式) {

    trueの処理;

}else {

    falseの処理;

}

else ifなしでも5行使ってますね。

2セット書けば10行、4セット書けば20行…

対して三項演算子の場合は、

2セット書いても2行、4セット書いても4行…

条件分岐の際に三項演算子を用いることにより、

ソースコードがコンパクトになる効果が期待できそうです。

ちょっとnumの偶奇判定をしてみます。

"use strict";
const num = 15;//判定される数
let result;//偶数か奇数かの結果

num % 2 === 0 ? result = "偶数です。" : result = "奇数です。";

document.write(num + "は" + result);

注目すべきはやはり

num % 2 === 0 ? result = "偶数です。" : result = "奇数です。";

の部分ですね。条件式は、

num % 2 === 0 //2で割り切れるか

trueならば結果を表示する変数resultに"偶数です"、

falseならば"奇数ですね"を格納します。

「条件式」「真」「偽」の三つの項を用いるので

三項演算子という名称のようですね！（たぶん！）

ちょっと敬遠していましたが、習慣にしてしまえば当たり前に書けるようになりそうな気がするので積極的に使っていきたいと思います。

デメリットもあるのかな？とか安易に上位互換とも言えないのかな？とも現時点では思いますが。。。

条件式のバリエーションが増えました（^。^）

あれ、else ifの場合に触れてないな・・・

またの機会に触れたいと思います。

これから学ぶJavaScript

いちばんやさしいJavaScriptの教本 人気講師が教えるWebプログラミング入門【電子書籍】[ 岩田宇史 ]

ではまた次回！

閲覧ありがとうございました(๑•̀ㅂ•́)و✧

htmlの自分用覚え書き

.cssファイルで

.body{

font-family:フォント名;

}

でbody全体にフォント指定が及ぶ。

background-colorで背景色を指定しても、heightが0だと画面上で背景色の変化を観測することはできない。

heightで高さをつけてあげると、その分はきちんと背景色の変更が反映される。ブロック要素なら一行分色変更されるが、インライン要素もしくはインラインブロック要素の場合は、その要素の横幅分(widthの数値による)の背景色の変更がされる。

子要素がすべてfloatになっていると、親要素のブロック要素は高さが無いものとして扱われる。

floatが適用された要素の裏に他の要素が回り込んでしまって困る時は、回り込ませたくない要素にclear:left;やclear:right;のCSSを適用させることで、回り込みを防ぐことができる。

インライン要素では、

heightで高さを指定する事ができない。

ブロック要素は可能なので、

高さを指定したい場合はインライン要素のままではなく、必要に応じてインラインブロック要素に変更する必要がある。

インラインブロック要素の利点としては、横並びできる事が挙げられる。

ブロック要素の場合強制的に改行されるが、インラインブロック要素の場合は同じ行に横並びに要素を並べる事ができる。画像を横並びさせたい時などに便利。

インライン要素の場合は、

marginとpaddingを左右のみ指定できる。上下は不可。

line-heightを使用すると、行の真ん中に文章を配置する事ができる。

<ul>タグ(<liタグ>)はブロック要素なので、デフォルトでは縦に箇条書きされる。

横に並べたい場合は、インラインブロック要素に変更することで実現できる。

background-size:cover;で

幅いっぱいに背景画像を表示し、ブラウザのサイズを変化させると、左上を起点に背景画像のサイズが変更される。

左上が起点ではなく、背景画像の中央を起点にするには、

background-position 50% 50%;と指定すると、背景画像の中央座標を基準として伸縮が行われる。

ブロック要素にtext-align:center;を使っても中央揃えにはならない。

PHPの自分用覚え書き

<input type="submit" value="送信">

送信ボタンを作成する際に記述。

input typeにsubmitを指定すると送信ボタンになる。今回はvalueに「送信」と入力しているので、できたボタンには「送信」と印字されている。

echo $_POST["キーの名前"];

送られてきたキーの名前の中身を表示する命令。キーの名前がechoされるのではなく、キーの名前を持つ連想配列の中身が表示される。

<?php ?>も記述する。htmlファイルの中に挿入するので、唐突にphpの構文を書いても理解されないので、phpである旨を記述する必要がある。

// セレクトボックスの作り方

<select name="age">
<option value="未選択">選択してください</option>
<option value="20代">20代</option>
<option value="30代">30代</option>
</select>

「選択してください」

「20代」

「30代」

を選択できるセレクトボックスの生成。3つの選択肢のうち、選択されたものがselectタグのname属性のageに格納される。

echo $_POST["age"];

上記のageを他のファイルに送信し、そのファイルで受け取る際には$_POSTを使用して受け取る。上記の命令の場合はechoなので表示まで行う。

for($i=6;$i<=100;$i++){
echo "<option value=`$i`>{$i}</option>";
}

6~100の数字を表示する。

value=`$i`の`$i`を"$i"と書いたら構文エラー発生。基本的に``と""はどちらも使用できるが、エラーの原因になる事もあるようだ。