プログラミング・IT React Typescript プログラミング

【プログラミング学習録】React+Typescript入門!

プログラミング・IT
この記事は約4分で読めます。
スポンサーリンク
ふらもん
ふらもん

ご訪問ありがとうございます。ふらもんです。

ProgateにReact.js演習があることをきっかけにReactについて調べたところ、こりゃいいとなり、ReactでWEBサービスを作ることに。ProgateのJavascriptとReactコースを終わらせたので、実践的なReactに挑戦することにしました。

ふらもん
ふらもん

今回はその記録を残しておこうと思います!

スポンサーリンク

React+Typescript入門

Homebrew改善

なぜか動かない

まずHomebrewを使い開発環境を整えようとしましたが、ここでHomebrewでnpmがインストールできないという罠にはまりました。

エラーコードを色々調べて回ったところ、以下のサイトを発見。

brew doctorで出たエラーの対処方法
自分の環境で出たエラーの対処方法 原因は色々あるので個々に記述する。

brew doctorと言うコマンドを使って調べられるエラーの解決方法が載ったページ。

これを使いエラーを解決しましたが、まだインストールできず。

Gulp installation issue
Hi John! Thank you for response! Yes Command “npm prefix -g” shows again: Error: EROFS: read-only file system, mkdir ‘/user’ TypeError: Cannot read propert...

ここにあるコマンドを試したところ、見事インストールできるようになりました!

Mac OS Catalinaを入れた時にファイル構成が変わったりRead Onlyになったりして、古いファイルが邪魔をしていたらしいです。

今回は英語サイトで解決したので、やはりプログラミングを学ぶ上で英語は必要不可欠だと再認識。英語を学びたいと改めて思いました。

ふらもん
ふらもん

手が回ってないけどね…

ReactにTypescript導入

[React][TypeScript]create-react-app + tslint + prettier - Qiita
## 概要 - create-react-appでtypescript版の雛形を作ってlinter/fomatterの環境を整えるまでの手順メモ ## 手順 ### 雛形生成 - create-react-appでtypesc...

上の記事を参考にReactをTypescriptで生成。これで開発環境が整ったと思ったのですが…

ふらもん
ふらもん

ESLintやPrettier入れるのに大苦戦したのは内緒な!

anyenvからnodenv入れるのに苦戦

anyenvからnodenv入れるときにややハマりした話 - Qiita
# anyenvを入れる node.js触る環境作ろうとしたとき、予てより気になってたanyenvから導入しようと思い立った。 ndenvとかでバージョン管理出来る概念を知った後にanyenvの存在を知って 「あ、ここがゴールやん」と...

下に紹介するReact本にあるnodenvを入れるのにまたも苦戦。installコマンドを入れても何も起こりません。

調べたところ、同じことが起こっている記事を発見。試したところ成功!nodenvが入りました。

ふらもん
ふらもん

調べるって大事!

Let’s Hack!

TypeScriptを使ってreactのチュートリアルを進めると捗るかなと思った(実際捗る) - Qiita
この記事を書いたのは2016年のことでした。それから2年。 いつの間にか日本語チュートリアルが消えたし、結構未だにいいねを押してくださるので更新することにしました。(2018/2/2) reactの本家ドキュメントが日本語化され...
りあクト! TypeScriptで始めるつらくないReact開発 第2版 - くるみ割り書房 - BOOTH
技術書典5で初頒布、BOOTH の同カテゴリで売上4位にランクインし、通算1千部を達成した React の本格的入門書の増補改訂版。 ほとんど全てのコードが TypeScript で書かれているのも特徴です。React を使う際に必要となる言語の知識や関数型プログラミングの考え方から、コンポーネントの原理、ルーティング...
りあクト! TypeScriptで極める現場のReact開発 - くるみ割り書房 - BOOTH
好評を博した React の本格的入門書『りあクト! TypeScriptで始めるつらくないReact開発』の続編。 「React 開発で綺麗な設計、綺麗なコード」というテーマはそのままに、ステップアップ編となる今作では、プロのエンジニアがチーム開発の現場で使える React の考え方や開発ツールを紹介しています。...

あとは本で勉強するのみ!

ReactとTypescriptで始める開発というドンピシャな本があり、これで勉強を始めることにしました。

まだ序盤ですが、恐ろしくわかりやすい神書です。

ふらもん
ふらもん

同人誌にこんなものがあったとは…

Gitも勉強

まずProgateで基礎を覚えたあと、GUI(Gitをグラフィカルに使えるアプリ)探しに。いろいろなところで勧められているSourceTreeを最初使おうと思ったのですがGithubと連携できませんでした。

どうも2段階認証していると連携がめんどくさくなるようです。なので別のGUIを探すことにしました。

色々候補があったのですが、私は扱いやすそうなことからGithub Desktopをチョイスしました。

GitHub Desktop を使ってみる - GitHub ヘルプ
プロジェクトの作業を管理するには、GitHub Desktopを設定しましょう。 GitHub.com、またはGitHub Enterprise Serverに認証して、アプリケーションの最新アップデートの取得、および設定の確認ができます。

Unityにも導入できるみたいなので、Unity開発を始めたら使ってみたいと思います!

【超初心者向け】UnityをGitHubで共同管理したい!【ざっくりGUI】 - Qiita
# 今日やること * (#今回の環境) * (#unityを共同で管理するということ) * (#そもそもgitやgithubって何) * [...

これからやりたいこと

これからの展望もまとめたいと思います。

Sass覚えたい

一通りReactが終わったら、今度はSass(モダンで書きやすいCSS)を覚えていきたいと思います。

モダンなWeb開発をやっていこうと思います!

ふらもん
ふらもん

これでも学習コストは少なめのはず…!

Node.js覚えたい

つい最近、Node.jsを使ってサーバーサイドプログラミングができる=JavascriptでWeb関連ならなんでもできてしまうと知り、これを覚えてしまいたいと思うようになりました。

MySQLやら覚えることが一気に増えますが、本やUdemy、相談サイトで乗り切りたいです!

ふらもん
ふらもん

まだ右も左も分かりませんが、コツコツやっていきたいです!

今後の学習法

メンターさんをつけることも考えましたが、とりあえず最初の難関である環境構築は乗り越えたので、本、Udemyなどで自走しつつ、どうしてもわからない時に人に聞くスタイルでいこうと思います。

幸か不幸か体力的な事情ですぐにはIT業界には就職できない+できなくても大丈夫なので、時にのんびり、時に急ぎつつやっていこうと思います!

ふらもん
ふらもん

サイト模写やらサービス作りをやっていきたいなー!

この記事を書いた人
ふらもん

Webプログラマー(志望)の謎の生物。趣味はお絵かきとゲーム制作。日々の成長記録をここに書き記しています。

ふらもんをフォローする
プログラミング・IT
スポンサーリンク
スポンサーリンク
スポンサーリンク
魔導研究棟

コメント

タイトルとURLをコピーしました