What's New Qiita

20201018のReactに関する記事は6件です。

  • 投稿日：2020-10-18T21:07:10+09:00

【JavaScript・React】基本知識

JavaScriptやReactの基本となる概念について?

モジュール

コードを再利用しやすい形に細分化して影響範囲を狭めたもの。
違うモジュール同士なら名前が被ってもOK?なので、変数名や関数名が被ってしまう名前空間の問題を解決する。基本的にモジュールは１ファイルに1モジュール定義。

JavaScriptのモジュール形式

  • CommonJS ：Node.js(サーバーサイド)で使われるJavaScriptの各種仕様。
  • ES Modules ：JavaScript公式の言語仕様。今はこれが主流。

パッケージ管理システム

パッケージとは、コードの一部を使い回すために切り出したもの。
パッケージ管理システムではパッケージをいい感じでインストールし管理してくれる。　
例えば30個の依存関係のあるパッケージがあると、それぞれのパッケージがさらに依存関係を持っている、、、これをいい感じに管理してくれるのがnpm、yarn等のパッケージ管理システム。

主な機能
1. ローカル環境のパッケージを更新、検索
2. パッケージインストール削除
3. 依存関係の解決、必要な依存パッケージ自動インストール
4. 設定を書いて1-3を自動化

  • npm (Node package manager)
    Node.jsの標準パッケージ管理システム。(最近githubに買収された。)

    • package.json：インストールが必要なパッケージリスト
    • package-lock.json： 実際にインストールしたパッケージがどの依存関係を持っているかの記録。チームで共有することで環境を統一できる。node_modules、package.jsonが変更されると自動で作成、変更される
    • node_modules： ディレクトリの中に依存関係のパッケージが入っている。

  • yarn
    npmよりも高速なパッケージマネジャー。npmより厳密にモジュールのバージョンを固定でき、yarn.lockファイルで、各パッケージのインストールバージョンを固定できる。しかもnpmと同じpackage.jsonが使えるため、同一プロジェクトでnpmかyarnかなんて迷わなくてOK?:）
    https://classic.yarnpkg.com/ja/docs/install#mac-stable

ビルド

書いたコードを異なる環境で動かすための準備のこと。npmでインストールしたいろんな形式のモジュールで書かれたパッケージを使えるようになる。JavaScriptのビルドでは(Browserifyや)webpackが使われる。webpackではモジュールに加え画像やcssなども一緒にビルドしてくれる。

  • Browserify
    CommonJS形式で書かれたものをブラウザ向けにバンドル(変換)するツール。CommonJS形式で書けばBrowseryで変換することでブラウザでもNode.js向けのパッケージが使えるようになった。ブラウザでもnpm(CommonJS形式のパッケージがメイン)が使われるようになった。

  • webpack
    Browserifyの上位互換バンドルツール。JavaScript向けのファイルのみでなく、対応するローダーを使ってバンドル(変換)すればHTML,CSS,画像などを読み込めるようになる。ES Modulesにネイティブ対応。
    https://webpack.js.org/

コンパイル

開発時はブラウザで動かないコードを、ブラウザで動くように変換しJavaScriptにする機能。バンドルはモジュール依存関係解決に焦点、コンパイルは事前に変換する機能である。
ES2015の新機能を古いブラウザでもバンドル(トランスパイル)して動くようにしてくれるのがBabel。webpackと併用しコンパイルで事前に変換することでモジュールと依存関係を解消し、かつ、ES6の新しい機能も使えるようになった。
Reactだと、そのままでは動かないjsxファイルを、事前にコンパイルして変換すると、ブラウザで動くようになる。このようにいったんバンドルやコンパイルを挟むことがjQueryと違うところ。

  • Babel
    ReactのJSX(JavaScript XML React)というJavaScriptの拡張版でXMLを出力すると、Babelが自動でJavaScriptに変換してくれる。?
    他にもNodeでは認識されるES6のconst foo = <div> を標準的なvar foo = React.createElement() に変換してくれる。??
    以下のページの左側にXMLを入力すると、右側にリアルタイムでJavaScriptが表示される https://babeljs.io/ JSXを使うことでHTMLのような書き方でh1タグが作成できる。
//JSXでのh1タグ
import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello!</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-18T13:26:00+09:00

【React①】Reactの概要からhello-worldまで

