メモリー管理 - JavaScript | MDN
C のような低水準言語には、malloc() や free() のような低水準のメモリー管理プリミティブがあります。これに対して JavaScript では、オブジェクトを作成するときにメモリーを自動的に確保し、使用しなくなったらメモリーを解放します（ガーベジコレクション）。この自動性が混乱の元になる可能性があります。メモリー管理について心配する必要がないという誤った印象を開発者に与える可能性があります。 プログラミング言語に関係なく、メモリーのライフサイクルはほぼいつも同じです。 必要なメモリーを割り当てる 割り当てられたメモリーを使用する（読み込む, 書き込む） 必要なくなったら、割り当てられたメモリーを解放する 2 に関してはすべての言語で明示的に行われます。1 と 3 は低水準の言語では明示的ですが、JavaScript のような高水準言語では、ほとんどの場合暗黙的に行われます。
@storybook/vue を TypeScript で使う
最近 @types/storybook__vue が DefinitelyTyped/DefinitelyTyped に追加されたので、まともに storybook/vue を TypeScript で使えるようになりました。 とはいえ Vue の場合 React と違い awesome-typescript-loader が使えない関係でちょっとゴリる必要があるので、需要は分かりませんが紹介しておこうと思います。 Storybook が何かとか、何に使うものかとかはスキップします。 設定 Custom Webpack Config が必要になります。.styrobook とかディレクトリ作って webpack.config.js とかをごちゃごちゃやるパターンですね。Quick Start とか Custom Babel Config では無理だと思います。 Slow start gui
Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio
Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio Published on 17 Jul, 2014 | Takes approximately 18 min to read SVG elements aren't governed by a CSS box model like HTML elements are. This makes positioning and transforming these elements trickier and may seem—at first glance—less intuitive. However, once you understand how SVG c
Laravel以外でLaravel Mixを使う方法 - Crieit
Laravel Mixって便利ですよね。 ホットリロードもできるし、面倒な設定をしなくても簡単にプロダクションビルドもできる。 というか、結局単なるNodeのライブラリなわけなので、フレームワークを使っていないプロジェクトでも簡単に導入できるのではないかと思い、試してみました。バージョニングにも対応しました。 準備 僕は元々他のLaravelのプロジェクトがあったので、そこからコピーしてきました。 プロジェクトがない場合はlaravel newで作りましょう。 resources/assetsフォルダ package.json webpack.mix.js .gitignoreにnode_modulesを入れておく 上記の中身は適宜使うプロジェクトに応じて更新しておきます。 初期化 Nodeのパッケージをインストールします。(npmのコマンドでもいいです） yarn install 起動し
モバイルにおけるステップインジケーターはどうあるべきか
フォームが複数ページに渡る場合、ステップインジケーターは必要不可欠です。ステップインジケーターはユーザーに対して自分たちが今どのステップにいて、あとどのくらいのステップが残っているかを示す役割があります。 画面上のスペースが限られているためモバイルフォームで、ステップインジケーターを提示することは困難です。デスクトップと同じインジケーターをモバイルフォームで使用すると、可読性と可視性の問題が生じてしまいます。 直線型 vs 放射型 無理やり狭いスペースに各ステップのタイトルを収めると、テキストサイズが小さくなりユーザーが読みにくくなります。さらに一度にあまりに多くのステップ名と番号が表示されるため、可視性も下がります。結果、視覚的なノイズが発生し、ユーザーが現在いるステップを把握することが難しくなってしまいます。 モバイルフォームには放射型のインジケーターを使用してください。こちらの方がユ
babelプラグインの作り方・活用方法 - さくらのIoTブログ
さくらインターネット Advent Calendar 2017の13日目の記事です。 さくらインターネットでは、sakura.ioのコントロールパネルを始めとした、様々な管理画面が存在しています。状況に合わせた最適解を選んでいるので、様々な設計やフレームワークの利用などが行われています。その中で、最近社内でもよく使われるようになった babel について、掘り下げて調べてみました。 この記事はbabel7を参照しています。記事を書いている時点では、betaなので正式リリースの際には変更される点が有るかもしれません。 目次 babelの簡単なおさらい パッケージ構成 処理のフローの理解 babelプラグインの作成 簡単なプラグインを作成 テストを実行 babelプラグインを使ってコード自動生成を行う s2sの紹介 パッケージ構成 Babelは、JavaScriptで書かれたJavaScrip
非エンジニアのAWS最初の一歩 | DevelopersIO
AWS事業本部インテグレーション部のいわほりです。入社してから、あっという間の１ヶ月が過ぎました。 １月末にAWS 認定ソリューションアーキテクト – アソシエイトを無事合格できたので、その過程をまとめておきます。 私と似たような状況でAWSの学習を始めようと思っている方の参考になれば、幸いです。 想定読者 以下に該当し、アソシエイトの資格を当面の目標にされている方を想定しています。 AWS経験ゼロ オンプレのインフラ経験もゼロ(もしくは、久しく触れていない) 座学よりも体で覚える方が好み やったこと オンライン講座を１周半 最初にUdemyの『手を動かしながら2週間で学ぶ AWS 基本から応用まで』をやってみました。この講座の特長は講座のサブタイトルでもある「実際に手を動かして AWS を学ぶことで０から１へを強力にサポート！」に集約されます。 １周目：講師の方のオペレーションを写経の如
実践StorybookでVuexに立ち向かう
スタディスト開発部、フロントエンド担当の小宮山です。最近熱があるのはSVGと相変わらずにStorybookです。あと弁当男子始めました。 前置きStorybookとはいわばコンポーネントのカタログを作成することができる開発ツールです。 今回は実践の紹介ということで詳細は省略しますが、VueやReactを導入したコンポーネント指向な開発をしているのであれば、開発効率の向上は間違い無しなので是非とも取り入れてみていただきたいです。 実践Storybook vs Vuexコンポーネントの複雑さの基準storyの作りやすさは、当然のことですが、コンポーネントの複雑さに応じて変化します。大雑把ですが私はstoryの作りやすさの基準として、作り易い順に以下のような基準を設けています。 外部とのインタフェースがない親コンポーネントとのインタフェースは存在するがstoreにアクセスしないstoreにアクセ
「Redirectable UI」という考え方｜dely design
こんにちは、dely CTOの大竹雅登（@EntreGulss）です。 UIデザインの世界は日々発展しています。先日のWWDC 2018で、Apple Human Interface Design Teamが「Designing Fluid Interfaces」と題して発表を行いました。非常に有益な内容で自分たちのプロダクトにも応用できそうなことが多かったので、単に内容をまとめるのではなく自分なりの考察も含めて書きたいと思います。 はじめに 本編 ・Fluidインターフェースの注目点：Redirectable UI ・iOS標準のRedirectable UIの例「Swipe Back」 ・iPhone XのRedirectableなホームジェスチャー ・Redirectable UIを採用しているアプリ事例 ・Redirectable UIの実装方法 まとめ Fluidインターフェース
Bad SNSで脆弱性検査の練習！
3行で言うと… WEB+DB PRESSの記事に従って「Bad SNS」を診断してみた 攻撃者立場の目線で検査を行うことが重要と感じた 雑誌記事などのデモは、機会を作って実際に体験することを心がけたい 全仏オープンテニスも2週目に入り熱い戦いが続いています。残念ながら地元期待の錦織圭さんは4回戦で敗れましたが3回戦までの完全アウェイ状態で戦う様子はとても勇気をいただきました。状況に負けない強い心は見習いたいと感じました。 私が開催している山陰ITPro勉強会の番外編を4月に開き、Bad SNSを使った脆弱性検査のハンズオンをしました。 山陰ITPro勉強会 番外編#06 - 山陰ITPro勉強会 講師を置かず、WEB+DB PRESS Vol.103に掲載されている 「体験！脆弱性の見つけ方＆ふさぎ方」 の記事に従い参加者が自分達でもくもくと手を進めて行き、最後に感想を交換する形態で開催し
API Blueprint で API 仕様書を書いて、配布用の HTML を自動生成する方法
（画像は API Blueprint の Web サイト より転載） GMO アドパートナーズ グループ CTO 室の M. Y.（DevOps ネタ担当）です。今回は、API 開発時に使って便利だったツールの話をします。 きっかけ 最近、私が担当している広告関係のプロダクトに、お客様向けに公開する API を新規追加することになりました。この API はお客様側のエンジニアが利用するため、API 仕様書を作る必要があります。 過去の社内事例では、Word ファイルで API 仕様書を作成して、配布していました。しかし、Word ファイルでは差分を確認しづらいので、API 仕様自体のバージョン管理が大変です。そこで、今回は API 仕様書から配布用の HTML を自動生成することにしました。 API 仕様書を自動生成する技術としては Swagger が有名ですが、今回のプロダクトでは AP
メンテナンスしやすいVueComponentを設計するために気をつけていること
はじめに VueをつかってWebアプリケーションを実装するとき、Componentをどう切るかって誰でも一度は悩みますよね(悩みますよね？)。とりあえず思いつくままに切ってみたり、繰り返し使いそうなもので切ってみたり、CSSのスコープで切ってみたり…。いろいろな切り口があると思います。 この「いろいろな切り口」でコンポーネントを切ることができる点が、コンポーネント設計を難しくしている所以だと考えています。 そこで今回は、どのような切り口・観点でコンポーネントを切ればよいのか、そのときに気をつけるべきことは何か、といったComponentの設計方法についてまとめてみます。 すべての実用ケースを想定できているわけではないと思いますが、大小いくつかのWebアプリを開発する際に利用してみて今のところいい感じに運用できている方法です(というか自然と収束して出来上がった考え方という感じです)。 はじめ
regex101: build, test, and debug regex
An explanation of your regex will be automatically generated as you type.
開発の“無理ゲー進行”はこう回避せよ！ 若手エンジニアが締め切りを健全に守るためのストラテジー - エンジニアHub｜Webエンジニアのキャリアを考える！
エンジニアHub > 記事一覧 > 開発の“無理ゲー進行”はこう回避せよ！ 若手エンジニアが締め切りを健全に守るためのストラテジー エンジニアにとっての永遠のテーマ、「締め切りはどうしたら守れるか」。上司に言われるままにタイトなスケジュールを押し付けられた経験があるエンジニアは少なくないはずです。 「無理ゲー進行」を生み出す要因はいくつもあります。「完全版をリリースしなけばいけない」という固定観念や、期日だけを厳密に管理して現場へプレッシャーをかけるプロジェクト進行、無理なプロジェクト進行を経営課題と認識せず、現場の「頑張り」に甘えて放置している経営者（意志決定者）など。顧客（クライアント）や上司から押し付けられる「無理ゲー進行」に、工数見積もりに慣れていない若手エンジニアはどう対処していけば良いのだろうか――。 無理ゲー進行の原因をひも解いていくのは、かつて株式会社ミクシィにて最年少で執
Storybook for Vueでエンジニアとデザイナーの協業を加速させる - Studio Andy
この記事はCAMPHOR- Advent Calendar 2017の23日目の記事です。 はじめに アプリケーションの機能を「カプセル化」、「コンポーネント化」しようというのは、フロントエンド/バックエンド問わずに近年のWeb開発におけるトレンドのひとつです。 Web業界も5年もの、10年ものと呼ばれるシステムが増える中で「最初から完璧なシステムを作ることなんて無理なんじゃないか」と多くの人が気づきはじめました。 その流れを受けて「どうせ改修が必要なら、小さなスコープで新しいものに置き換え可能な仕組みを作ろうぜ！」というのが「カプセル化」、「コンポーネント化」の大きなモチベーションであると、個人的には理解しています。 Vue.jsとコンポーネント JavaScriptのフレームワークであるVue.jsも、例に漏れずコンポーネントドリブンな開発に適した仕組みの1つです。 SFC(Singl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これを見逃したら絶対損！ノンデザイナーズ・デザインブック 20周年特別PDFは内容豪華で、応募者全員がもらえる
Error
Vuetify — A Vue Component Framework
UI Movement - The best UI design inspiration, every day
Regexper