はてなブックマーク

2020年4月、Reactでウェブサイトやアプリケーションを作るGatsbyから「Gatsby Recipes」の発表がありました。（執筆時点ではまだExperimentalな機能です） 📝New! "Announcing #GatsbyRecipes" 👩🏿‍🍳👨🏼‍🍳 Recipes teach users how to accomplish desired tasks in Gatsby while also automating the process. ➡️ https://t.co/X0ueTQHqv4 ✨ This release is the first step towards adding a lot more automation capabilities to Gatsby. pic.twitter.com/sBH4EVK4Cz — Gatsby (@

本日、Next.js 9.3 がリリースされました。本リリースの特徴は次のものです。 Static Site Genration のサポート プレビューモードのサポート ビルトインの Sass サポート 404 ページの静的化 ランタイムの縮小 各トピックごとに簡単に説明します。詳しく知りたい場合は公式のリリースノートが公開されているのでご確認ください。 Static Site Generation のサポート Next.js では 9.0 から Automatic Static Optimization というコンセプトを打ち出し、getInitialPropsでデータを取得しない場合はビルド時に HTML ファイルを生成していました。（また、getInitialPropsでのデータ取得はnext exportで生成した場合であっても、クライアントのルーティング変更時に実行されるため、完

Next.js 9ではDynamic Routingが標準でサポートされ使用感が大きく改善されました。 このDynamic Routingで構築したアプリをexportした場合に一手間必要だったので考慮したことをまとめておきます。 この構成でデプロイを行う際には、ビルド時にデータを全部仕込むか、クライアント側で（APIを叩くなどして）データを仕込むかで大きく対処方法が変わります。 今回の想定アプリ 次のようなページを持つアプリケーションを想定します。 1.ビルド時にデータを仕込む方法 exportする際には、next.config.jsのexportPathMapを利用し、出力するファイルの調整を行っていきます。 exportPathMapで、キーにpath、バリューにpage（pageコンポーネントの位置）、query（クエリパラメータ）などの情報をもたせたオブジェクトをそれぞれ作り返り

VSCodeの設定は「ユーザー設定」と「ワークスペースの設定」がわかれており、すべてのプロジェクトで使いたい設定と、個別のプロジェクトで使いたい設定を分けることができます。 これを利用することで、プロジェクト間でエディタの色やテーマを使い分けることができるので、設定方法と設定の例について説明します。 ワークスペースの設定 設定はCmd(Ctrl)+,で開くことができ、ユーザー設定とワークスペースの設定が分けられています。 各プロジェクトの設定は画像の枠で囲った部分からアクセスできます。 （ユーザー設定はmacOSの場合は~/Library/Application Support/Code/User/に保存され、ワークスペースの設定は各プロジェクトの.vscode/settings.jsonに保存されます。） ちなみに.vscode/settings.jsonはgitのグローバル設定でign

笛吹きエンジニアの@mottox2です。 皆さん、クソアプリつくっていますか？ 僕はこれまでつくっていませんでした。ということで今回は初めてのクソアプリということでスマートフォンを楽器にしてみました。 この記事はクソアプリ Advent Calendar 2018の21日目の記事です。 つくったもの スマホの傾きと連動して音が鳴るクソアプリを作りました。 https://t.co/Zq3kb1THhy pic.twitter.com/ejYJAuU6Fe — もっと@締切駆動 (@mottox2) December 21, 2018 なんなのか？ みなさん、こういう楽器はご存知でしょうか？1 これはテルミン（テレミン）といって世界初の電子楽器らしいです。2手を調整することで音程と音量が操作できるとっても難しい楽器です。 クソアプリカレンダーの皆さんは簡単に使えるようにしている人が多かったの

