こんにちは。
最近だんだんと寒くなってきてキーボードを叩く指がうまく動かなくなってきましたね。
さて、最近の私はフロントエンド開発の勉強をしています。
フルスタックエンジニアを目指しているので苦手な分野も得意にしていかなければなりません。
とりあえず、フロントエンドに強い先輩が身近にいるうちにある程度の事は一人でこなせるようになっておきたいものです。
今私は、この間のステッカー付ArchLinuxでReactJSの開発勉強をしています。
入門生(自分のイメージ的には初心者以下)というだけあってかなり多くのところでドツボにはまりました。
幾度となく心が折れそうになりながらも未だ諦めず頑張っております。
ということで、自分がはまってしまった事について書いていこうと思います。
自分はまだ入門生なので至らぬ点が多々あると思いますがご了承ください・・・。
(間違い等ございましたら植物の新芽を労わるようにやさーしくコメントにて指摘していただけると幸いです)
自分の環境のまとめ。
- ArchLinu 64bit
- ThinkPadX220
- Linux中級者
- プログラミング初心者
- フロントエンド入門生
Qiitaなどの記事を見ているとフロントエンドの開発に携わっている人は、Macを使用している人が多いという印象を得ました。
そのせいでしょうか、「環境が違うからダメなのか・・・？」と思ってしまう事がかなり在りました。
まず環境構築でハマる。
私はとりあえずやってみるか。という人間なので、やると決まれば我武者羅に突っ走ります。
Qiitaで入門用の記事を上から順番に新しいタブで開いていきます。
1番目のタブから読み進め、
環境構築だ！
まずyarnという物をinstallします。
$ brew install yarn
はい、私はArchLinuxなので
$ sudo pacman -S yarn
と脳内補完してやります。
(npmを使用する方法もあります。)
$ npm install -g yarn
方法はなんでも良いですがYarnをInstallしたら、yarnコマンドでinstallしたコマンドを実行できるようにするためにPATHを通してあげます。
$ export PATH="$PATH:`yarn global bin`"
or
$ export PATH="$HOME/.yarn/bin:$PATH"
そしてshellが起動したときに自動的にPATHが通されるようにしてやります。
やり方は無数にあるので好きなようにやってください。
私はexport系はまとめて.xinitrcの中に書いてあります🤔
(ちなみにこの時私はなぜかPATHを通す作業をしなかった為に後々ハマりました。)
PATHを通してなくてyarnでinstallしたコマンドが実行できないハマりを経験した後、
その他の必要そうなパッケージをinstallします。
今はwebpackというものをinstallしている最中なんですが、
これがまた非常に長い。
Resolving packages...
webpack
から先に進みません・・・
これもハマりポイントでしょうか・・・？
(実はこの時、使うパッケージを複数まとめてinstallしようとしてました。1回キャンセルして1つずつやったら普通に行けました)
ついに実行だ！
環境構築も終わり、サンプルのコードを模写しました。
あとはサンプルの通りに実行をするだけです！
ここもハマりポイントです。
どうやら今見ているサイトではwebpackを使用して一つのファイルにして出力させるようです。
サイトの通りにwebpack.config.jsを書き、
$ node_modules/webpack/bin/webpack.js
を実行！！！！
そして出てくる、たくさんの赤文字。
そして私はPCを閉じた。
(原因究明中です。)
どうやらwebpackのバージョンが自分のPCとサイトで違うようです。
サイト側では３を使っていましたが、自分の手元ではwebpack 4.27.1が動いていました。
原因が分かったものの、webpackなんて名前しか知らない入門生には厳しく、
さすがに心が折れてしまい、Chormeのタブを閉じて不貞寝をしました。
果たして、この先どうなってしまうのでしょうか・・・。
サンプルコードでハマる。
話は変わって、Reactjsの公式tutorial。
codepen.io というサイトを使用してReactjsの使い方を学ぶのですが、
我武者羅に突っ走ってるとここでもハマります・・・。
これについては近々 codepen.io の記事を出すつもりなので、そこでまとめます。
コメントを残す