Reactの概要

React公式
Facebookが開発したUIパーツ構築に特化しているJavaScript用ライブラリ。Facebook、Yahoo!、Uber、Airbnb、Slack、Netflixなど有名企業で採用されていて、今後のデファクトスタンダードになると期待されるライブラリ。

3つのコンセプト

  • Declarative
    条件と結果が明確にコードに記載される。JavaScriptと異なる点である。従来の命令型のように、欲しいUIを頭の中で一度整理して、main要素を作って次はinput要素を作って初期値にfooを入れて、、という命令に変換しなくても、「アプリの内部状態がこの状態だったら、この見た目にする！」と宣言するように実装できる。

  • Component-Based
    アプリケーションの構成要素を小さい部品(コンポーネント)の集合として考えて設計し、機能を小さい部品に分割して持たせる。部品化することで保守性を高め、再利用できるようになる。

  • Learn Once, Write Anywhere
    新しい機能を追加しやすいため、開発の途中から利用されることを想定して開発できる。また、モバイルアプリ開発ではReact Native、VR開発ではReact VRフレームワークで開発することができるなど、拡張性が高い。

特徴


  • レンダリングが高速

    DOM（Document Of Model）とはHTMLにアクセスする窓口の役割を果たす。DOMを生成してHTML構造や見た目を作ったりコンテンツを変更することができる。Reactでは仮想DOMという技術で、Webページ内の一部を更新したいときに全てページをまるっと更新するのではなく、更新された一部のみを変更することができる。パフォーマンスが良いため、SPA（Single Page Application）に必要な高速な動作速度を実現できる。

  • 大規模なアプリケーション管理が容易
    多数のコンポーネントの再利用化ができ、管理がしやすい。レンダリング（コンポーネント指向の機能）とその他の機能も別々のモジュールとして開発されている。

  • 可読性が高い
    JSXを使用することでHTMLを書いているかのようにReact内に組み込むことができる。更にTypeScriptを使えば厳密に型チェックも可能。

  • 流行のUIパーツが提供されている
    google標準で使われているMaterial-UI を始め、ButtonやForm、Table等の良い感じのUIパーツが提供されていて、Reactコンポーネントとして簡単にインポートして扱える。

開発環境の準備

1. Node.jsの最新版をダウンロード

以下のページから最新のLTS（long term support）をダウンロード。
Node.js

ターミナルでNodeのバージョンを確認。

$ node -v

2. yarnをインストール

Nodeのパッケージマネジャーであるyarnをインストール。
Node.jsをダウンロードした際に標準でダウンロードされているnpmよりも高速化つ信頼度が高い。
これらのパッケージマネジャーを使用することで、依存関係を解消できる。

$ npm install --global yarn
$ yarn --version

パッケージ管理システムについては以下参考
【JavaScript・React】基本知識

主な機能
1. ローカル環境のパッケージを更新、検索
2. パッケージインストール削除
3. 依存関係の解決、必要な依存パッケージ自動インストール
4. 設定を書いて1-3を自動化

3. 作業用にGithubリポジトリ作成

作業用にリポジトリ作成し、ローカルにgit cloneしておく。
GitHub

sample.gitをローカルのplaygroundというディレクトリにcloneする場合、

$ git clone sample.git playground

4. create-react-appをインストール

Facebook社が開発したreactのboilerplate(雛形)であるcreate-react-appをインストール。
これで、従来Bubbleやwebpack等様々なパッケージをマニュアルでインストールする必要があった問題が解消されている(ようです)。

$ yarn global add create-react-app

※npm5.2以降、Node.jsがあれば以下のコマンドでcreate-react-appインストールからplayground環境構築まで一気に終わる！?‍♂️

 npx create-react-app playground

create-react-appの構成
create-react-appすると以下のディレクトリができる。

  • src:コンポーネントを作るJSファイル置き場

    • src/App.jsを変更すると画面が切り替わる
    • src/index.jsでDOMを使ってsrc/App.jsを呼び出し、root要素に置き換えている

  • public：HTMLファイルや設定置き場

    • public/index.jsの<div id="root">がsrc/index.jsで置き換えられている
    • この中身がReactのコンポネントになる
    • faviconやロゴ

  • build：本番環境用のファイル生成場所

    • npm run buildでビルド後、webpackでsrcとpublicがバンドルされる
    • cssやjsは複数出力されず、一個にまとめて出力

