Novice Engineer BLOG

プログラミングやITニュースについて発信していきます。ときどき日常

石橋を叩いて渡る派？速攻渡る派？

考え方

f:id:oooofara_prog:20161112214215j:plain

こんにちは。
今回は、技術習得に対する僕の考え方が変わったので、
皆さんはどのような考え方をしているんだろう教えてだくさいといった壮大なテーマで記事をつらつら書いていきます。

目次

  1. 前提
  2. 石橋を叩いて渡る派？
  3. 石橋を速攻渡る派？
  4. まとめ

1.前提

石橋を叩いて渡る派と石橋を速攻渡る派がどのように違うかを、英語を話せるようになるために踏む手順で説明していきます。

2.石橋を叩いて渡る派？

石橋を叩いて渡る派だった頃の僕は、おろらく次の手順で進めていくと思います。

　①基礎知識を身につけるために参考書を買う
　②参考書で必死に勉強する
　③なんなら資格取る
　④英会話教室に通う
　⑤英語を話せる場所に行く
　⑥学んできたことが全然使えないとパニクる
　⑦自信を無くして諦める

手順多いし、結局英語話せるようになんねーのかよって。笑

3.石橋を速攻渡る派？

石橋は速攻渡る派に変貌を遂げ僕は、おそらく次の手順で進めていくと思います。

　①英語を話せる場所に行く
　②つたない英語で積極的に喋りに行く
　③分からない言葉が出てきたら調べる

まず手順が少ない！笑
さらに、実際に英語を話しているので、自分がどのくらい話せるようになってきたか分かるし、やる気が続く！

4.まとめ

石橋を叩いて渡る派と速攻渡る派の違いは、

土台作りから入るか実践から入るか

石橋を速攻渡った方が圧倒的に効率良く技術が身につくのかなと思っています。
やる気も失せることは無いですし。僕の場合。笑

この考え方に変貌を遂げて以降、新しい技術を身につけようと思ったときはまず実践から入るようにしています。

　①まずはその技術を使ってみる
　②分からないところが出てきたらネットで調べる
　③その技術について体系的な知識をつけたいと思ったら本を買う

とこんな感じです。

以上で僕の戯言は終わりですが、最後に皆さんにお聞きします。

　　　　　あなたはどっち派？

やばい。CMっぽーい。笑

TO BE CONTINUED

転職してから6ヶ月経ちましたよ報告

転職

f:id:oooofara_prog:20161112091313j:plain またこの女の子のフリー写真使ってしまった。笑

こんにちは。
早いもので転職してから6ヶ月経ったので、転職してから環境がどのように変わったかをつらつら書いていこうと思いましてですね。

目次

  1. 転職理由は？
  2. 業務内容は？
  3. 人間関係は？
  4. 給料は？
  5. 余談

1.転職理由は？

oooofara.hateblo.jp

こちらの記事でも書いたんですけど、
要はプログラミング中心の生活がしたかったから。うん。シンプル。
前職場でも少しはプログラミングできたんですけど、改修案件(既存のソースコードにちょちょっと手を加えるだけの作業)ばっかりでなかなか技術が身につかないなと。
1を10にする案件ではなく、0を1にする案件に取り組んで技術を身につけたい。そう思ったんですね。

2.業務内容は？

転職したって言ってもSIerからSIerへの転職なわけで、会社としてやってること自体は変わりません。
業務システム作って納品する。おおまかに説明するとこんな感じです。

他人「じゃあ転職する意味なくない？」
僕「これがあるんです！」

業務システムを作る際の工程はいろいろありまして、
上流工程と呼ばれる要件定義〜基本設計、下流工程と呼ばれる詳細設計〜開発といった感じで分類されています。
転職した結果、担当工程が以下の図のように変わりました。

【転職前】 f:id:oooofara_prog:20161112105314p:plain 【転職後】 f:id:oooofara_prog:20161112105321p:plain

