はてなブックマーク

この記事はReact #2 Advent Calendar 2020の12日目の記事です 概要 最近はNext.jsばかり使ってますが久しぶりにCreateReactAppを使ってみたらreportWebVitals.tsという見慣れないファイルが生成されていたのを見たのが今日の記事のきっかけです Reactアプリの雛形生成ツールであるCreateReactAppはv4でWebVitalsの計測ライブラリがデフォルトで組み込まれるようになりました https://github.com/facebook/create-react-app/releases/tag/v4.0.0 せっかくなのでドキュメントに沿って少し試してみたいと思います ファイルの確認 まずは生成されたコードを見てみましょう create-react-appコマンドで雛形を生成します . ├── README.md ├──

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Jamstackという言葉をきくようになって久しいですが、最近改めてJamstackを学ぶ機会がありました 以前こんな記事も書きましたがライブラリやサービスを並べただけで何も分かってませんでした ようやくちょっとだけ理解してきたので、Jamstackの特徴やそれを支える仕組みをまとめます とりあえず流行りの構成を試してみただけの昔の自分へ届けてあげたい記事です Jamstackとは https://jamstack.org/ JamstackのJamはJavaScript/APIs/Markupの頭文字です JavaScrip

概要 Nodeでプログラムを実行する時に環境(dev/stag/prodなど)ごとに値が異なる部分はコードを修正せずに実行するため環境変数として埋め込むことがよくあると思います セットする環境変数が1つ2つであればコマンド実行時に設定すればよいですが規模が大きくなってきたらファイルでまとめて定義したくなるでしょう そんな時はdotenvを使うと便利です dotenvを使うと.envファイルに定義された値を環境変数として使うことができます また、システムの環境変数として値が設定されていればそちらを優先して使うということもできます なので、開発時はローカルで.envを配置し、本番ではホスティングサービスの機能で環境変数として設定するといった使い方をすることでリポジトリ内のファイルを変更せずに実行することができます Nodeスクリプトの実行時にdotenvを使う場合 シンプルな形でいうとinde

概要 SPAにおけるルーティングについて簡単に紹介します SPAを作ったことがない人が対象読者です 知ってる人からすると、そんな当たり前なことを・・と思うかもしれません SPAとは？ Single Page Applicationの略です 対義語はMultiple Page Applicationです つまり単一ページで構成されるのがSPAで、複数ページで構成されるのがMPAです SPAは最初に画面(HTML)を取得した後は、JavaScriptによって画面の書き換えを行うことで単一ページでありながらアプリケーションを構築することができます これは言い換えるとSPAはページ遷移しないということ？本当にそうでしょうか？ SPAはページ遷移しない？ 2つのデモページを用意しました https://spa--mdc-2019.netlify.com/ https://mpa--mdc-2019.

import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router, Route, Switch, useParams, useHistory, useLocation, } from 'react-router-dom'; function Hello() { const history = useHistory(); return ( <div> <h1>Hello</h1> <button onClick={() => history.push('/hello/react-router?message=hooks#test')} > Next </button> </div> ); } function HelloSomeone() { const history

はじめに 各プログラミング言語にはたいていパッケージを管理するしくみがあります RubyのgemだったりJavaのGradleやMavenだったり JavaScriptではnpmを使ってパッケージを管理します 新しいプログラミング言語をさわるときにパッケージ管理の仕組みを使いこなせることは、初心者から一歩踏み出せたと言っていいのではないかと思います この記事では初心者向けにnpm周りの使い方を紹介します 前提 npmコマンドはnodeをインストールするとセットでついてきます なので事前にnodeをインストールしておいて下さい https://nodejs.org/ja/ 依存パッケージの管理 npmの仕組みでは依存するパッケージの情報をpackage.jsonで管理します 例えばちょうど手元にあったReactアプリのpackage.jsonは以下のようになっています { "name": "

import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import useReactRouter from 'use-react-router'; function Hello() { const { history, location, match } = useReactRouter(); return ( <div> <h1>HelloWorld</h1> <p>{`pathname: ${location.pathname}`}</p> <button onClick={() => history.push('/react')}>Next</button> </div

概要 ReactNativeのアプリでWebViewを使う時に、Reactの世界とWebViewの世界でデータのやり取りをする方法を調べたのでそれの紹介 本題 WebViewとは スマホアプリの中にWebページを表示する仕組み ReactNativeのWebView ReactNativeではWebViewというコンポーネントが用意されている WebViewコンポーネントにURLを属性で渡すとアプリでWebページを表示できるようになる ViewとかTextとかのコンポーネントと同じ感覚で配置するだけで使える 何をやりたいのか アプリの中にWebViewを埋め込む時に相互にデータのやりとりをしたい WebView内で入力した情報をアプリ側で使用したいとか アプリ側で持っている情報をWebView内に埋め込みたいとか アプリ->WebView アプリからWebViewに情報を渡す方法 やり方

@Controller @RequestMapping("/players") public class PlayerController { @Autowired private PlayerService playerService; @GetMapping public String index(Model model) { model.addAttribute("players", playerService.findAll()); return "players/index"; } @GetMapping("new") public String newPlayer() { return "players/new"; } @GetMapping("{id}/edit") public String edit(@PathVariable Long id, Model model)

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

<form> <div class="form-group"> <label class="control-label">項目1</label> <input class="form-control" type="text"> </div> <div class="form-group"> <label class="control-label">項目2</label> <div class="radio"> <label><input type="radio" name="radio">選択肢1</label> <label><input type="radio" name="radio">選択肢2</label> <label><input type="radio" name="radio">選択肢3</label> </div> </div> <div class="form-gro