Vue Fes Japan 2019 サイトのソースコードを公開した - おいちゃんと呼ばれています
この記事は Nuxt.js Advent Calendar 2019 - Qiita の最終日（25日）の記事です。 Vue Fes Japan 2019 の Web サイトのソースコードを公開したので、お知らせします。 https://github.com/vuejs-jp/vuefes-2019 概要 Vue Fes Japan 2019 は Nuxt.js の静的サイトジェネレート機能（nuxt generate）によって作成している。 生成した静的ファイルを Netlify でホスティングしている。 スポンサー情報などのコンテンツをヘッドレス CMS である Contentful で管理している。いわゆる JAMstack 構成。 ポイントをピックアップ Vue Fes Japan 2018 サイトのソースコードについては下記で解説しており、2019 のものと共通している点も多いの
40代後半人文系で未だにWeb開発をしている理由 - digitalnagasakiのブログ
もう50歳がすぐそこにきていますが、未だにWebシステムの開発をしています。開発は若手や企業に任せて、自分は開発資金をとったり発注をしたりする側に まわるべきだ、ということもよく言われます。確かにそのとおりです。 ただ、現状のWeb技術のなかで「自分（達）」は何を求めているのか、それを明確にできないと依頼も発注もうまくできないのですが、 それを明確にするには、現在のWeb技術で何をどこまでできるのか、どこまでやるのにコストはどれくらいかかるのか、ということを 把握しておかないとうまくいきません。そもそも我々（この場合人文学者）は、どういうことをしたいのか、どういうものがほしいのか、 ということを、開発する人に正確に伝えるための言葉を、おそらくまだ持っていません。私自身も、そうです。そうすると、 作ってほしいものを無駄なコストをあまりかけずに作ってもらうということは非常に難しい、というか、成
(株) ライトコード Webエンジニアの宮田です。 今回、 JavaScript のフレームワークの一つであるVue.js（ビュージェイエス） を触ることになったので、学習したことを書いていきたいと思います。 最終的には Vue.js に基づいたフレームワークの Nuxt.js（ナクストジェイエス） を利用した開発を目標とします。 まず今回は、入門第1回の定番である"Hello World" プログラムから始めていきたいと思います！
YouTubeを使ってシャドーイングを行い学習記録を作るアプリをリリースしました - Eat, Play, Nap and Code
はじめに こんにちは。所属するフィヨルドブートキャンプ(以下FBC)の最終課題である自作サービスにて、Shadone(しゃどーん)というWebアプリを作成しリリースしました。 このアプリについて紹介させていただくとともに、作る過程で学んだこと、苦労したことなどを共有できればと思います。 目次 はじめに 目次 自己紹介 サービス概要 使い方デモ動画 使用技術 サービスを作った理由 こんな人に使ってほしい 技術面で苦労したこと Vue.jsが難しい timezoneが難しい 開発を続けるために役に立ったもの 週1のペアプロ 進捗YouTube ポイント付け会 『アジャイルサムライ』輪読会 余談: Discord Botを作った経験 さいごに 自己紹介 2020年10月からFBCで学習を続けてきたトミーと申します。 趣味は語学の勉強で、DuolingoのStreakは1205(2022年9月12
本連載では、Webページのユーザーインタフェース（UI）フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回は、Nuxt.jsの非同期データ機能について説明しました。今回は、Nuxt.jsを利用して作成したWebページをインターネット上に公開する方法を紹介します。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）フレームワークであるVue.jsに、Webページの作成に必要なUI以外の追加機能をまとめて提供するフレームワークです。 Nuxt.jsでは、作成したWebページをインターネット上に公開するための機能が提供されています。この機能を利用すると、Node.jsが実行できないWebサーバー向けに静的ファイルを生成できます。また、Node.jsが実行できるWebサ
WebComponents でログインコンポーネントをつくってサービス横断で使えるようにした話 - 一休.com Developers Blog
こんにちは。プロダクト開発部の渥美 id:atsumim です。 今回サービス横断で利用できるログインコンポーネントを WebComponents で実装したのでその紹介をします。 1. 背景 今年の2月に電話番号での会員登録及び認証機能をリリースしました。 これに伴って一休の会員基盤も刷新しました。 一休のサービスは主に、宿泊、レストラン、スパとあるのですが、 歴史的経緯により会員基盤が分散してしまっていたので、ひとつにまとめる狙いもありました。 会員基盤 Before/After その一環として、一休のサービスで横断して使えるログインコンポーネントを WebComponents で実装しました。 このコンポーネントにログインや会員登録の処理を集約し、新会員基盤へのインターフェースとするようにしました。 また、電話番号認証や2段階認証設定のモーダルも実装しました。下記が実際の画面です。
最近のこと - ogijun's blog
どうも、ご無沙汰してます。 はてダもグループも終わってしまって以来どうにもモチベーションがわかなくて、このブログも存在を忘れてしまったかのような状態だったのですが、ひさしぶりにいろいろ告知をするために重い腰を上げて出てきました。 近況について まず、お仕事について。荻野ことogijunは今年の3月からプログラマ復帰しまして、株式会社iCAREにジョインしています。業務委託とか技術顧問とかじゃなくて社員としてガチ入社です。 icare.jpn.com え、コーヒー屋はどうするの？と思った方もいるとは思いますがご安心(？)ください、やめてません。平日は8時間フルタイムでプログラマとして働いた後、戻ってきて夜に店を開けたり焙煎したりのコーヒー屋業をやります。ダブルワークです。土日は基本的にコーヒー屋に専念します。 これまでもコーヒー屋の傍ら細々とプログラマをやっていたんですが、そういう細々とした
2021 / 2020 / 2019 GitHubで最もホットなライブラリをランキング表示してくれるbestofjs.orgというサイトがあります。 そしてここは毎年、その一年で最もホットだったライブラリを発表しています。 選考基準は『その年増えたスターの数』であり、恣意的要素の入る余地はありません。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.jsです。 以下は2019年のランキング、2019 JavaScript Rising Starsの日本語訳です。 JavaScript ライジングスター 2019 4回目のJavaScript ライジングスターにようこそ！ 2019年にGitHubで最も注目を集めたプロジェクトを、数字で見てみましょう。 以下のチャートは、2019年の一年間にGitHu
こんにちは。レシピサービス開発部のkaorun343です。クックパッドではスマートフォン向けページにおける開発者体験向上のために、レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話にて紹介したとおり、Next.jsとGraphQLを用いたモダンな環境へと移行を進めています。例えばモバイル端末からのアクセスでURLがトップページの / であれば Rails、レシピ詳細ページの /recipe/:id であれば Next.js アプリにルーティングされるようになっています。現在ではレシピ詳細ページだけではなく検索結果ページやつくれぽ詳細ページ、MYフォルダページなどもNext.jsアプリケーションに置き換わっています。今回はその移行により生じた課題と取り組み方、それから併せて実施したモノレポ環境整備について紹介します。 共通コンポーネントの導入背
はじめに 3月ごろまで転職活動をしており、この5月から新しい会社で働くことになりました。本エントリはその転職活動の振り返りです。 目次 はじめに 目次 数字での振り返り 転職活動開始のきっかけ 過去の振り返りから自分のこれからを考える 今回の転職の軸を決める 選考とその結果 転職先とその理由 終わりに 数字での振り返り 今回の転職活動の具体的内容に触れる前に、先に数字で結果をお知らせすると以下のようになりました。 項目 数 利用した転職サイト数 4 転職サイトで受信したスカウトメール数 80通程度 カジュアル面談を受けた社数 16社 選考へ進んだ社数 3社 内定 3社 転職活動開始のきっかけ もともと過去何回か転職活動を経験しており、その際に利用した各転職サイトは登録済みのまま放置していました。 ある時、TwitterのDMで他社のエンジニア(SRE)の方から「転職の予定は無くても構わない
Vue.js初心者でも書ける！ゼロから始めるVuexのテスト入門編その１(vue-test-utils) - 虎の穴開発室ブログ
みなさん、いかがお過ごしでしょうか。今年の7月からラボのマーケチームに加わったY.I.です。 好きな作品は「ゆるキャン△」です。お盆休みには「ゆるキャン△」舞台の富士山周辺でキャンプツーリングをしてきました。 ゆるキャン△に関しては熟知している私ですが、技術的にまだまだ未熟な開発者です・・・。活躍できるよう頑張っていきますので、どうぞよろしくお願いします。 さて、今回はVue.jsのテスト、とくにVuexのテストについて書いていきたいと思います。 0. この記事を読んでわかること 本連載では「ゼロから始めるVuexのテスト入門編」と題して、これまでVuexのテストを書いたことがない方を対象に、全2回に渡ってVuexのテストの詳細を書いていきます。 今回は連載の第一回目として、下記の構成でお送りします。テストの必要性やポイント、またVuexのテストがどのようなものになるのか感じ取っていただけ
50以上の言語に対応！何でも開発可能な無料のクラウドIDE「Repl.it」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、多彩なプログラミング言語を活用したプロジェクト開発ができる無料のクラウドIDEをご紹介します。 HTML / CSS / JavaScriptを利用したフロントエンド開発から、Node.js / Python / PHP / Ruby / GOなどを使ったバックエンド開発まで、さまざまな言語を利用した開発環境がブラウザ1つで完結できるのが特徴です。 他にも、GitHub連携や複数人とコラボなども可能なので、ご興味ある方はぜひ参考にしてみてください！ 【 Repl.it 】 ■「Repl.it」の使い方 それでは、「Repl.it」をどのように使うのか詳しく見ていきましょう。 サイトのトップページにアクセスしたら【start coding】ボタンをクリックしてください。 プログラミング言語を選択する画面が表示されるので、好きな言語を選びま
Rails 6.1のDocker開発環境構築をEvil Martians流にやってみた（更新）｜TechRacho by BPS株式会社
更新情報 2019/11/20: 初版公開 2021/03/25: Rails 6.1.3.1に合わせて更新 2021/04/06: Ruby 3.0.1に更新 先々月に公開したこちらの翻訳記事の実践編ということで。試行錯誤しているうちにRailsが6.0.1になりました。 クジラに乗ったRuby: Evil Martians流Docker+Ruby/Rails開発環境構築（翻訳） Docker Desktop for Macについて これまではピュアな環境を求めてParallels Desktop for MacのUbuntu VM上でDockerを使っていたのですが、久しぶりにDocker Desktop for Macを使ってみると速度や使い勝手が随分よくなっていて驚きました。 Docker Desktop for Macの方がUbuntu VMのDockerよりビルドが速い（体感で
v-kansai Vue.js/Nuxt Meetup #11 (京都Devかふぇ共催)でVue.jsのパフォーマンスに関する発表を行いました。 https://vuekansai.connpass.com/event/144194/ # 参考にした記事 - 超速! Webページ速度改善ガイド(WEB+DB PRESS plus) - https://www.amazon.co.jp/dp/477419400X - Web Fundamentals | Google Developers - https://developers.google.com/web/fundamentals - Vue.js App Performance Optimization – A Tutorial Series - https://madewithvuejs.com/blog/vue-js-app-pe
Vue.js アプリでユニットテストを書くには、Vue Test Utils や Jest など、知っておくべきことがそれなりにあります。 現在、Vue CLI でアプリを作っていますが、ユニットテストを書くために色々と調べないといけませんでした。 今回はその過程で理解した Vue.js でのユニットテストの基本を以下にまとめます。 Vue.js のユニットテスト まず、Vue.js では何を「ユニットテスト」として考えるのかを整理します。 ユニットテストの単位 Vue.js アプリは、複数のコンポーネントで構成され、それぞれのコンポーネントが連動しながら動きます。 そのため、ユニットテストの単位は「コンポーネント」となり、コンポーネントごとにテストを書いていきます。 何をテストすべきか？ コンポーネントごとにユニットテストを書くということですが、コンポーネントのどの部分に対してテストを書
Storefront UIはECサイトの為に開発されたVue.jsベースのUIコンポーネントライブラリです。デザイナーや開発者向けに設計されており、カスタマイズのしやすさも考慮されているそうで、デスクトップやモバイル、PWAに対応できるようになっているそうです。 アトミックデザインが適応されており、必要な時に必要な要素を組み合わせて設計する流れを想定しています。 ECサイト向けのUIコンポーネントが沢山 ECサイト用に構築されたのだから当たり前かもしれませんけど、ECサイトでよく使われるUIコンポーネントが沢山用意されており、これだけでも珍しい気がします。 例えばS、M、Lなどのサイズの選択や色の選択、購入数を増やすためのカウンター、レーティング、アラートやプライス表示に割引表示の工夫なども見られ、細かく配慮されている印象です。 Vue.jsを使ったECサイトの構築を考えられている方は一見
こんにちは、@p1assです。 世間は就活解禁日ということで少し騒がしい感じがしますね。私は既に就活を終えているためあまり関係ないのですが、思い立ったので自分の就活事情をブログにまとめておこうと思います。 就活はかなりセンシティブな話題であり、ネット上を探しても見つかる情報が少ないです。また、個人の情報は埋もれやすいという問題もあります。そのような状況では参考になる情報に出会えず、就活をどのように進めていくか悩むのではないでしょうか？自分も例に漏れず、かなり苦労しました。そのため、「後輩にはより多くの情報を手に入れてほしい！」と思っています。 そこで、本記事では私が Web 系のソフトウェアエンジニア職で就活をした結果やその過程で得た知見などを公開したいと思います。勿論 NDA がある内容は公開できないですが、私の経験が後世の役に立てば幸いです。（スコープは Web 系のソフトウェアエンジ
Webアプリケーション開発は専業化が進んできている 清野隼史氏（以下、清野）：今、リプレイスの話や、こういうところを作っていくのならRails以外使ってもいいかもという話が出たので、そのままテーマ2「今後のWebアプリケーションはどうなっていくか」にいきたいと思います。そもそもRailsだけではうまく立ち行かなくなってきているのは、Webアプリケーション自体の環境の変化が大きいのかなと。 テーマに「今後」と書いていますが、これからWebアプリケーションの開発の現場や環境はどうなっていくのかを整理したいと思います。変化として大きいのは開発体制だと感じているのですが、いかがでしょうか？ 櫻庭洋之氏（以下、櫻庭）：弊社では、サーバーサイドもフロントも、時にはインフラも含めて全般をやるタイプのエンジニアが多い。昔からWeb界隈は1人でなんでもやる人が多かったと思いますが、採用活動をしていると、サー
こんにちは。歴１０年のアプリエンジニア（Best of AppStore🏅受賞歴あり）です。 neeboor🗯という位置情報を使った新しいSNSアプリを作りました。 toC向け＆コンテンツ系＆モバイルアプリというサービスの特性上、最初からある程度高い完成度のサービスを提供しないとユーザーの手に取ってもらえないなと思い、UI/UX中心にかなりこだわって開発した結果、開発に２年以上かかってしまいました。 今回はサービスの紹介をしつつ、開発で苦労した点や工数をかけた点について記事にしたいと思います。 サービスの紹介 neeboor🗯は、「あなたの生活圏をもっとおもしろくするSNS (Make your living area hackable)」というコンセプトの位置情報系SNSアプリです。従来のローカル系サービス（＝地域情報サイト、半径◯メートルでお店や友達探す系、出会い系、ナビ系、トラ
Vue.js 状態管理の選択肢 - そのVuex本当に必要ですか - / Vue.js State Management Options
iCARE Dev Meetup #19 2021/03/17
はじめにTIG DXユニットの真野です。フューチャー技術ブログの運営の1人です。未来報を運営している岡田さんなどと一緒に、気持ちは草の根活動で外部発信に携わっています。 IT企業の技術ブログ運営は、ある一定の質をキープしながらも、投稿頻度を高め・それを継続することが求められ、周囲の期待値もあるので中々気を抜けない仕事だと思います。単発ならともかく、継続することは忍耐が必要なので特に大変です。運営していてこれはナレッジだなと感じたことをまとめていきます。 2020/09/08 続編を公開しました: フューチャー技術ブログで行っている連載企画が良いよって話 技術ブログの大変なところ≒記事ネタを探すところ熱心な寄稿者が複数いて、運営からの声掛け無しで記事が集まるのであれば非常に楽ですが、たいていの組織やチームはそうでないと思います。また、本業は記事を書くことではなく、自社プロダクトの開発やシステ
この記事では、日々進化を続けるWeb制作で役立つ、便利な最新オンラインツールをまとめてご紹介しています。 Ai、人工知能を利用した、これまで面倒だった作業を改善できるツールも見かけるように。また、プロトタイプツールFigmaに関する便利なプラグイン、テレワークによるオンラインミーティングで使えるさーびすなども増えています。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール Web制作が面白いほどはかどる！便利な最新オンラインツールまとめ Web制作便利ツール Eazy CSS どんなウェブサイトのデザインも、コード知識不要でタ
感想です。 何をしたか 現状でBlitz.jsで本番サービスを運用できるかの調査。 Railsで運用している本番サービスの一部機能を、3日間ほどかけて移行を試してみた。 結論 (Railsの主戦場でもある)新規事業開発の文脈でのクイックな立ち上げを想定するなら、本番運用するにはまだ厳しい。 特に、RailsユーザーとしてはActiveRecordがないのが厳しい。 開発効率そのものはRailsと比べて多少落としても、Railsよりもスケーラブルで型安全に開発したいなら、割と良い選択肢に思う。 もろもろ可能性は感じるので、引き続き応援していきたい。 良かった点（＝Blitz.jsに興味を持っている理由） 型安全な開発 サーバーもフロントも全てが型に守られた開発、そしてIDEの恩恵を受けられるのは、いうまでもなく心地がいい。 型は補助輪のようなものなので、ユーザースキルが高ければ必須ではないく
まちにまった Vue.js 3
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
達人出版会
探検! Python Flask Robert Picard, 濱野 司(訳) BareMetalで遊ぶ Raspberry Pi 西永俊文 なるほどUnixプロセス ― Rubyで学ぶUnixの基礎 Jesse Storimer, 島田浩二(翻訳), 角谷信太郎(翻訳) 知る、読む、使う！ オープンソースライセンス 可知豊 きつねさんでもわかるLLVM 柏木餅子, 風薬 R／RStudioでやさしく学ぶプログラミングとデータ分析 掌田津耶乃 データサイエンティストのための特徴量エンジニアリング Soledad Galli(著), 松田晃一(訳) 実践力をアップする Pythonによるアルゴリズムの教科書 クジラ飛行机 スッキリわかるサーブレット＆JSP入門 第4版 国本 大悟(著), 株式会社フレアリンク(監修) 徹底攻略 基本情報技術者教科書 令和6年度 株式会社わくわくスタディワール
◆はじめにどうもこんにちは。Vueが好きすぎて社内でVueを布教している@_slontです。 今回のテックブログでは、これからリリースされる待望のVue 3を万全の体制で迎えるべく、新機能の中でも個人的にアツいと思っているComposition APIについての考察をしたいと思います。 Composition APIは一体僕たちにどんな驚きをプレゼントしてくれるのか。それを確かめるために我々はアマゾンの奥地へとむk(ry さて、近々リリース予定のVue 3は、パフォーマンス改善の他、Composition API, Fragment, Portal, Suspenceなど様々な新機能があります。 参考：まもなくやってくる Vue.js 3その中でも、大規模プロジェクトに弱いと言われていたVueの銀の弾丸として（？）、ユーザが待ち望んだComposition APIが、2系のプラグイン@vu
フロントエンド連載の6記事目です。 今年のゴールデンウィーク（STAY HOME週間）に最近話題のSvelteに入門したので紹介を書きます。 Svelteとはなんですか？ 公式のサイトはこちらです。有志の方々が日本語翻訳のサイトを作ってくれています。たいへんありがとうございます！ Svelteは主にブラウザ上で動作するユーザーインタフェースを作るフレームワークで、ReactやVue.jsの対抗馬的な存在です。 特徴とReactやVue.jsなどほかとの違い公式サイトでも、コーディングする際のコード量が少ないという特徴があげられています。 詳しくはこちらのブログに書かれています。コードが多ければ作業時間とバグが増えてしまうため、コードが減らすことはこれらの問題を減らすことができるというようなことが書いてありました。またブログには具体的なコードで量の差について書いていますのでぜひ見てみてくださ
サーバーサイドエンジニアがじっくり学ぶVue.jsチュートリアル【2. Introduction】 | DevelopersIO
こんにちは。DA事業本部の春田です。 普段の業務では全く扱わないフロントエンドの世界に飛び込んでみたいと思います。最近3系が登場しましたがまだ情報が少ないので、2系のチュートリアルを進めていきます。サンドウィッチマンでいう「ちょっと何言ってるかわからない」ポイントは、その都度調べていきます。英語版の公式ドキュメントがベースです。 今回はIntroduction編です。 Vue.js とは？ Vue.jsは、ユーザーインターフェース（UI）を構築するためのプログレッシブ・フレームワークです。 Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. このモノシリックなフレームワークが何を指しているかといえば、例えばAngular.jsです。モノシリ
Atomic DesignをVue.jsで実現するための構成と考え方 | Biscuetでの例をもとに - SMARTCAMP Engineer Blog
スマートキャンプのデザイナー/エンジニアのhaguriです。 弊社では8月1日、インサイドセールスに特化したCRM Biscuet（ビスケット） という新サービスをリリースしました。 biscuet.jp Biscuetでは Vue.js + Atomic Design でコンポーネント設計をしています。今回はその構成と考え方・Biscuetチームでの運用について紹介していきます。 Atomic Design について templatesとpagesについて Biscuetでのルール atoms molecules organisms pages ディレクトリ構成 App.vue components/ plugins/biscuet-materials/ さいごに Atomic Design について Atomic Design とは、コンポーネント単位で設計していくデザイン・開発手法で
<script setup> 構文とは Vue.js 3.2 から <script setup> 構文が使えるようになりました。これは単一ファイルコンポーネント(SFC)内で Composition API を使用している際に使える糖衣構文です。下記のようなメリットを得ることができ、公式からも使用が推奨されています。 ポイラープレートが減りより簡潔になる props と emit を定義する際に純粋な TypeScript の構文が使える ランタイムのパフォーマンスが向上する IDE のパフォーマンスが向上する 基本的な構文 <script setup> 構文をざっくりと説明すると、従来の Composition API における setup() 関数内部を <script> 直下に直接記述することができるという構文です。 単一ファイルコンポーネントの <script> タグにsetup属
こんにちは。Finatextでエンジニアをしている塚本です。 証券プラットフォーム「BaaS」や、それを利用して開発されたアプリケーションのフロントエンドを担当しつつ、現在はバックエンドの実装も行っています。 Finatextに入る前は大手メーカーでSEを3年ほど、その後フリーランスを1年ほどしておりました。フリーランスになってからエンジニアを目指すことを決め、独学でコーディングの勉強を始めています。 ジュニアエンジニアとしてFinatextに入社した私が、約1年半でどの程度成長したのかを振り返りたいと思います。 まず入社当時と現在でどう変わったかがこちらです。 Finatext入社当時コーディングは１人でするのは到底無理。。デベロッパーツールどうやって開くの？rebaseって何？Laravelなら少しだけ知っているVue.js, Go（弊社使用言語）書いたことない ↓1年半経った現在ヘル
はじめに これはQiitaで開催されている「新人プログラマ応援 - みんなで新人を育てよう！」イベントの投稿記事です。 前回は「学習用のプログラムと仕事で書くプログラムは何が違うか」というタイトルで、お勉強用に作るプログラムと仕事で書くプログラムはこんなところが違うんだよ〜、というお話を書いてみました。 今回の記事ではみなさんが無事にプログラマとして就職できたと仮定して、「○○さん、このタスクお願いね」と開発タスクをアサインされたときの対応手順を説明してみます。 この記事を書いている人 仕事で20年近くプログラムを書いているプログラマ 現在は株式会社ソニックガーデンでRubyプログラマをやっている Rubyの入門書「プロを目指す人のためのRuby入門」を出版している プログラミングスクール「フィヨルドブートキャンプ」のメンターでもある 対象読者 新卒、または業界未経験の中途入社で最近プログ
Tailwind CSS実践入門 ～まず作ってから、あとで共通化する Tailwind CSS実践入門 第1章 ユーティリティファーストとは何か ──従来の課題を解決する大胆なアプローチ CSSフレームワークのTailwind CSSが注目を集めています。その特徴は、flex、pt-4、text-centerといったユーティリティクラスの組み合わせだけで、ほとんどすべてのスタイリングをしてしまおうという大胆なアプローチです。これまでのベストプラクティスと真っ向から対立するようなやり方ですが、だからこそ享受できるいくつもの強みがあります。本特集では、そうしたTailwind CSSの考え方や、具体的な使い方について紹介します。 お知らせ：本特集のサンプルコードは、GitHubの筆者リポジトリからダウンロードできます。https://github.com/yuheiy/wdpress133_
Vue.js に TypeScript を導入する障壁の一つに、状態管理の定番である Vuex が TypeScript と相性が良くないという課題があります。状態管理はアプリケーションの中枢（モデル）とも呼べ、型システムによる保守担保が求められます。この課題に対し、これまでコミュニティから様々なアプローチが試みられました。 Vue.js 界隈における TypeScript の型推論といえば、クラスベースによるものが一般的です。先行きの不透明なデコレーターだけでなく、関数型の流行によるクラスベースへの不安感は、いっそうユーザーを困惑させて来ました。いま Vue.js 界隈は、型推論と標準準拠の板挟みに葛藤していると言っても過言ではないでしょう。 私はこれまで TypeScript 芸人としてこの Vuex 型課題に取り組み続け、書籍執筆などで提案を行なって来ました。その過程で得た知見から、
LINEが定期的に開催する技術者向けミートアップ「LINE Developer Meetup」の72回目は、Vue.js Communityと共同で開催。ここではLINEの花谷拓磨氏が「How to development library to Vue 3」というテーマで、Vue 3でパッケージを開発する上でのノウハウを共有しました。 LINEとしてVue.jsのスポンサリングを開始 花谷拓磨氏（以下、花谷）：「How to development library to Vue 3」という内容で登壇いたします。よろしくお願いいたします。私はLINE株式会社のFront-end Dev9 Teamに所属している、フロントエンドエンジニアの花谷と申します。Vue.jsのコミュニティとは3年ほど前からつながりがありまして、詳しくはスライドを参照してほしいのですが、それに付随してOSS開発なども行
【30歳/完全未経験/独学】webアプリを作製しました【Golang, Next.js, MySQL, Docker, GitHub Actions CI, AWS Fargate on ECS】 - Qiita
完成物 ER図 画面遷移図 figma, 原寸画像 AWS構成図 ※備考※ GitHub Actions CIは構築済みです。 GitHub Actions CD, apiのprivate subnet化にも取り組んでいます。 EC2インタンスは通常時停止です。 技術選定理由 プログラミング、IT業界ともに未経験で着手し独学で作りました。 Go 比較対象：JAVA、Ruby、Python、PHP コンパイラ言語であり実行速度が高速である 静的型付けであり、コンパイル前にバグを発見しやすい 静的型付けかつ記述自由度が低いことから、以下２点を利点と考えた 開発を中長期まで続けた際にも、加筆・改修しやすい 他人のコードを読んだ際に学びやすい Javaも多少書いてみたが、簡素にかけるGoの方がしっくりきた SHOWROOM、IRIAM、Twitch、AbemaTVといった動画配信サービスにも採用さ
関心が高まりつつあるPWAについての技術・情報交換の場である「PWA Night」。Vol.14の今回はUI/UXがテーマです。「YouTubeをみんなでワイワイ見るためのサービスDJ7の話」というテーマで登壇したのは、Imagawa Takaya氏。1人月で開発したYouTubeの同期再生アプリ「DJ7」について、短期間での開発工程の工夫などを語りました。 ユーザーが各機能にアクセスしやすくするためのデザイン Imagawa Takaya氏：3週目に行ったことはこちらになります。今までは機能の実装がメインだったのに対して、この週からはデザインをやりました。先ほどのプロトタイプでもお見せしたとおり、DJ7ではロジックの実装とデザインの工程を明確に分けました。これはデザインしたあとで機能を増やしたくなってしまい、手戻りが発生してしまうのが嫌なためです。 この週に意識したのは、実装した機能をU
Svelteとは最近フロントエンドの技術で、ReactやVue.jsに変わって注目を集めているのが Svelte です。下記のような特徴があります。 ・仮想DOMがない ・ファイル拡張子.svelteになる ・svelteファイルに記述されたstyleはスコープ付きになる ・Store管理も内包している（ReduxやVuexのようにインストールしなくてよい） Svelteは何が良いのか？ Vue.js やReactと違って仮想DOMがありません。ビルド時に純粋なJavaScriptにコンパイルして表示します。つまりSvelteはコンパイラーです。 そもそも仮想DOMのメリットとして、アプリ全体を再レンダリングせず、変更箇所（実際のDOMと仮想DOMの差分）もしくは Contextでトリガーされたとき を検知して、局所的にレンダリングすることで高速化を図っています。 Svelteの公式ブログ
SPA に移行しづらいシステムたちレンダリングの移り変わりCSR を有効活用しづらい事業領域App Directory によって Next.js は他と対等な選択肢になりうるServer Component がデフォルトの世界React のエコシステムの恩恵を受けられるようになるどういうアーキテクチャになるか1. モノリスから Frontend サーバを分離する2. 元々あった Frontend サーバーをリプレイスする3. SPA + BFF を１つの Next.js サーバーにするまとめこんにちは、@p1assです。 最近、Next.js 13 から beta で導入されている App Directory を趣味で触っているのですが、今まで SPA を採用しづらかった事業領域でも React のエコシステムを使えるようになりそうな予感がして、ワクワクしています。 このブログでは、今まで
Qiita投稿記事から作る「日本のIT技術マップ」 - VDSLab Magazine vol.1｜likr｜note
はじめにIT分野では日々新しい技術が登場しています。技術者の肌感覚として新しい技術・枯れた技術の区別は付くでしょうが、それらを俯瞰して視ることはできるのでしょうか？昨今のIT分野では、Qiita等のプラットフォームを通じてコミュニティベースでの技術情報の発信が活発に行われています。本稿では、Qiitaの投稿記事に付けられたタグの情報を利用して、過去約10年間の国内のIT技術動向を可視化した「日本のIT技術マップ」を紹介します。 「日本のIT技術マップ」「日本のIT技術マップ」は、Qiitaの投稿記事から得たタグの関係を地図テイストに可視化したものです。投稿記事は、Qiitaのサービス開始時である2011年9月から2022年12月までのものをQiita APIから取得しました。可視化方法の主要な部分は以下の論文を参考にしています。 Gansner, E. R., Hu, Y., & Kobo
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【第1回】Vue.js 入門 〜Hello World編〜 – 株式会社ライトコード
「Nuxt.js」で作ったWebページをインターネットで公開する方法
JavaScript ベスト・オブ・ザ・イヤー 2019 - Qiita
Next.js アプリケーションの共通コンポーネント開発 - クックパッド開発者ブログ
あるWeb系エンジニアの転職活動 - やんばるテック
Vue.js Performance Tips / #v_kansai 11
Vue.js ユニットテストの基本まとめ - Qiita
Vue.jsベースのECサイト向けUIコンポーネントライブラリ・「Storefront UI」
21卒 Web系ソフトウェアエンジニア職で新卒就活したので結果をまとめる - ぷらすのブログ
エンジニアの傾向は“なんでもやる人”から“スペシャリスト”に Webアプリ開発の体制変化で生まれた技術選定の課題
２年かけて個人で全く新しいSNSアプリを作ったお話し - Qiita
フューチャー技術ブログの運営で心がけていること | フューチャー技術ブログ
もっと早く知りたかった！Web制作に便利な最新オンラインツール46個まとめ
Blitz.jsをRuby on Railsエンジニアが触ってみた感想
【Vue3に備える】実務で使うComposition APIについて考える
Svelteに入門した | フューチャー技術ブログ
【Vue.js 3.2】`<script setup>` 構文がすごくすごい
ジュニアエンジニアとして入社してからの1年半を振り返る
【新人プログラマ応援】開発タスクをアサインされたらどういう手順で進めるべきか - Qiita
Tailwind CSS実践入門 第1章 ユーティリティファーストとは何か ──従来の課題を解決する大胆なアプローチ | gihyo.jp
Vuex型推論・最終章 - vuex-guardian - - Qiita
新しいパッケージの開発はVue 3で作ろう Vue.jsのエコシステムを構築するには
最高のUXを目指して、1人月でWebアプリを開発した話
Svelteとは？Reactの比較 / TypeScriptと Sassの導入方法｜sumi｜note
バックエンドエンジニアがNext.jsのApp Directoryに夢を見る - ぷらすのブログ