そうです。念願叶って、開発工程を中心に担当することができたのです！！しかも0を1にする案件で！！歓喜！！ほら、転職した意味あったでしょ？笑
具体的な業務内容としては、基本設計書から詳細設計書を書いて、それを基に開発しています！
使用している言語はJavaScript、Java、HTML、CSSといったところです！

※図の色使いがダサすぎる件
触れないでそっとしておいてください。小学生のときの美術の授業でサメを作ったんですが、その作品自体に「サメ」って書いちゃうくらいのセンスの持ち主ですのでそっとしておいてください。WEBデザイナーさんはこういうときどんな色使いするんだろ。。。参考にしたい。是非とも。

3.人間関係は？

結論から言うと、全く問題ありません！

馴染めるか不安だったんですけど、最初に配属されたプロジェクトに僕と同じ3年目の方がいらっしゃいまして、飲みに誘ってもらうなどしてくれたのですぐに溶け込むことができました！と勘違いしています。
転職者に対してウェルカム的な雰囲気で接してもらえているのでとてもありがたいなと思っています。

4.給料は？

基本給も賞与も上がりました！歓喜！
ただ転職時期ミスって、6月の賞与は0だったけど。。。くそう。
12月が初めての賞与。 ありがたや。技術書いっぱい買おう！

5.余談

仕事とは関係ないですけど、個人的にLINE Botを作ろうと思ってちょいちょい作業進めています。
①LINEのビジネスアカウント取得
②node.js+Herokuの環境構築
ここまで終わりました！
まだまだ分からないことだらけなので、try&errorでやっていきたいと思います！

TO BE CONTINUED

Macでvimとemmet-vimを使えるようにする裏技

環境構築

f:id:oooofara_prog:20161105215749j:plain 前回の記事で載せた写真の女の子の評判が良かったのでもう一度使う！笑

こんにちは。
11月からプロジェクトが変わり早く家に帰れるようになったので、ブログ書きます。つまりは暇です。
今回は、MacにVimをインストールして、emmet-vimプラグインを入れるまでの手順をつらつら書きます。
emmet-vim入れた理由は、AngularJS勉強しようと思い立って、さらにエディタとしてVimを使おうと調子乗ったからです。

目次

  1. 参考にしたサイト
  2. Mac標準搭載のVimにする？それともHomebrewからインストールしたVimする？それともV・i・m？
  3. Xcodeのインストール
  4. Command Line Tools for Xcodeのインストール
  5. Homebrewのインストール
  6. Vimのインストール
  7. .vimrcの設定
  8. NeoBundleのインストール
  9. emmet-vimのインストール
  10. 動作確認
  11. 余談

1.参考にしたサイト

chi-kun.hatenablog.com chi-kun.hatenablog.com

2.Mac標準搭載のVimにする？それともHomebrewからインストールしたVimにする？それともV・i・m？

MacにはVimが標準搭載されているから、Homebrewからわざわざインストールする必要はないです。
ですが、Homebrewからインストールすれば、Vimがバージョンアップされたときに手軽にUpdateできるというメリットがあります。
標準搭載のVimはいつまで経っても同じバージョンのまま。新しくMac買えばバージョンアップされたVimが搭載されているかもだけど。。。
どちらにするか決めましたか？

・Mac標準搭載のVimを選んだあなたは7章へ
・HomebrewからインストールするVimを選んだあなたは3章へ
(ちなみに僕はHomebrewからインストールしました。ちなみにですけど。)

※Homebrew
パッケージ管理システムの一つ。
「Homebrew なにそれ 便利なの」って調べるといっぱいサイトが出てくるのでそちらをご確認くださいませ。

3.Xcodeのインストール

Homebrewを使うためにはXcodeをインストールする必要があります。
インストールしていない方はAppStoreからXcodeをインストールしてください。

※すでにインストールしている人は要注意！！！

そのままHomebrewをインストールすると「Xcodeのバージョンが古いですよ。お兄さん。」エラーが発生するので、すでにインストールされている人も最新版のXcodeにアップデートしてください。
アップデートして、はい終了！ではありません。

