React学習 with TypeScript on IntelliJ
環境構築の失敗
IntelliJで新規プロジェクトを作りGithub連携し、さらにZennにもGithubを繋いだが問題が発生しました。
ニックネームで登録しているGithubに実名でコミットをしてしまっていたため、Githubの公開設定をプライベートにしました。
改めて実名でのGithubアカウントをIntelliJから削除し、新規プロジェクトを作り再度コミットしましたが、またもや実名になっていました。
ローカル設定とグローバル設定両方のgitのauther?情報を書き換えたり、既存のコミットの変更を試してみたりしたが解決せず。
解決に至ったのはwindowsの資格情報にgitが入っており、そこに2年前の登録情報が入っててなぜかローカルを無視してIntelliJがそこを参照していたようでした。
これを削除しコミットをしたところ認証が走りこれをパスしてやっとニックネームでコミットができました。
ついでに最初のプロジェクトでは、Zennのプロジェクトの下にViteのプロジェクトを作ってしまい2重構造になっていたので、これを解消しました。
具体的にはViteプロジェクト以下のpackage.jsonや.gitgnoreやその他生成されたファイルたちを、ZennのCLI導入したあとのプロジェクトにマージしました。
よくない方法なのだと思いますが、package.jsonは手作業でdependenciesやdevDependenciesの内容を移しました。
その後npm installをして完了。
IntelliJでの開発をするにおいて、素のままだとインテントが自動で機能しないので、WebCalm: JavaScript and CSSとReact snippetsのプラグインを入れました。
残念ながら自動補完は使えないようです。使うには有料版IntelliJを買う必要があります。我慢して全部入力していきます。
型の検索ができない
プラグインを探してみても型を検索できるようなものが見当たらず、有料版にしないとIntelliJでは不可能でした。
そしてVS codeでは無料でできると。
仕方なくVS codeで進めることにします。しかし、見た目なのかなんなのかわからないのですけど、VS codeは疲れるんです。
なので徹底的に見た目の変更を行ってみました。
テーマを”Idea intellij light theme”に、フォントを"'JetBrains Mono', 'Noto Sans JP'"に、ファイルアイコンを"vs-seti"にしました。
また、settings.jsonにコードを追加しました。こちらの記事を参考に各種カラーを好みに設定しました。
"workbench.preferredLightColorTheme": "Idea intellij light theme",
"workbench.preferredDarkColorTheme": "Idea intellij light theme",
"workbench.colorCustomizations": {
//--------------- アクティビティバー（左）--------------------
"activityBarBadge.background": "#ffcff8", //左の通知バッジの背景色
"activityBarBadge.foreground": "#000000", //左の通知バッジの文字色
"activityBar.foreground": "#000000", //アクティビティバーの選択中の色（マークアイコン）
"activityBar.activeBorder": "#ff6ae9", //アクティビティバーの選択中の左の線
"activityBar.background": "#ffe4fa70", //アクティビティバーの背景色
"activityBar.border":"#ffe4fa", //アクティビティバーとサイドバーの境界線の色
"activityBar.inactiveForeground":"#b56faa",
"activityBar.activeBackground":"#ffcff8",
//--------------- サイドバー（左）--------------------
"sideBar.background":"#fffafe",
"sideBar.border":"#00000000",
"sideBar.foreground":"#000000",
"sideBarTitle.background":"#fffafe",
"sideBarTitle.border":"#00000000",
"sideBarTitle.foreground":"#000000",
"sideBarSectionHeader.background":"#ffcff8",
"sideBarSectionHeader.border":"#00000000",
"sideBarSectionHeader.foreground":"#b56faa",
//--------------- タイトルバー（上）--------------------
"titleBar.activeBackground":"#fffafe",
"titleBar.activeForeground":"#000000",
"menubar.selectionBackground":"#ffcff8",
"menubar.selectionForeground":"#000000",
//--------------- メニュー（上）--------------------
"menu.background":"#fffafe",
"menu.foreground":"#000000",
"menu.selectionBackground":"#ffcff8",
"menu.selectionForeground":"#000000",
"menu.separatorBackground":"#b56faa",
//--------------- タブ（上）--------------------
"tab.activeBackground": "#ffe4fa70", //アクティブタブの背景色
"tab.activeForeground": "#000000", //アクティブタブの文字色
"tab.activeBorder": "#00000000", //アクティブなタブの下の線
"tab.activeBorderTop": "#00000000", //アクティブなタブの上の線
"tab.inactiveBackground": "#afa0ad70", //非アクティブタブの背景色
"tab.inactiveForeground": "#333333", //非アクティブタブの文字色
"editorGroupHeader.tabsBackground": "#fffafe", //タブの何もないとこ
//--------------- パンくずリスト（上）--------------------
"breadcrumb.background":"#ffe4fa70",
"breadcrumb.activeSelectionForeground":"#b56faa",
"breadcrumb.focusForeground":"#000000",
"breadcrumb.foreground":"#afa0ad",
//------------------ ステータスバー（下） --------------------
"statusBar.background": "#ffe4fa", //ステータスバーの背景色
"statusBar.foreground": "#000000", //ステータスバーの文字色
//--------------- エディター内 --------------------
"editor.foreground": "#000000", //エディターの基本文字色
"editor.background": "#ffffff", //エディター背景色
"editor.selectionBackground": "#ff00d936", //エディター選択中の色
"editor.selectionHighlightBackground": "#80caff36", //選択中の文字と同一文字の背景色
"editor.selectionHighlightBorder": "#00000000", //選択中の文字と同じやつの周りの線
"editor.findMatchBackground": "#ffe4fa", //検索してエンター押した時に選択された背景色
"editor.findMatchBorder": "#00000000", //検索してエンター押した時に選択された周りの線
"editor.findMatchHighlightBackground": "#ea5c0055", //検索結果に一致した項目の背景色
"editor.findMatchHighlightBorder": "#00000000", //検索結果に一致した項目の周りの線
"editor.lineHighlightBackground":"#ffe4fa70",
"editorGutter.background":"#ffe4fa70",
"editorLineNumber.foreground": "#000000", //エディタの行番号の色
"editorLineNumber.activeForeground": "#d800b8", //選択中のエディタの行番号の色
"editorCursor.foreground": "#ff008c", //キャレットの色（点滅縦線のやつ）
//--------------- ミニマップ（右） --------------------
"minimap.background": "#fffafe", //ミニマップの背景色
"minimapGutter.modifiedBackground": "#80caff", //ミニマップ選択時の色
"minimapGutter.deletedBackground": "#f06788", //削除された行の背景色
"minimap.findMatchHighlight": "#ff8e437f", //検索結果に一致した項目の行の背景色
"minimap.selectionHighlight": "#85bcff7e", //範囲選択中時のマーカー色
"minimap.errorHighlight": "#DC3657", //エラー時のマーカー色
"minimap.warningHighlight": "#fbc23b", //警告時の背景色
"minimapSlider.background": "#ffcff840", //表示領域以外の場所にカーソルを合わせた時
"minimapSlider.hoverBackground": "#b898b340", //表示領域にカーソルが入ってる時の色
"minimapSlider.activeBackground": "#ff9ef070", //んでそん時にクリックした時のマーカー色
//--------------- スクロールバー--------------------
"scrollbarSlider.activeBackground":"#b56faa",
"scrollbarSlider.background":"#ffcff8",
"scrollbarSlider.hoverBackground":"#ff6ae9",
},
//--------------- ウィンドウ --------------------
"workbench.editor.tabSizing": "shrink", //タブの幅サイズ指定
"window.title": "${folderName}${activeEditorShort}", //パス表示
"workbench.startupEditor": "none", //vscode起動時に「ようこそ」画面を表示しないようにする
//--------------- エディター内 --------------------
"files.trimTrailingWhitespace": true, //保存時に各行の末尾にある半角スペースを削除
"files.trimFinalNewlines": true, //保存時に最終行以降の空行を削除
"files.insertFinalNewline": true, //保存時にファイルの最後に空行を挿入する
"editor.formatOnSave": false, //保存時にコード整形
"editor.fontSize": 13, //フォントサイズ（ウィンドウズームレベル0を起点）
"editor.wordWrap": "on", //行の折り返し
"editor.guides.bracketPairs": true, //カッコ同士を色で判別してくれる
"editor.autoIndent": "full", //オートインデント
"editor.glyphMargin": false, //行番号の左端に余白を作るか
"editor.roundedSelection": true, //選択範囲の角を丸める
"editor.renderWhitespace": "boundary", //空白を可視化
"editor.renderControlCharacters": true, //制御文字を表示する
"editor.dragAndDrop": false, //D&Dでコードの移動をしないようにする
"editor.cursorStyle": "line", //カーソルの形状
"editor.cursorBlinking": "solid", //カーソルの表示形式
//--------------- ミニマップ（右）--------------------
"editor.minimap.showSlider": "always", //ミニマップのハイライトを常に表示
"editor.minimap.enabled":false, //ミニマップを表示するかしないか
//--------------- HTML --------------------
//<html lang="ja"> の言語をjaにしておいてくれる
"emmet.variables": {
"lang": "ja",
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
自分の学習の有効な方向性の間違いについて
今回コードを書きながら本読みを進めているこれは2周目なんです。
1周目はコードを書くことをせずひたすら本を読み進めてました。
自分は健常者と比べて興味のないものや苦手なものに対しての学習が非常に遅くなる性質を持ってます。
この教材では2.5時間でアプリを作るところまでできるそうです。つまり1周100ページ強を読むのに2.5時間、1時間あたり40ページ強ですね。
一方わたしはこの本を読むのに5日間=40時間ほどかかりました。1時間あたり2.5ページです。学習速度としては1/16倍ってところです。
2周目コードを書きながら読み進めていて今約60ページを10時間ほどで読みました。1時間あたり6ページなので、学習速度は1/6.67倍くらい。
1周目と比べて2.4倍速。早くなってます。
やはり健常者と比べるとまだまだ遅いのだとは思いますが、これでも自分の歴史では過去最高に近いほど早いです。
というのもどうやら今までの学習方法がわたしに合ってなかったみたいです。
今の学習の仕方は、書籍を買って読み進めています。この書籍は言語の仕様を説明するものではなく、むしろそれを一旦棚に上げてとりあえず一つ簡単なシステムを作り上げることに重点を置いています。一通り読み終えて見て、今までに見たことのない真新しいこの言語特有の仕様は4つしかでてきませんでした。
そして今までJava以外のPHP/LaravelやPython、C#、JavaScript、ReactNative、Kotlin、Flutterなどの学習は、公式ドキュメントなどの仕様書を読んでいました。
わたしはこの方法だと学習速度が1/100倍近くまで遅くなり、しかもほとんど覚えきれずにいました。
昔のことを思い返してみたら、まだ学生だったころJavaの指導をしてくれたLife is Tech!というプログラミングキャンプでは、電卓アプリとか電話帳アプリとかのとても簡単なアプリを、0から100まで作り方をまとめた用紙を読みながら作ってました。そして簡単なアプリを10つくらい作ってから、作りたいアプリを考えてそれに向けて自分で調べながら新しい目標に向けて作ってました。（しかし途中で詰まってしまい完成には至りませんでした。今思い返すと10つ程度じゃまだまだ経験不足でした。）
つまり自分は今回の書籍みたいに、とても簡単なシステムを言語仕様を深く考えず、とにかく作り上げれるものを使って場数をこなすことが、わたしの学習方針に有効だということを実感しました。
まだ2周した程度では頭に入りきってない感覚があるので、あと1,2周は読み直す予定で、時間ももう1,2週間はかかる見込みです。
1つの簡単なシステムを作るのに約20日、でもこれもおそらく数が増えるほどかかる日数も減っていきます。
今までの公式ドキュメントを3ヶ月読んでちんぷんかんぷんだった頃に比べたら、より実りのある3ヶ月になりそうです。
2周目終了しました
次の3周目はなるべく本を見ずに0から作り進めてみて、やり方がわからなくなったら本を見て確認するというやり方で進めてみます。
Discussion