Electron + Reactでデスクトップアプリを作ろう！ - Qiita
Electronとは？ Electronは、HTML、CSS、JavaScriptを使って、MacとWindowsの両方で動くデスクトップアプリを作ることができるフレームワークです。ElectronはChromiumとNode.jsがベースとなっており、Chromeで動くページであればそのままデスクトップアプリ化させることも可能です。 作成したデスクトップアプリは、MacのAppStoreやMicrosoftのストアで公開することも可能です。 ■前回の記事 Electronを使ってMacとWindowsで動くアプリを作ってみる https://qiita.com/udayaan/items/dfb324bc6cadeb9a8f6f Reactとは？ Reactは、UIを作るためのJavaScriptのライブラリーです。Vue.jsと同じく、要素をコンポーネント化してUIを作れるため、メンテ
【入門者向け】React + Google Apps Scriptの開発環境を構築しよう
これからReact + GAS(Google Apps Script)の開発に挑戦しようという方が、スムーズに開発スタートできるように開発環境の方法をまとめた記事です。 ローカル(自分PC)に開発環境を構築する必要があり、Node.js等のインストールなど難易度が高いのですが、この記事では詳しい解説はせず、最短で構築できるようにします。 Node.jsの開発環境を構築するにあたって、nodebrew、nvmのようなバージョン管理できるライブラリを使うことが必須になっていると思います。 個人的には、nvmがオススメなのでをnvmを使ったNode.jsのインストール&バージョンアップ手順を紹介します。 結論：人気度からnvmがオススメ Googleトレンド(2021年4月27日時点)で、nvmがnodebrewを圧倒的に上回っている。 ＊ Homebrewでのインストール方法を掲載しているブロ
GAS + React + Vite + Claspで作るお手軽フロントエンド - Retty Tech Blog
この記事はRetty Advent Calendar Part2の22日目の記事です。 Part1はこちらです。 はじめに 23卒の内定インターンをしている真下(@mashita1023)です。 内定インターンの中で単純な要件の社内ツール作成を作成したのですが、技術選定から実装まで結構な範囲を開発させてもらましえた。 その中でフロントエンドのデプロイ先にGoogle Apps Script（GAS）を使うことで、社内の人間のみが扱えるという要件を達成できた話をします。 社内ツールの要件 キャッシュを消すためのツールは以前にも社内ツールとして存在していたのですが、 コード自体がGitHubで管理されておらずどこにあるのかわからない状態でした。 そこで、キャッシュを消すためのツールを新たに作る必要がありました。 作成しなければいけないものを要件として簡潔にまとめ直すと以下のようになりました。
【React】FramerMotionを利用したアコーディオン
概要 Reactでアコーディオンとなると、コンポーネントライブラリでMUI(https://mui.com/)とかchakura-ui(https://chakra-ui.com/)とあるけど、独自で実装してみたくなったので忘備録としてメモ。 要件 アコーディオンのパターンとして、クリックしたボタンに関連したアコーディオンは開くけど、ほかのボタンをクリックしてもすでに開いてるアコーディオンはまたボタンをクリックしないと閉じない、、というパターンがある。これは連動されていないのでクリックしたボタンがクリックしたかどうかを監視すればいいけど、*他のアコーディオンをクリックしたら開いてるアコーディオンを閉じたいという場合はそうもいかない。今回はそれも実現したいので、以下の条件としてみる。 またせっかくなのでJSONファイルからデータを読み込むことも追加です。 アコーディオンデータはJSONファイ
【VSCode】ReactとTypeScriptでTODOリストを作って基礎を学ぶ
今回はReactとTypeScriptでTODOリストを作ってReactの基礎を学びます。 作成するデモサイトは以下です。 前提条件は以下 creat-react-appを使ってReact、TypeScriptの環境で行うESLint（Airbnb）とPrettierを追加して、VSCode上の拡張機能と連動させる 環境は以下です。 macOS Catalina v10.15.5Visual Studio Code v1.57.0React v17.0.2TypeScript v4.5.5node.js v16.13.1 どんなTODOリストを作るか説明 作りたいTODOリストは以下の通り。 ①では、文字を入力してEnterキーを押すことで②のTODOリストに追加。 ②では、追加されたTODOリストをクリックするとチェックマークが入り、文字に打ち消し線が入る。チェックマークが入ると「○個の
React 子から親へ入力内容を渡す - Qiita
以前はpropsでset〇〇を直接渡していましたが、修正しました！(23/05/06) やりたいこと 子コンポーネントのテキストボックスに変更があるたび、入力内容を親コンポーネントに表示する 前提 同じコンポーネント内でのステートの変更、取得ができている状態とする。 （詳細はこちら→React inputのvalueを表示する） propsの基本おさらい 結論を見たい方はさくっとこちらへ→ 実装 Reactではコンポーネント間のデータの受け渡しはpropsを使って行う。 親→子へ値を渡すとき 親から子へ送る 子コンポーネントを呼び出すところで、props名={値}で渡す // 親コンポーネント import Child from './Child'; import React from 'react'; const Parent() { return ( <div> <Child coun
React入門チュートリアル (5) ToDoアプリを作ってみよう | Hypertext Candy
この連載記事は、これから React を学びたい JavaScript 開発者のための入門コンテンツです。対象とする React のバージョンは執筆時点で最新の v16.13 です。連載記事は以下の通り。 Reactとは何か JSX 属性と状態 フォームとイベントハンドリング ToDoアプリを作ってみよう 副作用 カスタムフック Reactプロジェクトを始める方法 本章はここまでのおさらいです。ToDo アプリのサンプルを一緒に作っていきましょう。 作るもの See the Pen React Todo Demo by Masahiro Harada (@MasahiroHarada) on CodePen. テキスト入力欄にタスクを書き込んでエンターキーを押すと下のリストに追加されます。 完了したタスクは、チェックボックスを ON にします。視覚効果として、完了済みのタスクは文字を薄くし
Reactでフォームを扱う方法についてまとめました【React/Input/Radio/Select】
Reactでフォームの部品を扱う際、HTMLの感覚で書いているとうまく動作せずハマる時があります。Reactのお作法的な書き方もあるので、そのまま覚える型としてメモしておきます。 テキストフィールド<input type=”text”> input type=”text”は、次のような単一行のテキスト入力欄を生成します。 入力した値がリアルタイムで反映されるサンプルを作成しました。 const ContentArea = () => { // 選択した値を管理（初期値：””） const [val, setVal] = React.useState(''); // テキストフィールドの値がチェンジされた時 const handleChange = (e) => { setVal(e.target.value); }; return ( <> <h2>テキストフィールド</h2> <div
（基礎編）jQuery使いのエンジニアがReactとNext.jsでWebサイト制作するために最低限押さえておきたいコード
なぜ書いたか 筆者もWebサイト制作をそこそこ長くやってきておりいまは業務でVueを書いたりちょっとReactを書いたりSvelteを書いたりしていますが、2年前くらいまではReactやES6の構文すら書いたことがありませんでした。 WordPressでのサイト制作が多く、機能が少ないサイト制作会社ではjQueryで充分なことも多く、恥ずかしながら業務時間外での学習や外部の情報を追うこともしていなかったため、開発系の技術スタックに慣れるのにかなり時間がかかりました。 まずはよく使うコードを見て解説しながら答えの一つを示し、よく出てくるコードをざっくり理解して書けるようにすることで、実務でReactを取り入れる取っ掛かりになればいいなぁという思いでこの記事を書いています。 続編は多分今月中に書きます。 こちらは基礎編です。 対象者 普段jQueryでWebサイトを制作している 生のJSはあん
Reactを学ぶ上で知っておくべきJavaScriptの基本概念 - Qiita
はじめに 今回はFlyCode氏が紹介していた、Reactを学ぶ上で知っておくべきJavaScriptの基本概念を紹介します。 具体的なJavaScriptでのコード解説と、Reactではそれがどのように使われるのかを紹介します。 この記事の対象者 JavaScriptのよく使う基本文法を学びたい人 Reactの初心者から中級者 この記事の目標 React開発でよく使われるJavaScriptの文法や処理を理解する JavaScriptの基礎文法 本記事では下記の7つをピックアップして紹介します 三項演算子 分割代入 スプレッド構文 配列操作 アロー関数 非同期処理(Async/Await/Promise) APIコール 三項演算子 三項演算子はMDNでは下記のように解説されています。 条件 (三項) 演算子は JavaScript では唯一の、3 つのオペランドをとる演算子です。 三項演
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactではじめるChrome拡張開発入門