一度、Xcodeを起動してライセンス認証をしないとエラーになりますのでご注意ください。

ちなみに、僕は「Xcode！？前にインストールしてあるからいいや！」と思って、そのまま進めた結果エラーになって時間食ったタイプの人間です。

4.Command Line Tools for Xcodeのインストール

続いて、Command Line Tools for Xcodeと呼ばれるコマンドラインツールをインストールします。 これは簡単です。

①ターミナルを起動
②Xcode-select --installを入力してEnter
③画面の指示に従う

5.Homebrewのインストール

いよいよHomebrewのインストール！
ここも簡単です。

①こちらのサイトHomebrew — The missing package manager for macOSにアクセス ②サイトから以下をコピー

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

③ターミナルを起動
④ペーストしてEnter
⑤途中で、「パスワードを入力してください」的な英語が表示されるので入力してEnter(パソコン起動時に求められるあれです。あのパスワードです。)

インストールできたかの確認

①ターミナルを起動
②brew docotorと入力してEnter
③Your system is ready to brew.と表示される。
3章で記載したエラーは、ここで発生します。。。

6.Vimのインストール

ようやくVimのインストールまで来ました。
ここもあっさり終わります。

①ターミナルを起動
②brew install vimと入力してEnter
③ひたすら待つ

使用するVimの確認

現時点では、標準搭載のVimとHomebrewからインストールしたVimの2つがMacに入っています。
他人「あれ？ターミナルからVimを起動したとき、どっちのVimが起動されんの？ 」 僕「おっと、確かに。。。」

どっちのVimが使われているか確認しましょう！

①ターミナルを起動
②which vimと入力してEnter
③-1/usr/local/bin/vimと表示される→HomebrewからインストールしたVim
③-2/usr/bin/vimと表示される→標準搭載のVim→④へ
④export PATH="/usr/local/bin:$PATH"と入力してEnter
⑤which vimと入力してEnter
⑥/usr/local/bin/vimと表示されれば完了

7..vimrcの設定

.vimrcとはvimの設定ファイル。
設定ファイルをいじくれば、行数を表示したり、文字に色を付けたり(シンタックスハイライト)できます。
全然関係ないけど、シンタックスハイライトって言葉かっこよくないですか？シンタックスシュガーもかっこいい。言いたくなる。

.vimrcの設定方法

①ターミナルを起動
②vim ~/.vimrcと入力してEnter
③設定する

こちら僕の.vimrcの設定。 サイト調べながら適当に設定しただけなので、使わない設定が入っています。
近々、ちゃんと設定を調べて自分だけの.vimrcを作りたいと思います。
「vimrc 設定 見せてだくさい」とかで検索するといろんなお方々の.vimrcが見れる思うので、それらを参考にしながら、自分だけの.vimrcを作っていくと自分だけのVim感が出て、良い感じにドヤれます。

"文字コードをUTF-8に設定する
set fenc=utf-8
"タイトルウィンドウ枠に表示する
set title
"コードの色分けする
syntax on
"折り返ししない
set nowrap

 "検索した結果に色が付く
set hlsearch
"大文字/小文字区別なく検索する
set ignorecase
"検索文字列に大文字が含めれている場合は区別して検索する
set smartcase
"改行時に半角スペースを8文字を自動挿入する
set autoindent
”カーソルが何行目の何文字目にあるかを表示する
set ruler
"行番号を表示する
set number
"空白を可視化
set list
"コマンドラインモードでファイル名補完を有効にする
set wildmenu
"入力中のコマンドを表示する
set showcmd
”shiftwidthオプションを有効にする
set smarttab
"vimが自動生成するtab幅をスペース4つ分にする
set shiftwidth=4
"連続した空白に対してtabキーが動く幅
set softtabstop=4
"tabを半角スペースで挿入する
set expandtab
"インデントをスペース4つ分に設定
set tabstop=4

※.vimrcは隠しファイルなので、Finderから見ることはできません。(隠しファイルを表示する設定にすれば見られます。)
ターミナルを起動して、ls -aと入力してEnterすれば「.vimrc」ファイルが表示されるので、そこでファイルが作られたか確認できます。

8.NeoBundleのインストール

emmet-vimをインストールするためにはNeoBundleというプラグインを管理するプラグインをインストールする必要があります。
プラグインを管理するプラグイン、、、意味分かんないですね。
プラグインを簡単にインストールしたり、最新版にアップデートしたり、GitHubから直接インストールしたりできるとっても便利なツールって感じですかね。
なので早速インストールしましょう！

①ターミナルを起動
②以下を入力しEnter(コメントの部分は入力不要)

"WEBサイト(GitHub)からinstall.shというファイルを取得してカレントディレクトリのinstall.shを上書きする
curl https://raw.githubusercontent.com/Shougo/neobundle.vim/master/bin/install.sh > install.sh
"カレントディレクトリのinstall.shを実行
sh ./install.sh

※curl
指定したURLに対してHTTPリクエストを送るためのコマンド 今回の場合は「install.shちょうだい！」とHTTPリクエストをしています。

※sh
シェルスクリプトを実行するコマンド

9.emmet-vimのインストール

やっとここまできた。長かった。まじで。
よし。そっこーで終わらす！

①ターミナルを起動
②vim ~/.vimrcと入力してEnter
③最後の行より下に以下を追加
NeoBundle 'mattn/emmet-vim'がemmet-vimをインストールするための記述

"Note: Skip initialization for vim-tiny or vim-small.
 if 0 | endif

  if has('vim_starting')
         if &compatible
                  set nocompatible               " Be iMproved
         endif

         " Required:
         set runtimepath+=~/.vim/bundle/neobundle.vim/
        endif
         " Required:
         call neobundle#begin(expand('~/.vim/bundle/'))
        " Let NeoBundle manage NeoBundle
         " Required:
         NeoBundleFetch 'Shougo/neobundle.vim'

         "※emmet-vimをインストールするための記述
         NeoBundle 'mattn/emmet-vim'

         " My Bundles here:
         " Refer to |:NeoBundle-examples|.
         " Note: You don't set neobundle setting in .gvimrc!

          call neobundle#end()

          " Required:
         filetype plugin indent on

        " If there are uninstalled bundle found on startup,
        " this will conveniently prompt you to install them.
         NeoBundleCheck

④Escキーを押してInsertモードから撤退
⑤:NeoBundleInstallと入力してEnter(ファイルを保存するときの「:w」と同じ感覚で)

10.動作確認

よし！これで全てのインストール作業が完了！ 最後のhtmlの記述が爆速になるか確認！！

①ターミナルを起動
②vim index.htmlと入力してEnter(indexの部分は何でも大丈夫。)
③Insertモードで、<!>と入力する
④controlキーとYキーを同時に押す
⑤,(カンマ)キーを押す
⑥歓喜！！！！！！(どうなるかはご自身の目でお確かめあれ。)

※Yキーの部分は変更できます
.vimrcの一番下の行に以下を加えれば変更できるので、良かったらお試しください。
let g:user_emmet_leader_key = '<C-f>'
ちなみに僕は「control+f」にしました。(小指と人差し指で快適)

11.余談

くまのからあげさんの記事を見て、Slackのカスタマイズに興味が湧いてきました。
まずBot作りからやってみようと思います！笑

kuma-no-kara-age.hatenablog.com kuma-no-kara-age.hatenablog.com

TO BE CONTINUED

WEBサイトってどういう仕組みで見られるの？

ネットワーク

f:id:oooofara_prog:20161105215749j:plainこんにちは。ネットワーク初心者です。
ネットワークについて苦手意識があったけど、一般的な知識くらいは身につけておかねばと思ったので本読んで少しだけ知識つきましたという記事。
まずはHTTP編。

目次

  1. 参考にした本
  2. WEBサイトの仕組み
  3. HTTPって何？

1.参考にした本

