ゆずめも

メモ的なブログです。主に勉強した事について書いてます。

Intellij IDEAの設定を同期する

thinkpad上のubuntuで開発してたんですが、macに開発環境を作る際に設定が面倒で環境を同期する方法を調べました

同期方法

設定の同期方法には公式見てる感じ2種類あるみたいですが、今回はIDEの設定同期機能を使います

pleiades.io

設定

まず設定に使う"IDE Setting Sync"プラグインをインストールします

f:id:yuzu441:20190317114809p:plain

次は適当にプロジェクトを開いて、Fileメニューからを「Sync Settings to JetBrains Account」クリックし設定をjetbrainsのサーバーにアップロードします*1

f:id:yuzu441:20190317122858p:plain

ここでチェックボックスにチェックを入れておくと、プラグインの有効/無効も裏で同期してくれるみたいなので必要に応じてチェックを入れると良いと思います

f:id:yuzu441:20190317114833p:plain

確認

設定が完了したので、同期させたいPCでIntellij IDEAをインストールして確認します。手順としては上記の手順と同じで同期することが可能ですので特に書くことがないです

まとめ

今回はIDE設定同期機能を使ったんですが、チームなどで設定を共有するのであれば設定リポジトリ機能を使うとメンバーで設定を楽に共有することができるみたいですが別に自分の設定を共有したい気持ちが無いので、設定したくなったら試してみたいですね (なんかめちゃくちゃコミットされるらしいw)

*1:プロジェクトを開かずに設定同期の設定を行う箇所が見つけられなかったので知ってる人いたら教えてほしい

素振り環境にparcelのご提案

最近Reactを素振りするための環境として、前から話題になってたparcelを使ってみたらとても簡単に動作環境作れたのでその紹介

ja.reactjs.org

parceljs.org

githubに今回のコード等すべて置いといたので、読むの面倒な人はそちらで

github.com

環境作成と依存ライブラリインストール

前提としてnode.jsが動作する環境を作っている想定で話して行きます

適当にプロジェクトを作って、npmやyarnを使って以下のものをインストールする

# プロジェクトディレクトリ作成
mkdir test_proj
cd test_proj

# npm
npm init -y
npm i react react-dom
npm i -D parcel

# yarn
yarn init -y
yarn add react react-dom
yarn add -D parcel

srcディレクトリ等を作る

# ディレクトリ作成
mkdir src
mkdir view

# ファイル作成
touch src/app.js
touch view/index.html

Reactのコードを書く

雑に"Hello World"を表示するReactのコンポーネントを作る

// src/app.js
import React from 'react'
import ReactDOM from 'react-dom'

function App() {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('app')

読み込むhtmlを作る

さっき作ったReactのコードを読み込むhtmlファイルを作る

ここで注目するポイントは<script>タグでエントリーポイントのファイルを指定している部分で、parcelでビルドするといい感じにブラウザで動く状態に変換してくれる

<!-- view/index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React Sample</title>
</head>
<body>
  <div id="app"></div>
  <script src="../src/app.js"></script>
</body>
</html>

動かしてみる

作成したプロジェクトを動かしてみる

# npm
npx parcel view/index.html

# yarn
yarn run parcel view/index.html

上のコマンドを実行するとlocalhost:1234でサーバーが立ち上がり、"Hello World"が表示される

まとめ

ちょっと動かしたいだけなのにwebpackの設定面倒だなーと思ってたので、雑に試すならparcel最高だなと思った

まだ素振りと、ラズパイで動いてる雑なwebシステムにしか使ってなくてあんまりわかってないんだけど、一応productionコンパイル*1とかもできるみたいなのでちょっとずつ使ってみようと思ってる

reactのlazy load & suspenseを試してみた

ちょっとずつしか手が出せてなかったReact.jsをニートになったのを気に学び直している
その過程でReact.lazyとSuspense`をwebpackで試したのでそのログ

reactjs.org

tl;dr

コード自体はここに全部おいてある

github.com

動作チェック

動かすための方法はREADME.mdに書いてあるので、そちらを参照していただくとして
実行してページを開くと一瞬「Loading...」という文字が表示され、lazyロードしたComponentが読み込まれると「Happy Birthday Nogizaka46」*1という文字が表示されます

解説

パッケージについて

基本的には上記のgithubにおいてあるコードのpackage.jsonを見てもらうとして

今回dynamic importをしているので、babelでそれを扱うプラグインをインストールしている

babeljs.io

プロジェクトコード

componentをロードするときにReact.lazy(() => import(''))としてると、ファイルが分割されlazyロードすることができる

これで読み込んだcomponentを<Suspense>で囲うことで、dynamic import*2が読み込まれるまではfalllbackプロパティで指定した要素(今回の場合は「Loding...」という文字列)が表示され、ロードが終わるとcomponentが普通にレンダリングされる

import React, { Suspense } from 'react'

const Nogi = React.lazy(() => import(/* webpackChunkName: "Nogi" */'./Nogi'))

export default function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Nogi />
      </Suspense>
    </div>
  )
}

react-split-sample/App.js at master · yuzu-sandbox/react-split-sample · GitHub

まとめ

個人でやってるもののほんの一部に使っているだけで、Reactを仕事で使ったことがほぼなく、lazy loadが求められるほどパフォーマンスセンシティブなものを作ってないので、この対応がどこまで通用するのかはわからないがかなり簡単にコード分割が実現できるのでよかった

ただwebpackのこの辺↓と組み合わせるとどうなるのか気になるところなので、今度試したい

webpack.js.org

*1:お察しください https://twitter.com/yuzu_441/status/1098781354710294528

*2:要するにPromise