いまからはじめるReact - Qiita
この資料は 11/16(土)開催の勉強会 いまからはじめるReact の資料になります。 React未経験者/初学者向けに チュートリアルを通してReact(およびHooks)について学ぶためのものです。 そのため、サンプルコードには例外処理などが不十分な箇所があります。ご注意ください。 Reactとは？ Reactとは Facebookが中心となってオープンソースで開発されている ユーザーインターフェースを構築するためのJavaScriptライブラリです。 (2019/10/30現在、v16.10.2 が公開されています) React – ユーザインターフェース構築のための JavaScript ライブラリ https://ja.reactjs.org/ コンポーネント(部品)を作成し、これらを組み合わせることでSingle Page Applicationのような複雑なユーザーインター
トップデベロッパーになるために作成したいアプリ8選 - Qiita
こちらの記事は、Indrek Lasn 氏により2017年 12月に公開された『 The Secret to Being a Top Developer Is Building Things! Here’s a List of Fun Apps to Build! 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek 少し考えてみてください。あなたがもし健康に関する書籍をたくさん読んだとしても健康になることはありません。実際には、ジムに行き数時間運動をして汗をかかなければ健康は手に入りません。 同じことが開発にも言えます。努力なしに優れたデベロッパーになることはできないのです。 そこで、コーディング力を鍛える8つの素晴らしいプロジェクトを紹介します。 あなたの好きなテクノロジースタックを使っ
2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。 たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。 もちろんVueとAngularにも多くのフォロアーがついています。 さらにはSvelte、Next
フロントエンドエンジニア御用達の MDN web docs を網羅した
このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の
これだけ知っておけばとりあえずconcrete5でサイトを作れるまとめ - Qiita
Web制作者にとって、新しいCMSに手を出すときに気になる要素は、テンプレートの作り方、デザインカスタマイズの自由度だと思います。特にいったんクライアントがデザインにGOサインを出したら、実装の都合で変更しにくい風潮があると感じられる日本では特に… デザインカスタマイズについて、いかに最低限のドキュメントだけ読んで何とかなるかという点では、concrete5はCMSの中でもピカイチだと思います。そこで、個人的に「これだけ知っていれば普通のサイトは作れるようになる」と思う知識をまとめてみました。ここでいう普通のサイトとは、concrete5の標準機能でできる範囲のサイトという意味です。 なぜconcrete5は、ドキュメントを読む量が少なくて済むのでしょうか。それは、サイトを作り上げるのに、マウス操作で実現する範囲が他のCMSより多いからだと思います。逆にいうと、テンプレートは少ない知識で楽
2019年版 最先端のフロントエンド開発者になるために学ぶべきこと - Qiita
こちらの記事は、『Learn to become a modern Frontend Developer in 2019』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 はじめに 新年になって以前書いた記事を少し簡潔にして理解しやすいように書き直してみました。この文章に以前私が書いた文章と違ったことが書いてあったり、少し矛盾する内容が見つかってもあまり気にする必要はありません。 昨年私が書いた記事はGitHubで公開しています。 Web開発は絶えず変化する分野です - 今日私たちがWebサイトを構築する方法は、2～3年前のやり方とは全く違ってきています。利用できるツールが沢山あり、新しいツールも毎日出てくるので、ウェブ開発者はいつもどのツールを使えばよいのか迷ってしまいます。 私は、ウェブ開発に係るフロントエンド、バックエンド、または運用を学びたいと思う人を対象にしたツ
jQueryでよく使う動きをVue.jsでやってみる - Qiita
最近、Vue.jsが流行っており、「デザイナーがとっつきやすいのがVue.js」だとか、 「脱・jQueryできる」だとか、そんなような言葉をちらほら見かけます。 Vue.jsはできることが多く素晴らしいものですが、デザイン側としては アニメーションなどのフロント面の実装することが多いので、その視点で果たして「脱・jQuery」が どこまでできるものなのかどうか・・・というのが気になりました。 よって、今回は実際にjQueryでよく使っているやつをVue.jsでやってみることにしました。 ※HTMLとCSSは省略します。すみません。 クリックしたらClassを付与（トグル） jQueryの場合
エンジニアがオウンドメディアを書くということ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事は株式会社LIGのアドベントカレンダー2017、21日目の記事です。 本稿は株式会社LIGに入社して一年半の社員による、LIGブログを通してのオウンドメディアへの接し方、気付き、LIGブログそのものへの所感、あるいはあの日の空の遠さと、過ぎた夏の日を述べるポエムになります。 株式会社LIGとそのブログ LIGが本質的に何をやっている会社かというのが社員からとってみても謎のアンチクショウなんですけれども、皆様のお手元に届く情報があるとすれば、LIGブログを通してご覧いただいているのかもしれません。LIGブログはいわゆる弊社のオウン
2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 もちろん、Vue.jsのコンポーネントシステムをフル活用し、Vuexを入れていないプロジェクトの経験もあります。 現在は構築したシステムを保守・運用しています。 また、勉強の為にReact、 Angular、 最近はElm等にも少し触れています。 その際に得られたノウハウ、Vue.jsが他のライバルフレームワークと比べた際に現時点で本当
ZOZO大忘年会でFirebaseを使った1,000人規模のリアルタイムアンケートを費用2円で制作した話 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事はZOZOテクノロジーズ TECH BLOGにも同じ内容で投稿しています。よろしければ他の記事もご覧ください。 こんにちは！ ZOZOテクノロジーズ フロントエンドエンジニアの高橋（ニックネームはQ）です（@anaheim0894） 昨年12/26、毎年年末に行われる大忘年会（ZOZOCAMP2018）で、グループ会社も含めた1,000人規模でのリアルタイムアンケートを、FirebaseとVue.jsを使って制作しました。 当日会場にて弊社の昨年の事業紹介や、「楽しく働く」というコンセプトの動画を流し、動画の合間で質問をし動画と
世の中の小説作家と編集者は今すぐ Word や G Suite を窓から投げ捨てて Git と GitHub の使い方を覚えるべきだ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? タイトルは釣りではありません。 最近、小説の執筆にあたって Git を導入して原稿の進捗履歴を管理しました。めちゃくちゃ便利でした。 GitHub を使って友人と一緒に校正校閲の作業をしました。めちゃくちゃ捗りました。 短編 SF 小説が短期間で完成しました。でも広告が目的ではないのでリンクは貼りません。 Git のことを何も知らない奴が Git と GitHub の使い方を覚えたら便利だったし捗ったので、記事にしてしまおうぜという試みです。 2019年1月4日 追記 本記事は「執筆」および「校正・校閲」の段階における Git と Gi
kindle書籍のpdf化
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2024/06/11 追記 Windows版の半自動化の記事を追加しました 2021/09/01 追記 本記事の新規更新は個人サイト内の記事に移行しました ADEでのフォント変更も含めた詳細を別途記事にしました 2019/02/04 追記 kindleのformatがazwからkcrに変わったみたいですね. kcrからのやり方はここには記載していませんが, 古いversionのkindle for macならまだazwでDLできるようなので, 必要であれば古いverのkindleを利用するのが一時的な策だと思います. 私は本は固定形式の
Webパフォーマンス虎の巻
Webパフォーマンス向上施策のために、今更ながら超速本1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、**改善施策ってまず何をどうすればいいの？**という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元： テクニックではなく、今、本気で取り組むべきWebパフォーマンス （html5jパフォーマンス部 部長 竹洞さん） 心得 パフォーマンス向上に対する施策は大別すると以下の２通り 軽量化 （単純にやりとりするデータ容量を小さくすること） 圧縮 削除 最適化 （その時に最も適している実装・実行をとること） 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。
いまさら聞けないPWAとAMP - Qiita
概要 PWA = モバイルのWEBページでネイティブアプリのようなUXを提供するためのもの ※ 2020/04/05 追記: PWAに関する仕様の策定当初はモバイルでのユースケースが主だったと記憶していますが、PWAはモバイルに限定されたものではなく、実際にデスクトップでの活用例も増えています。参考: PWAs: building bridges to mobile, desktop, and native (Google I/O '18) AMP = モバイルのWEBページを高速化するためのもの どちらもGoogleが主軸となって策定されている、モバイルページを進化させるためのプロジェクトおよび技術。ネイティブアプリの代替技術ではなく、ブラウザAPIの進化によってネイティブアプリのようなUXをウェブページで提供することが主眼。 1. PWAとは Progressive Web Appsの
Google Apps Script ハンズオン資料 #GoogleAppsScript
この資料の説明 2018/10/04 に グロービス で行った 第 1 回 Google Apps Script (GAS) ハンズオン @麹町 のハンズオン用資料です。以下の流れに沿ってハンズオンを進めていきます。 手順は細かく書いていますので、社内外で是非流用してください！ ハンズオンは以下の記事の感じで進めました！ チューター少人数でも回せる！Slack を駆使したハンズオン勉強会のやり方 ハンズオンをスムーズに行うために Chrome 推奨 Chrome 拡張の JSONView 入れておくと Good! 意図しないエラー対策 GAS をローカル開発で開発したい方はこちらを参照 ハンズオン用の Slack に JOIN アジェンダ Google Apps Script とは 公式チュートリアル Your first script Gmail to Spreadsheet Form
jQuery から Vue.js へのステップアップ - Qiita
はじめに 最近耳にする Vue.js（ビュージェイエス） ってどんなもの？ jQuery とどう書き方違うの？とか、jQuery でやってたこういう事って Vue.js だとどうやるの？jQuery しか使ってないけど Vue.js も使ってみたいなぁ～と思っている人向けの小難しいことは省いた記事です。私もそちら側から来たものです。 Vue.js 日本公式ページ（日本語翻訳率が半端ないと評判） もともと「jQuery から Vue.js への移行」というタイトルでしたが、それだと jQuery を完全にやめる、的なニュアンスになってしまうので、少し変更しました🐹 jQuery と Vue.js の違い jQuery は、セレクタ操作に特化したライブラリで HTML の一部をちょっとだけ弄るには手軽に扱えます。更新のたびにセレクタから要素を探して操作をするため、複数の UI を連携させるよ
Nuxt.js, Firebase, Stripe をフル活用してサーバーレスでJAMStackなECサイトを2日で開発した話 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 本記事で紹介しているサービスの公式Twitterアカウントができました → @jslounge_info はじめに potato4d こと花谷拓磨です。 普段は ElevenBack という屋号のもと、フロントエンドを中心としながらも、デザインやサーバーサイドなどをも含めて作業することが多いのですが、屋号での活動の一環として、 JSLounge という渋谷で活動するハンズオン団体の運営を行っています。 その JSLounge にて過去に開催したハンズオン資料を入手できるサイトを構築することとしました。 通常、ハンズオンとなればその場でメ
【企業サイト構築用】Webページコーディングガイドライン
参考 Device Metrics レスポンシブ対応時に知っていると得する（かもしれない）知識 アニメーション指定 アニメーションがどのように動くかの指示を具体的に行ってください。よくコーダーになんとなく任せてしまうケースがありますが、仕様を明確に伝えることで、良い成果物が生まれます。 指示・指定が必要な例 メインビジュアルなどのキーとなるエリア、スライダーの動き パララックス効果を入れるか ページスクロール時 メニュー表示時 ページ遷移時 アニメーション参考 アニメーション指示を行う上で役立つ参考サイト集です。 Hover States Use Your Interface Best Animation Websites | Web Design Inspiration 開発情報の確認 今でも極稀に「PHPが動かないサーバで、納品直前までPHPで作っていた」など、「？」とリアクションして
コーディングをするときに鼻血がでるほど便利なwebツールリスト - Qiita
普段お世話になっているwebツール達の紹介です。 以下のサイトはすべて 無料 & 登録不要 です。 正規表現 regexper 正規表現を可視化してくれます。 複雑な正規表現を書くときやコードリーディングのお供に重宝します。 Rubular Rubyの正規表現をテストできます。 JSON JSON FORMATTER & VALIDATOR JSON系のツールが集まったサイト。 それぞれ、サイト名とドメインが違うのでリンクはそのうちの１つになっています。 (画像クリックでそれぞれのツールに飛べます。) ひとつずつ紹介します。 JSONをフォーマットしてくれます。 出力結果は折りたたむことができるので、長いJSONを読むときにも便利です。 JSONを含めた様々なデータ形式を変換できます。 Inputの以下に対応。 CSV INI JSON XML YAML Outputは以下に対応。 JSO
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Laravel 6 & PHP 7.4 対応】Vue + Vue Router + Vuex + Laravel チュートリアル（全16回）を書きました。 - Qiita