本屋でたまたま見つけて、パラパラ見てたら図を中心に話が展開されていて、
「図がいっぱいある。。。これはいける」と小学生並みの直感を信じて速攻でレジに持って行きました。

スラスラわかるネットワーク&TCP/IPのきほん

スラスラわかるネットワーク&TCP/IPのきほん

2.WEBサイトの仕組み

エッチなサイトを中心とするWEBサイトをどのような仕組みで僕たちは見られるのか。
一般的にエッチなサイトを見るときこんな手順で見ますよね？

①ブラウザを起動(chromeやIE、safariなど)
②google先生やyahoo先生を使って、検索するところに「エッチなサイト」って入力してすごい勢いでEnter
③「エッチなサイト」の検索に引っかかったWEBサイトの一覧が表示される
④一覧から自分が見たいエッチなサイトをクリックする

手順は分かった！！じゃあなんで僕たちはブラウザでエッチなサイトを見ることができるんだ！？

見たいエッチなサイトをクリックしてから画面が表示されるまでの仕組みはおおよそこういう感じ。

①ブラウザはWEBサーバに「このエッチなサイト見せてくれ！お願いします。お願いします。」という要求を必死に出す
②要求を受け取ったWEBサーバは「よしよし。お前はこのエッチなサイトが見たいのじゃな。」と要求されたHTMLファイルやJavaScriptファイル、CSSファイルなどを自分のハードディスクから探し出す
③探し出したファイルを「今からそっちに送るぞ！」と言って要求が来たブラウザに送る
④WEBサーバから送られてきたファイルをブラウザが整理してエッチなサイトの画面を表示する
⑤僕たちの目にエッチなサイトが飛び込んでくる(歓喜)

3.HTTPって何？

エッチなサイトが僕たちの目に飛び込んでくる(歓喜)仕組みは分かったけど、HTTPってのは何？　

HTTPとはHyperText Transfer Protocolと呼ばれ、僕たちがWEBサイトを見るための大事な役割を担ってくれる技術で、
日本語に訳すと、「HTML(HyperText Markup Language)を通信するための規約」となる。
って言われてもよく分からんので、
2章の①~⑤で具体的に何が行われているかを見てみる。

①ブラウザはWEBサーバに「このエッチなサイト見せてくれ！お願いします。お願いします。」という要求を必死に出す

これはブラウザがHTTPリクエストと呼ばれる入れ物に、見たいサイトの情報を入れてWEBサーバに飛ばしている。
情報には以下が含まれている。
・GET/POST
・HTMLファイルが格納されているディレクトリ(フォルダ)名とそのHTMLファイル名
・サーバを特定する名前(ホスト名+ドメイン名)
・ブラウザ情報

例）見たいサイトのURLが「http://www.example.com/example/index.html」の場合
・GET
・/example/index.html
・www.example.com
・User-Agent: Chrome/34.0.1847.137 Safari/537.36(他にもいろんな情報があります。)

となる。ブラウザ情報についてはよく分かんないので、また調べておきます。

※GET/POST
データをWEBサーバに送るときの方式で、
GET:URLに情報をくっつけて送る
POST:URLはそのままで情報を送る
詳しくは「GET POST 違い」で検索すれば山ほどサイトが出てくるのでそこで確認を。

②要求を受け取ったWEBサーバは「よしよし。お前はこのエッチなサイトが見たいのじゃな。」と要求されたHTMLファイルやJavaScriptファイル、CSSファイルなどを自分のハードディスクから探し出す

ブラウザから送られてきたHTTPリクエストの情報を基に該当するファイルをハードディスクから探し出す作業をしている。
①で例にあげたHTTPリクエストから送られてきたとすると、
exampleフォルダのindex.htmlを探している。

③探し出したファイルを「今からそっちに送るぞ！」と言って要求が来たブラウザに送る

HTTPレスポンスと呼ばれる入れ物に、探し出した情報を入れてブラウザに送っている。
以下の情報が含まれている。
・ステータス番号
・HTMLファイルの更新日やファイルサイズなど
・HTMLファイルの中身

