Angular入門その1

JavaScriptのフレームワークの1つ、Angular。今の所は勉強中といったところですが、これから自己学習を兼ねて何回かに分けてAngularについて投稿していこうと思います。
使い方的にはVue.jsと似ているところもあるようですが、AngularはTypeScript(JavaScriptをわかりやすく改良したもので、これをコンパイルするとJavaScriptになる)を使うことが推奨されているので、それについても別途記事を書こうかと。ちなみに、もともとAngularJSと呼ばれていたものが、JavaScriptでなくTypeScriptが推奨されるようになってからJSが外れてAngularと呼ばれるようになったようです(なので、上でJavaScriptのフレームワークと書いていますが、フロントエンドのフレームワークといった方が正確なのかもしれないです)。
なお、Vue.jsの入門記事は その1 その2 その3 (近いうちにこちらに移転します)

1. 環境構築
Angularは、一般的には「Angular CLI」というコマンドラインツールを使って環境構築することが多いようです。流れとしては、ざっとこんな感じです。
i) Node.jsをインストール
とりあえず、Macなら

でOK。Homebrewが入ってなければそれを入れるのが先だけど。
WindowsならNode.js公式ページからインストーラを落としてそれでインストールすればいいかと。

ii) TypeScriptをインストール

Node.jsインストールでnpmも使えるようになっているはずなので、npmを使ってインストールします。もしかしたらsudoでやる必要があるかも。

iii) Angular CLIをインストール

こちらも、同様にnpmを使ってインストールします。これで、ngコマンドでAngularのコマンドラインツールを使えるようになります。

iv) プロジェクトを作成
例えば、AngularTest1という名前のプロジェクトを作成するとします。

これで、こんな感じのソースコードができます。
ここからさらに

で、ローカルにサーバーが立ち上がり、こんな感じの画面が出てきます。

ただ、他のサイトとかだと
「Welcome to app!」
と出て、下に大きなAngularのアイコンが表示されてるのを見たけど、バージョンが違うのかな?もしくはどっかで操作を誤ったか(汗)

2.ソースの中身の簡単な解説

一番上のindex.htmlにapp-rootというものがありますが、これはコンポーネントといって、Vue.jsでもありましたが、1つの部品のようなものにするものです。
main.tsでapp/app.module.tsが呼ばれ、app/app.module.tsでapp/app.component.tsが呼ばれ、app/app.component.tsで実際のコンポーネントを定義するという流れになります。
なので、app/app.component.tsのtitleを変えれば、表示される文字列も変わってくることになります。

ここまでざっと書いて見たけど、次回はもう少し詳しく説明しようと思います。

ここ5年ほどのJavaを簡単に振り返ってみる

下の記事で転職先が決まって久しぶりにJavaを使うことになると書いたが、ここでここ5年ほどのJavaの動向を振り返ってみようと思う。

