【React+TypeScript】Netflixのクローンを作るチュートリアル
【注意！】 2024年4月末にこちらの本の内容を大幅リニューアルしました！ https://note.com/terry10/n/nf0674af97617 ※こちらのZennのBookも5/7を目安にリニューアル内容を反映する予定です 多くの人に手に取って欲しいので、リニューアル後は期間限定で無料配布も検討しています。 こちらのツイートで無料配布について告知しています！ ↓ https://x.com/teriteri_code/status/1783358352447414464 --- React+TypeScriptを使ったNetflixの映画一覧を表示するアプリケーションのチュートリアルです。 学べる事 - ReactのFunctionComponent（関数コンポーネント）とTypeScriptの使用 - React Hooksによるstate管理 - TypeScriptで外
1ファイル・3コマンドで実現！Dockerでチーム全員の開発環境の構築を始めてみませんか？ | 株式会社ヌーラボ(Nulab inc.)
以下の3コマンド、これだけでプロジェクトに必要な開発環境ができあがる。そんな環境を Docker で作ってみませんか？ $ git clone https://github.com/dataich/sample-docker.git $ cd sample-docker $ docker-compose up こんにちは、Typetalkチームのエンジニアの吉田です！ 新しいエンジニアがチームに入ってきてまずやることは、DBやWebサーバなどの開発環境を構築することでしょう（9月に新しい人がチームに入ります、やったね！）。 Typetalkチームでも以前はREADMEに記述された手順に従って、開発者が個別に構築していました。その際READMEに書かれたミドルウェアのバージョンが古かったり、実は手順そのものが変わっていたりすることもあり、ハマることもありました。また、複数のプロジェクトで違う
簡単！ JavaScriptで自動UIテスト (NodeJS, Selenium Webdriver, WebdriverIO, mocha, gulp) - Qiita
簡単！ JavaScriptで自動UIテスト (NodeJS, Selenium Webdriver, WebdriverIO, mocha, gulp)JavaScriptNode.jsSeleniummochagulp はじめに Webアプリ開発において、UIのテストは手動になりがちで、 専門のQAチームがいないと、なおざりになるケースが多いかと思います。 本記事では、オープンソースウェアのSelenium Webdriverを主軸に 現時点で筆者が最善だと思う 「JavaScriptで自動UIテストを行う」 方法をご紹介します。(ES6準拠) ポイント ワンライナーで実行可能にする (CI向き) テスト修正が容易 (保守性 高) Windows/Mac環境に依存しない (チーム開発向き) 環境 Windows 10 (Version 1607) / macOS Sierra 10.1
人工知能時代の音楽制作への招待 - Google Magenta 解説&体験ハンズオン (自習編) - - Qiita
音楽制作を行っていて人工知能技術に興味がある、あるいは機械学習をやっていて音楽が好きだ！そんな方に送る、機械学習による音楽生成のチュートリアル資料となります。本記事のみで、仕組みの理解から実際に音楽を生成して、SoundCloudで共有するまでの手順を網羅しています。 そして、本記事は先日実施した人工知能時代の音楽制作への招待 - Google Magenta 解説&体験ハンズオン -の自習用資料でもあります。 イベント自体は100名を超える方(開催前日の段階で倍率が5倍)に応募いただき、行きたかったけど行けなかった！という方も多いかと思うので、自習編にて内容に触れていただければと思います。 ※なお、会場のキャパを広げられなかった代わりに撮影をしていただいたので、後日講義動画が上がればそちらも掲載させていただきます。 ゴール 音楽生成とはそもそもどういう仕組みで、どんなアプローチが取られて
Building a Wunderlist Clone
ChallengeI challenged myself to build a Wunderlist clone. Wunderlist is a task management tool, available for all platforms basically. It’s famous for its beautiful & simple UI. IssuesWunderlist is a huge app with lots of functionalities, which would take me months to build. I gave myself a couple of days to see how much I could recreate. 1. State managementRendering a couple of todos is backed by
ndenv / nodenv で Node.js をインストールする際、同時に Yarn もインストールする方法 - Qiita
ndenv / nodenv で Node.js をインストールする際、同時に Yarn もインストールする方法JavaScriptNode.js TL; DR ndenv / nodenv を使うと任意の Node をインストールできる プラグインを使うと、ndenv install と同時に Yarn のインストールできて便利 ndenv-yarn-install nodenv-yarn-install Yarn とは ? npm に比べて速い Node 向けのパッケージマネージャーです。 Yarnファーストインプレッション ndenv / nodenv とは ? nvm や nodebrew などと同じ、複数バージョンの Node を容易に管理する為のツールです。 node.js のバージョン管理ツール ndenv を試した Ruby・Nodeを使うなら、rbenv・ndenvが便利
GitHub - garrylachman/ElectroCRUD: Database CRUD Application Built on Electron | MySQL, Postgres, SQLite
ElectroCRUD is a powerful and flexible open-source software that simplifies CRUD operations (Create, Read, Update, Delete) on databases. It empowers users to create personalized and intuitive database admin panels or dashboards without requiring any coding knowledge. With its user-friendly interface, ElectroCRUD streamlines the process of setting up and managing databases, making it accessible to
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利
Electron Simple Samples | Electron Blog
We recently hosted an Electron hackathon at GitHub HQ for members of Hackbright Academy, a coding school for women founded in San Francisco. To help attendees get a head start on their projects, our own Kevin Sawicki created a few sample Electron applications. If you're new to Electron development or haven't yet tried it out, these sample applications are a great place to start. They are small, ea
OnsenUI and Reactを使ってみる - Qiita
勉強会で使う機会あったんでメモ。 Monaca-CLIをインストール React版のOnsen UIはMonacaのCLIからじゃないと使えないらしいので、npmでインストールします。 https://docs.monaca.io/ja/manual/development/monaca_cli/ $ monaca __ __ | \/ | ___ _ __ __ _ ___ __ _ | |\/| |/ _ \| '_ \ / _` |/ __/ _` | | | | | (_) | | | | (_| | (_| (_| | |_| |_|\___/|_| |_|\__,_|\___\__,_| Command Line Interface for Monaca and Onsen UI Monaca CLI Version 2.0.5 Usage: monaca command [a
CARTO の Xamarin 向けモバイル用SDKを使ってみる - Qiita
CARTO やるやる詐欺してました、すみません。 CARTO といえば、地図関連で今一番イケてるサービスの一つですね。 CARTO — Predict through location ChizuDB | CARTO 日本向けサービス 紹介される媒体が Web なので、Web地図の事例しか見たことなくて、「スマホアプリで表示できないのかなー」と思っていましたら…あるじゃん！モバイル用の CARTO SDK が！ Mobile — CARTO Mobile SDK — CARTO Documentation どうやら、 Android、iOS に対応している様子。 そしてなんと、C# - Xamarin 用のSDKとサンプルも発見！ CartoDB/mobile-dotnet-samples: CARTO Mobile SDK samples for Xamarin and WP .NET
AzureのWebAppsでNode.js+Expressを使う - Qiita
Azureに作成したWebAppsインスタンスにgit pushでexpressをデプロイするところまでやってみました。 参考 Node.js Developer Center Node.js デベロッパー センター Windows AzureでNode.jsを実行しよう 前提 Windows環境にNode.js、Git、Yoemanをインストール済で、以下のバージョンを使用します。また、npmもアップグレード済です。 C:\>node -v v4.4.7 c:\>git --version git version 2.9.2.windows.1 c:\>yo --version 1.8.4 c:\>npm -v 3.10.6 関連サイト Azureに無料でWebAppsインスタンスを作成する方法は、Azureの無料試用期間終了後に無料オプションを使う Part-2を参照。 1.Azure
Blink Shell for iOS - MoshとSSHをサポートしたiOS用の多機能ターミナルアプリ | ソフトアンテナ
iOS用のsshクライアントを探している方は「Blink Shell for iOS」を試してみると良いかもしれません。MoshとSSHをサポートした、デスクトップグレードのiOS向けターミナルアプリで、iPhone、iPadどちらにも対応しています。 Blink Shell: Mosh & SSH Terminal カテゴリ: ビジネス 価格: ￥2,400 MoshとSSHをサポートしたプロフェッショナルグレードのターミナルアプリ。 Blink Shell for iOSは、不安定なインターネット環境で特に有用な「Mosh」をサポートしているのに加え、ssh接続にももちろん完全に対応しています。 ssh接続用のhostsファイル、鍵ファイルの管理機能、ジェスチャーによるセッションの切替、作業に便利なカスタマイズされたキーボード、iPadにおけるSplit Viewへの対応といった、サー
Reduxの概念をRxJSとTypeScriptで理解する(初心者向け) - Qiita
(2016/12/15追記) この記事はDeprecatedです。 Reduxの概念をRxJSとTypeScriptで理解する ver.2 が最新版になります。 GitHubリポジトリはこちら → ovrmrw/understanding-redux-with-rxjs git cloneしたらnpm installしてnum run tsですぐに動かせます。 (注: Reactの話は一切出てきません) Reduxとは Redux公式 アプリケーション全体で状態(state)を一つのJSONツリーの構造で持ち、それをActionがキックされる度に全体更新して配信するという概念。 僕は最初FluxとかReduxとかよくわからなかったけど、色々参考にしながら自分で書いてみたらようやく理解できました。 Middlewareという概念はよくわからなかったし今でもよくわかりません。 ロガーとか便利な
Kindle Unlimitedで「1-Clickで今すぐ買う」を見えなくするクローム拡張を作ってみた - KDP(電子出版)のメモ 急急如律令
Kindle Unlimited Kindle Unlimitedが始まって定額で読み放題になった。だけど借りるつもりが間違って購入してしまうことが出てきた。Kindle Unlimitedに登録されている本だけ「1-Clickで今すぐ買う」を表示しないようにすれば、間違って購入することがなくなるだろう。 というわけで、そういうクローム拡張を作ってみました。クローム拡張は公開するのに登録が必要で５００円がかかるようで、登録しないで使えるようにする勝手アプリもある。作ったのは勝手アプリなので、念のため処理の内容を書いておく。ファイルはmanifest.jsonとmyscript.jsの２つ。 manifest.json ここではAmazonのページのときにmyscript.jsを実行するようにしている。 Kindle Unlimitedであることの判定をして「1-Clickで今すぐ買う」の除
Markdown風テキストでダイアグラムが描けるWebツール - Qiita
MarkDownDiagram Markdown風のテキストで、ER図やブロックダイアグラムのようなチャートを描けるツールです。 こちらにインスパイアされて、もうちょっと汎用的にダイアグラムを描けるツールを作りました。 もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った 特徴としては Webブラウザのみでローカルで動作 配置はマウスでドラッグして編集できる CSSで色や装飾を制御可能 といったあたりです。 githubからclone/ダウンロードして使えます。 オンラインで試すのはこちらでどうぞ。 ローカルでブラウザのみで動作します。index.htmlをブラウザで開いてください。 Chrome推奨ですが、Safari,Firefoxでも動作します。タッチIFは未対応。 機能 テキストでブロックを記述し、ブロック間を線で繋ぐ描画 ブロックをマウ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - chuiizeet/Whatsapp-clone: Whatsapp UI clone in flutter. 📱
GitHub - mastodon/mastodon-native: Mobile Mastodon app using React Native
markdownをPDFに一括変換するアプリをgulpタスクで書いた
GitHub - riywo/ndenv: node.js version manager based on rbenv