例）
・200
・Last-Modified: Sat, 05 Sep 2016 23:00
・<!DOCTYPE html>
　　　　・
　　　　・
　　　　・
「200」はリクエストが成功したので要求されたどおりのファイルを返すよ！って意味で、他にも「404」(指定されたファイルが見つからない)などがある。

④WEBサーバから送られてきたファイルをブラウザが整理してエッチなサイトの画面を表示する

WEBサーバから送られてきたHTTPレスポンスのHTMLファイルの内容を画面に表示する。

⑤僕たちの目にエッチなサイトが飛び込んでくる(歓喜)

歓喜！！

TO BE CONTINUED

JavaScriptでハマった件。「数値と文字列」やっぱり「数値と文字列」

JavaScript

f:id:oooofara_prog:20161016000615j:plainこんにちは。
今回は、JavaScriptでハマったことをつらつら書いていきます。
「JavaScriptに型宣言がないせいだ。JavaScriptに型宣言がないせいだ。くっそ~」って記事。

目次

  1. 文字列なのに「replace」「split」などの文字列操作メソッドが使えなかった話
  2. 文字列と数値で出力する値が違った話
  3. 余談

1.文字列なのに数値だから「replace」「split」などの文字列操作メソッドが使えなかった話

■処理

税込金額： 　税抜金額：　消費税：

「54,000」の部分をクリックして別の部分をクリックしてみてください。
※スマホは対応しておりません。
上のように税込金額に入力された値に応じて税抜金額と消費税を計算する処理をしたかった。
※実際に入力された値で計算しようと思ったけど、Markdown記法では値を取得できなかったから固定値。。。できんのこれ？笑

■事象

税込金額に入力された値を取得して税抜金額と消費税を計算後、カンマ(3桁ごと)を付与したかったので、
replace()と正規表現を使おうと思ったら「オブジェクトでサポートされていないプロパティまたはメソッドです」のエラーメッセージ発動された。。。くそう。
この謎が全く解けなかったから、仕方なく計算した値をテキストにセットしてから、もう一回値を取得してカンマ付与した。。。。ん~冗長。

■原因

内部では、
消費税 = 税込金額 * (消費税率 / 100 + 消費税率)、
税抜金額 = 税込金額 - 消費税
って計算してた。ここでハマった。
文字列と数値を計算すると暗黙的に数値型に変換されるみたい。
だから、計算したあとの消費税と税抜金額のデータ型は「数値」！！！
数値型に対して、replace()やら、split()使えるわけないよね。そりゃエラーメッセージ発動するわけだ。。。

■対策

数値型になった消費税と税抜金額を文字列に変換する。
①文字列と結合(+ "")
②文字型変換メソッド(String(消費税)、消費税.toString())

■演算子による暗黙型変換

数値 + 数値 → 数値（分かる）
文字列 + 文字列 → 文字列（分かる）
数値 + 文字列 → 文字列（は？）
数値 -(/、*、%) 文字列 → 数値（は？）
この仕様を知らないと思わぬところでバグを埋め込みそうなので気をつけねば。。。

■努力が水の泡(toLocaleString())

正規表現を使って3桁区切りにしなくても「toLocaleString()」を使えば自動で3桁区切りにしてくれるらしい。まじなんなの。知らなかった。くそう。

■結論

タイトルはこうなります。
1.文字列なのに数値だから「replace」「split」などの文字列操作メソッドが使えなかった話

2.文字列と数値で出力する値が違った話

■処理

サーバサイドから取得した値をJSPで使用したかった。ただそれだけだったのに。。ハマった。(ハマった時間：5分)

■事象

<c:set var="test">020</c:set>
alert(${test})→16

なんで16って表示されんの？なんなのまじ。ってなった。
EL式のせいか。お？お？お？って思ったけど違いました。

■原因

