【超簡単】WindowsでReact.jsの開発環境を整える手順
皆さんこんにちは。
前回、WindowsでのWeb開発環境構築(前編)という記事を書きました。後編として、「Dockerとは」から「Ruby on Rails」の開発環境を構築する手順を紹介する予定でしたが、その前に昨今話題の「React.js」の開発環境構築が驚くほど簡単だったので、紹介したいと思います。
と、その前に前回の記事でおすすめのエディタ「Sublime Text 3」と紹介しましたが、さらにおすすめなエディタがでてきたので紹介させてください。その名も「Visual Studio Code」。Web開発されてる方はご存知だと思いますが、Microsoftからリリースされているフリーのエディタです。僕は現在Sublime Textから乗り換えて、こちらを使っています。高速かつ見た目がかっこいいので気に入っています。公式ページからダウンロードできますので興味のある方はみてみてください。
最近、Youtubeでnode.jsやReact.js、Vue.jsの入門動画をよくみているのですが、ほとんどの動画ではこのVisual Studi Codeを利用しています。それぞれのフレームワークやライブラリに対応したプラグインも豊富で、とてもおすすめです。ちなみに、Web開発だけでなくWindows Power Shellのスクリプト開発にも対応している点が僕的にはとてもプラスです。
さて、ここからはReact.jsの開発環境を構築していきます。構築といっても、簡単すぎてもう終わり？となってしまうほどです。手順としては2ステップあります。
- node.jsのインストール
- React.jsのインストール
これだけです。それでは順番にみていきましょう。
まず、node.jsをダウンロードします。LTSの最新版でOKです。
ダウンロードが終わったら、そのままインストーラを実行してインストールを完了してください。ウィザードはすべてデフォルトのまま「次へ」でOKです。
node.jsのインストールが完了したら、コマンドプロンプトで下記のコマンドを実行し、無事インストールされていることを確認しましょう。
それぞれ、バージョン情報が表示されれば成功しています。
node -v
npm -v
次に、React.jsをインストールしていきます。事前に開発用のディレクトリを作っておき、cdコマンドで開発用ディレクトリに移動してから以下のコマンドを実行します。
cd <開発用ディレクトリ>
npx create-react-app <任意のアプリ名>
インストールに成功すると、「Happy Hacking!」と表示されます。
これでReact.jsのインストールが完了です。あとはデフォルトのアプリが動いているか確認します。
cd <インストール時に入力したアプリ名>
npm start
ブラウザが勝手に開いて、以下のような画面が表示されるはずです。
※開いていたほかのタブやブックマークバーはマスキングさせていただきました。
エディタでReact.jsをインストールしたディレクトリを開いてみます。以下は僕が使っているVisual Studio Codeで開いた様子です。
これでReact.jsの開発環境が整いました！(ここまでは)簡単ですね！
すでに開発を始めることはできますが、以下の2つを追加しておくと便利です。
・Google Chromeのエクステンション「React Developer Tool」
Developer Tool利用時に「React」タブが表示されるようになり、コンポーネント情報等表示してくれます。
・Visual Studio Codeのエクステンションパック
開発環境が整っても、中身を書けないと意味がないですよね(笑)
僕は今、勉強しながらポートレートサイトを作成しています。
完成したらこのブログでも紹介したいと思っています。
ちなみに、英語ではありますが、今回の内容はReact公式サイトでも紹介されていますのでもしよければみてみてください。(むしろこちらが1次情報です)
以上、本日も最後まで読んでいただきありがとうございます！！
Windowsで無料でできるWeb開発環境の構築手順を解説します[前編]
皆さんこんにちは。
今日は、Web開発を始めるにあたってWindowsのPCで環境を構築する手順を紹介したいと思います。Web開発といえばMacを使っている方が大半だと思います。確かに、Linuxベースに作られているMacのほうが便利なのは事実ではあると思いますが、Windowsでも環境構築さえしっかりできれば、あとはMacと同じように開発を進めることができます。尚、本記事に記載している手順は現在Web開発をしている僕が実際に行った内容です。以下の3点です。
- フロントエンド開発の材料となる、Webデザインをするための環境構築
- HTML5/CSS3/Bootstrap4/Javascript等を使ったフロントエンドの開発環境構築
- Ruby on Railsを使ったバックエンドの開発環境構築(on Docker)
1本の記事ですべてを解説すると長くなりそうなので、2本に分けて紹介したいと思います。
今回は「1.フロントエンド開発の材料となる、ウェブデザインをするための環境構築」と「2.HTML5/CSS3/Bootstrap4/Javascriptを使ったフロントエンドの開発環境構築」の2点について紹介していきます。
■1.フロントエンド開発の材料となる、Webデザインをするための環境構築
僕がWebデザインをするために使っているのは、「Adobe XD CC」です。「Sketch」というツールが王道なのですが、Macでしか使えません。「Adobe XD CC」はAdobeに会員登録すれば無料プランで利用できますし、日本語での情報も豊富に公開されているのでおすすめです。
下記のURLからダウンロードできます。
※「体験版」と書いてありますがすべての機能を利用できますのでご安心ください。
ダウンロード後は、画面の指示に従ってインストールを進めてください。
Adobe製品は「Adobe Creative Cloud」と呼ばれるツールに統合されており、Xdもここからインストールされます。
インストールが完了してピンク色の「Xd」アイコンがデスクトップに配置されれば正常に完了しています。
Webデザインをするために僕が行った構築作業はこれだけです。あとは、Xdで新しいデザインページを作成していくことができます。デザインを行う際に便利なプラグインや小技がいくつかありますので、別の記事で紹介したいと思います。
■2.HTML5/CSS3/Bootstrap4/Javascriptを使ったフロントエンドの開発環境構築
<2-1.エディタ>
無料でフロントエンドの開発環境を構築する際にインストールしたのがGitが開発している定番のエディタ「Atom」です。こちらもXdと同様に、下記の公式サイトからダウンロードして画面の指示に従うだけでインストールできます。簡単ですよね？
「Atom」はファイルの拡張子によって、適切にコマンドの補完をしてくれるので開発スピードアップ+ミス削減につながる他、左のペインでフォルダ構成を表示してくれるので複数ファイルでの開発がとてもスムーズになります。
インストールが完了して起動できたら、「ファイル」→「環境設定」→「+インストール」を開きパッケージをインストールしていきます。たくさんの便利なパッケージが用意されています。とりあえず以下の8つを検索してインストールしておきましょう。
color-picker
pigments
maximize-panes
tag
emmet
file-icons
remote-edit
selection-highlight
ここまでAtomについて紹介してきましたが、僕は現在利用していません。最初はAtomを使っていたのですが動きが非常に重いことが多かったため、「Sublime Text3」という別のエディタに切り替えました。こちらは80アメリカドル支払うことで永久ライセンスを取得できるのですが、トップバーに「Unregistered」と表示されるのとたまにポップアップで買ってねアピールをされるのを気にしなければ、評価版として無料で使えます。超高速で動作しますので、インストールして利用してみることをおすすめします。
下記の公式ページからダウンロードできます。使ってみて気に入ったら、80ドル支払って気兼ねなく使いましょう。
AtomもSublime Textも最終的にはお好みで利用すればよいと思いますが、今のところ僕はSublime Textを利用しています。(ライセンスも購入しました。)
<2-2.ブラウザ>
さて、ここまでで1.ウェブデザインをして、2.HTML/CSS等でコーディングする、ところまでできる状態になりました。そのあとに必要なのが3.動作確認する、ために必要なのがブラウザです。Webアプリを利用するユーザがどんなブラウザからアクセスしてきても正常に表示されているか確認できるように、複数のブラウザをインストールしておくことをおすすめします。今回はWindowsでの開発ですので標準でインストールされている「Internet Explorer」、「Microsoft Edge」に加え、最近は特に一般的な「Google Chrome」、その他に「Firefox」をインストールしておくとよいと思います。また、端末依存で表示が変わる場合がありますので、iPhoneやAndroidがあるとより充実します。残念ながら、Appleのブラウザ「Safari」はWindows対応を終了していますので本ブラウザでの動作確認はMacかiPhoneでしかできません。AndroidについてはWindowsで動作するエミュレータ「Nox」をインストールして利用しましょう。
こちらからダウンロードでき、インストールするだけで動作します。
Noxのインストールが完了してandroidが起動してきたら、標準ブラウザに加えてここでも「Google Chrom」をインストールしておくとよいと思います。
ここまでで、「Webデザインをするところからブラウザで確認しながらコーデイングする」という一連の開発プロセスを実施できる環境が整いました。この環境があれば、静的なWebページやJavascript/jQuery等を利用した動的なWebページを開発することができます。
次回は後編として、Webアプリケーションの開発環境構築手順をご紹介していきます。
僕が行ったのは、Windows上にDockerでコンテナを作成して、その上にRuby on Railsをインストールするというものです。
今回の記事で紹介したアプリは「ダウンロードしてインストールする」だけで利用できましたが、次回は少し設定や操作が必要ですので、図を用いてより具体的に説明していきたいと思います。
本記事の内容について質問や意見がありましたら、コメント欄からお気軽にお問い合わせください。
今回も最後まで読んでいただき、ありがとうございます。
ブログを始めたのは、「いいこと尽くめ」だから
皆さんこんにちは。
今日は、僕がなぜブログを始めたのか書いておきたいと思います。
僕がブログを始めた理由は極めて単純です。
「いいこと尽くめだから」
です。
ではここから、なぜいいこと尽くめだと思うのか書いていきます。
- アウトプットしたいから
僕は社会人になってからいままでインプットしてばかりで、アウトプットする機会があまりないまま過ごしてきました。「アウトプット」はどんな方法であれ、目に見える形で成果物を作成することを指しています。もちろん、全くなにもしていなかったわけではありませんが、仕事柄、メールや電話、対面を含めてコミュニケーションを取ることはあっても、きちんとした資料を作る機会は決して多くありませんでした。加えて、プライベートな時間にももちろんそんなことをしているわけもなく、結果としてアウトプットをする機会が多くないまま今に至っています。
しかしながら、数少ない経験からも、アウトプットすることがメリットだらけであることはよく知っているつもりです。僕の場合はインプットだけの場合と比べて、アウトプットもすることで内容が身に染み付きやすいですし、目に見えたり、形のあるものが残ることで達成感があります。周囲の目にも見えるので、認めてもらいやすくなります。そこから次のアウトプットにつながることもあります。当然ながら、前のアウトプットで得た経験が積み重なるので、クオリティも上がります。当たり前の内容かもしれませんが、共感していただける方は少なくないと思います。
前回の記事で紹介したとおり、僕は現在IT企業でITインフラ関連の仕事をしながら、業務以外の時間にWeb開発関連の学習をしています。現在は趣味での学習にとどまっていますが、今後は収入源のひとつにしていきたいと考えています。お金を払っていただけるレベルに達するには、学習した内容がしっかりと身に付いている必要があります。このブログで学習した内容を記事にすることで、より加速度的に自分のレベルを上げることができると考えています。アウトプットのトレーニングにもなり、しかも、もし僕の記事を読んだ方がコメントを残してくださったり、継続的な読者になってくださったりしたら、更に僕のモチベーションはアップします。いいこと尽くめのスパイラルです。 - 自分が知っていることや思ったことを言語化したいから
このブログでは僕が学習したことや、思ったことを記事にしていこうと思っています。技術的な内容についてはもちろんですが、前回や今回のように僕自身の意見や考えもどんどん記事にしていくつもりです。自分の中に持っている知識や思考を言語化＝可視化することで1.にも記載したとおりより自分の身に染み付き、しかも形として残りので外部からも指摘してもらいやすくなりますし、自分自身でも違った視点から見てみることができます。もし読者の方からコメントやDMなどで記事に対する意見をもらって議論するようなことがあれば、質も上がります。自分で他の見方や考え方があることに気づいた場合でも質があがります。思っているだけでは、なにかのきっかけにはなりにくく、悪いこともないかもしれませんがいいこともありません。ブログを書くことはいいこと尽くめです。 - 英語力が上がるから
これは少しおまけ的な理由です。このはてなブログでは日本語で記事を書いていますが、実は英語版のブログも同時に立ち上げました。こちらです。
書いている内容はこのブログの内容をそのまま英訳したものです。単語や熟語を調べながらではありますが、Google翻訳をはじめとするツールには頼らず、自分で書いています。先述のとおり僕はいまアメリカに住んでいます。移住してきて4ヶ月ほど経過して気づいたことのひとつとして、正直英語は全くといっていいほど話せなくても生きていけます。Youtubeや他のブログでも紹介されているのをいけますし、僕も別の記事で触れようと思っていますが、留学=英語が話せるようになるというのは100％間違いです。少なくとも僕の場合は、英語を学ぼうとせずして上達しないと感じていますし、共感していただける方も少なくないと思います。少しでも英語に触れる機会を増やすことで、英語力の向上を加速させることができると思っています。しかも、ニューヨークで知り合った友人・知人にも紹介して読んでもらうことができます。ネイティブの友人は間違っていたら指摘してくれます。いいこと尽くめです。
前回・今回は僕自身に関する内容でしたので、次回は技術的な内容を紹介したいと思っています。ちなみに、このブログは週2回程度を目標に更新してこうと思っています。
最後まで読んでいただきありがとうございました。
私の略歴 -Who Am I?-
皆さんはじめまして、ざっきーと申します。
現在ニューヨークに住んでいますが、100%純正の日本人です。
エンジニアとして日系IT企業に勤務しつつ、業務時間外は興味のあることに時間を費やしています。
このブログでは、私が日々の生活で学んだこと、感じたこと、思ったことを記録すると共に
読んでくださる皆様に少しでも共有できればと考えています。
今回は初回ということで、まずは皆さんに私の事を知っていただくためにかなり大雑把ですが略歴を紹介します。
話が転々として読みづらいかもしれませんが、ご容赦いただければと思います。
略歴
1991年、北海道函館市に生を受けました。
トラック運転手の父と、専業主婦の母を持ち、二人の弟と共に所謂「ごく普通」の家庭で育ちました。
決して裕福とはいえなかったと思いますが、親戚を含め皆から愛され、幸せな家庭だと思っています。
家族の存在は今の私にとって大きな支えの一つです。
4歳の頃に両親の薦めで柔道を始めました。
結局27歳の現在も続けている、当時はなぜ
こんなに痛いし辛いし苦しいことをやらなければいけないのか理解できず、
やりたくない一心だったことを今でも覚えています。
柔道については今後の記事で改めて触れたいと思っています。
その後幼稚園、小学校、中学校とごく普通の楽しい生活を送りました。
当時から「なぜ人間は生きているのか？」考える機会が何度かありました。
これについても今後の記事で改めて触れたいと思っています。
当時からコンピュータや精密機械に興味があり、よく家電製品を分解して
戻せなくなったり、父親がもらってきたパソコンをいじっているうちにOSを
破壊して起動不可になったりしたこともあります。
当時はなにも理解していませんでしたが、とにかく触ってみたい一心でした。
中学も卒業が近づき、進路を決めなければなりません。
両親からの薦めと私自身の興味もあり、函館高専の情報工学科を受験することにしました。
国立なので授業料も比較的安く、しかも一番興味のあったコンピュータについて専門的に学ぶことができます。
しかし、当時の私の学力ではレベルが足りておらず、両親にお願いして塾に通わせてもらうことにしました。
その甲斐あって無事合格。高専ライフがスタートしました。
高専在学中は単位を落としそうになったこともありましたがITに関する基礎をみっちり学び、無事ストレートで卒業。
5年間柔道部に所属し、最後の高専大会では全国大会に進出しました。
その後都内にある大手IT企業に就職することになりました。
2012年の就職をきっかけに上京。埼玉県川口市の寮で20歳にして初めての一人暮らしを始めます。
家事に料理に仕事と慣れないことばかりで大変でしたが、住む場所、仕事、同期との出会いなどなど
新しいことだらけで、とても充実した日々だと感じていました。
3ヶ月の新人研修を経て、名古屋に配属が決まりました。
縁もゆかりもない地で、同期とも離れることになり孤独感はありましたが、
同僚のみなさんは暖かく迎え入れてくれ、カスタマーエンジニアとしてのキャリアを本格的に歩き始めます。
私が担当していたのは、メンテナンスエンジニアやフィールドエンジニア、カスタマーエンジニアなど
いろいろな呼び方があると思いますが、IT環境を使っている顧客のトラブル解決が主なものでした。
愛知・三重・岐阜の東海3県を中心に現地に駆けつけたり、リモートでの対応をしていました。
そんな同僚達に大いに支えられて、与えられた仕事はきっちりこなせるようになっていきました。
配属されて間もないころに一度顧客のシステムを停止させるという大きなミスをしてしまい、
相当落ち込んだのは今でも忘れません。それ以上に周りのフォローアップに感謝しています。
この頃から、「組織」や「会社」というものを意識し始めていたと思います。
資格の取得も継続して取り組んでいました。
新人研修で取得したCCENT、LPIC 1、CompTIA A+、MCA Associate。
私は高専時代にネットワークの授業を取っていたので、人事に頼み込んで一足早くCCNAを受験させてもらいました。
一度も落ちることなく、すべて高得点で合格していたので、少し鼻が高かったと思いますが
それが自身になり、どんどん先へ、上へと突き進んでいきます。
社会人2年目にはCCNP、3年目にはCompTIA Network+、富士通SPARKメンテナンスエンジニア、
NetApp ASE 2を取得。4年目にはCCIE R&Sに挑戦し始めます。
当時はヤフオクでCiscoのルータやHPのWorkstationなど機器を買い込んで環境を作り、
とにかく勉強しました。勉強方法については改めて記事にしたいと思います。
2016年4月にLab試験に合格。遂にCCIEの称号を手に入れました。2回めの受験でした。
これをきっかけに技術力には自信が持てるようになったと思います。
CCIEの学習をきっかけに、英語の学習も始めていました。
当時からIT関連の資料やマニュアル類は英語のものも多くあったので、必要性は感じていました。
CCIEは学習リソースを含め、試験もすべて英語で行われるということもあり、いい機会だったと思います。
英語学習についても今後の記事で紹介したいと思います。
CCIE合格後も英会話スクールや自己学習を継続し、日常会話であればなんとか問題ないレベルになっていたと思います。
英語の学習も兼ねて、ロンドンに1週間ホームステイしたこともあります。
技術力への自信と英語力の向上、入社して5年間同じ部署ということも相まって
更に向上したい思いが強くなり、転職を決意。上司に相談して、活動を開始。
そのまま同じ系統でSIerへの転職先を探すところから始まりましたが、
当時のトレンドや私の興味もあり、サイバーセキュリティ業界へ転職することに決めました。
2017年10月から横浜市に転居し、サイバーオペレーションセンター(SOC)への勤務を開始。
ポテンシャルを見込んで内定をいただいたのですが、
入社した組織がスタートアップ間もない上に、私自身未経験ということもあり
なかなか馴染みきれず、特に最初の数ヶ月は精神的に苦痛でした。
毎日会社に行く途中でなぜか腹痛になったり、土日も気分が優れないことが多くありました。
また、業務ではサイバーセキュリティに特化しすぎており、もっとIT環境全体に関わりたい思いもありました。
そんな中、Sier系列で私の経験を活かすことができ、ニューヨークorロサンゼルス勤務という
求人情報を見つけ、ダメ元で応募してみることに。落ちたら腹をくくってもう少し頑張ろうと思っていました。
結果3度の面接を経て、内定をいただきました。
無事にビザも取得することができ、2018年9月に渡米。
現在は組織としてあまり大きくはないので、インフラが主ですが
サイバーセキュリティも含めたIT環境全体に関わる仕事をしています。
また、業務以外の時間を使ってWeb開発に関わる学習も開始。
現在Webサービスを開発中です。
学習している内容は別の記事でも触れていきたいと思います。
以上、少し長くなりましたが、私の略歴をご紹介しました。
最後に保有資格と興味のある内容について少しまとめて、本日の記事は終わりにします。
皆様読んでいただき、ありがとうございました。
保有資格
CCIE#52xxx
CCIE R&S
CCNP
CCNA
CCENT
LPIC 2
MCA Platform
CompTIA A+
CompTIA Network+
CompTIA Security+
CompTIA Secure Infrastructure Specialist
CompTIA IT Operations Specialist
NetApp ASE 2
Fujitsu SPARK メンテナンスエンジニア
柔道初段
TOEIC 745
使用(したことがある)言語
日本語
英語
Python
Perl
C
Objective C
HTML + CSS with Bootstrap
Sass
Javascript / jQuery
Ruby
Ruby on Rails
SQL
TTMACRO
シェルスクリプト
ラダー
