[React] よーし! いっちょReactやってみっか! #3 基本キーワード編 | DevelopersIO
はじめに CX事業本部の中安です。まいどです。 モバイルアプリエンジニアな自分がReactを始めてみることにした 「よーし! いっちょReactやってみっか!」シリーズの続きです。 今回もよろしくお願いします。 前回は作成されたプロジェクトの中身をサラッと見ていきました。 今回は、Reactでよく使われる基本キーワードを抑えていくことにします。 React独自なものやJavaScriptのものが混ざっていますが、 頭が混乱しないように言葉の定義を覚えておくのも大事ですね。 React 初回のブログでも「Reactとは」については書きましたが、あらためてこちらでもまとめようと思います。 React ReactはFacebook社によって開発されたJavaScriptのためのユーザインターフェイス構築用のライブラリで、 VueやAngularなどのWEBフロント用ライブラリに並ぶ人気のライブラ
![[React] よーし! いっちょReactやってみっか! #3 基本キーワード編 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/ee41023e6f390843baace34a303c74b1767c52d0/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F07%2Freact.jpg)
東京大学の講義「AWSによるクラウド入門」をTypeScriptで写経した - dackdive's blog
AWSによるクラウド入門 少し前に話題になっていた東京大学の講義資料をやってみたので、内容、感想などメモ。 講義で使用するソースコードはすべて Python で書かれていますが、自分が実際に使うとしたら TypeScript で書くだろうなと思ったので TypeScript で写経しました。 が、CDK のコードはすべて TypeScript で書けましたが、Lambda 関数や動作確認用のスクリプトなどを全て置き換えるところまでは至らず、Python のままです。 写経したリポジトリは https://github.com/zaki-yama-labs/intro-aws に。 学べること 本講義資料には全部で5つのハンズオンがあります。 各ハンズオンで利用する AWS のサービスについては以下の通り。 全般 AWS CDK: Cloud Development Kit CloudFor
Using Vue 3 with JSX and TypeScript | paul shen
My friend and I are building a multiplayer drawing game with Vue. I used it as an excuse to learn and get familiar with Vue. We started with Vue 2 and templates but found that they don't scale well for complicated components. I migrated the codebase to Vue 3 and now we're writing Vue components with JSX with TypeScript. There's relatively little documentation in the Vue 3 docs on JSX and TypeScrip
ARM Windowsへ向けMicrosoftが本格始動！ARMx64エミュレーションに投資価値がある理由
ARM Windowsへ向けMicrosoftが本格始動！ARMx64エミュレーションに投資価値がある理由2020.10.05 11:3010,483 Gizmodo US - Joanna Nelius ［原文］ （ Kaori Myatt ） ついにARM Windowsが本格始動。 これまで使えるアプリが限られていたARM Windowsですが、エミュレーションが展開されることにより使えるアプリは格段に増えます。米ギズモードの報告です。 Microsoftは9月30日に、ARMベースのWindowsがx64 エミュレーションに対応することを公式に発表しました。これが実現すれば、Adobe Creative Suite などのアプリケーションがARMベースのWindowsでも使えるようになり、さらに可能性が広がります。 ｢ 動作するx64アプリのバラエティも豊かになります。x64エミュ
Microsoft 365の大規模障害、原因は未検証アップデートがデプロイシステムのバグにより通常のプロセスをバイパスして本番環境へ直接デプロイされたこと
Microsoft 365の大規模障害、原因は未検証アップデートがデプロイシステムのバグにより通常のプロセスをバイパスして本番環境へ直接デプロイされたこと マイクロソフトのサービス「Microsoft 365」で、日本時間の9月29日午前6時半頃から約3時間ほど障害が発生し、全世界でOneDriveやOutlook、Teamsなどのサービスに接続しにくくなっていました。 We're investigating an issue affecting access to multiple Microsoft 365 services. We're working to identify the full impact and will provide more information shortly. — Microsoft 365 Status (@MSFT365Status) Septem
職能横断型スクラム体制になってからのチーム改善活動 - STORES Product Blog
こんにちは、STORES ECでフロントエンドエンジニアをしている@daitasuとバックエンドエンジニアをしている@phayacellです。 STORES ECでは、今年の5月よりエンジニア内の大きな体制変更がありました。 その変更では、フロントエンド/バックエンドで分かれていたチーム体制から、デザイナーやプロダクトマネージャーも含めた職能横断型のチーム体制へと変更になったのですが、この記事では、その際に生じた、今まで各チームで行っていた開発の進め方とのギャップや手法をマージしていく上での課題について、またそれらをどのように解決していったのかについてをお話しします。 チーム改善までの背景 組織体制の変更 元々STORES ECでは、フロントエンド/バックエンド/デザイナーは独立したチームとして動いており、PJTとしてメンバーが切り出されてはいますが、活動の主体としては職能で分かれている組
直感的なWeb開発を促進する「Microsoft Edge Tools for VS Code」がリリース
Microsoftは米国時間2020年10月1日、「Microsoft Edge Tools for VS Code 1.1.0」をVisual Studio Marketplaceで公開した。Visual Studio Codeに同拡張機能をインストールすると、Microsoft Edge Toolアイコンが加わり、Microsoft Edgeで開いたWebページの開発が可能になる。本バージョンではデバッグモードを削除し、「Headless(ヘッドレス)」ブラウザーモードを新たに導入した。 Microsoft Edge Tools for VS Codeを起動した状態 公式ブログによれば、ヘッドレスブラウザーモードは対話可能なWebブラウザーウィンドウを新たに起動せず、Visual Studio Code内にWebブラウザーを内包し、より直感的なWeb開発環境を実現する。また、Webペー
まもなく登場のWindows 10のアップデート「20H2」でこう変わる (1/2)
Windows 10 October 2020 Updateの公式配布が近い。おそらく、今月の第2火曜日（現地時間、日本では水曜日深夜）には、配布が開始されるのではないかと思われる。今回からWindows 10のバージョン番号が変わり、「20H2」が正式なバージョン番号となる。これまでは、西暦の下2桁と完成月2桁の4桁でバージョンを表記していた。しかし、October 2020 Updateでは、西暦の下2桁と上半期／下半期を示す「H1」と「H2」になる。これは、これまでプレビュー時に使われていたコード名と同じだ。 今回の機能アップデートも、昨秋のアップデート（November 2019 Update、Windows 10 Ver.1909）と同じく、安定性と品質を重視した「マイナーアップデート」となる。このため、新機能は細かいものばかりだ。 一番目立つ変更点は、スタートメニュータイルの改
スタディスト開発部が目指す SRE の未来と現状と Kubernetes
（上記ブログ執筆時は、EKS on EC2 へ移行予定でしたが、EKS on Fargate への移行を行う方針に切り替えました。） Kubernetes 移行に関連する技術面の話題についてはご紹介してきた一方で、これまでの記事では、 「なぜ Kubernetes 移行を行っているか？」「スタディスト開発部は、最終的に何を目指しているのか？」といった背景には触れておりませんでした。そこで本記事では、スタディスト開発部が目指す世界観と、その過程として歩んでいる Kubernetes 移行の位置づけについてご紹介します。 目次Teachme Biz における Infra の現在と抱えている課題スタディスト開発部が目指す世界観Kubernetes 移行の位置づけ今後のやりたいことTeachme Biz における Infra の現在と抱えている課題現在 Teachme Biz の大部分（以降、本記
無料とは思えない多機能っぷりなWikiインフラ「Wiki.js」レビュー、自前でホスト＆外部サービスと連携可能
社内のノウハウ蓄積やソフトウェアの説明書としてWikiを導入する場合、Confluenceなどの有料サービスが第一候補としてあげられますが、決して安くはないライセンス料金を支払う必要があります。無料で利用できるオープンソースソフトウェア「Wiki.js」は、Dockerで手軽に構築でき、権限管理や外部サービスの連携も可能な、無料とは思えないほど多機能なWikiシステムです。 Wiki.js https://wiki.js.org/ Wiki.jsはDockerイメージが公開されているので、今回はLinux上のDockerでWiki.jsを構築してみます。まずは下記コマンドを実行してDockerとDocker Composeを導入。 curl -fsSL get.docker.com -o get-docker.sh sudo sh get-docker.sh sudo curl -L "h
GitHub、これから作成するリポジトリのデフォルトブランチ名が「main」に。「master」から「main」へ変更
GitHubは、これから新規に作成されるリポジトリのデフォルトブランチ名が「main」になると発表しました。これまでデフォルトブランチ名は「master」でした。 既存のリポジトリにはこの変更は適用されませんが、年内にも既存のリポジトリでもデフォルトブランチ名の変更を可能にする予定だと説明されています。下記は「The default branch for newly-created repositories is now main」からの引用です。 Existing repositories are not impacted by this change. Later this year, you'll be able to rename the default branch for existing repositories for your user, organization, or
AWS CDK+Serverlessのアーキテクチャパターンの実装が勢揃い！CDK Patternsの紹介 | DevelopersIO
はじめに CX事業本部の佐藤智樹です。 今回はAWS CDKでServerlessアーキテクチャを構築する上で参考となる実装が紹介されているCDK Patternsという取り組みが気になったので紹介します。 実装はGitHub上で公開されているので、いつでもすぐにcloneして動かすことができます。 この記事を読むことでAWS CDK+Serverlessで何か開発する際の設計パターンが分かり、独自に検討するより早く実装できるようになります。 正直自分でもこのパターンいいじゃん！使いたい！となったので、CDKで何か作ってる方には絶対参考になると思います。 CDK Patternsとは 以下はCDK PatternsのGitHubリポジトリからの引用です。 CDK Patterns houses an opensource collection of AWS Serverless archi
webpack@5で入るPersistent Cachingについて - hiroppy's site
webpack/lib/config/defaults.js 実際に使うときの設定 結論ですが、webpack.config.js へ以下のように書くことが推奨されます。 module.exports = { cache: { type: "filesystem", buildDependencies: { config: [__filename], }, }, }; あとは、各コードの設定に依存するためversion等の追加が必要になる可能性があります。 ドキュメント Other Options | webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, ... 仕組み ファイルキャッシュでは以下のようにデフォルトではnode_m
選択中のテキストを、右クリックメニューから DeepL で翻訳できるようにする Chrome 拡張機能＆ Firefox アドオン「deepl-select-jump」「To DeepL translation」
今日は、右クリックで選択したテキストを “ DeepL ” で翻訳できるようにする Google Chrome 拡張機能 ＆ Firefox アドオン「deepl-select-jump」「To DeepL translation」を紹介しようと思います。 「deepl-select-jump」「To DeepL translation」は、テキストを DeepL で翻訳できるようにするブラウザ拡張機能です。 選択したテキストを右クリックメニューから “ DeepL ” へ送れるようにし、外国語のテキストを簡単に翻訳できるようにしてくれます。 どちらの拡張機能も、選択したテキストの言語が自動で検出されるようになっているため、英語だけではなく中国語やスペイン語、ポルトガル語、ドイツ語… なども普通に翻訳することが可能となっています。 普段、外国語のウェブサイトを見る機会が少なくない人におすす
I don't care about cookies – Get this Extension for 🦊 Firefox (en-US)
The EU regulations require that any website using tracking cookies must get user's permission before installing them. These warnings appear on most websites until the visitor agrees with the website's terms and conditions. Imagine how irritating that becomes when you surf anonymously or if you delete cookies automatically every time you close the browser. This add-on will remove these cookie warni
Next.jsとesaを使った個人サイト構築
個人サイトをNext.jsとesaを使って作った。 スタイルが適当だったりmetaとか色々設定してないけど、記事が見れればいいっしょ、ぐらいのノリなので、とりあえず公開している。 corocn.dev モチベ r7kamura氏のエントリを見て作ろうと思った。 https://r7kamura.com/articles/2020-09-21-personal-website 概ね理由は同じだが、フィードバックと適切な距離を置いて、アウトプットへのハードルを下げたいのが理由。前から作りたいなと思っていたので、えいやで構築した。 このネタどこで書こう、Qiita? Zenn? note? はてブ? というように選択コストが上がってきたのと、プラットフォームが燃えてると自分の記事まで燃えている気持ちになるのにつらみを感じたので、雑に個人サイトでアウトプットする形に戻した。技術ネタ以外も書きたいし
react-wc: Web ComponentsとReactで実現するCSS in JSの形 - uhyo/blog
CSS in JSはJavaScriptのコードの中にCSSを書く手法の総称で、CSS Modulesやstyled-componentsなどがよく利用されています。 この記事では、筆者がCSS in JSについて考えてたどり着いた一つの解を紹介します。 また、そのために作ったライブラリreact-wcを紹介します。 Shadow DOMを活用する筆者がたどり着いた考えは、Web Componentsをそのまま使えばいいじゃんというものです。Web ComponentsはいくつかのWeb標準の総称で、特にここで重要なのはShadow DOMです。 CSS in JSが達成すべき目標の一つはスタイルのローカル化（書いたCSSを特定のコンポーネントに対してのみ適用し、他に影響を与えないこと）ですが、Shadow DOMはこの機能を備えたWeb標準ですから、これを利用することでスタイルのローカル
[React] よーし! いっちょReactやってみっか! #1 環境構築編 | DevelopersIO
はじめに CX事業本部の中安です。まいどです。 主にiOS担当のモバイルアプリエンジニアをやっている身として、Swiftの記事をよく書いているのですが、 「たまには他のこともやらないとなー」と思いまして、React.jsを始めてみることにしました。 この記事は、その奮闘記と思ってくださいませ。 Reactとは あらためて「Reactとは」というお話をすると、 React (リアクト) は、Facebookとコミュニティによって開発されているユーザインタフェース構築のためのJavaScriptライブラリである。React.jsまたはReactJSの名称でも知られている。 Reactはシングルページアプリケーションやモバイルアプリケーションの開発におけるベースとして使用することができる。複雑なReactアプリケーションでは通常、状態管理（英語版）・ルーティング・APIとの対話のための追加のライ
![[React] よーし! いっちょReactやってみっか! #1 環境構築編 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/406d924d7d4c6327201a8281e75820982243f551/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Freact.jpg)
Rust 2021: GUI
This is a response to the Rust call for blogs 2021 and also a followup to last year’s entry. It will be entirely focused on GUI. There is considerable interest in GUI toolkits for Rust. As one data point, it was the 6th highest rated challenge for adoption in the 2019 Rust survey, just behind async I/O. There is also a fair amount of activity towards this goal, though as a community it still feels
[React] よーし! いっちょReactやってみっか! #2 プロジェクト俯瞰編 | DevelopersIO
はじめに CX事業本部の中安です。まいどです。 モバイルアプリエンジニアな自分がReactを始めてみることにした 「よーし! いっちょReactやってみっか!」シリーズの続きです。 今回もよろしくお願いします。 前回は環境構築をしてWEBアプリを作成し、起動するところまでをやりました。 また、Chromeの開発ツールの導入も行いました。 今回は作成したプロジェクトを一度俯瞰して見てみましょう。 VSCode 開発のために使うIDEとして VSCode を使うことにしました。簡単に手に入りますからね。 前回の復習 前回は、以下のように任意のディレクトリでReactアプリのプロジェクトを作成しました。 % npx create-react-app my-app VSCodeを簡単に開けるようにしよう もし「VSCode を初めて使うよ」って場合は、ちょっと一工夫しておくと良いかと思います。 ま
Swiftでフレームワークを作成する（第1回）
Product→Buildを選択しビルドします。エラーがないことを確認します。 2.実機用とシミュレータ用のフレームワークを1つのフレームワークにまとめる 作成手順1.までの状態では実機用とシミュレータ用のフレームワークを別々にビルドしなければなりません。 また生成したフレームワークがそれぞれ別になりますので、アプリを作成する時に実機の時には実機用のフレームワーク、シミュレータの時にはシミュレータ用のフレームワークを参照するように設定を変更しなければならず不便です。 そこでビルドの設定を追加して1つのフレームワークにまとめます。１つにまとめたフレームワークはユニバーサルフレームワークとよばれています。 ビルド設定を追加するために「File→New→Target」で新規ターゲットのテンプレート選択画面で「Cross-platform→Aggregate」を選びます。 作成したAggregat
Rust+Webフロントの最前線！tauriを試してみた
@Pctg_x8です。 Deno 1.0の登場でRustとWeb関連技術の繋がりがより高まっていく中で、Electronライクな新しいアプリケーションフレームワークである「tauri」を見つけましたのでちょっと触ってみようと思います。 tauriについて 公式サイト: https://tauri.studio/ ※この記事ではv0.9.2をベースに解説しています。 tauriはまだメジャーバージョンが1になっていないため、頻繁にAPIの変更が起こる可能性があります。 概要 フロントはElectronと同じくWebViewですが、ベースの起動プログラム（Main Process）をRustで書くことができるものです。 ElectronではMain ProcessもJavaScript（Node.js）なので、例えば大量のデータを並行してバッと読むとか解析するとかの処理をさせようとすると マル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
-)
https://www.orangehealth.in/jobs/experienced-mobile-app-engineer-(ios%2Fandroid%2Freact-native)-
redux-fundamentals-example - CodeSandbox
New iPad Air's Touch ID Power Button an 'Incredible Feat of Engineering' According to Apple VP
Testing networking logic in Swift | Swift by Sundell
First A14 Benchmarks from iPad Air 4 Appear Online
Learn MongoDB: Getting Started
マイナンバーカードによるPDFへの電子署名がどのように動作するのかを実験してみた【イニシャルB】
This Week in Rust 358 · This Week in Rust