数値型の先頭に0(例：020)が付いてると、その数字を8進数とみなすからである。
だから、020は16と表示されてしまったんか。くそう。
この仕様は初めましてこんにちは。
やっぱり原因は「数値と文字列」でした。

■対策

020を使いたいなら、 alert(${test})ではなく
alert("${test}")のように「""」で囲んで文字列としましょう。そうしましょう。

3.余談

JSONについて話してたときに、近くにいた上司に「厚切りJSON♪い〜じょう！」とかつぶやかれて以降、 JSON見るたびに思い出してしまって仕事になりません。。どうにかしてください。

※JSON
テキストベースのデータフォーマットの一種。データフォーマットは他にxmlとかがあります。い〜じょう

TO BE CONTINUED

JSTLの<c:set>で値をセットした変数をスクリプトレットで使う方法 2016/09/19

Java

こんにちは。
前回の記事
「JSP側でJavaのクラスを使いたい 2016/09/17 - Novice Engineer BLOG」
で質問したことを教えていただけたので、その部分をまとめてみました。
今回はその記事です。

アジェンダ(目次)

  1. 前回の質問
  2. 解決策
  3. まとめ

1.前回の質問

JSTLの「c:set」で変数に格納して、

その変数を、読み込んだJavaクラスのメソッドの引数として渡す方法が分かりません。。
<% page import="オリジナルのクラス(testクラスを読み込んだとする)" %>
<c:set var="test" value="テスト" />
<% test.testMethod(${test}) %>
こんな感じで渡そうとすると「${test}」のとこでエラーになる。

これのエラーの原因は、
スクリプトレットの中でEL式を使おうとしていたこと。
そうなんです。<%%>の中で${}は使えないんです。
そもそもEL式ってのは、 JSP式をより簡潔に書くためのもんだから、
スクリプトレットとは全く無関係。(根本的なことを分かってなかった。)
こんなことできるわけないんだね。。。
<% test.testMethod(${test}) %>

JSP式とEL式の書き方を少し説明します。
JSTLの<c:set>で以下のように値を変数に格納したとして、
<c:set var="test" value="EL式ってなんじゃそれ">

JSP式ではこう書くものを
<%=((String) pageContext.getAttribute("test")) %>

それがEL式を使ったらこう書けば良い
${test}

ほら変数に格納した値を簡単に取り出せる。

※JSTL
JSPで使用できるカスタムタグ

※<c:set>
JSTLの中で定義されてるタグで、変数を格納するときに使用する

※pageContext
ページスコープの値を操作するための暗黙オブジェクト
<c:set>で値を格納すると、ページスコープという場所に格納されるのでpageContextを使う

※getAttribute()
ページスコープに格納された値を取得するメソッド

2.解決策

<% test.testMethod(${test}) %>
こうではなく、

<% test.testMethod((String) pageContext.getAttribute("test")); %>
こう書けばよかった！(実際に変数「test」をメソッドの仮引数として渡せました)

3.まとめ

①スクリプットレットの中でEL式は使えない

②EL式はJSP式をより簡単に記述できるようにしたもの

③<c:set>で値はpageScopeに格納される

余談
スクリプトレットについて調べてたら、アプリケーションを作るときはマルチスレッドセーフになるように意識しないといけないと書かれてあった。
これはフルスクラッチで作るときに意識すれば良いのかな。
フレームワークやライブラリを使うときでもマルチスレッドセーフになっていることを事前に確認する必要があるそう。
じゃないと思わぬところでバグを生む。
ここら辺についても面白そうだから調べてみよう。

TO BE CONTINUED

JSP側でJavaのクラスを使いたい 2016/09/17

Java

f:id:oooofara_prog:20160917164221j:plain こんにちは。
今回はJSPについてつらつらと書いていきます。
ブログ更新が月1回とか怠慢だな。。。もう少し更新頻度あげぽよ。

アジェンダ(目次)

  1. デモ
  2. JSPって何それ？DAI語？
  3. 質問

1.デモ

