はじめに こんにちは．R&D チームの久保です． 現在 JavaScript や JavaScript にトランスパイルする言語 (TypeScript, 新し目の ECMAScript など) が主流であるフロントエンドの Web アプリケーションフレームワーク界隈ですが，数年前に WebAssembly の実行が主要ブラウザ全てでサポートされて以来，ひそかに他の言語によるフレームワークが増えつつあるのをご存知でしょうか？しかもそれらは，JavaScript でデファクトスタンダードとなりつつある React や Vue.js などと同様，仮想 DOM を実装していたりします． 例としては C# (.NET) の Blazor, Rust の Yew, Go の Vugu, C++ の asm-dom などがあります．ただ，現時点ではその多くが実験的なプロジェクトであり，今すぐに Jav
この記事でできあがるもの はじめに 自分の作ったものが web に公開されるのはうれしいことだ。 そのうれしさまず体験することで開発モチベが高まると思う。 10 分くらいでできるのでお試しあれ。 やっていくこと Flutter のサンプルアプリを Firebase Hosting を使って web 上に公開する。 開発環境 マシン: M1 MacBook Air エディタ: VSCode Flutter: 1.26.0-2.0.pre.402 • channel master 作業の全体像 Flutter アプリを作成 GitHub と連携 Firebase に新規プロジェクト作成 Firebase CLI のインストール GitHub Actions の手直し PUSH & DEPLOY 1. Flutter アプリを作成
こんにちわ alivelimb です。 本記事ではプロジェクト毎に用意している Python 開発環境を紹介します。なお、本記事で紹介した環境構築の自動化スクリプトをgithubで公開しています。 概要 Python の開発環境は主に VSCode, pyenv, poetryを用いて用意しています。 pyenv は Python 自体のバージョン管理を行います。Python3.8 から 3.9 への切り替えもコマンド 1 つで行うことが可能です。Poetry は Python パッケージの管理を行います。これらに加えて VSCode の各種拡張機能を活用することで開発環境としています。 本記事で構築した環境デモ gif デモで示していることは以下の通りです リッチな予測変換 自動インポート(pathlib.Pathをインポート) ファイル保存時の静的解析 & 自動整形 Type Hint
概要 みなさんは React のプロジェクトでアイコンが必要な際はどのように実装していますか？ SVG の埋め込み？それとも Font Awesome？ 私は、主に「React Icons」という React 用のライブラリを使用しています。 React Icons は、豊富な種類のアイコンが揃っておりシンプルで使いやすいため、大変重宝しています。 この記事では、React Icons の紹介とその使い方について解説しています。 それでは、早速みていきましょう。 React Icons とは React Icons は、Font Awesome や Material、Codicons（VSCode のアイコン）などのアイコンを簡単に利用することができる React 用のライブラリです。 npm パッケージとして提供されているため、npm installを使用してプロジェクトに導入します。
shellスクリプトで学ぼう！プログラミングがちょっと上手になる（かも）Tips集！！ | DevelopersIO
こんにちは(U・ω・U) AWS事業部の深澤です。 さて皆さん、いざプログラミングをしようとしてもなかなかテストがしにくいとか、良い書き方ないかな〜って感じたりしませんか？出来上がったソースコードを数ヶ月後の自分が読んでみて、「あれ？この処理って何してるんだっけ？？」って思うのもよくあることです。また中には実際にスクリプトをbatch処理で使おうとしているけど、どんな風に書いたら良いか悩んでいる方とかいらっしゃるのではないでしょうか。今回は僕が運用の中で学んだ「こう書くと良いんじゃない」というTipsを書いて見ました！今回はshellスクリプトを採用しています。 環境 Amazon Linux 2 AMI (HVM), SSD Volume Type カーネル 4.14.173-137.229.amzn2.x86_64 Bashバージョン GNU bash, version 4.2.46(
Rustで簡単なツールを作ってみました。はじめてのTUI（モドキ）のツールです。 このバージョン0.1.0を作ったことで得られた知見をまとめてみます。 長文になってしまったので目次をうまく使ってください。（スマホ画面だと上部の目次をタップしないと表示されないので少し見づらいです。） 「いいね」、「ツイート」、「バッジを贈る」、「コメント」大歓迎です！ 作成ツール紹介 みなさん、timeコマンドでコマンドの実行時間を計測しますよね？Rust製のhyperfineというツールがあり、複数回実行して平均を出したり、複数コマンドを比較できたり便利です。 これを見て私はメモリ使用量も計測できたらうれしいなと思ったんです。 そう、このmntimeコマンドを使えば、実行時間とメモリ使用量の平均値が分かるんです！ そんなツールですがRustで作った経緯は、最近ターミナル環境を整えました。そのとき、モダンで
道具が人を作る
このブログを作ってからというものの、格段に記事をアウトプットする速度が出るようになったので、編集ツールについて振り返りたい。 Medium Medium の投稿画面 Medium が出てきたときは、かなり良かった。既存のブログはだいたいゴテゴテしていて野暮ったかったのに対して、記事としての体裁がしっかりした見栄えになるのでちゃんとした文章を書こうという気になった。 なにより編集画面の圧倒的なシンプルさがそれまでになく良かった。同時期に Dropbox Paper なども同様に編集作業にフォーカスしたスッキリしたプロダクトで垢抜けていたという印象がある。どちらも複数人で運用するコラボレーションツールという需要もあった。 駄目だったのはやっぱりフォント周りやコミュニティが日本語用のサービスじゃないなというところと、あと記事の表示時にモーダルが出るようになったところ。 note Note の投稿
GitHub Copilot Labsとは？ VSCodeの拡張機能として、GitHub Copilot Labs をインストールすれば、コードの解説をしてくれたり、リファクタリングしてくれたり、バグを修正してくれたりと便利な機能がたくさんあります。 以前に筆者が書いた以下のようなChatGTPの拡張機能のようなものです。 公式ページより抜粋 GitHub Copilotの実験的なアプリケーションのためのVS Code拡張機能。 GitHub Copilotは、開発者向けの画期的なAIペアプログラマですが、私たちはコーディングの未来を探求し始めたばかりです。テクニカルプレビューの期間中、Copilotチームは提案の質を向上させ、安全機能を追加しました。しかし、Copilotがコード提案以外にも提供できる潜在的な助けを見るのは難しいことではありません。 本日、GitHub Copilot L
Google ColabとVSCodeを用いた分析環境運用方法 〜kaggle Tipsを添えて〜 - ギークなエンジニアを目指す男
こんにちは。takapy（@takapy0210）です。 本エントリは下記イベントでLTした内容の元に、補足事項やコードスニペットなどをまとめたものになります。 kaggle-friends.connpass.com ちなみに今回LTしようと思ったきっかけは以下のような出来事からだったので、みなさんのTipsなども教えていただけると嬉しいです！ 情報出回ってる感あるけど、colab pro × vscode ssh のオレオレ運用方法を晒すことにより、もっと良い方法のフィードバックもらえるのではドリブンでLTするのはありなのかもしれない・・・？— takapy | たかぱい (@takapy0210) 2021年8月1日 LT資料 当日みなさんから頂いたコメント 環境構築手順 ngrokアカウント作成と認証キーの取得 ColabにGoogleドライブを接続、ngrok、sshサーバー起動
フロントエンドエンジニアたちが語る、Tips【23選】 - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは、技術広報のyayawowoです。 フロントエンドエンジニアの皆様、今のフロントエンドを楽しんでおりますでしょうか？ 変化の多いフロントエンド領域を楽しむために・・・ ラクスが開催している 「フロントエンド LT会」で発表された資料をご紹介します！ フレームワークや開発言語別にまとめておりますので、興味があるところだけを少し摘まむのも大歓迎です。 9月に開催した「フロントエンドLT会 - vol.4」は、参加者が500名越えとなるイベントなりました。 2022/1/19(水)に「フロントエンドLT会 - vol.5」を開催しますので、ご興味ある方は是非登壇/視聴申込よろしくお願いいたします！ rakus.connpass.com では、早速見ていきたいと思います！ イベント詳細はこちらからご確認ください。 ・フロントエンドLT会 vol.1 -2020夏祭り- ・フロントエンドL
Webサービス開発の文脈で、モノレポ環境を作る方法について整理しました。 ※バックエンドもフロントエンドも全てTypeScriptで開発している前提 この記事を書いた背景 世間で言われる「モノレポ」がどのように達成されているのか知らなかった 参考記事を読んでると実現方法が異なっていたり、運用のイメージが見えなかったり、ベストプラクティスが分かりづらかった Turborepoのようなモノレポツールを導入すれば解決しそうだが、このツールが何をしてくれるのか理解できなかった モノレポ何も分からない………になった この記事ではモノレポに関連する仕組みを1つ1つ丁寧に把握し、最終的に理想的なモノレポ環境を実現することを目指します。 モノレポとは？ まずは用語の整理から。 モノレポを素直に訳せば「1つのリポジトリ」という意味でしかなく、1つのリポジトリで開発していればそれは「モノレポ」と呼べそうです。
日本語入力環境レベルアップのきっかけはオンラインMTG 仕事でオンラインMTGをする機会が増えてきました。MTGのときは、チームメンバーが見ている画面で議事録を自分が打ち込んでいくことが多いのですが、チームメンバーから 「あ、その入力こうした方が早いですよー」 とかアドバイスいただけることが結構ありました。言われてみたら、ブログ長いこと書いて単書まで出しているのにも関わらず日本語入力環境に関してはかなり無頓着でした。 反省して、日本語入力環境を見直してレベルアップすることにしました。具体的に実施したのは以下3つです。 日本語入力をGoogle日本語入力に変更 カスタム辞書登録 VS Codeエディタ日本語環境構築 1つずつ紹介していきます。日本語入力環境を改善したい方は、ぜひ参考にしてみてください。 日本語入力をGoogle日本語入力に変更 基本中の基本、漢字変換ソフトからです。実は、ずっ
![日本語入力環境をちょっとだけレベルアップする方法 - karaage. [からあげ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9bb0dd50c2b42884bbb86e07cf6d065eb28fac14/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkaraage%2F20210415%2F20210415125910.png)
VS CodeからCloudShellに接続！「AWS CloudShell plugin for VS Code」を試してみた | DevelopersIO
こんにちは！DA(データアナリティクス)事業本部 インテグレーション部の大高です。 re:Invent 2020 で発表されたマネジメントコンソールから利用できるシェル「AWS CloudShell」ですが、これをVS Codeから利用できる「AWS CloudShell plugin for VS Code」という拡張機能があります。 以前から気になっていたのですが、やっと試すことができたので設定方法などをまとめたいと思います。 前提条件 以下については既に対応済みであることを前提として記載しています。 AWS CLIをインストール済み Session Manager plugin をインストール済み IAMユーザを作成しており、IAMユーザのアクセスキーが発行済み AWS CLIのインストールと、Session Manager pluginのインストールについては以下の記事でも記載して
上達のコツはやはり反復練習！ということで、第4回では、InDesignで作られた書籍のPDF（なければプリントアウト）をもとに、紙面デザインをそっくりに再現する方法について解説します。何度か作成していくうちに、Vivliostyleの可能性やクセがつかめてくるはずです。 CSS組版を覚える早道は……？ 筆者は2023年に『Web技術で「本」が作れるCSS組版 Vivliostyle入門』を執筆しましたが、これを読んだだけで自在に本を組めるようになるかといえば、残念ながらそう簡単なものではないというのが正直なところです。 では、どうやってCSS組版を勉強すればいいのでしょうか？ ひるがえって、自分がたどった道のりを思い出してみると、CSS組版とVivliostyleを使い始めたのは、書籍の原稿整理の一環として、書籍デザイン通りの字数・行数をCSS組版で再現したのが始まりでした。何度もそれを繰
ホームページ- EY-Office
世の中たいへんな状況ですが、 EY-Office では淡々と新しいReact教育のテキストを書いてます。 今回のテキストは現在の主流になりつつある、以下のような技術を使ったReactの入門テキストです。 React Hooks メイン (React.Componentクラスは解説程度) TypeScriptメイン Redux章には、Redux Toolkit を採用 これらの技術は、先端の技術を採用するネット企業等では既に使われている技術なので、ネット上には充分に情報があり楽勝かなと思ったのですが、案外苦労しました。 Create React App 2年前に 作りながら学ぶ React 入門 を書いた時には、まだ Create React App はありませんでした。Webpack, Babel, ESLint … をインストールし、設定ファイルを書かないと React が試せない状況で
はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられるということも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。 対象読者 テキストエディタメインで開発してきた方 Visual Studioより軽い環境が欲しいと考えている方 Visual Sudio Codeをもっと使いこなしたい方 必要な環境 本記事の内容は、以下の環境で動作を確
深層学習モデルの実装を爆速にするVSCodeの設定メモ - May the Neural Networks be with you
こんにちは。@shunk031です。 新型コロナウイルスが猛威を奮っていますね。 不要不急の外出は控えるのが大切そうです。 こういう時は引きこもって論文を読むのが一番です。 今回はコードエディタであるVSCodeで、深層学習モデルの実装を爆速にするための設定についてメモします。 深層学習モデルの実装をする際にはリモート上にあるGPUを搭載したサーバで実装をしたりデバッグすることが非常に多いです。 VSCodeはこうしたリモートでのコード編集およびデバッグを簡単に行える仕組みを多数揃えています。 本記事では、深層学習モデルの実装に頻繁に利用されるPythonを対象に、以下の観点からモデルの実装を爆速にする設定や機能について紹介します: Pythonの開発環境の構築 リモートのGPUサーバに接続するための設定 深層学習モデルの実装・デバッグを簡単にする機能 おすすめのショートカットキー・拡張機
TypeScriptでCLIツール作りをするためのプロジェクトサンプルを作ってみた - $shibayu36->blog;
最近TypeScriptの学習をしようと思い、何でもTypeScriptで作ってみている。今回はCLIツールを作ろうと思ったのだが、ビルド環境やeslint環境など考えることが結構あった。そこでTypeScriptでのCLIツールのプロジェクトサンプルを作りながら勉強してみた。 作成したのは https://github.com/shibayu36/typescript-cli-project 。 npm install -g shibayu36/typescript-cli-project でtypescript-cli-projectというコマンドがインストールされ実行できるようになった。 このプロジェクトサンプル作成を通して学んだことをメモしておく。 参考文献 以下2つの文献が入門として非常に参考になった。この2つの文献を参考にしつつ、公式ドキュメントを追いかけながら作成していった。
概要 社内勉強会の資料。 TypeScriptのtsconfig.jsonにはオプションが色々とあるので、それらの意味や用途を理解する目的です。 tscのバージョンは3.7.2を使用します。 VSCodeのバージョンは1.40.1を使用します。 公式のドキュメント：https://www.typescriptlang.org/docs/handbook/tsconfig-json.html 公式ドキュメントの和訳：http://js.studio-kingdom.com/typescript/project_configuration/tsconfig_json また、各項目の詳しい説明はdetailsタグを使ってデフォルトで非表示にしています（全部デフォルトで表示するとめっちゃ長いので）。「詳しく」の部分をクリックすると展開されます。 2020年5月24日追記 公式のtsconfig.j
Visual Studio Code 等のアプリで command + [ (open bracket) がmacOSに吸われるニッチなバグの解決 - 学習する天然ニューラルネット
状況 直し方 先人たちの記録と解決しない事象 推測される原因 ついでに発見したバグ 状況 Macを初期化して再セットアップしたら、VSCodeで command + [ (open bracket, left bracketとも) が効かなくなった。 プログラミングしているときにこのショートカットを多用しているのでめちゃくちゃ困る。indentができなくなった！しかもshift + command + [のようなショートカットもすべて効かなくて困った。タブ移動もできねぇ〜〜〜〜！ しかもよくよく確かめるとElectron製のアプリ全般で効かなくなってる。これは最悪である(一部は反応するけど意図した挙動でないことになった)。 もし、これを読んでいるあなたもお困りならば次に進もう。 自分の知る限り一番シンプルな解決策をここで提供する。 このバグが起こりうる環境等については後で述べる。 直し方
[VS Code Insiders] MicrosoftからJupyter 拡張機能が提供されたのでさっそく触ってみた #VSCodejp #VSCode #拡張機能 #Jupyter #Python | DevelopersIO
こんにちは、Mr.Moです。 MicrosoftからJupyter 拡張機能が登場しましたね！今のところ Visual Studio Code Insiders のみでの提供のようですが今後に大変期待が持てる拡張機能なのでさっそく記念に使ってみたいと思います。 Jupyter 拡張機能とは 今日の Jupyter Notebooks でサポートされている言語カーネルの基本的なノートブックのサポートを提供する Visual Studio Code 拡張機能です。多くの言語カーネルは変更なしで動作します。高度な機能を有効にするには、VS Code 言語拡張で修正が必要な場合があります。 https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter ちなみにこれまではPython拡張機能で Jupyter Noteb
概要 WebAssembly 逆アセンブル1 と Rust 製の WebAssembly オプティマイザの twiggy を駆使して、WebAssembly ファイル中の data セクションのサイズ削減を図る 対象読者 WebAssembly を極限まで小さくするための、いかなる苦労を厭わない人 この記事中に、ツールを使えば簡単に WebAssembly を極限まで小さくできる、魔法のような方法が紹介されていると期待していた人はブラウザバック推奨 WebAssembly Text Format にアレルギーのない人 使用ツール WebAssembly for VSCode Visual Studio Code 上で、次の機能を提供する拡張機能 WebAssembly を WebAssembly Text Format に変換する WebAssembly Text Format の色付け
コマンドラインにオートコンプリート機能を簡単に導入できる「inshellisense」が面白そう | DevelopersIO
こんにちは、CX 事業本部 Delivery 部の若槻です。 2 週間ほど前に、Microsoft が inshellisense（インシェリセンス） というツールを公開しました。 inshellisense は、コマンドラインの入力時にインテリセンスを表示してくれる オートコンプリート機能 をシェルに簡単に導入できるツールです。600 以上のコマンドに対するオートコンプリートをサポートしており、現在は RC（Release Candidate）バージョンとして公開されています。 基本情報 サポートしている OS 環境 macOS Linux Windows サポートしているシェル bash zsh fish pwsh powershell 前提条件 node >= 16.x 導入方法 npm install -g @microsoft/inshellisense 導入がとても簡単なのも
AWS Application Composer in VSCodeを使ってAPIを作ってみた - Qiita
はじめに こんにちは、都内でソフトウェアエンジニアとして活動しているYSasagoです。 AWS re:Invent 2023の基調講演でDr. Werner Vogelsによって発表されたAWS Application Composer in VSCodeを使って、実際にAPIを作成してみたいと思います！基調講演はYoutubeで視聴することができます Application Composerとは Application Composerは、前年のre:Inventで初めて発表されたツールで、AWSコンソール内で直感的にサーバーレスアプリケーションを構築できるドラッグアンドドロップ式の便利なツールです。このツールはAWSのベストプラクティスに準拠し、Infrastructure as Code (IaC) の自動生成を可能にします。 VSCodeでApplication Composer
AIとペアプロする「GitHub Copilot」がneovimとIntelliJ IDEAでも利用可能に、テクニカルプレビューとして
AIとペアプロする「GitHub Copilot」がneovimとIntelliJ IDEAでも利用可能に、テクニカルプレビューとして GitHubは10月27日と28日の2日間（太平洋時間）、オンラインイベント「GitHub Universe 2021」を開催」し、現在テクニカルプレビュー中のGitHub CopilotがnervimとIntelliJ IDEAでも利用可能になったことを発表しました。 GitHub Copilot Technical Preview is available now for developers on the @jetbrains IntelliJ platform of editors including @intellijidea and @pycharm https://t.co/1FZjsv4NoJ pic.twitter.com/z4AV9TY
ちまたで話題のChatGPTをVSCodeで動かして、開発環境をイケイケにできるらしいということで早速導入してみました。 zenn.dev VSCodeのChatGPTプラグイン、クラスのDocstrings書かせるのにめちゃくちゃ使える！いろいろうまく使えそうなのでどんどん使っていこう。CopilotでどうでもいいコードをTab連打で爆速で埋めていって、ChatGPTと会話しながらブラッシュアップしていく開発スタイル最高では🤩 pic.twitter.com/odn9MnqaZP— いのいち (@inoichan) 2023年3月18日 しかし、非常に残念なことに、ChatGPTのプラグインを導入した瞬間に当プラグインがマーケットプレースより削除されてしまいました...。 【悲報】ツイート直後にvscode-chatgptがマーケットプレースから削除されたため、最高の開発スタイルが10
VS Code拡張機能を追加してCloudFormation開発環境をレベルアップする | DevelopersIO
データアナリティクス事業本部コンサルティンググループのnkhrです。 このブログでは、CloudFormation開発で利用できるVS Code拡張機能の設定について紹介します。今回実施した環境のバージョンは、下記の通りです。 Windows 10 VS CodeのVersion 1.60.2 PythonのVersion 3.9.7 ※バージョンが違うとGUIの設定画面や、設定パラメータ名など異なる場合があるため、設定時は注意してください。 このブログでは、下記の拡張機能の設定について説明しています。 vscode-cfn-lint：テンプレートを解析しバリデーションを実施 indent-rainbow：インデントをカラー表示（yaml形式で作成する場合は重宝しそう） CloudFormation support for Visual Studio Code：補完機能や公式ドキュメントの
【書評】「実践 AWS CDK – TypeScript でインフラもアプリも！」 | DevelopersIO
技術書典応援祭で発売されていた「実践 AWS CDK - TypeScript でインフラもアプリも！」の書評です。これからAWS CDKを始める人や少し触り始めた人には有用な内容だと思ったので、各章でどんなことが書かれているのか簡単に紹介します。 はじめに CX事業本部東京オフィスの佐藤智樹です。 先月の技術書典応援祭で買ってからずっと積んであった「実践 AWS CDK - TypeScript でインフラもアプリも！」を読んで、CDKを始める際のイントロとして分かりやすくまとめていると思ったので紹介したいと思います。これからCDKを始めるという方はもちろん、既にAWS CDK使い始めてますという方にも体系立って説明が書かれているのでおすすめできる内容でした。 概要 販売ページより学べるポイントを引用します。 本書で学べるポイント ・AWS CDK の基本を紹介 ・AWS Step Fu
プログラミング言語Rubyの国内最大級のカンファレンス「RubyKaigi」。「RubyKaigi 2022」のKeynoteで登壇したのは、齋藤優太氏。「Ruby meets WebAssembly」のテーマで、WebAssembly上でRubyが動くようになった経緯、テクニック、ユースケースについて発表しました。全2回。前半は、なぜWebAssembly対応をするのか、そのモチベーションと経緯について。 登壇者の自己紹介とアジェンダ紹介 齋藤優太氏（以下、齋藤）：いやぁ～、緊張しますね（笑）。みなさんおはようございます。 会場：おはようございます。 齋藤：「Ruby meets WebAssembly」ということで、今日は最近少し話題になっているRubyとWebAssemblyの話をしようと思います。よろしくお願いします。 （会場拍手） RubyがWebAssembly上で動くようにな
「node.jsにtextlintをインストールして」「ルールをtypescriptで記述して」「VSCode上でステップ実行でデバッグしたい」をする - 土屋つかさの技術ブログは今か無しか
近年の大規模プログラム開発環境では、ソースコードを共有する前にlinterと呼ばれるツールを使ってコード検証をするのが一般的です。linterでは決められたコーディングルールに沿っているかについて、コンパイラよりも厳格なチェックを行い、場合によっては自動的に修正してくれます。ちなみに「linter」という名称はUNIXのlintコマンドから来ていて、"lint trap（洗濯機に取り付けてある「糸くず("lint")取り」の事）"に由来しているそうです*1。 github.com textlintは、自然言語で書かれたテキスト用のlinterとして提供されているツールです*2。提供されている様々なルールを組み合わせて、テキストを検証する事が出来ます。 textlintはnode.js上で動くjavascriptのアプリで、独自のルールを作成してツールに組み込む事も出来ます。新規作成をサポー
class: middle, center <img src="./assets/logo.svg" align="center" width="200" /> モダンな JavaScript/TypeScript 実行環境 Deno --- class: middle, center 「Deno」 聞いたことありますか? 🙋♀️ 🙋♂️ --- class: middle, center 「Deno」 使ったことありますか? 🙋♀️ 🙋♂️ --- class: middle, center 今日は Deno を 「聞いた事ない」 ~ 「触った事はある」 ぐらいの人向けの話をします --- # 話す人 <img src="./assets/hinosawa.jpg" align="right" width="300" /> 日野澤歓也 twitter @kt3k Web
こんにちは。wat-aro です。 Docker 環境で開発する際に VSCode の Remote Container はとても便利ですね。 でも今まで Emacs で開発してきた人は VSCode ではなく Emacs を使いたいはずです。 ここでは僕が Emacs + Docker 環境でどのように開発しているかを紹介します。 docker コマンド まずは docker コマンドを使えなくてはなりません。 Emacs 使いのみなさんはターミナルでなく Emacs から docker コマンドを叩きたいですよね。 そんなときは docker.el です。 https://github.com/Silex/docker.el docker image コマンドや docker compose コマンドが Emacs から実行できます。 docker compose up で立ち上げたコ
Windows 内の Docker 環境を入れ替えてみた（Docker Desktop → Rancher Desktop) | DevelopersIO
はじめに こんにちは、テクニカルサポートの Shimizu です。 業務で使用している Windows PC に Docker Desktop を導入してコンテナ開発環境を構築していましたが、今回アプリケーションを Rancher Desktop に入れ替える機会があったため、備忘も兼ねて移行手順をご紹介します。 Rancher Desktop を選んだ理由 開発業務上、以下の要件が必須でした。 WSL（Windows Subsystem for Linux）上で docker コマンド / docker-compose コマンドを使用できる。 Visual Studio Code でコンテナに接続し、内部のファイルを編集できる。 上記の要件を満たし、かつ今まで使用していた Docker Desktop とできるだけ使用感が近い、という観点で Rancher Desktop を選択しました
はじめに 今回は、今話題の Claude 3 でAWS CDKというAWSインフラのプロビジョニングツールを使い、簡易的なメール通知の仕組みを作成しました。 基本的にはClaudeに尋ねながら構築を行っており、AWS CDKの最初のセットアップ以外はコードをほとんど書いていません。 なので、AWS CDKに馴染みが無い方でも、最初のセットアップさえ出来れば、Claudeを活用しながら、どなたでもAWS CDKをご活用頂けるのではと考えております。 技術要素の紹介 Claude 3 2024年3月4日に発表されたAnthropic社の最新モデルの生成AIです。 特に驚いたのは「マルチモーダル」対応という事で、画像やPDFの分析もしてくれます。 anthropic.comに登録すると、Claude 3 Sonnetをお試し頂けます。 今回はこちらを利用し、AWS CDKのコードを出力しています
VSCodeのオンライン版であるVisual Studio Online(VS Online)がついにPublic Previewになりました。早速使ってみたので雰囲気をつかんでもらえるようにレビューしてみます。個人的にはAWSに買収される前のCloud 9をよく使っていたので、とても楽しみにしていました。これでローカルマシンに色々なバージョン・設定の開発環境を用意したりする必要はなくなりますね！ 必要なものはMSアカウントとAzureの課金設定 パブリックプレビューに参加するには、Azureのアカウントを作成し、サブスクリプションプラン（お支払い設定）を設定する必要があります。仕組みとしてはVSCodeがはいったインスタンスをAzureがホストしてくれるわけです。 実際に申し込んでみましょう。お支払アカウントを選び、リージョンを選択（現在東京はないのでSoutheast Asiaをえらび
この本の概要 E2Eテスト（End-to-End Testing）とは，システムの端から端（End-to-End）まで，全体を通して行うソフトウェアテストを指します。本書ではE2Eテストを「ユーザーの視点でWebシステムの動作を確認する自動テスト」として定義し，E2Eテストをこれからプロジェクトに導入しようとしている人，すでに導入しているがパフォーマンスや保守性で課題を感じている人を対象に，E2Eテストのフレームワークとして近年人気が急上昇しているPlaywrightをツールとして，その目的からモダンなノウハウまで，E2Eテスト初心者の方にもわかりやすくハンズオンを交えながら解説します。CIへ組み込む方法やユニットテストとの棲み分けなど，E2Eテストを実際の開発現場に投入するうえでの知見も数多く紹介します。 こんな方におすすめ E2Eテストをこれからプロジェクトに導入しようとしている人 す
このたびラップトップを新調しました。6年ほど前に中古のノートにLinuxを入れてつかってましたが、新品のWindowsノートに乗り換えました。そこで以前から気になっていたWindows Subsystem Linuxを使って、Windows上にLinuxの開発環境を用意してみたところ、セットアップもすごく簡単かつ快適な開発環境になったので、詳細を少し調べてみました。その結果と実際の開発現場における利用シーンについて紹介します。 ※現段階ではPreview版OSへのアップデートが必要。WSL2を利用するにはbuild 18917以上のOSバージョンが必要です。それにはthe Windows Insider Programというプログラムに登録した上で、OSをPreview版にアップデートする必要があります。 ターミナルを開くとそこはもうLinuxでした 近頃の私が個人的なLinux環境でやる
はじめに Webシステムの開発に携わりたくて転職して9か月，知らない事ばかりで日々勉強しております。 自分の勉強用メモとして知っておくべき技術をまとめようと思いました。 (こちらの記事にインスパイアされたものです) 技術用語について，なるべく2～3行で概要を説明できる事を目指しています。 情報が多過ぎるので，主流な技術は見出しを赤字にしています。(主観強め) また，今後需要が増えそうな技術は青字にしています。(かなり主観強め) とはいえ，新しい技術が登場すれば，数年でトレンドが変わってしまう事も多々あると思います。 ほとんどはあくまでも初心者がネットで情報をかき集めた程度のものです。 誤りがあればご指摘，ご意見など頂きたいです。 ※2023/2/6追記 不正確・不十分だと思った記載はひっそりと随時修正しています。 また，「そういえばこんなんあったな」という項目も追記しています。 あと，自分
ウェブブラウザを使ったVJ活動 - hitode909-vj-workshop
ウェブブラウザを使ったVJ活動 2019/11/30 Audiovisual Workshop with TOPLAP Japan at 甲南女子大学 hitode909 はじめに、の前に いまのうちにGoogle Chromeをダウンロード、インストールしておいてください ワークショップ教材はGoogle Chromeで動作確認している Google Chrome ウェブブラウザ はじめに はじめに(15分) 今日のワークショップでやること VJについて、ブラウザについて やってみよう(30分x3で1.5時間) HTMLを書こう VJとして適した形のHTMLを作ろう コントローラをくっつけて操作できるようにしよう おわりに(15分) 今後の進め方 参考になる情報について 自己紹介 hitode909 株式会社はてな アプリケーションエンジニア はてなブログ(ブログサービス)やGigaVi
目次 Flutterとは MacにFlutterをインストール Android 開発環境の準備 iOS 開発環境の準備 Flutterサンプルアプリの実行 エラーの対処方法 Flutterを使ってみる 春にWebエンジニアデビューをしてから約半年が経ちました。 そしてひょんなことからFlutterを勉強してみることになりました！ 調べてみるとFlutter For Webがででているようなので、数年後はもしかするとWebの世界でも流行っているかもしれないので今のうちに勉強していても損はないはず！ そんなこんなで今回はFlutterの第1回目の投稿となります！ 開発環境 OS: MacOS Mojave 10.14.6 Flutter: 1.9.1 1. Flutterとは 最近のアプリ開発ではほとんどがAndroidとiOSの両方でリリースをすることが多いと思います。 その場合、フレーム
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SwiftUI で Web アプリという可能性 - OPTiM TECH BLOG
【Flutter】Web アプリを🚀爆速🚀で Firebase Hosting にデプロイする
VSCodeとPoetryで作るPython開発環境
React でアイコンを使うなら React Icons がおすすめ
新米Rustaceanの🌾🦀による🌾🦀のためのRust入門「C++/C#プログラマーでも読めるようになる」
GitHub Copilot Labsを使ってみた - Qiita
Webサービス開発でのmonorepo環境(Turborepo, nx)
日本語入力環境をちょっとだけレベルアップする方法 - karaage. [からあげ]
Vivliostyleで市販書籍とそっくりに組んでみよう | gihyo.jp
「VSCode」での開発をよりスムーズに！基本的で役に立つ拡張機能を解説
tsconfig.jsonの主要オプションを理解する - Qiita
WebAssembly: data セクションの最適化 - Qiita
削除されてしまったvscode-chatgptを動かす方法 - いのいち勉強日記
Rubyを手軽にブラウザ上で動かすことが可能に WebAssemblyを使って解消する、Rubyの動作環境問題
モダンなJavaScript/TypeScript実行環境「Deno」
Emacs でだって Docker で開発したい！ - ESM アジャイル事業部 開発者ブログ
Claude 3とAWS CDKを使い爆速でAWSの検証が出来る環境を手に入れよう！ - Qiita
ブラウザでVS CodeがうごくVisual Studio Onlineを使ってみた - Qiita
［入門］Webフロントエンド E2E テスト ――PlaywrightによるWebアプリの自動テストから良いテストの書き方まで
WindowsアップデートでLinuxカーネルもアップデートされる時代に - Qiita
Webシステム開発で関わる技術のまとめ(2022年に知った物) - Qiita
【Vol.1】Flutter入門〜環境構築編〜 - おけらのブログ++