hello world が表示されることを確認して完了！

playgroundというディレクトリにGithubリポジトリをcloneした場合、

$ create-react-app  ../playground
$ yarn run start
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-18T12:32:12+09:00

ReactアプリをGitHub ActionsでPagesにCDする

  • 個人で開発する分にはCodesandbox等々でもデプロイされたアプリをプレビューできますが、構成管理としてちゃんとリポジトリのmasterに入っている成果物の出来を確認しておきたいという場合や、チームで開発する場合には有効かと思います。
  • アプリケーション、及びパイプラインの定義ファイルはこちらのリポジトリに格納しています。

はじめに

前提

  • 環境
    • ローカル：Windows 10 Home
    • Gitリモートリポジトリ：GitHub
    • Reactアプリ開発環境：Codesandbox
      • ブラウザ上でコードの実装とリアルタイムプレビューができる開発環境です。GitHubとも連携できます。無料。
  • 知識
    • Gitはわかる
    • GitHub Actionsがどんなものかはざっくり知っている
    • JS、ReactについてHello Wolrdレベルには知っている

実現したこと

  • GitHubリポジトリのmasterブランチにReactアプリのソースコードをプッシュすると、それをトリガーにしてGitHub Pagesにアプリがデプロイされる（つまり変更を勝手にデプロイしてくれる）
    • Reactのアプリの中身自体はHello World程度です。
  • PagesのURLにアクセスすると、デプロイされたアプリをブラウザから確認できる

やったこと

  • CodesandboxでReactアプリを実装
  • GitHubリポジトリの作成
  • .github/workflowsにパイプラインを記述したyamlファイルを作成
  • pagesで見えるようにするための作業
  • 動作確認

CodesandboxでReactアプリを実装

  • Codesandboxにアクセス
  • Create Sandboxから、Reactのテンプレートを選択
  • Hello World的なReactアプリが生成される sb1.png
    • jsを編集して保存するとそのプレビューが即座に右側に表示されます。
  • メニューからGitHubっぽいマークを選び、Export to new GitHub repositoryを選択。適当にリポジトリ名を入れるとGitHub側にリポジトリが作成され、ソースコード類が格納されます。

.github/workflowsにパイプラインを記述したyamlファイルを作成

アプリのソースコードのmasterブランチへのプッシュ・マージをトリガーとして、reactのビルド成果物をPagesに自動デプロイするための処理を作成します。
ここでやろうとしているのは、Reactアプリをyarn buildでビルドし、ビルド成果物フォルダをパブリッシュするという処理です。

  • リポジトリ直下に、.github/workflows/deploy-to-pages.ymlを作成します。
    • ymlファイル名は任意です。
  • 以下のような感じでdeploy-to-pages.ymlにパイプラインを定義します。
name: deployment to pages

# masterブランチへのプッシュをトリガー設定
on:
  push:
    branches: [ master ]


# 実行する処理の設定
jobs:
  build-deploy:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    steps:
      # ソースコードを取得
      - uses: actions/checkout@v2

      - name: setup node
        uses: actions/setup-node@v1
        with:
          node-version: "12.x"

      - name: cache dependencies
        uses: actions/cache@v1
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-node-

      # パッケージのインストール
      - name: install
        run: yarn install

      # Reactアプリのビルド
      - name: build
        run: yarn build


      # ビルド成果物をpagesにデプロイ
      - name: deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build
  • 最後のデプロイステップで使っているpeaceiris/actions-gh-pagesは、GitHub ActionsでGitHub Pagesにデプロイすることに特化したアクションです。

pagesで見えるようにするため作業

GitHubでPagesを有効化

  • 前準備としてGitHubでgh-pagesブランチを作成しておきます。
    • デプロイ時に使っているpeaceiris/actions-gh-pages@v3では、公開対象のビルド成果物をgh-pagesブランチに格納するので、その前準備としての作業です。
  • GitHubリポジトリのsettings→GitHub Pagesで、gh-pagesブランチの公開を有効化します。
  • これで、https://<ユーザーアカウント名>.github.io/<リポジトリ名>/にアプリが公開されます。
    • URLを変える方法はありますが、ここでは割愛し、デフォルトで生成されるURLを使います。

