「Spring解体新書」の３章でPostgreSQLに接続する方法
この記事では「Spring解体新書」の「3-3.データベースから値を取得してみる」の部分の説明をします。 本の中では「H2データベース」を使用していますが、データベースを「PostgreSQL」に 変更した時にどの部分を変更すれば良いかを説明します。
PostgreSQLのインストール
インストール方法がわからない場合は、以下の記事が分かりやすかったので参考にしてください。 qiita.com
DBクライアントツール
クライアントツールは必須ではありませんが、デフォルトでインストールされる「pgAdmin」は使いづらかったので、 以下のツールを使用しています。
DBeaver
マルチプラットフォーム対応（Windows/Mac/Linux）のデータベースGUIツールで、 多くのデータベース（Oracle/MySQL/PostgreSQL/SQLite… ）に対応しています。
多言語対応していて、日本語で使用することもできます。
プログラム側の対応
プログラム側は以下のファイルを設定を変更するだけです。 「urlのポート部分(5432)」、「username」、「password」は 各自「PostgreSQL」をインストール時に指定した値を設定してください。
application.properties
spring.datasource.driver-class-name=org.postgresql.Driver spring.datasource.url=jdbc:postgresql://localhost:5432/postgres spring.datasource.username=postgres spring.datasource.password=postgres
今回は事前にデータベースにデータを登録しておくため、「schema. sql」、「data.sql」は使用しません。 そのため起動前にあらかじめデータを登録しておく必要があります。
データベースにデータ登録
以下は従業員テーブルを作成するSQLです。
テーブル作成のSQL
CREATE TABLE public.employee ( employeeid int4 NOT NULL, employeename varchar NOT NULL, age int4 NOT NULL );
テストデータ用のSQL
INSERT INTO public.employee (employeeid, employeename, age) VALUES(1, '山田 太郎', 30);
ここまでの設定が終わったらSpringBootを起動して、 「URL：http://localhost:8080/hello」に接続してみましょう。
従業員IDに「1」を入力してクリックした時に データベースに登録した名前、年齢が表示されることを確認しましょう。
まとめ
今回は「PostgreSQL」に接続する方法を説明しましたが、 他のデータベースへの接続方法も、「application.properties」の設定を変更するだけで可能になります。 「Spring解体新書」のサンプル通りに学習していくのも良いですが、 少しで良いのでカスタマイズすると理解が高まる気がします。
『基礎＆応用力をしっかり育成！Androidアプリ開発の教科書 Kotlin対応 なんちゃって開発者にならないための実践ハンズオン』の感想
基礎&応用力をしっかり育成!Androidアプリ開発の教科書 Kotlin対応 なんちゃって開発者にならないための実践ハンズオン (CodeZine BOOKS)
- 作者: 齊藤新三,山田祥寛
- 出版社/メーカー: 翔泳社
- 発売日: 2019/07/10
- メディア: 単行本
- この商品を含むブログを見る
初めに
Java プログラマがAndroidアプリの開発がしたくなり、タイトルの本で勉強してみた感想をまとめてみました。 Javaでの開発経験は7年ほどでAndroidアプリの開発は未経験でした。 Kotlinは基本の仕様を本で勉強したくらいでこの本で勉強を開始しました。
対象読者
Kotlin対応の本ではあるが、Kotlinの基礎的な知識があることを前提として進んでいく。 Kotlinの解説本ではないため基礎知識がない場合は、以下の本を読んでから進めることをお勧めします。 ある程度Javaが分かっていれば、問題ないと思います。
Kotlinスタートブック -新しいAndroidプログラミング
- 作者: 長澤太郎
- 出版社/メーカー: リックテレコム
- 発売日: 2016/07/13
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (1件) を見る
速習 Kotlin: Javaより簡単！新Android開発言語を今すぐマスター 速習シリーズ
- 作者: 山田祥寛
- 出版社/メーカー: WINGSプロジェクト
- 発売日: 2018/09/26
- メディア: Kindle版
- この商品を含むブログを見る
この本で学べる事
SDKのバージョンに左右されにくい基礎力・応用力
良かった点
この本の流れとしては1章から順番に進めていくことで、Android開発の基礎が身につくようになっています。
最初のインストール部分でも画像と文章で詳しく説明されていて、本の記述通りに進めることができ、 ストレスなくスタートすることが出来ました。
自分でコードを入力したくない場合は、サンプルコードが翔泳社のサイトからダウンロードできるので、 時間を短縮して学ぶこともできると思います。
コーディング→説明の順で進んでいきます。 1行ずつこのコードではこういうことをしている詳しく説明している 箇所もあるので、丁寧でわかりやすかったです。 入門者が技術本で勉強する時によくある途中で挫折することが少ないと思いました。
気になるところ
この本を執筆している時点ではAndroid Studioのバージョンが3.4.1だったようだが、現在は3.4.2が最新です。 ただ特に問題はなく進めることが出来ました。
9章あたりから内容が難しくなってくるので、本の説明でわからない部分は自分で調べる必要が出てきます。 例えば10章のDBアクセスの部分はRDB、SQLがわかるという前提で話が進んでいきます。
最後に
この本だけで、Android開発の事が幅広く網羅されているので入門書として良書だと思いました。 2018年にJava版を出版されているので、JavaとKotlinの比較もできると思います。 この本でAndroid開発の楽しさに気づくことが出来たので、自分でもアプリを作成してみようと思います。
『Spring解体新書』の感想
この本で学べる事
動くWebシステムを作りながらSpringフレームワークの事を理解できる。
具体的には以下の事がサンプルを作りながら学べる。
Springの概要、ログイン、一覧表示、データ登録・更新、セキュリティ、例外ハンドリング等
良いところ
DIとAOPの説明が分かりやすい
他の書籍に比べ、図解もついて詳しく説明されていて、わかりやすい。サンプルソースがダウンロードできるので、動くものが作られる
サンプルソースも各章ごとに分かれていて、準備完了時点と完了時点の2つある。
準備完了時点は本を読みながら必要な部分をコーディングしながら進められる。
完了時点は各章で追加した機能が実装されている状態なので、自分でコーディングする必要がなく、 時間がない場合は本の説明を読むだけで良いので時間を短縮して進めることが出来る。安価でSpringのコアな部分の説明がちゃんとされているので、最初の１冊には適している
図解の説明やコードでの説明が詳しくされているので、理解しやすかった。
気になるところ
SpringBootのバージョンが新しくなっているため、最新版で動かそうとすると、
本の説明通りにならない部分があるので、その際は自分で調べる必要がある。
対象読者
最後に
サンプルコードのリンクが最後の方にあるため、最初の方はソースをダウンロードできることがわからなかった。
これから勉強する方がいれば気を付けてください。
Node.jsでMySQL 8.0へ接続しようとする時に発生するエラー
Node.jsでチャットツールを作成中にこんなことがありました。
事象
Node.jsでMySQL 8.0へ接続しようとする時に、以下のエラーでちょっとハマりました。 クライアントツールでは問題なくSQLを実行できるのに、Node.jsからはエラーが発生してしまいました。
ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client
環境
OS: Windows 10 Home 64bit
DB: MySQL Server 8.0 Community Edition
node: v10.14.2
npm: 6.4.1
mysql: 2.16.0
原因・解決策
MySQL8.0でパスワードの認証形式が変更されているが、 Node.jsの「mysql」にはまだ実装されていないことが原因でした。
認証方法を「mysql_native_password」に変更することで、 この問題は解決できました。
以下のSQLを実行することで認証方法を変更することが出来ます。 ユーザー名とパスワードは各自の環境に置き換えてください。
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password'
参考になったサイト stackoverflow.com
まとめ
エラーが発生した場合は、エラーの内容を良く読みましょう。 今回の場合は「ER_NOT_SUPPORTED_AUTH_MODE」と出力されているので、 大体の内容はわかると思います。
多少難しい英語の場合は翻訳サイトなどを使ってみるのも良いかもしれません。
JavaScript+Node.js+MySQLでチャットアプリの作成
作成中のログイン画面とチャット画面の画像です。
最終的にはLINEのようなデザインにしたいと思います。
作成中に詰まった箇所などをブログで発表出来たらと思います。
『Vue.js入門』輪読会 6章
6. 単一ファイルコンポーネントによる開発
６章の内容
単一ファイルコンポーネントの説明
本に記述されているコードのサンプルは以下の公式URLからダウンロードできます。
gihyo.jp
6.1 ツールのインストール
Node.js、npmのインストール
インストール後に以下のコマンドを実行して、バージョンが表示されればインストール完了。
$ node --version v10.14.2
Nodeインストール時に、npmというNode.jsモジュールの管理ツールもインストールされるので
以下のコマンドでバージョンが表示されるかどうか確認する。
$ npm --version v10.14.2 6.4.1
6.2 単一ファイルコンポーネントとは
Vue.jsのコンポーネントを単独のファイルとして作成する機能
単一ファイルコンポーネントはSFC(Single File Component)、
またはVueコンポーネントと呼ぶこともある。
単一ファイルコンポーネントはコンポーネントのUIを構造化したテンプレート、
コンポーネントの振る舞いを定義したロジック、見た目のスタイルも含めて、
コンポーネントとして定義できる。
6.3 単一ファイルコンポーネントの仕様
単一ファイルコンポーネントを構成するtemplate、script、styleの各ブロックについての説明
6.3.1 templateブロック
コンポーネントのtemplateに対応していて、HTMLを記載する部分
v-で始まる属性のディレクティブも利用可能
6.3.2 scriptブロック
Javascriptを使用できる部分
ライブラリや他のコンポーネントのインポートをここで行う。
6.3.3 styleブロック
HTMLのstyle要素と同じでCSSを定義する部分
6.5 単一ファイルコンポーネントの動作を体験する
6.6 単一ファイルコンポーネントの機能
単一ファイルコンポーネントのほかにも便利な機能の紹介
6.6.1 外部ファイルのインポート
src属性を使用して、各ブロックで外部ファイルをインポートできます。
パスには単一ファイルコンポーネントからの相対パスを設定する。
<template src="./my-template.html"></template> <script src="./my-component.js"></script> <style src="./my-component.css"></style>
6.6.2 スコープ付きCSS
styleブロックにscoped属性を付与することで、その単一ファイルコンポーネントのみにCSSを適用できる。
<style scoped"> ・・・CSSの記述 </style>
6.6.3 CSSモジュール
CSSモジュールでも、CSSのクラス名の衝突を防いでくれる。
以下の例ではtemplateブロックでstyleのクラスを指定している。
<template> <p :class="$style.message">こんにちは！</p> </template> <script> // 省略 </script> <style module> .message { color: #4258b9; } </style>
221ページのフォームテキストボックスに入力があるかどうかのサンプルを実行するコマンドが
間違っているので、気を付けましょう。
実行するファイル名が異なっています。indexではなくnamedです。 $ vue serve index.vue --open $ vue serve named.vue --open
6.6.4 他言語実装のサポート
単一ファイルコンポーネントでは、以下の言語を使用できる。
lang属性を使用することで、他言語実装ができる。
本で記載されている例はtemplateブロックに「Pug」、scriptブロックに「TypeScript」、styleブロックで「stylus」です。
<template lang="pug"> </template> <script lang="ts"> </script> <style lang="stylus"> </style>
単一ファイルコンポーネントの知識は中規模以上のアプリケーション開発において必須になるということなので勉強しましょう。
『Vue.js入門』輪読会 #4
5. Vue.jsの高度な機能
５章の内容
UXやコードの保守性。再利用性を高める際に用いる機能の説明。
必須ではないが、クオリティを高めるには覚えておきたい機能。
目次
5.1 トランジションアニメーション
Vue.jsは要素の表示・非表示をトリガーにして、CSS3、Web AnimationAPIと連携してトランジションアニメーションを容易に実装することができる。
5.1.1 transitionラッパーコンポーネント
<transition>タグで囲んでいるコンポーネント、要素の表示状態によって、アニメーションに関する処理を行うコンポーネント。
コンポーネント、要素が出入り（enter/leave）する際にトランジションを追加します。
出入りが起きるタイミング
- v-ifの条件が変わった時
- v-showの条件が変わった時
- 動的コンポーネントのis属性値が変わった時
5.1.2 トランジションクラス
開始と終了の状態、開始の状態から終了の状態へどのように遷移するかを定義するためのクラス。
- v-enter: enter の初期状態。
- v-enter-to: enter の終了状態。
- v-enter-active: enter の初期状態から終了状態。
- v-leave: leave の初期状態。
- v-leave-to: leave の終了状態。
- v-leave-active: leave の初期状態から終了状態。
5.1.3 fadeトランジションの実装
フェードイン、フェードアウトの確認
以下のURLで「表示の切り替え」をクリックした時の動きを確認。
https://jsfiddle.net/vwsx7e80/
ブレークポイントを設定して、Elementsタブでトランジションアニメーションを行う要素の確認をしてみよう。
- v-enterの追加
- v-enter-activeの追加
- v-enterの削除、v-enter-toの追加（アニメーションの開始）
- （アニメーションの終了）
- v-enter-toの削除、v-enter-activeの削除
Column Vue Routerのトランジション
Vue Routerでも<router-view>タグを使用してトランジションが使える。
Column カスタムトランジションクラス
外部ライブラリを使用する場合は、そのライブラリが定義するクラス名に変更する必要がある。
Animate.cssを使用する場合の例「enter-class ⇒leave-class」
以下のURL先で動作を確認。
https://jsfiddle.net/kitak/t29ag6hf/
fadeInUp
slideOutRight
5.1.4 JavaScriptフック
要素の大きさや画面上での位置、コンポーネントの状態などの動的な値を用いる場合はJavascriptを使う必要がある。
transitionコンポーネントにはJavaScriptによる処理をアニメーションの過程でフックできる機能がある。
フック・・・ひっかけるようなイメージ
メニューのアニメーションで動作の確認
https://jsfiddle.net/kitak/r84y9c1v/
5.2 スロット
テンプレートタグ内の文字列をslotタグへ入れ替えること。
親側のコンポーネントから子のコンポーネントに『テンプレートの一部を差し込む機能』の事。テンプレートをカスタマイズしたい時に利用する。
5.2.1 単一スロット
templateの中にある<slot>タグで囲った中が、コンテンツを差し込まれる場所となっている。
コンテンツが指定されていない場合は、slotタグで指定した値がデフォルトとのコンテンツとなる。
5.2.2 名前付きスロット
slotのname属性で、名前を指定できる。
これにより名前で指定した箇所にスロットを挿入することが可能。
単一スロット（名前なしスロット）は1箇所にしかコンテンツを渡せなかったのに対して、名前付きスロットは複数箇所にコンテンツを挿入できる。
5.2.3 スロットのスコープ
親のコンポーネントで行われるデータバインディングはスロットとして挿入されるコンテンツであっても、
親のコンポーネントのスコープが適用される。
5.3 カスタムディレクティブ
開発者の
グローバ
アプリ
ローカル
ローカ
Column コンポーネントやミックスインとの違い
ミックス
共通点は
5.3.1 作成するカスタムディレクティブの定義
カスタム
カスタム
<div v-focus></div>
5.3.2 ディレクティブ定義オブジェクト
カスタムディレクティブがDOM要素に紐づいたタイミングでフックして、
実行する関数の事。
5.3.3 フック関数の引数
ディレクティブ定義オブジェクトのオプションに渡す関数をフック関数と呼ぶ。
| 引数名 | 内容 |
|---|---|
| el | ディレクティブに紐づく要素、DOM操作に利用 |
| binding | バインドされた値、引数、オブジェクト |
bindingのプロパティでよく使われるもの
- name
- value
- expression
- arg
- modifiers
5.3.4 image-fallbackディレクティブの機能追加
Column DOM操作を行うライブラリをラップする
DOM要素を扱う処理をカスタムディレクティブに委譲して、
コンポーネントでは直接DOM要素は扱わないようにする。
5.4 描画関数
templateオプションの代わりに、renderオプションで描画関数を指定できる。
基本的にはテンプレートを利用するべきだが、場合により描画関数を直接定義した方が良い時（記述が簡潔になる）がある。
5.4.1 描画関数を用いないと書きづらい例
描画関数を用いないと難しい例の問題点
１コンポーネントの出しわけの条件式が読みづらい
２テンプレートに同じ記述が並んでいて冗長
３ボタンとして表現する要素の種類が固定になっていて、他の要素(input等)を追加する場合は、テンプレートに追加していく必要がある
5.4.2 描画関数による効率化
テンプレートを用いずに、renderオプションと描画関数で同じ振る舞いを実現できる。
柔軟性が高いので、プログラムの力に頼り、描画関数に複雑なロジックを書いてしまうことになることもあるので、
使用する際は注意する。
テンプレートは静的で描画関数は動的のイメージ
5.4.3 createElement関数
createElementの第一引数には要素の要素名（タグ）、第二引数にはオブジェクトで要素の属性指定のためのデータオブジェクトを渡します。
第三引数には子ノードを文字列か配列で指定する。
第一引数は必須で、第二、第三引数はオプション。
公式のドキュメント
Column h関数
createElementをhにエイリアスしている。
JSXの仕様に由来している。
Column JSX
Reactで採用されていて、JavaScript内にHTMLを書けるようなもの。
JSXで描画関数を記述することで、プログラムによる柔軟さとマークアップによる宣言的な記述の両方の良いところを取り入れることが出来る。
5.5 ミックスイン
汎用的な機能を取り出して、共通処理にすること。
ライブラリの様に取り込んで利用することが可能な部品にするイメージ。
5.5.1 ミックスインで機能を再利用する
ミックスインの機能をコンポーネントに追加するにはコンポーネントオプションのmixinsプロパティの配列の要素として、オブジェクトに渡す。
ミックスインとコンポーネントで同じプロパティが存在している場合はコンポーネントのオプションが優先されるので、注意する。
5.5.2 グローバルミックスイン
アプリケーション全体に適用できるミックスインのこと
一度、グローバルにミックスインを適用すると、それはその後に作成する全ての Vue インスタンスに影響するので注意！
-
Column ミックスインの命名規則
１つのミックスインに機能を詰め込みすぎない。
ミックスインにつける名前はどのような機能がコンポーネントに取り込まれるかわかりやすい名前にする。
「動詞＋able」、「～出来るようになる」という名前にする。
