LinkedinLearning Web開発者になるの続き。
Angular 4 基本講座 2017年11月
2017年…3～4年前の動画なんだな、これ…(ヽ'ω`)
環境構築が上手く行かなかったのか、単純にライブラリ側のアップデートの絡みで上手く行かなかったのかは不明だが、rxjsの辺りで演習を諦めて動画を眺めるだけにした。
動画制作時には基本講座という名に相応しかったのかもしれないが、この2021年に新しくAngularを学ぼうとする人にとっては余り有用ではないかも。
そしてそれは講座の内容云々が悪いんじゃなくて、講座の内容と現状の差分をチェックせずに、安易に経済産業省のサイトに提供したLinkedinLearningの担当者が悪いんだと最初は思った……
が、ふと、これ以外にAngularの新しい講座動画はあるんだろうかとぐぐってみたら…
これが最新だった…( ；･´ω･｀)ｺﾞｸﾘｯ
正確には同じ講師の人が作成した2018年7月作成の『RxJS 入門』というのがあるが、それはAngularの基本でもないし、3年前くらいの代物…
色々検索して気づいてしまう……LinkedinLearningは英語での講座は比較的最近のものや内容が濃いものが多そうだが、日本語での講座は大して数もなく、内容も基本講座や入門といった感じのもの、内容が薄いであろう数分の動画がほとんどということに…(>'A`)>
まあ全くの無駄ということはないのだけれども、この「Web開発者になる」はあんまりお勧め出来ない気がする。最初の3つくらいまでは忘れてしまっていたことや足りない知識を補ったりする分にはいいけども、以降の講座は内容が古かったりするので色々と苦労する。そんなんで苦労するならもっと他の新しいチュートリアルなり公式を見て苦労した方がいいかも。
俺氏も本当に学びたくなったら、公式サイトの日本語版のhttps://angular.jp/docsのチュートリアルをやろうかなと思った。この講座で扱われてる内容はこのチュートリアルを改変したものらしいし。
次のReact.js講座も4～5年前のものなんだけど、大丈夫だろうか…(ヽ'ω`)
以下はメモ書きを多少整形しただけ。
徒労感が大きかったのでいつもより更に適当(ﾉ∀`)
内容もかなり省略した。
Windowsなので環境構築方法がちょっと異なるのでぐぐる必要があった。
Node.jsのインストール時に他のソフトをインストールするみたいなチェックボッスをOnにしたら、Powshellのスクリプトが実行され Python3やらKBを等々をインストールし始めた。visual studio 2017のビルドツールとかも。PythonもVSも入れてあるのに…インストール済みのVSは2019だから別個にインストールしてるのか？
と思ったらエラーが(ヽ'ω`)
[0eb8:000e][2021-05-11T17:05:34] Error 0x8013153b: [0eb8:000e][2021-05-11T17:05:34] Could not update channel "https://aka.ms/vs/16/release/channel" 場所 System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) 場所 System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) 場所 Microsoft.VisualStudio.Setup.ChannelManager.<GetLatestChannelManifestAsync>d__85.MoveNext()
ようわからんので、ぐぐったり他のことをして放置していたらスクリプトが続行されたらしく、一応無事に終了した模様？ 最後にはvisualstudio2017buildtoolsやPython等がアップグレードされた旨が表示されていた。
インストール中にCLI上に出て来たchocolateyというのはWindows向けパッケージマネージャーなんだな。 コマンドでWindowsアプリを楽々管理「Chocolatey」
TypeScriptもPowershellからnpmでインストールした。
インストール後に念のためにバージョンを確認しようとしてtsc -vを打ったらエラーに。
tsc : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\eleki\AppData\Roaming\npm\tsc.ps1 を読み込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。
あー実行権限とかその辺の話か(ﾉ∀`)
一年くらい前に調べてた時に同じことあったなｗ
PS C:\Users\eleki> Get-ExecutionPolicy Restricted PS C:\Users\eleki> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process 実行ポリシーの変更 実行ポリシーは、信頼されていないスクリプトからの保護に役立ちます。実行ポリシーを変更すると、about_Execution_Policies のヘルプ トピック (https://go.microsoft.com/fwlink/?LinkID=135170)で説明されているセキュリティ上の危険にさらされる可能性があります。実行ポリシーを変更しますか? [Y] はい(Y) [A] すべて続行(A) [N] いいえ(N) [L] すべて無視(L) [S] 中断(S) [?] ヘルプ (既定値は "N"): y PS C:\Users\eleki> Get-ExecutionPolicy RemoteSigned PS C:\Users\eleki> tsc -v Version 4.2.4
PowerShellでこのシステムではスクリプトの実行が無効になっているため、ファイル hoge.ps1 を読み込むことができません。となったときの対応方法
ここまでWindowsだから環境構築が違うのかと思っていたが、どうやら動画内の環境構築方法はもうDeprecatedみたいだな…一応古い方(https://angular.io/guide/upgrade-setup)でも出来そうだけれども、今後は新しいやり方で構築するようになるのであれば、新しい方を試すかな。
@Componentは下のAppComponentクラスのディレクティブ……俺氏アノテーションとディレクティブの違いがわからない…SpringBootとかだとアノテーションと言っていたような気がするけど……
フォルダ内のjsを眺める。
Polyfill.jsってなんぞ？
ポリフィルとは、最近の機能をサポートしていない古いブラウザーで、その機能を使えるようにするためのコードです。大抵はウェブ上の JavaScript です。
Polyfill
ということらしい。
runtime.jsはNode.jsのものか？
行コピーはAlt+Shift+矢印
行移動Alt+矢印
ドラッグコピーはCtrl+ドラッグ
色々と便利なショートカットキー等があるんだな。
VS Code の便利なショートカットキー
ngってなんじゃらほいと思ってぐぐったがangularのngなのか？
Routerを使う
https://angular.jp/tutorial/toh-pt5の最終コードのcssからnavとかの指定を持ってこないと駄目。持って来てもなんか違うような気がする。多分、何かが抜けてるのかも。
どれが配布cssかわからん(´･ω･｀)
styleUrlsを使ってcss作るか
strictだとgoBack()を作らないとエラー出ちゃうか。
strictだからか
Type 'Heroine | undefined' is not assignable to type 'Heroine'. Type 'undefined' is not assignable to type 'Heroine'.
みたいなエラーが(´･ω･｀)
解決法がわからないので、それぞれ以下のように" | undefined"ということをしたらエラーが消えたけど、これだとstrictの意味がないなｗ
returnする前に値をチェックとかせんといかんとかいう話なんか？
tsconfig.jsonのstrictを"false"にしたわ…
それでも上手く動かない…subscribeのエラーの解決方法が分からず、パスした…＿|￣|○
なんかだんだんやる気がなくなってきた…
app.routing.module.tsは最初からあった？
importもされてるな… ← "ng new"した時に「Router使うか？」みたいな質問で"y"を選択したからかな？
この次辺りからはもう観るだけにした(ﾉ∀`)
もし真面目に勉強するならAngularサイトのチュートリアルをやるほうが良さそうだという結論に達したｗ
正直スタイルシート絡みのところはそんなに延々と説明するところじゃないような。
(……記録はここで途切れている)
まあ取り敢えずAngularの輪郭くらいはわかったから良しとしよう(ﾉ∀`)