HTMLが外部のJSを読み込めるようにする

  • HTMLが外部のJSを読みこむ際には、そのJSを相対参照で指定する必要があります。
  • 元のReactアプリをそのままビルドすると絶対パスになってしまい、JSが読み込めません。
    • <script src="/./static/js/2.b06abf86.chunk.js"></script> ではだめで
    • <script src="./static/js/2.b06abf86.chunk.js"></script> と書かなければいけません。
  • それを解消するために、package.jsonに以下のように"homepage": "./",を追記します。
{
（前略）
  "main": "src/index.js",
  "homepage": "./", 
  "dependencies": {
    "react": "16.13.1",
（後略）
}

動作確認

必要な設定が全て終わったので、動作を確認してみます。

  • deploy-to-pages.ymlとpackage.jsonの変更をmasterブランチにプッシュします。

  • 自動的にdeploy-to-pages.ymlに記述したパイプラインが走り出します。

    • それぞれのステップが、deploy-to-pages.ymlのname:属性で定義したものに対応しています。 gh3.png

  • 正常に終了すると、gh-pagesブランチが生成され、そこにyarn buildの成果物が格納されます。

  • しばらく待ってhttps://<ユーザーアカウント名>.github.io/<リポジトリ名>/にアクセスすると、Reactアプリの画面が表示されます。
    pg1.png

  • 試しにソースコードの一部を変更して、フォースと共にあらんことを祈ってみます。

    • Codesandbox上はこのようにプレビューされ、 sb2.png
    • プッシュすると、再びパイプラインが走り、 gh4.png

  • Pagesにも自動的に変更が反映されます。
    pg2.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-18T11:58:09+09:00

Jotai: 状態?! 日本語っぽい名称のReact用ステート管理ライブラリ

はじめに

本記事ではJotaiというReactのライブラリを紹介します。名称は日本語の「状態」から来ています。最近、Zustandというライブラリのメンテナスを任されているのですが(紹介記事)、その議論の中でZustandの枠には収まらないアイデアが出てきて、じゃあもう一つ作ればいいじゃん、となりました。Zustandはドイツ語の「状態」なのですが、誰かが日本語の「状態」を調べて、Jotaiって言うんだ、npmでもまだ使われていないパッケージ名だ、となりました。

そんなこんなで9月にリリースしました。リリース時のツイートがこちら

Jotaiとは

Reactのステート管理のライブラリです。一言で言うと、Recoilに近いです。人によってはほぼ同じと言う感想を持つ人もいますし、人によってはRecoilのAPIは複雑すぎるけどJotaiのAPIはシンプルで違うと言う感想を持つ人もいます。JotaiはRecoilにインスパイアされて作られていますし、あえて似せている部分もあります。しかし、背景は少し違います。JotaiはContext APIのパフォーマンス問題を解決することが目的で、その際のAPIとしてatomが都合良かったということです。atomモデルのAPIを実現するだけであれば、ZustandのようにContext APIではなくReactの外にstoreを作る方が筋がいいかもしれません。

JotaiのAPI

JotaiのAPIはuseStateやuseContextに似ています。Jotaiが提供するAPIは Provider, atom, useAtom の3つです。ProviderはContext Providerのように使いますが、全atomで共通でありpropsを受け取りません。atomはatom(の設定オブジェクト)を生成します。useAtomはuseContextのように使いますが、contextの代わりにatomを指定します。

import { Provider, atom, useAtom } from 'jotai';

const textAtom = atom('hello');

const Component = () => {
  const [text, setText] = useAtom(textAtom);
  return (
    <input value={text} onChange={e => setText(e.target.value)} />
  );
};

const App = () => (
  <Provider>
    <Component />
  </Provider>
);

textAtomは他のコンポーネントでも使うことができます。その際はuseStateとは異なり値はProvider内で共有されます。

useStateからuseAtomに変更する例はこちら

派生atom

上記の利用方法だけでも一定の有用性はありますが、atomの有用性は派生atomにもあります。派生atomは、すでに定義されている一つまたは複数のatomから、新しいatomとして定義するものです。例えば、先ほどのtextAtomから次のような派生atomを作ることができます。

const uppercaseAtom = atom(get => get(textAtom).toUpperCase());

uppercaseAtomはtextAtomが変化した際にのみ再評価されるため、それをuseAtomで利用するコンポーネントの再レンダリングが最小限に抑えられます。

リポジトリ

GitHubのページはこちらです。

https://github.com/pmndrs/jotai

基本的な使い方はREADMEにコンパクトに書かれていますのでぜひご参照ください。

紹介YouTube

YouTubeに紹介動画を上げてくれた方がいるので、合わせてご覧ください。

おわりに

本記事では、あまり詳細な使い方に踏み込まず表面的な紹介をしました。興味がある方はまずこの基本的な使い方から試してみてください。より詳細なトピックとしては、atomの書き込みのカスタマイズ(writable atom)、非同期処理(suspense)やConcurrent Mode対応などがあります。少し触って慣れてきた後に試してみるのが良いでしょう。

質問などありましたら、お気軽に〜。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-18T10:33:47+09:00

大学の研究室配属選考での自己アピールのために製作物をGitHubで公開してみた話

経緯

大学の情報系学科に通っている大学3年生です！
私の通っている大学・学科では、3年生の後半(10~11月)に研究室配属があります。

この研究室配属では、各研究室が成績+面接等によって希望者の中から配属者を選考するのですが、面接では研究への興味・プログラミング能力・継続力・学習意欲などの自己アピールを求められます。そして、ここで重要なのは自己アピールにはGitHub等にあげた製作物も利用することができるという点です。

今回、私も研究室配属選考に備え、自己アピールに使うために過去の製作物をGitHubで公開し、「せっかく公開するんだったら記事でも書いてみようかな」と思って記事を書いて見ました。

製作物

Qiita_for_iOS

iOS開発の学習のために作成した俺得Qiita閲覧アプリです。
image1.png image2.png image3.png image4.png image5.png
  • 記事の閲覧・検索やLGTM・ストック、ストック記事の確認などができます。
  • Qiitaの公開APIを使用
  • iOS13のキャッチアップを兼ねて作成したので、UICollectionViewCompositionalLayoutやProperty Wrapperなどを盛り込んでいます。

discord_clone_firebase

React開発の学習のために作成したチャットサービスDiscordのクローンアプリです。

デモ: https://discord-clone-36c89.web.app/
※ ユーザー名の入力が求められますが、「test」等を入力していただければ大丈夫です。

image1.png

  • メッセージ送信, 画像・ファイル送信, AddReactionなどができます
  • バックエンドにFirebaseを利用
  • React + Typescript + React Hooks

大学2年生以下の開発者様へ

製作物があると自己アピールに使える武器が手に入るので、作っておいて損はないと思いますし、研究室配属選考に限らず、その自己アピールが使えるケースも多いのではないでしょうか。

私の場合は製作物がiOS, Reactアプリケーションなので研究内容に直結しにくいですが、それでもプログラミング能力・継続力・学習意欲などのアピールになると思いますし、更に近年は機械学習・画像処理・音声認識などの比較的研究に関連しやすい分野も個人開発で手を出せるので、製作物で研究への興味や経験をアピールすることも可能だと思います。

もし、大学2年生以下で開発をしているのであれば、1つで良いのである程度形になった・公開できる製作物を作っておくと研究室配属で役に立つかもしれません！！

まとめ

(大学の先輩から聞いた話なのですが)
研究室配属選考の面接だと、「〇〇に興味があります。」 「プログラミングは得意です。」等の口頭での自己アピールのみの学生も多いらしく、その中で「〇〇に興味があります。〇〇を作りました。ソースコードはGitHubに上げてあります。」 「プログラミングは得意です。〇〇を作りました。△△にリリースしてあります。」と言った様に 製作物という証拠と一緒にアピールをすると信憑性が高く評価されやすい みたいです。
もちろん今までの成績も評価されますが、成績のみで全てを決める場合はむしろ少ない様です(?)。
やはり、自分がやってきたことのアウトプットは大事だなと思いました。

今回、自分の過去のリポジトリで公開できる物を探したところ、とりあえずできそうだったのは2つでしたが、これを機にこれからは製作物をよりPublicに発信して行こうと思います。
私も研究室配属選考で勝ち残れる様に頑張ります！！！

客観的評価がついているとより強いと思うので、製作物が良いと思ったらリポジトリにスターください(小声)(願望)(切実)

おまけ

GitHubのプロフィールも作成し、それっぽくしてみました！

https://github.com/kntkymt

スクリーンショット 2020-10-17 12.21.39.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-18T06:22:56+09:00

Railsでポートフォリオを作成後、React/Express/TypeScriptでポートフォリオをつくるまで

まえがき

ちょっと前のお話ですが、Railsチュートリアル→RailsでPF作成後、React・Express・TypeScriptでポートフォリオを作成しました。
(機能的にはペラペラです。)
せっかくなので、その時の学習順序をまとめておきます。
現在、web系のベンチャー企業でアルバイトをしています。説得力はあまりありませんね。
ちなみに、私は本で学習するのが個人的に合っていたので、PF作成までは本(Kindle)で学習しました。
webで勉強するなら、ReactはReactチュートリアルが有名だと思います。
TypeScriptはこんな感じ...?
TypeScript学習ロードマップ
https://qiita.com/irico/items/33744e15a4e0ca52d6bc
私の例は、あくまで一例としてご参考にしてください。

フロントエンド
https://github.com/momonoki1990/house_work_memo_front
バックエンド
https://github.com/momonoki1990/house_work_memo_back

サービス
https://house-work-memo-front.herokuapp.com/
(Herokuのフリープランで定期モニタリングも解除したので、起動がめちゃ遅いです(1分くらい?))
(表示が変な場合は、バックエンドの起動に時間がかかっています。そのままお待ちいただくと表示されます)

さきに総括

JavaScript(『JavaScript本格入門』)(20時間)
バックエンドJS(『Node.js 超入門』など)(40時間)
React(『React.js & Next.js超入門』など)(30時間)
ReactとExpress連携など(20時間)
TypeScript(『速習TypeScript』など)(50時間)
→ここまで1ヶ月(160時間)

企画・調査1週間(40時間)
作成2週間(90時間)
→PF調査・作成計3週間(130時間)

合計290時間

※時間は、過去の自分のツイートやTogglで計測した値を四捨五入しています。
※事前に、Rails・AWS・Docker・CircleCIを使ってポートフォリオを作成しています。
こちらは、学習に1ヶ月(180時間)、PF作成に2ヶ月(470時間)かかっています。
それぞれの期間、在職だったり無職・一部就業だったりしますので、期間より時間の方が参考になるかとおもいます。
フルコミットのときは、8時間/日くらいだったとおもいます。

ちなみに、技術選定の理由は、志望先企業が使っていた技術であり、個人的にSPAやJavaScriptに興味があったからです。
個人的に「書籍で勉強するのが合っているな」とおもったのは、『プロを目指す人のためのRuby入門』(俗に「チェリー本」)がめちゃくちゃおもしろかったからです。

JavaScript本格入門

Railsでポートフォリオを作っていたときは、JavaScript自体、なんとなく書いている感じがあったので、勉強しました。
『JavaScript本格入門』はJavaScriptを網羅的に勉強する定番本のようで、本屋に行っても大体置いてある気がします。
実際、網羅的でわかりやすかったです。
文法の説明の部分に関しては、ハンズオンという感じではないので、さくっと読み流す感じでいいと思います。

www.amazon.co.jp/dp/477418411X

Node.js 超入門

Node.jsはJavaScriptの実行環境です。フロントエンドでも使われるんですが、「バックエンドをJavaScriptで構築」といった意味で、使用言語に「Node.js」と書かれていることもある気がします。
『Node.js 超入門』は、ハンズオン形式で一から積み上げてアプリケーションを作っていくので、非常にわかりやすく楽しかったです。
ただ、こちらでは「Bookshelf」というORマッパー(DBとのデータのやりとりのためのライブラリ、RailsだとActive Record)を使っていますが、私はPFでは「Sequelize」というものを使いました。

ちなみに、Passsportというのはユーザー認証のためのライブラリで、PFでは結局実装しませんでした。
(Reactでユーザー認証関係って、どのライブラリが一般的なんでしょうか？調べてもあまり出てきませんでした)

www.amazon.co.jp/dp/4798055220

React.js & Next.js超入門

『Node.js 超入門』と同じ掌田津耶乃さん( https://www.amazon.co.jp/%E6%8E%8C%E7%94%B0%E6%B4%A5%E8%80%B6%E4%B9%83/e/B004L5AED8/ref=dp_byline_cont_pop_ebooks_1 )の本です。
同じようにハンズオン形式で手を動かし、段階的にReduxなどを導入しながらすすむので、非常におもしろく楽しかったです。

Express, Reactでそれぞれ簡単なアプリケーションを作ったあと、ExpressとReactを連携させて、また簡単なアプリケーションをつくりました。
上記ツイートの通りですが、「React.js超入門」の復習が不十分なままExpressとReactを連携させようとして、一度失敗しています。

www.amazon.co.jp/dp/B07X7DHZ9F

TypeScript導入

『JavaScript本格入門』と同じ山田 祥寛さん( https://www.amazon.co.jp/%E5%B1%B1%E7%94%B0-%E7%A5%A5%E5%AF%9B/e/B004LR8730/ref=dp_byline_cont_pop_book_1 )の書籍です。
こちらは、『JavaScript本格入門』よりだいぶさっくりしていますね。。。文法のみなので、読み流す感じでいいとおもいます(私も読むのに8時間しかかけていません。)

とはいえ、このあとTypeScriptをバックエンド・フロントエンドにそれぞれ導入するのに40時間くらいかけていたみたいです。Google検索で調べながらだったとはおもうのですが、時間だけ見ると他のよりだいぶ時間がかかっているようなので、もうちょっと良い学習方法はなかったかなとおもっています。

www.amazon.co.jp/dp/B086JKVGPB

企画・調査

1週間弱かけました。ツイートが残ってないのでわかりにくいですが、上記ツイートで学習を完了しているのが2020年7月14日、ポートフォリオの作成自体は7月中に終わらせると決めていたので、「結局何もつくれなかった」ということになるのがめちゃくちゃ怖かったですね。
なので、機能は最小限に限り、とにかく何かしら形にすることをめざしました。
Railsで作ったポートフォリオのデザインがダサすぎたのでなんとかしたかったのですが、かといってデザインを多少でも勉強する時間はありませんでした。
Reactのデザインライブラリには、最も有名なMaterial UIと、Reactの時も使ったBootstrapのReact版があり迷いましたが、好奇心がまさってMaterial UIを使用しました。
結果的には導入も簡単で、一定の仕上がりになったのでよかったです。

あと、DB周りが不安だったので、すっきりわかるSQL入門( www.amazon.co.jp/dp/4295005096 )を設計関連の部分だけ読みました(5時間)

PF作成

2週間弱、というかTogglを見てみると、10日間で作っていたようです(チャート(Chart.js)をあとで足しているので、大体2週間ということで)
失敗できなかったので、めちゃくちゃ焦っていましたが、なんとか大きな失敗もなく、7月中に完成させることができました。
ただし、理解が不十分なままだったところも多かったので、これはちょっともったいなかった気もします。

まとめ

以上です。転職活動自体は、またいずれまとめたいとおもいますが、主にReactの引きがよかったです。
私の場合、一度RailsでPFを作成したあと、転職活動に専念している時期がある(緊急事態宣言直後)のですが、応募先企業の方も「なんかよくわからないけど、みんな(応募者が)Railsばっかりなんだよね」と言っていたくらいで、差別化がむずかしいように感じていました。
(それでも、Ruby&Railsは未経験転職の王道だと思いますし、その時の私の失敗理由は主に面接対策でした)
Wantedlyで未経験者が応募しそうな案件を見ていると、一時期におおよそ50人くらい競合がいたようなが気がします。
(具体的には、未経験者が応募しそうな新規求人に1,2ヶ月で50~80人くらい応募していたような？)

個人的には、勝又健太さん(@poly_soft https://www.youtube.com/channel/UC_HLK-ksslL-Z_2wiIZDlMg )のロードマップに乗って一度目の転職活動に臨んだものの、私の面接対策での失敗などもあって、結果も出ず、まだ自分なりに試行錯誤した感じもなかったので、もう一度新たにポートフォリオを作り直して、転職活動を行いました。
結果的にはいろいろあって現在アルバイトですが、いまのところ望んでいた環境が得られたように感じています。

書籍で勉強しているのでちょっとおすすめする自信は無いですが、どなたかのご参考になればとおもいます。

※いままで計測してばかりで初めてデータを振り返ってみたのですが、Toggl、めっちゃつかいやすいですね。。。
(正しくはToggl Track、時間管理ツールです。最近サービスが増えて名前が変わったみたいですね。 https://toggl.com/ )

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