まずJSPってなんだよって感じだと思うけど、実際見た方が早いので、早速試してみる。マジ簡単マン。
今回は画面に日付を表示してみる。 (JSPについては後述)

①使いたいJavaクラスをimport

構文はこちら
<% page import="パッケージ名.クラス名" %>

この構文を実際に使うとこうなる
<% page import="java.util.Calendar"%>

この場合パッケージ名が「java.util」、クラス名が「Calendar」となる。
これでCalendarクラスをJSPで使う準備が完了。

※<% page %>
これは構文。 偉い人たちがこういう書き方しようって決めたから覚えるだけ。
1 + 1 = 2の「=」もただただ覚えたでしょ？それと一緒。

※import
Javaクラスを使うためのもの import以外にも「language」、「session」とかいろいろある。
興味あれば、「page ディレクティブ」とかでググれば秒で出てきますよ〜。

②Calendarクラスを使う

<% Calendar cal = Calendar.getInstance(); //カレンダーオブジェクトを取得
　int year = cal.get(Calendar.YEAR); 　　　　//現在の年を取得
　int month = cal.get(Calendar.MONTH) + 1; 　//現在の月を取得
　int day = cal.get(Calendar.DATE); 　　　　　//現在の日を取得
%>

※Calendarクラス
Javaで用意されてる標準API

※API
簡単に言うと、クラス(クラスの中で定義されているフィールドやメソッドも含む)

※現在の月だけなんで「+ 1」してるの？
Calendarクラスでは内部的に月を0~11で表してるから、
1をプラスしないとえらいことになるんで、す、YO(この人どこで何してるんだろ)
例えば、今月は9月なので「int month = get(Calendar.MONTH)」をすると、 変数「month」には「8」が格納される。
よってそのままの変数を使って日付表示させると、
「今月は9月なのに8月って表示される〜」ってなる。はい。バグですね。
対応関係は以下のとおり。
0:1月
1:2月
2:3月
・
・
・

③画面に表示する

現在の日付は<%=year%>年<%=month%>月<%=day%>です。

※<%=%>
変数に格納した値を使うときの書き方。これも偉い人たちが決めた。
②の「int yaer = cal.get(Calendar.YEAR);」の「year」が変数。(month、dayも同様)

2.JSPって何それ？DAI語？

まずJSPって何それ？DAI語？。ってところから始まる。
「JSPって何それ？DAI語？」ってググると出るわ出るわJSP関連の検索結果！
(※「DAI語」の本発売の記事が先頭に出てくるので、適切に検索しましょう。笑)

話を本題に戻してJSPとは何か。
JSPとはJavaServer Pageの略。
WEBサイトの画面をサーブレットより簡単に作れる技術ってイメージで問題ないと思う。

JSPの技術が登場するまではサーブレットで画面を作成してたけど、
Javaベースだから、なんせめんどくさい。
そこでJSPの出番。
JSPはHTMLベースで画面を作成できるので簡単にできちゃう。

サーブレット：JavaプログラムにHTMLを埋め込む感じ
JSP：HTMLにJavaプログラムを埋め込む感じ

じゃあ全てをJSPで作成したら良いかって言われるとそうでもないらしい。
ここらへんの理由はあまり理解できてないから調べないと。。。

3.質問

JSTLの「c:set」で変数に格納して、
その変数を、読み込んだJavaクラスのメソッドの引数として渡す方法が分かりません。。。

(例)
<% page import="オリジナルのクラス(testクラスを読み込んだとする)" %>
<c:set var="test" value="テスト" />
<% test.testMethod(${test}) %>
こんな感じで渡そうとすると「${test}」のとこでエラーになる。
ちなみにtestMethodの仮引数はString。
そもそもこんなことはできないのかな。。。ん〜解せない。

2016/09/19 追記
上記について解決方法を提案していただいたので、記載します。
[修正前]
　${test}
[修正後]
　pageContext.getAttribute("test")

※pageContext.getAttribute()で取得した値はObject型なので、適切に型変換する必要があります。

TO BE CONTINUED