ふるてつのぶろぐ

福岡在住のエンジニアです。

写真提供:福岡市

Angular

Udemy講座つくりのすすめ - バージョンアップに対応する

今日すること こんにちはふるてつです。 新しいシリーズを開始しました。 昨年 Udemy の講座を公開したので、そのお話をすこしずつしていきたいと思います。 最初の1回目はフレームワークのバージョンアップに講座を対応させる方法についてお話しします。 1.…

Angular13でWebアプリを作ろう - V13にバージョンアップ - ng update

今日すること 明けましておめでとうございます、ふるてつです。 今回は Angular のお話です。 昨年11月に Angular がバージョン 13 にあがりました。 今回のバージョンアップ作業はいつもより難しかったです。 というのも--forceオプションを使わないとバー…

新人向けのプログラミング教育・ SPA /フロントエンド学習に Udemy で Angular の動画講座を作りました(新人研修、独習、SPA 未経験のエンジニアさん、SPA になじめないデザイナーさん、そして初学者のかた向けです)

Udemy 講座のご紹介 こんにちは、ふるてつです 今月 Udemy で初心者向けの Angular 講座を開設しました その紹介をさせてください!! ✨講座の紹介動画 こちらは講座の紹介動画です youtu.be ✨講座のリンク こちらは講座へのリンクです www.udemy.com ✨講座…

Angular11でWebアプリを作ろう - V11にバージョンアップ - ng update

今日すること こんにちは、ふるてつです。 もう年末ですね。 Angularがバージョン 11 にあがりました。 9から10に上がるときはそれほど修正はなかったのでブログを書かなかったのですが、今回はすこし修正が多く感じたのでその内容を書こうと思います。 バー…

Angular 9 で Web アプリを作ろう - カスタムバリデーション

今日すること こんにちは、ふるてつです。 今日はカスタムバリデーションについて書きます。 Angular標準のバリデーションは1つの単項目しかチェックできません。 複数の項目にまたがったチェックをしたい場合はカスタムバリデーションを作ります。 例えば…

Angular 9 で Web アプリを作ろう - わたしも今日からバージョン 9

今日すること こんにちは、ふるてつです。 年明けついにAngularがバージョン 9 になりました。 今日は製造中の自分のAngularをバージョンアップしてみました。 バージョンアップ情報の確認 まずはこちらのサイトで手順やその他情報をチェックします。 https:…

Angular8 で Web アプリを作ろう - Angular もくもく会 in Fukuoka

こんにちはふるてつです。 昨日は ng_fukuoka さんが開催する「Angular もくもく会 in Fukuoka #9」に参加しました。 19時からもくもく開始で、20時からLTが2つほどありました。 ng-fukuoka.connpass.com もくもく会の様子 会場は株式会社ベガコーポレーショ…

Angular8 で Web アプリを作ろう - Jasmine - Componentのテスト その2 DOM

今日すること こんにちは、ふるてつです。 前回、前々回とJasmineのユニットテストについて書いていきました。 今回はComponentの DOM 部分のテストになります。 テストをするComponentの概要 今回テストをするのは前回と同様に会社マスターの一覧を検索する…

Angular8 で Web アプリを作ろう - Jasmine - Componentのテスト その1

今日すること こんにちは、ふるてつです。 前回はServiceにJasmineのユニットテストを追加していきましたが、 今回はさらにComponentに対して追加していきたいと思います。 テストをするComponentの概要 今回テストをするのは会社マスターの一覧を検索する画…

Angular8 で Web アプリを作ろう - Jasmine - Serviceのテスト

今日すること こんにちは、ふるてつです。 前回は基本に立ち返る意味で簡単なマスタメンテ画面を作ってみました。 今回はさらにユニットテストをこの画面に追加していきたいと思います。 AngularのテストツールはJasmineが標準となっていますので、それをわ…

Angular8 で Web アプリを作ろう - 基本に立返ってマスタメンテ画面

今日すること こんにちは、ふるてつです。 わたし的にMaterialの使い方にだいぶ慣れてきました。 そこでいったん基本に返りたいと思い、簡単なマスタメンテ画面を作ってみました。 今日はその作業について書きます。 会社マスタ 比較的軽そうな会社マスタメ…

Angular8 で Web アプリを作ろう - 今日からAngular8 - ng update

今日すること こんにちは、ふるてつです。 わたしも遅ればせながらもAngularのバージョンを 8 に上げました。 今日はその作業について書きます。 いまのバージョンとアップデート作業の確認 まずは自分の環境を確認します。 ng --version わたしの環境のCLI…

Angular7 で Web アプリを作ろう - Material PagenatorとTableでサーバサイドページング

今日すること こんにちは、ふるてつです。 今回はAngular MaterialのPagenatorとTableを組合わせてサーバサイドページングをおこなってみました。 Pagenator関連のリファレンス Materialのリファレンスでサーバーサイドページングについては「Table」の「EXA…

Angular7 で Web アプリを作ろう - Material Icon

今日すること こんにちは、ふるてつです。 今回のテーマもAngular Materialですが、今日はあまり多くありません。 以前、Angular Materialを Install したときに、Material Iconのところを実施せずに飛ばしていました。 今日は立ち帰ってMaterial Iconのイン…

Angular7 で Web アプリを作ろう - mat-menu

今日すること こんにちは、ふるてつです。 今回のテーマもAngular Materialで、<mat-menu>のお話です。 以前わたしがbootstrapで作っていたメニューと同じものをmaterialで作ろうと思います。 メニューは上記のような感じです(緑色の部分です) mat-menu関連のリファ</mat-menu>…

Angular7 で Web アプリを作ろう - mat-datepicker 年月のみ版

今日すること こんにちは、ふるてつです。 今回もAngular Materialです。 mat-datepickerで年月のみのカレンダーを表示する方法について書きました。 mat-datepickerのリファレンスについて 年月だけの「datepicker」の作り方は「datepicker」のリファレンス…

Angular7 で Web アプリを作ろう - sidenav

今日すること こんにちは、ふるてつです。 残念ながらGW10連休はあっというまに終わりました。 今回のテーマもAngular Materialで、sidenavの使い方について少し書きたいと思います。 navigation関連のリファレンスについて リファレンスではnavigation関連…

Angular7 で Web アプリを作ろう - Angular Material

今日すること こんにちは、ふるてつです。 GWも中盤です。 今回のテーマもAngular Materialにしました。 Angular Materialを使い始めたので、リファレンスを交えて、これまでに使用したコンポーネントについて少し書いてみようかと思います。 Angular Materi…

Angular7 で Web アプリを作ろう - Bootstrap 4 を Angular Material に変える

今日すること こんにちは、ふるてつです。 GW前半。 今回のテーマはAngular Materialです。 最近まわりの人がAngular Materialを使っているのをうらやましく思い、わたしもBootstrapを乗せ換えて使ってみることにしました。 とにかく動きがきれいで魅力的に…

Angular7 + Bootstrap4 で Web アプリを作ろう - もくもく会でLTだけしました。

こんにちはふるてつです。 先日 ng_fukuoka さんが開催する「Angular もくもく会 in Fukuoka #8」に参加してきました。 いつもブログに書くのは自社内でやっているもくもく会ですが、今回は違って社外のもくもく会です。 ng-fukuoka.connpass.com 雰囲気はこ…

Angular7 + Bootstrap4 で Web アプリを作ろう - ngx-translate で他言語化の件 。

こんにちはふるてつです。 今日は土曜日、ちょっとくもり。わたしは家でAngularを自習しています。 今回のテーマは他言語です。 勤務先で ngx-translate を使って他言語化した方がいて、話を聞いていると思ったより簡単そうだと感じました。 Angular純正もあ…

Angular7 + Bootstrap4でWebアプリを作ろう - サービスその2 HTTP通信。

こんにちはふるてつです。 今日は Angular です 前回の社内もくもく会でモックサービスを作りました。 そして今回はそれを HTTP 通信で取得するように変えました。 サーバ側は先日環境を作った Spring Boot にしています。 まずは定数を格納するクラスを作る…

Angular7 + Bootstrap4でWebアプリを作ろう - サービス追加 その1

こんにちはふるてつです。 3月から後輩と二人で社内 Angular もくもく会もはじめました。 これからは AWS と同様に Angular についても、もくもく勉強した内容を書いていきたいと思います。 基本的にはこれまで作ってきたアプリの続きになりますが、作業時間…

Angular7 + Bootstrap4でWebアプリを作ろう(Bootstrap 4.2.1)

こんにちはふるてつです。 昨年の後半からしばらくAngularの活動をさぼっていましたが、今月からまた再開しました。 Angularのバージョンアップ しばらくさわらなかった間にAngularのバージョンが 6 から 7 に上がりました。 今日はバージョンアップをしよう…

Angular6 + Bootstrap4でWebアプリを作ろう(コンポーネント)

こんにちはふるてつです。 今回はAngularのコンポーネントについて書いてみます。 CLIコマンドについて Angularでコンポーネントを作るには、基本的にはCLIコマンドを使ったほうが便利です。 文法は意外と簡単です。 ng g component xxx コンポーネント以外…

Angular6 + Bootstrap4でWebアプリを作ろう(ng-bootstrapのインストール)

こんにちはふるてつです。 これからAngularのプロジェクトを作ります。 プロジェクト作成前の準備 Angularでアプリケーションを作る際に必要なものといえば、まずはNode.js。 ダウンロードはこちらから https://nodejs.org/ja/ IDEにはVisualStudioCodeを使…

Angular6 + Bootstrap4でWebアプリを作ろう(ご挨拶)

こんにちは わたし福岡でエンジニアをさせていただいてます。 少し前ですがオリジナルのWebアプリケーションを作りはじめました。 せっかくなのでどんなことを考え、どんなことに困ったかなどを 記録しておきたいと思い、ブログをはじめました。 今のところA…