WikipediaのページJDK公式ページによると、大体こんな感じ。
2014年3月 Java8(ラムダ式、型アノテーション、Date and Time API 、JavaFX(Swingより高機能なGUIツール)など)
2017年9月 Java9(言語レベルでのモジュール化のサポートなど)
2018年3月 Java10(ローカル変数型推論など)
2018年9月 Java11(ネストベースのアクセスコントロールなど、OracleJDKの有償化!!
2019年3月 Java12(JVM定数のAPIなど)

こうして見ると、5年前のJava8で色々な機能が追加されたのが目につく。中でも、今更ながらラムダ式の導入はかなり大きかったのではないかと。
ラムダ式の例としては、こんな感じ。

これと同じことをラムダ式を使わずにやろうとすると、無名クラスを使ったり、結構ややこしいことになるんではと思う。
そういえば、C++も言語仕様が大きく追加されたC++11からラムダ式が使えるようになったんだったな。

他にも色々な機能が増えて、ここ数年で本当に進歩したんだなあ。とはいえ、いいことばかりではなくJava11からOracleJDKが有償化されてしまった(個人で使う分には大丈夫みたいですが)のは多くの人にとっては痛そうですね。。。OpenJDKの方は無償で使うことができるのですが、サポート期間が短かったりするので、悩みどころですね。

追記
Qiitaのコメント欄で情報をいただいたので、少しだけ追記します。
Amazon CorrettoというOpenJDK互換の無償のディストリビューションがあるようです。インストール方法などはこちらを参考にして見てください。

今後の技術テーマ

こちらに書いた通り、4月から転職が決まって沖縄で働くことになった。
それに伴い、使用する技術も今までとは異なったものになるので当面は引越し作業の合間に新しい技術や久々に使う技術を中心に勉強していこうと思う。
・Java (2つ前の会社では客先によっては使っていたけど、ここ数年で色々と変わったことがあるようなので、その辺りを中心に)
・Spring Boot (Javaのフレームワーク。WEB+DB PRESSの106号にちょうどそれについての記事があったので、それを元に勉強中。パッと見Laravelとは手触り感なんかが結構異なる感じだけど、DIなんかでLaravelと共通した考え方を使っているところもあるらしい。)
・Node.js  (以前ドットインストールでちょっとやったけど、余裕があるときに復習しようと思う)
・AngularJS (ドットインストールでちょっとだけやった感じだと、Vue.jsに少し似ているかも。)
・クラウド技術(Microsoft Azureの使い方を基本的なところだけでも勉強しておきたい)

常に勉強し続けなくてはいけないのは技術者の宿命だけど、新天地で頑張るぞ!
とりあえず記事を書けるところまできたらこっちに書いて、同じ内容をQiitaにも投稿しようかと。

grepとfindの便利な使い方

Linuxのコマンドで何かを探したりするときに使うコマンドがgrepfindです。今回はこの2つのコマンドの便利な使い方を簡単に紹介したいと思います。

grep
grepは、ある文字列を含むファイルを検出するときに使用します。
基本的な使い方は、こんな感じです。
grep (オプション) ‘検索したい文字列’ 探すファイル(ワイルドカード指定可能)
例えば、
grep ‘href’ *.html
と打つと、現在のフォルダ内にあるhrefという文字列を含む.htmlで終わるファイル一覧を表示してくれます。
grepコマンドには色々なオプションがあるので、よく使うものをいくつか紹介します。
-i アルファベットの大文字小文字を区別せずに検索する
-r 対象となるフォルダのサブフォルダも含めて再帰的に検索する
-n 対象の文字列が見つかった行番号も含めて表示する
-v 対象となる文字列が存在しない行について表示する
-A (数字) 対象となる文字列が見つかった行の後の指定した数字の行数分を表示する
-B (数字) 対象となる文字列が見つかった行の前の指定した数字の行数分を表示する
-(数字) 対象となる文字列が見つかった行の前後の指定した数字の行数分を表示する
-G 正規表現で検索する
例えば、grep -n -i -r ‘img’ *.html と打つと、Imgやimgなど、大文字小文字を区別せずに現在のフォルダおよびサブフォルダ内の.htmlで終わるファイルのImgやimgなどを含む行番号を表示してくれます。
より詳しくは、こちらを参考にしてください。

find
findはある条件を満たすファイルを探すコマンドです。
基本的な使い方は以下になります。
find (オプション)(探す場所) 対象となるファイルの条件
例えば、find app/Test.phpとタイプすると、appフォルダ内にTest.phpというファイルがあればそのファイルがあることを、なければ存在しないことを表示してくれます。
よく使うオプションをいくつか紹介します。
-name ワイルドカードを使用して、ある文字列をファイル名に含むものを全て表示します。
-type f ファイルのみを対象に検索します。
-type d フォルダのみを対象に検索します。
-exec 検索結果に対してコマンドを実行します。
応用例として、
find . -name ‘.DS_Store’ -type f -ls -delete
とタイプすると現在のフォルダおよびサブフォルダ内の.DS_Storeを全て削除してくれます。
詳しくはこちらを見てください。

grepとfindの2つのコマンドをうまく使ってどこに何があるかわからないことがないようにして、快適なLinuxライフを楽しみたいですね。

プログラマの精神衛生について

プログラマにとって(プログラマに限りませんが)、心身ともにベストに近い状態で仕事をするのが一番いいのは間違い無いでしょう。体調が悪かったり、あるいはイライラしていたり落ち込んでいたりするとどうしても作業も遅くなるし、ミスも多くなる。特に精神的に不安定な状態で作業をしてそこでミスが発生して、それによってさらに精神状態がより悪化するなんて最悪の悪循環です。
そこで今回は、どうすれば精神的に少しでもいい状態で仕事をできるかについて考えて見たいと思います。

一番大切なのは、自分の今の状態を客観的に把握できるようになるということです。今の状態とは精神的にどんな状態なのかというのもそうですが、現時点で抱えているタスクと心身面のコンディションを天秤にかけて、このまま進んで問題ないかということです。
ちょっと精神的に疲れているなーとか感じたら、少しだけ外に出て深呼吸するとかお水を1杯飲むなどしてリラックスすると良いでしょう。
あるいは、それでもどうしてもつらい、無理だと感じたら、(できる場合とできない場合がありますが)チームのメンバーに相談して期限を延ばしてもらうとかあるいは1日だけ休ませてもらうなどするのも1つの選択肢かもしれません。

また、特に精神的にベストでない状態で何かをしている場合は、今やっていることが本当に大丈夫なのか、普段以上に気を配ったほうがいいと思います(難しいかもしれませんが)。例えば変なバグを埋め込んでいないかとか、あるいは人に宛てたメッセージで誤解を招くようなことを書いていないかなど、それによって今の状態をさらに悪化させることにならないよう1歩立ち止まって考えるのは大切なことだと思います。

後は常日頃から自分なりに気持ちを切り替える方法を持っておくことは大事だと思います。例えば甘いものを食べるとか運動するとか、あるいは誰かと雑談するとかです。自分は以前ミスをしてすごい落ち込んでいた時にyoutubeで某議員の動画を見て大笑いして、少し気持ちが落ち着いたことがありました(苦笑)。

そんなこんなで今回はどうすればいい状態で仕事ができるかについて考えて見ました。とは言っても、今までの自分を振り返って正直必ずしも実践できていたわけではないですが(むしろイライラや落ち込みでドツボにはまったことが何度もあったので、その反省と自戒を込めて)、少しでもいい精神状態を保つ方法を日々考えて実践していきたいと思います。

Qiitaでこんな記事を見つけました。常に自分をいい状態にしておくというスキル、本当大事ですよね。

LaravelのbelongsToManyで中間テーブルの情報を取得する

今回扱うテーマはデータ間の多対多の関係で2つのテーブルをつなぐ中間データが持つ情報も取得したいということを考えます。
まず、講師一覧を表すteacherというテーブルがあります。とりあえず、idとnameを持つとします。
id    name
1    鈴木
2    佐藤
3    田中
4    山田
次に、教える科目を表すsubjectというテーブルがあります。こちらも簡単に考えるため、idとsubject_nameのみを持っているとします。
id    subject_name
1    英語
2    数学
3    国語
4    社会
5    理科
さらに、講師は複数の科目を担当できるものとします。ただし、メインで教える科目とサブで教える科目は区別します。
そして、teacherとsubjectを結ぶteacher_subjectというテーブルがあります。これはteacher_id、subject_idに加えてメイン、サブを区別するtypeというカラムがあります(メインなら1、サブなら2)。
teacher_id    subject_id    type
1                  1                1
1                  4                2
2                  2                1
2                  5                2
3                  3                1
4                  4                1
4                  3                2
ここで、こんな表を作りたいとします。
講師    科目    種類
鈴木 英語 メイン
鈴木 社会 サブ
佐藤 数学 メイン
佐藤 理科 サブ
田中 国語 メイン
山田 社会 メイン
山田 国語 サブ

このとき、モデルクラスTeacher.php, Subject.phpに加えてTeacherSubject.phpをそれぞれ以下の様に用意します。

app\Teacher.php

app\Subject.php

app\TeacherSubject.php

こんな感じでwithPivotを使うことで中間テーブルの情報を取得することができます。中間テーブルのモデルクラスはIlluminate\Database\Eloquent\Relations\Pivotを継承して作ります。

また、ある講師に対してメインの科目だけ欲しい場合は

という風にwherePivotで絞り込むことができます。

Eloquentのリレーションは結構奥が深いので、是非ともしっかりとマスターしたいですね。

LaravelとVue.jsで多言語対応を行う

今回は、LaravelとVue.jsを用いたプロジェクトで多言語対応を行うやり方を紹介します。
まず、resources/langに対応する言語のjsonファイルを置きます。とりあえず、日本語と英語を想定してja.json,en.jsonとします。

ja.json

en.json

次に、Laravelのbladeで表示する方法です。

index.blade.php

1つ目の方法は__ヘルパ関数を使用する方法です。翻訳文字列のキーを翻訳したものに変換するヘルパ関数です(Laravel標準のヘルパ関数なのでbladeだけでなく、モデルやコントローラでも使えます)。これで変換した文字列をMustache記法でechoします。
もう1つの方法はbladeの@langディレクティブを用いる方法です。このように2通りの書き方ができますが、どちらかに統一したほうがわかりやすいかもです。

次に、Vue.jsでの多言語対応の方法です。
vue-i18nというVue.jsのプラグインを使います。vue-i18nについての詳しい説明はこことかここを読んで下さい。
まず、

でvue-i18nをインストールします。
次に、こんな感じでvue-i18nをjs側で読み込みます。

main.js

MainComponent.vue

これで、Vue.jsで多言語表示ができるようになります。

ただ、1つ問題がありまして、vue-i18nでは第一階層のデータしか読み込めないので、

ja.json

en.json

のようなデータがこのままでは読み込むことが出来ないのです。
その場合は以下のように一旦blade側で加工してからコンポーネントに渡します。

index.blade.php

main.js

MainComponent.vue

自分はこんな感じのやり方でやりました(もしかしたらもっといいやり方もあるかもしれないので、他にいいやり方があれば教えていただければと思います)。

また、今回は言語切替機能については触れませんでしたが。そのあたりについてはこちらが参考になりました。

Axiosのファイル送信でハマった話

今月こそはVuexについてまとめようと思っていたのですが、Vuexについてはじっくり余裕を持って書けるときに書きたいということで、今回はAxios(Ajaxリクエストを送るためのpromiseベースのHTTPクライアント)でファイル送信を行うときにハマった話を書こうと思います。

今回やろうとしたのは、画像ファイルとかも含む編集画面で、例えばVue.jsでモーダルの編集フォームを作って、PATCHメソッドでAjaxで編集内容を送信するというケースでした。
まず、下記がうまくいかないケースです。

そしたらフォームが空になっていました(大汗)。
何故うまくいかないかわかりますか?
正解はaxiosのメソッドにはgetとかpostとかはあってもpatchというメソッドは用意されていないのです。
PHPがPOSTメソッド以外ではapplication/x-www-form-urlencodedやmultipart/form-dataで渡されたパラメタの処理をしてくれない仕様だから
です。(2018/9/9 一部修正、こちら参照)なので、どうしてもpatchで送りたいときは、下記のようにします。

axiosのメソッドとしてはpostだけど、送る時のデータにpatchメソッドであるという情報を含めるのです。
これで一安心です。

ちなみに、今回のはなかなか気が付かず、かなり悩んだのですが、色々ググってこちらのページに行き着いてようやくわかったというものです。
Laracasts様に本当に感謝。

久々にローカル環境で作業したときにたまにやりがちなこと

とりあえずphp artisan make:migrationでマイグレーションファイル作って、さあphp artisan migrateと打って、

あれ??

https://qiita.com/hondy12345/items/d32ed749fb49e9da7de6
MySQLのサーバー立ち上げてなかった(汗)

旅行Webサービス「Trabum」構想

現在、夏季休暇で小田原に行っていて、その間にWebサービスを作ろうと言うことで、色々と頭を悩ませている。
今回作ろうと思っているのは、旅行記を書いて公開したり、他の人の旅行記を呼んだりするためのWebサービス。名前は旅行の「Travel」とアルバムの「Album」を合わせた「Trabum」(トラバムと読む)。

機能面としては、大雑把にこんな感じ。
・ユーザプロフィール(User)
・旅行記(タグ、いいね、コメント機能)(Travel, Travel_tag, Travel_like, Travel_comment)
・チェックポイント(タグ、いいね、コメント機能、写真)(Checkpoint, Checkpoint_tag, Checkpoint_like, Checkpoint_photo)
・観光地(Spot)
イメージとしては、ユーザがまず旅行記を投稿する。旅行記としては、例えばこんなイメージ。
タイトル:2017-18 年末年始北海道旅行 開始日:2017年12月29日 終了日:2018年1月4日 タグ:北海道、18きっぷ、スキー、グルメ メモ:長いので略
次に、その旅行記に対して具体的な行った場所をチェックポイントとして投稿する。
場所:北海道函館市 到着日:2017年12月29日 出発日:2017年12月30日 タグ:五稜郭、イカ飯、函館山、夜景 メモ:長いので略
場所については後述の観光地と結びついているイメージ。さらに、チェックポイントには写真を入れることが出来る。
旅行記、チェックポイントに対して他のユーザはいいねとコメントが出来る。
観光地については、1つのチェックポイントに対して1つの観光地が結びついていて、ユーザがチェックポイントを投稿するときすでにその観光地があればそれを選択して、なければ新規の観光地を追加する。観光地には地名、位置(Google Maps APIを使うことを検討)、紹介文などが入る。また、ユーザが観光地について書かれたチェックポイントの一覧を見ることが出来る。

次に、使用する技術要素としてはこんな感じか。
・PHP(7.2)
・Laravel(5.6)
・JavaScript
・Vue.js, Vuex(Vue-router,Vuetifyは使うかどうか未定)
・MariaDB
・Apache
・Valet
今回はMacのローカル環境で開発するのでValetを使おうかと。Dockerも使いたかったけど、今の低スペックマシンだとどうも微妙なので。
実際に一般公開するとなったらAWSを使おうと思っている。将来的にはスマホアプリでも投稿や閲覧が出来るようにしたいと思う。

まだ作り始めたばかりだけど、何とか今年中に一般公開できればいいなと思う。