最近、仕事でReactを書く機会が多くなってきて色々試しているうちに書き方が落ち着いてきました。 [注意] 本来はクラス毎にStyledComponentsのインスタンスを作った方がいいです。自分がVueライクな感じで雑に書くための記法です。 この表記ですと、子コンポーネントに同じクラス名があたったときに、親コンポーネントのスタイルが当たるので完全なscopedなスタイルにはなりません。 （@nabeliwoさんにコメントいただきました。ありがとうございます！） 既にHTMLが存在しているときに雑にReactに移植するときの途中段階とかで役立つ書き方です import React from 'react' import styled from 'styled-components' const TodoItem = ({ className, title, description, onD

俺の考えた最強のTODOリストを作るために便利なテキストフィールドを作ってみます。 See the Pen Custom CodeMirror TextField by Yuki Takemoto (@mottox2) on CodePen. なぜCodeMirrorか TextFieldにハイライトをつけるには、まずはcontenteditableを使った、WYSIWYGエディタによく使われる方法が考えられますが、これを生で触るのは非常に大変です。なので便利なライブラリに頼ります。 調べたところCodeMirrorがいいのではと感じたのでCodeMirrorを使っていきます。1 CodeMirrorは、Web上で動いて、JSなどのコードにハイライトをつけることの出来るライブラリです。 各言語のハイライトはmodeという形で管理されていて、自分でmodeを追加することができます。つまり、独

VS Code 1.44.0のインサイダーで、公式のSeeings Sync機能がリリースされます。 Microsoftアカウントで同期する形のようなので、この記事の対応は不要になります。 長年使っていたVimからVisual Studio Codeに乗り換えました。 拡張機能も入れるの簡単ですし、そもそも最初の設定だけでそれなりに使えていいエディタだと思っています。 自分はデスクトップ・ラップトップを持ち替えて使うことが多く、個別にセットアップしていたら色々と差分が出てきてしまったので設定ファイルの共有方法を考えていました。 Vim, Emacsを使っている人ならdotfilesリポジトリを使って管理しているような雰囲気を感じますが、Visual Studioでは基本GUIで設定を行えてしまいます。 開発環境のポータビリティを考えてシェルの設定と含めてVSCodeの設定を含んだdotfi

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

絵文字 / Emoji Advent Calendar 2016 - Qiita 13日目の記事です。 emojiというよりはSlackのReactionにこじ付けたテーマでやらせて貰いました。日本語リアクションなのでemojiですらない可能性もあるのでご了承ください🙇 日本語リアクションで爆速コミュニケーションの実現「コミュ障でも大丈夫👍」 皆さん、Slackのreaction（以下emoji）使っていますか？自分はめっちゃ使ってます。 emojiがあると文字では表現出来ないニュアンスも伝えられます。しかし、使いやすいemojiってなかなかないですよね。 使いやすいemojiはあるにはありますが、emojiを少し工夫すると使いやすく、文字で表現出来るニュアンスも伝えることが出来るんです。 それは日本語emojiです！(下のemojiは oti/slack-reaction-decom

目的と概要 Draft.jsはReact.js上でリッチテキストエディタを作るためのフレームワークです。日本であまり流行ってない気がするので、始めやすいように入門記事を書いてみることにしました。 最近ではReact.jsを採用しているサイトも増えてきて、Webフロントエンドは更にリッチ化の流れが激しくなっています。 今回はReact.jsでリッチなテキストエディタを簡単につくれるDraft.jsを利用して30分でテキストエディタを作っていきます。 この記事で作れるもの こんな感じのエディタ。すごいよくある感じのWYSIWYGエディタ。 手順 環境構築 React.js、Draft.jsの環境を作りましょう。 React.jsの環境を整えている方は bash npm install draft-js --save で大丈夫です。 環境構築が面倒な方にはテンプレート用意しておきました お納めく

知人が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でビルド用のタスクを起動すると

electronが流行っているみたいなので、触ってみたかった。 テスト期間が辛くてコードを書きたくなったので、簡単なアプリを書いてみた。 つくるもの electronでデスクトップアプリ風のChatworkを作成する。 webviewでChatworkを表示 自分に付いた未読のメンション数をバッジで表示する この2点を満たすのが、今回のゴール。 環境 MacOS X 10.10.4 Node.js v.0.12.4 electron v.0.30.0 やってみる electronのセットアップとHelloWorld 以下の記事を参考にしてelectronでhello worldします。 30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで