完全未経験が半年で個人サービスをリリースした話 - Qiita
はじめに この度、転職とスキル向上を目的に個人サービス(Football League)をリリースしました。 ITに関する学習は約1年ほど、その内の半年でサービスの開発をしました！ まだまだ修正箇所はあるものの、ひとまず形にはなったのでサービスの使用技術や開発過程を共有したいと思います。 私自身、独学で学習してきたのでそういった方々にとって少しでも参考になれば幸いです。 自己紹介 商業高校卒(サッカー部⚽️) 25歳 青森住み🍏 職業はトマト農家です🍅 どのようなサービスか 本サービスは、欧州5大リーグのサッカーの試合結果やチーム情報などを閲覧することができるWebサイトです。 ただ情報を閲覧できるだけでは面白みがないので、お気に入りのチームやリーグを追加することもできます。 なぜ作ろうと思ったか 私自身、小学生の頃から社会人になった現在までサッカーをやっています。 サッカーだけではな
ChatGPTとCopilotに要件だけ伝えて自動コーディングしてもらう(AIペアプロ) - Qiita
※この記事は個人的な実験の記事です※ ※実験内容は随時記事を更新していきます※ 24時間いつでも手助けをしてくれるGitHub Copilotさん。 24時間文句も言わずにいつでも親切に回答してくれるChatGPTさん。 そんな両者に要件だけ伝えて自動コーディングしてもらおう(AIペアプロ)、という実験記事です。 Copilot自動コーディング動画 以下の動画は、最初に要件だけをコメント入力して、それ以降はCopilotの提案を受け入れているだけになります。 コメントの入力と提案の受け入れ以外は、全くタイピングをしていません。 コメントの内容は Next.jsでボタンをクリックしたら画像を選択してブラウザに表示する です。 完成品 要件のコメントと受け入れだけをしたコードを実際に動かしてみました。 自動コーディングしてもらったコードは以下の通りです。 // Next.jsでボタンをクリック
【個人開発】爆速な賃貸物件の検索サービスを作った - Qiita
個人開発で 賃貸物件の検索サービス Comfy を作りました1。グラフや地図でサクサク絞り込める UI が特徴のサービスです。とにかく気持ち良い使い勝手を実現するために色々工夫しています。 既にリリースからは 4 ヶ月以上経っているのですが、改めてサービスの概要や、システム構成及び使用した技術・サービスをご紹介しようと思います。2。 サービスの概要 Comfy は日本全国の賃貸物件を検索できる Web サービス です。画面 UI は上の GIF 画像のような感じです。 こだわったポイントを色々書くよりも実際にさわって頂いた方が新感覚の UI や気持ちよさを体感頂けるかと思いますので、 実際のサービス をぜひお試し頂ければ幸いです！ システム構成 図の通り、システムは大きく 3 つに分けられます。 フロントエンド バックエンド データ基盤 使用技術は図の通りではあるのですが、フロントエンドと
js を書いて URL やページの内容を加工してコピーできる Chrome 拡張ココピーのご紹介 - ぽ靴な缶
この記事は はてなエンジニア Advent Calendar 2020 - Qiita の23日目の記事です。 qiita.com 昨日は id:Krouton さんの 30日でできる! OS自作入門 を読むために nasm_of_nask というコンパイラを作った話 - KRAZY感情STYLE でした。よかったですね。 コードでコピーするココピーです 今日はちょっと前に作ったブラウザ拡張、cocopy を紹介します。 chrome.google.com しゅぴっと拡張を開いてコピーするフォーマットを選択できます。 このアニメーションはコピー機がブーンとスキャンする感じをイメージしています。 利用者が js を書いてフォーマットを追加できます。 コードからは URL、タイトル、選択中のテキスト、ページの HTML にアクセスできます。 Markdown, Scrapbox HTML, は
Adobe製デザインシステム「React Spectrum」がすごいので紹介したい - Qiita
🚀 Super excited to announce: ♿️ React Aria — Accessible UI primitives for your design system. 👑 React Stately — State and core logic for your design system. 🌈 React Spectrum — Adobe’s design system. Learn more: https://t.co/ucVguh3rqp Github: https://t.co/e8aOfLgCVK — Devon Govett (@devongovett) July 15, 2020 7月15日にAdobeのデザインシステム react-spectrum がリリースされました。 デザイン製も優れていますが、他の部分でのクォリティーが個人的にショックだった
大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました - Qiita
数日前（4/21頃）に Next.js のチュートリアルが一新されました。 Next.js は 3 月頭に ver 9.3 がリリースされ、ビルド時に静的に HTML を生成する関数などが追加されるなど、今までよりもかなりパワフルになり、いわゆる JAMstack と呼ばれるようなアプリケーションを作りやすくなりました。 そのバージョンアップに対応するかたちで、チュートリアルも大幅に書き直されました。 参考（開発チームの @chibicode さんのツイッター） Next.jsの公式チュートリアルを最新版に沿ってゼロから書き直しました! 🎓英語ですが初心者向けです! ⚛️最近導入されたgetStaticProps等の関数や、 🎨CSS Modulesの解説をしています! 🗣ブログを作りながら学びます 🤗ご感想お待ちしております!https://t.co/R4j9vpAQoc — S
Flutter入門のためのDart入門 - Qiita
最近自分の中でWeb開発はReactJS、モバイルアプリ開発はFlutterが良いという結論がでました。 Flutterでの実装はDart言語で行います。 基本的なモダン文法をサポートしているため、他言語から入ってくる人には入りやすい言語だとは思います。 とはいえ、日本語情報でステップバイステップでDart文法がまとまっているところは少ないので まとめてみようと思ったのがこの記事です。 Flutterがよい理由 【翻訳記事】なぜFlutterにおいてDartを使用するのか？ ・hot reloadが高速(AOT、JITの2段階のコンパイル) ・アイソレートとガベージコレクション最適化による軽快な動作 （Google内でFlutterのチームの近くにDartのチームがいたから・・・という理由もあるらしい） React Nativeもいじったのですが、 ・Webkitのビルドが重い(expoは
typelessというReact向け状態管理ライブラリがめっちゃいい - Qiita
typelessというreactの状態管理ライブラリが非常に良いので紹介します 2019/10/24: 入門記事 書きました What is typeless? react+typescriptで使う前提のreduxラッパーライブラリ。reduxが抱える以下のような課題を解決する 異常に多いボイラープレートコード 重複した型注釈 大量の依存ライブラリ 欠如したコーディングガイドライン これらの課題を踏まえて以下のコンセプトでデザインしている TypeScriptフレンドリー 実用に耐えうる機能を全て内包する 容易なモジュール追加 多くのユースケースに対する解決策をデフォルトで提供 ＊参考： https://typeless.js.org/introduction/motivation reduxの抱える課題について ドキュメントのmotivationの項で書かれていることは多くの人が課題を
仮想スクロールのすヽめ - Qiita
平日の早朝に道玄坂を下るアベックに破滅と滅亡を。どうも、@neer_chanです。 皆さん、仮想スクロールしてますか？ 概要 仮想スクロールとは 仮想スクロールの仕組み 仮想スクロールの魅力 前提として、縦スクロールの話をします。 仮想スクロールとは GIFの通り、見えている範囲(+α)のみレンダリングするもの。 要は、ロケット鉛筆みたいなものです。（絶対に違う） 仮想スクロールの仕組み イカれたメンバーを紹介するぜ！ 見える範囲を指定するためのDiv スクロールする高さを指定するDiv ListItemを置くUnorderdList いつかの、いくつかのきみとListItem 以上の4つが登場するメンバーだ！ ちなみに、通常のスクロールの場合は2の役割を3が行う感じになります。 また、以下の要素をあらかじめ指定する必要があります。 見える範囲に表示する4のListItemの個数（あるいは
【全てのアプリ開発者に贈る】React Native いろいろ触ってみた【目次】 - Qiita
ローラハウスでは、iPhone登場以降、たくさんのスマートフォンアプリ開発を行なってきました。SwiftもKotlinも大好きです。そんな我々が、気になっているのが、React Native。本当に日々の開発に使えるのか色々触ってみることにしました。感触としては痒いところに手が届かない感じはありますが、使えるかもしれないなと感じています。これまでさんざん裏切られてきたマルチプラットフォーム環境から考えると、かなりいい感じです。最近は、Flutterとかもあるけど、エコシステムが出来て来ている React Native に魅力を感じます。 調査に当たって、日本語の情報が系統的にまとめられているものが、ほとんど存在しない、あっても情報が古かったりという事があったので、記事を書いて公開することにしました。また記事を書くに当たって、次のことを意識しました。 記事は出来るだけシンプルに一つのことにつ
JS ? ReactNative × Redux ? ダサいよ... Flutter × Reduxにしましょう... - Qiita
JS ? ReactNative × Redux ? ダサいよ... Flutter × Reduxにしましょう...reduxFlutter 今回は初めて記事を書くことになりますが、よろしくおねがいします。私はiOSエンジニア（Swift）をやっていました。２ヶ月前あたりにはちょうどiOSとAndroid両方対応しないといけないプロジェクトを始めたのでいろいろを検討をしていました。最初はReact Nativeを検討していましたが、Expoがすごくよかったと思いますが、やっぱり自分はJSとフロントエンド開発には向いていないと思いますので、Nativeで両方iOSとAndroidを別々でやろうと思いました。TypeScriptをReact Nativeプロジェクトに入れようとしてもいろいろいじらないといけないのでめんどくさいなと思っていましいた。その時、ちょうど友人がちょっとFlutter
React Native Elements でイケてるUIを作る - Qiita
どんな記事？ React Nativeのスター1万超えのUIライブラリ React Native Elements の使用方法についてまとめた記事です。 今回はプロジェクトを作るところから始めてみます。 また、バージョンは 0.19.0を使用しております。 また、@y_tsubukuが開発するyaritori - メール共有システムも、良ければご覧ください プロジェクトを作成 create-react-native-appでさくっと。 # プロジェクト作成 $create-react-native-app elements_example # 作ったプロジェクトのルートディレクトリへ移動 $cd elements_example # 起動 $yarn start import React from 'react'; import { StyleSheet, Text, View } fro
【随時更新】2018年にReact Nativeを始める人におすすめ26選 - Qiita
ちょうど1年くらいにReact Nativeでちょっとしたアプリを作っていたのですが、最近はめっきり離れてしまっていました。Reactもv16になり、少し開発環境も変化しているかなと思っていたら・・・結構変わっていました。 React Native Showcaseを見ると、FacebookやInstagramはもとよりAirbnb, Skype, Tesla, Walmart, Wix, UberEATSなど日本でも有名な企業やサービスの採用が目立っています。 showcase 今回は良く使いそうなツール・コンポーネント・サービスを集めてみました。 随時更新もしていきたいと思います！ 1. Expo https://expo.io/ ExpoはReact Nativeの開発をサポートするツールです。 主に以下を提供してくれています。 Expo XDE、Expo exp Expo Modu
ReactNativeで何が出来るのかさっと知れるサイト、その他リンクまとめ - Qiita
「React Nativeって時々聞くけど、どれくらいのものが作れるの？」とか「どこで調べればいいの？」とかそういった時に役立つリンクをまとめてみました。 公式ドキュメント まずはお約束として、ドキュメントです。 https://facebook.github.io/react-native/ 公式Showcase ReactNativeで作られたアプリが載っています。 日本のアプリだとCoinyさんのアプリが載っています。 最近、いい感じのニュースソースがないアプリは載らないようになりました。なので厳選されています。以前は自分の個人で作ったやつも載せてもらってたのでちょっと切ないです(´・ω・｀) React Native Playground React NativeのコードがWeb上で実行出来るサービスです。ユーザーがちょっとしたボタンアクションなど登録しています。アプリもあったはず
Electron, Reactでタブブラウザを作ってみた - Qiita
知人がesaのデスクトップクライアントを使わなくなった理由が、複数タブが開けなくて不便だったと聞いた。 確かに「Electronのアプリでも複数タブが使えるといいな」と思ったのでさくっと作ってみました。 作ったもの タブ周りの処理を中心に書いた。ブラウザというよりただのQiitaリーダ。 環境 MacOS X 10.10.4 Node.js v.4.1.1 electron v.0.34.3 準備 Electron環境の導入が必須。 30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまでがとても参考になります。 今回はReactをES6で書くのでbabel+webpack+gulpの設定を書いておきます。 gulpfile.js webpack.config.js npmで必要なパッケージをインストールし、gulpでビルド用のタスクを起動すると
Kobito for Windows をリリース + 技術的な補足, package.json の公開 - Qiita Blog
Kobito for Windows をリリース + 技術的な補足, package.json の公開 Kobito for Windows開発の @mizchi です。 開発開始から約半年、ソロ作業の期間も長かったのですが、ようやくリリースできました。 Kobito for Windows – ソフトウェア開発者のためのMarkdownによる情報記録・共有ソフト というわけで、今日はKobito for Windowsの開発コンセプトとElectronやReactを採用した理由について書いていこうと思います。Rails界隈ではGemfileを公開する文化があるようですが、今回はnode.js / npmのそれであるpackage.jsonを公開します。 Kobito on Electronの開発コンセプトWeb技術でKobitoを実装してWin/Macでソースを一本化既存のKobitoの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
